SEO（SearchEngineOptimization）搜索引擎优化在搜索引擎时代对于网站来讲意义重大。一个网站，不管是小站还是大站，都离不开搜索引擎的流量导入，所以，做好SEO一直都是网站站长\开发者一门重要的功课。
在网站页面后端渲染的时代，开发者只需要按照规范制作搜索引擎友好的页面便可以快速让搜索引擎收录自己网站的各个页面。
随着前后端技术的更新，越来越多的前端框架进入开发者们的视野，网站的前后分离架构越来越得到开发者们的喜爱与认可。后端只提供数据接口、业务逻辑与持久化服务，而视图、控制与渲染则交给前端。因此，越来越多的网站从后端渲染变成了前端渲染，而由此带来的直接问题就是各大搜索引擎爬虫对于前端渲染的页面（动态内容）还无法比较完善的爬取，这就导致了网站的内容无法被搜索引擎收录，直接影响网站流量与曝光度。
博主的网站从去年五月开始也开始采用了前后分离的构架，使用了AngularJS框架搭建了NewRaPo，之后又使用Vue.js框架进行了整体重构RaPo3。无一例外，他们都是基于前端渲染的，然后在此后的一年多时间里，搜索引擎收录的页面都是这样的：
（其他搜索引擎也一样，最早的截图已经找不到了，先拿这个应付一下）
快照是这样的：
而博主实际的网站是这样的：
和这样的：
感觉完全被搜索引擎抛弃了好嘛！这东西谁能搜到啊！搜到了谁会点啊！
为了能让搜索引擎正常的收录博主的网站，于是博主踏上了动态SEO优化的踩坑之路。
1、fragment标签
首先，博主Google到了在动态页面中加入metaname="fragment"content="!"会告诉爬虫这是个动态内容的页面，然后爬虫会在当前链接后面加上?_escaped_fragment_=tag来获取相应页面的静态版，于是果断盘算在路由里改一下，然后重写一套后端渲染的页面返回给所有带?_escaped_fragment_=tag的链接。
正当我高兴这个问题这么容易解决的时候突然发现网上资料都表示这个方法只有Google的爬虫认可，其他搜索引擎全部没用！wtf，白高兴一场。
2、PhantomJS
PhantomJS是一个基于WebKit的服务器端JavaScriptAPI。它全面支持web而不需浏览器支持，其快速，原生支持各种Web标准：DOM处理，CSS选择器，JSON，Canvas和SVG。PhantomJS可以用于页面自动化，网络监测，网页截屏，以及无界面测试等。
简单来说就是PhantomJS能在服务端解析HTML、js。
具体怎么使用，简而言之就是判断爬虫来爬取页面的时候把每个动态页面先让PhantomJS跑一遍，然后把得到的静态结果返回给爬虫，具体过程可以参考：用PhantomJS来给AJAX站点做SEO优化。
当然博主看过之后没用采用自己搭PhantomJS服务做动态内容优化，主要因为：
爬虫每访问一个页面就要让PhantomJS渲染一次，相当于爬虫访问一次实际服务器要响应两次，第一次响应爬虫，第二次响应PhantomJS自己，这种方式不仅浪费资源，而且并不优雅；
PhantomJS对于新的前端技术兼容性会存在问题，可能会出现渲染失败的情况；
渲染页面无缓存，每访问一次就重新渲染一次，会造成网站响应速度变慢。
3、Prerender.io
Prerender.io是一个基于PhantomJS开发的专为动态页面SEO提供静态页面渲染的在线服务，基本上解决了自己搭建PhantomJS服务所遇到的问题，网站配置Prerender.io后Prerender将会直接取代网站后端对爬虫请求进行响应，将提前渲染好的动态页面直接返回给爬虫。
具体配置：
注册Prerender.io账号，免费用户可以渲染个页面，对于博客网站来说足够了；
安装中间件并设置token，博主直接采用了nginx配置方案，（Prerender.io也提供了其他解决方案：中科医院曝光复方木尼孜其颗粒作用
转载请注明：http://www.qianzhongdushijian.com/jdyf/1725.html
当前位置： 铅中毒事件 > 预防急性铅中毒 > 前端渲染与SEO优化踩坑小记
