截止目前,百度爬虫并不能正确处理js动态修改的页面title,即无法读取通过 document.title = '新的标题' 修改后的标题,比如,之前网页title是 沙沙野,点击图片进入详情页后,用 document.title = '西湖风景图-沙沙野' 修改标题,那么虽然页面的title改为了 西湖风景图-沙沙野 但是源码里的title依旧是 沙沙野,于是乎google爬虫能读到 西湖风景图-沙沙野 但是百度不行,百度读取到的依旧是 沙沙野,使用 nuxt js便可以很好的解决此类问题。
正如上面所说,百度爬虫无法正确处理动态修改的title,那么我们需要做服务端渲染啦,以下是我能想到的两个解决方案:
使用 prerender.js
这部分你可参考:https://github.com/prerender/prerender ,主要是本地启动一个渲染服务,然后安装chrome,将爬虫的请求代理到该服务,这个服务就可以通过调用chrome完成渲染,并把渲染结果返回。这里你需要解决nginx根据ua代理到不同的upstream,另外需要解决用root身份运行chrome
使用 nuxt js
使用 nuxt js 的优势在于原生支持服务端渲染,支持中间件,seo优化(可处理title、description等)相比 vue js 项目,nuxt js 项目结构更加规范,此外也没别的,相比 prerender js,有一定的学习成本,而 prerender js 虽然更简单,但是对于搜索引擎未必更好,毕竟它只对特定的爬虫才渲染,这意味着百度爬虫请求某个页面的时候,需要先通过 prerender js 进行渲染,而不是直接从内存里拿,渲染需要时间,最终的结果是百度爬虫抓取的时间增多,最后可能觉得这个网站用户体验不好,而降低权重。虽然 prerender js 支持缓存,但是我们却不知道爬虫啥时候来访以及要爬取那个页面。而 nuxt js 也可以设置缓存,但 nuxt js 是针对所有请求服务端渲染,对于一个较大型网站,这意味着爬虫来爬取的新页面可能早就在缓存里。如果加入百度的主动推送,两者都可以做到新页面在缓存里,性能上相差可能并不大。另外一点,使用 prerender js 需要运维人员的协助,需要比较熟练Linux和nginx,而 nuxt js 不存在这方面的限制。
nuxt js 入门
1、安装 vue-cli npm install -g vue-cli
2、初始化一个项目 vue init nuxt-community/starter-template learn-nuxt
这里 learn-nuxt 是项目名称
3、安装依赖:cd learn-nuxt && npm install
4、启动项目: npm run dev
5、发布项目: npm run build && npm run start
其中,npm run build 消耗时间很大,可以考虑在本地运行,然后 commit 到git上,接着登录服务器,并pull,最后直接运行 npm install && npm run start 也可以的。当然,npm install 是可选的。
nuxt js 与 vue js 的几点不同之处
1、vue js 通过 route 来管理路由,你需要在 route 里配置路劲以及title等,其中title等于是写死了,而 nuxt js 是根据 pages 下面的文件动态生成,如果 pages 下面的文件以 下划线 开头则为动态路由,这部分可以参考:https://zh.nuxtjs.org/guide/routing
2、vue 引入了插件和中间件概念,插件配置根vue.js实例化之前运行的js,可以是自己写的库或者第三方模块,而中间件则是在某个或者某组页面加载之前运行某个特定的函数,这对于登录授权很有用啊。
3、nuxt js 由于服务端渲染,导致在 created 里无法调用 Window 以及 document,但是你可以在 mounted 里 使用。
总的来说 nuxt js 值得一试,而且很有意思。