使用vue后怎么针对搜索引擎做SEO优化？( 三 ) _SEO优化

如果你的线上服务是开启了CDN的话，那么资源走本地还有一个好处，就是可以节省CDN流量。
优化prerender选项
prerender提供了一些自定义的选项
pageDoneCheckInterval：这个参数是prerender检查页面请求是否完成的定时器时间，默认是500ms ，即每500ms检查未完成的请求数量是否为零，我将其修改为100ms ，提高其检查的频率。
waitAfterLastRequest：这个参数是最后一个请求完成之后等待的时间，默认是500ms ，主要是请求完成之后，页面更新渲染需要时间，立即返回的话，可能请求的数据来不及渲染，我将时间修改为200ms 。
prerender插件
httpHeaders —— 返回合理的HTTP状态码
添加httpHeaders这个插件，可以更改返回的HTML的HTTP状态码，添加方式如下
var prerender = require('prerender');var server = prerender()server.use(prerender.httpHeaders());server.start();复制代码prerender通过识别在<head>中的<meta>标签来设置页面返回的HTTP状态码。
<meta name="prerender-status-code" content="404">复制代码如果你需要设置301重定向，可以这样做
<meta name="prerender-status-code" content="301"><meta name="prerender-header" content="Location: http://www.xxx.com">复制代码blockResources —— 无需等待图片资源
prerender是根据未完成的请求数来判断是否渲染结束的。但是我们给搜索引擎返回的HTML只需要渲染通过js动态增加的DOM ，其实不需要渲染css或者渲染接口返回的图片的，我们来看下prerender在渲染中是否会请求这些资源。prerender可以开启是否打印请求，开启方式如下：
var server = prerender({ logRequests: true});复制代码开启之后就可以在控制台看到请求了，请求里面是包含css和图片资源的。
2019-07-17T04:34:03.180Z - 47 http://xxx.com/css/chunk-f4a02584.da8dca38.css2019-07-17T04:34:03.180Z { source: 'network', level: 'error', text: 'Failed to load resource: net::ERR_INVALID_ARGUMENT', timestamp: 1563338043130.37, url: 'http://xxx.com/wefid/css/chunk-f4a02584.da8dca38.css', networkRequestId: '1000039068.65' }2019-07-17T04:34:03.924Z + 3 http://xxx.com/img/erweima_wx.a84d82ef.jpg2019-07-17T04:34:03.924Z + 4 http://xxx.com/img/erweima_wb.06971584.png复制代码为什么prerender要等待这些资源呢？因为prerender服务还有一个强大的功能，那就是Prerender.com ，其可以通过一个接口给你返回如下的东西：

网页的HTML文件
网页的屏幕截图（视口或全屏）
网页的PDF文件
网页的HAR文件
执行您自己的JAVAscript并返回json和HTML

很明显，这些功能是需要加载你所需的CSS或图片资源的，不然网页显示有问题。这个时候，如果你只需要满足SEO需求而不需要Prerender.com的功能的话，那么blockResources插件就可以派上用场了。插件添加方式如下：
var prerender = require('prerender');var server = prerender()server.use(prerender.blockResources());server.start();复制代码使用blockResources插件之后，图片资源和字体资源会被abort（舍弃）。
自定义渲染结束时间
如果你想更细粒化地控制prerender的返回时机，提前结束或者延后结束，那么可以使用这个标志window.prerenderReady 。
首先需要设置window.prerenderReady为false ， prerender在检测到window.prerenderReady为false之后，会等待你设置为true再返回结果。
<script> window.prerenderReady = false; </script>复制代码当你渲染完成之后，一般在接口请求完成并渲染完成之后
window.prerenderReady = true;复制代码这样你就可以更加自由地控制渲染结束的时机。
开启缓存
缓存这里有两个方面，一方面是HTTP缓存（浏览器缓存），另一方面是渲染结果缓存。
首先HTTP缓存可以让prerender服务不用频繁地发起资源请求，节省传输时间。这个我就不展开将，我想讲的是渲染结果缓存。prerender中间件提供了两种缓存方式， redis 或者 memcached ，以redis为例：
$ npm install redis复制代码var redis = require("redis"),client = redis.createClient();prerender.set('beforeRender', function(req, done) { client.get(req.url, done);}).set('afterRender', function(err, req, prerender_res) { client.set(req.url, prerender_res.body)});复制代码