在不使用ssr的情况下解决Vue单页面SEO问题
遇到的问题:
近来在写个人博客的时候遇到了大家可能都会遇到的问题
Vue单页面在SEO时显得很无力,尤其是百度不会抓取动态脚本
Vue-Router配合前后端分离无法让meta标签在蜘蛛抓取时动态填充
Vue单页面又是大势所趋,写起来也不止是一个爽,当然也可以选择多页面
但即使是多页面在面对文章和文档时候也不可能说给每篇文章生成个Vue页面
SSR当然能解决这个问题,但是仔细想想SSR不就跟以前的.php页面一样了么
都是预先拉取所有数据然后填充返回给浏览器,需要多消耗服务器资源,而且配置繁琐
当然预渲染也不能解决这个问题
那么问题来了,我只是想让百度抓取下我的动态文章,但是配置个繁琐的SSR并不是最好选择
Vue SSR带你五步学会Vue SSR
我的解决办法:
既然只是想让百度抓取下我的动态文章,其实就是让蜘蛛抓取我的静态页面时候,html的meta标签是已经填充好的
那么就很简单了,我们只需要实现一个极其简单的阉割版的SSR不就好了么
PS:我百度了很久没有找到相关的文章,不知道是不是我百度的姿势不对
在不使用ssr的情况下解决Vue单页面SEO问题的更多相关文章
- 解决vue单页面应用做微信JSSDK注入权限时出现“invalid signature”(ios端)
--都说微信开发多坑,没想到遇到一个天坑. 在做一个vue项目时,要用到微信JS-SDK,官方文档详见:https://developers.weixin.qq.com/doc/offiaccount ...
- nginx配置解决vue单页面打包文件大,首次加载慢的问题
cnpm run build 文件过大,其中主要是vender.js有1.5M,代码部署到服务器,首次访问加载页面时比较慢,耗时6.5s左右,所以需要优化下. 1.Nginx开启gzip 找到ngin ...
- m_Orchestrate learning system---九、在无法保证是否有图片的情况下,如何保证页面格式
m_Orchestrate learning system---九.在无法保证是否有图片的情况下,如何保证页面格式 一.总结 一句话总结:都配上默认缩略图就可以解决了 1.如何获取页面get方式传过来 ...
- 解决vue单页路由跳转后scrollTop的问题
作为vue的初级使用者,在开发过程中遇到的坑太多了.在看页面的时候发现了页面滚动的问题,当一个页面滚动了,点击页面上的路由调到下一个页面时,跳转后的页面也是滚动的,滚动条并不是在页面的顶部 在我们写路 ...
- fullpage在vue单页面当中使用会出现的问题以及解决办法
在 vue 单页面当中发现fullpage会报错,报错信息大概意思为,fullpage不允许初始化多次. 解决办法,在使用fullpage的组件跳转路由进入销毁组件之前的生命周期的时候对fullpag ...
- Nginx 解决WebApi跨域二次请求以及Vue单页面问题
一.前言 由于项目是前后端分离,API接口与Web前端 部署在不同站点当中,因此在前文当中WebApi Ajax 跨域请求解决方法(CORS实现)使用跨域处理方式处理而不用Jsonp的方式. 但是在一 ...
- 解决 Vue 刷新页面后 store 数据丢失的问题
原来的状态(页面刷新数据会重置) state: { teamA: '主队' }, mutations: { data_teamA(state, x) { state.teamA = x } }, ...
- 调用支付宝接口Android客户端没有支付宝APP的情况下解决无法调用支付宝页面的问题
这几天一直研究支付宝接口调用,因为当前应用中需要调用支付宝接口作移动支付. 遇到一个问题困扰几天,就是当我们的手机端未安装支付宝APP的时候,需要在自己应用中调用支付宝的登陆网页进行支付.我是Andr ...
- JQuery如何在验证表单失败的情况下阻止表单提交
自定义验证时,使用了return false和event.preventDefault(),但是验证失败之后表单还是提交了 这个问题我也碰到了,尝试了多次也没有用,在调试的时候也发现确实return了 ...
随机推荐
- Codeforces732D Exams
显然要二分答案,然后对于一个天数,我们来判断是否可以通过所有考试,这里就贪心来安排就好了. 首先我们希望每门课的考试时间越晚越好,然后就是先复习最早开始的考试. #include <bits/s ...
- 洛谷P2569 [SCOI2010]股票交易(单调队列)
传送门 惭愧……这种题目都没看出来…… 首先,我们用$dp[i][j]$表示在第$i$天,手上有$j$股时的最大收益 第一,我们可以直接买股票,即$dp[i][j]=-j*AP_i$,这个直接计算即可 ...
- Hexo搭建博客教程(3) - 远程部署到GitHub Pages
本章讲的是如何将本地的个人项目远程部署到 GitHub Pages,涉及到GitHub的项目仓库.Git的使用,以及Hexo的远程部署等. 1. 安装 hexo-deployer-git 插件 想要将 ...
- httpclient 3.1跳过https请求SSL的验证
一.因为在使用https发送请求的时候会涉及,验证方式.但是这种方式在使用的时候很不方便.特别是在请求外部接口的时候,所以这我写了一个跳过验证的方式.(供参考) 二.加入包,这里用的是commons- ...
- ios NSFileManager 用法详解
转自:http://blog.csdn.net/ios_che/article/details/7287266 iPhone文件系统NSFileManager讲解是本文要介绍的内容,主要是通过ipho ...
- 网页尺寸scrollHeight/offsetHeight
scrollHeight和scrollWidth,获取网页内容高度和宽度. 一.针对IE.Opera: scrollHeight 是网页内容实际高度,可以小于 clientHeight. 二.针对NS ...
- Hibernate中的inverse和cascade属性
Hibernate中的inverse和cascade属性 inverse的值有两种,"true"和"false".inverse="false&quo ...
- java (给出年月日,计算该日是该年的第n天 )
package com.ywx.testdemo01; import java.util.Scanner; /** * 题目:给出年月日,计算该日是该年的第n天 * @author yangwenxu ...
- 用JS检测页面加载的不同阶段状态
这可以通过用document.onreadystatechange的方法来监听状态改变, 然后用document.readyState == “complete”判断是否加载完成. 可以采用2个div ...
- Linux服务器用iotop命令分析服务器磁盘IO情况
Linux下的IO统计工具如iostat, nmon等大多数是只能统计到per设备的读写情况, 如果你想知道每个进程是如何使用IO的就比较麻烦.如果会systemtap, 或者blktrace这些事情 ...