前端基于MVVM架构的SEO优化实践

摘要: 前后端分离的趋势下，如何做SEO优化的问题

前端基于MVVM架构的SEO优化实践

前端的MVVM架构已经发展有一段时间了，MVVM的交互性能高，然而SEO不理想。对于在项目早期的时候，SEO可能并不太重要，毕竟早期项目大多靠百度推广，花点钱就能摆平。但是当项目初具规模，用户数上升，推广费则不可同日而语，这时如何改进和优化SEO就渐渐变得重要了。

SEO的本质即动态页面的静态化，由于前后端分离的开发方式已经是目前最主流的开发方式，Ajax也早已成为web开发中不可缺少的工具，页面都是由前端通过模版结合Ajax动态产生的，而搜索引擎的爬虫是不能够理解js代码的，所以，这种情况下，站点的SEO问题就出来了，爬虫只能爬到静态的模版而不能爬到真正有语义的内容，这当然不是我们所希望看到的。

从我调研的SEO优化的结果中看，目前主要有两种方式：
#1 后端渲染

SEO不需要针对站点中的所有页面，往往只有个别的页面需要优化，因此可以将这几个页面单独抽离出来让后台生成静态内容返回到前端。这样会有个缺点，这几个页面的重构将脱离MVVM系统，对于大多强迫症患者这点简直难以接受。即使像avalon这样 提供了后端avalon渲染的框架来说，目前看仍不成熟，而且从我使用的过程中看，通过node-avalon生成的页面需要不断与文件系统交互，因此在性能上我有点担忧。
#2 缓存快照

既然SEO的本质既是让爬虫得到静态话的页面内容，那么当爬虫进入站点的时候，何不缓存一个页面的快照给爬虫呢？更具体一点的实现思路是，当服务端识别到爬虫后，通过转发路由由后台实时生成一个静态页面，再返回给爬虫。而这一切早已有了现成的工具：prerender.io

prerender.io 提供了在线缓存快照的服务，不过目前需要翻墙而且服务也是收费的。如果想在后端搭一个自己的prerender服务也是可以的，prerender完全开源。

实践中我的项目是nginx + avalon + java的，因此搭好自己的prerender服务后，配置下nginx就ok啦。
下面是我在项目中的nginx配置：

location / {
try_files $uri @prerender;
#这里是个坑，root和index均不需要配置
#root   /mnt3/zhangx/static/avant_v2-dev/;
#index  index.html index.htm;
}

location @prerender {
# 如果使用第三方prerender.io的服务， 则需要配置token
#proxy_set_header X-Prerender-Token o3FCu6FeMLDWG9jcQPBl;
set $prerender 0;
if ($http_user_agent ~* "baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator") {
set $prerender 1;
}
if ($args ~ "_escaped_fragment_") {
set $prerender 1;
}
if ($http_user_agent ~ "Prerender") {
set $prerender 0;
}
if ($uri ~ "\.(js|css|xml|less|png|jpg|jpeg|gif|pdf|doc|txt|ico|rss|zip|mp3|rar|exe|wmv|doc|avi|ppt|mpg|mpeg|tif|wav|mov|psd|ai|xls|mp4|m4a|swf|dat|dmg|iso|flv|m4v|torrent|ttf|woff)") {
set $prerender 0;
}

#resolve using Google's DNS server to force DNS resolution and prevent caching of IPs
resolver 8.8.8.8;

if ($prerender = 1) {
#set $prerender "service.prerender.io";
# 这里替换成自己的服务
set $prerender "test.meprint.com:3000";
rewrite .* /$scheme://$host$request_uri? break;
proxy_pass http://$prerender; }
if ($prerender = 0) {
root   /mnt3/zhangx/static/avant_v2-dev/;
#rewrite .*/index.html break;
}
}