seo教程:搜索引擎优化入门与进阶pdf(博主多的网站从后端渲染变成了前端渲染，这东西谁能搜到啊！)

　　seo教程:搜索引擎优化入门与进阶pdf(博主多的网站从后端渲染变成了前端渲染，这东西谁能搜到啊！)

　　前言

　　在网站页面后端渲染时代，开发者只需按照规范制作搜索引擎友好的页面，即可快速让搜索引擎收录拥有网站页面。

　　随着前后端技术的更新，越来越多的前端框架进入了开发者的视野，网站的前后分离架构也越来越受欢迎和认可由开发商。后端只提供数据接口、业务逻辑和持久化服务，视图、控制和渲染则交给前端。因此，越来越多的网站从后端渲染变成了前端渲染，而由此带来的直接问题是各大搜索引擎的爬虫依然无法完成前端渲染页面（动态内容）。爬行，使得网站的内容无法被搜索引擎收录搜索到，直接影响网站的流量和曝光率。

　　博主的网站也从去年5月开始采用单独的架构，使用AngularJS框架构建NewRaPo，然后使用Vue.js框架将RaPo3整体重构。无一例外，都是基于前端渲染，然后一年多来，搜索引擎收录的页面都是这样的：

　　

　　（其他搜索引擎也一样，最早的截图已经没有了，先拿这个来处理）

　　快照如下所示：

　　

　　博主的实际网站是这样的：

　　

　　和这个：

　　

　　感觉完全被搜索引擎抛弃了！谁能找到这个东西！找到了谁会下单！

　　为了让搜索引擎成为普通收录博主的网站，博主走上了动态SEO优化之路：

　　1、片段标签

　　首先，博主Google在加入动态页面时会告诉爬虫是动态内容页面，然后爬虫会在当前链接上加上?_escaped_fragment_=tag，获取对应页面的静态版本，于是他决定在路由中改一下，然后重写一组后端渲染的页面，返回所有带有?_escaped_fragment_=tag的链接。

　　正当我庆幸这个问题这么容易解决的时候，突然发现网上的资料显示这个方法只有谷歌的爬虫认可，其他搜索引擎都没用！卧槽，白白开心。

　　2、PhantomJS

　　PhantomJS 是一个基于 WebKit 的服务器端 JavaScript API。它完全支持网络，无需浏览器支持。它速度快，并且本机支持各种 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账号，免费用户可以渲染250页，够博客网站；

　　安装中间件并设置token，博主直接采用了nginx的配置方案（Prerender.io也提供了其他解决方案：...）博主的后端服务器是uWSGI，根据nginx.conf做了如下修改由 Prerender.io 提供：

　　server {

listen 80;

server_name www.rapospectre.com;

location @prerender {

proxy_set_header X-Prerender-Token YOUR_TOKEN;

include uwsgi_params;

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|svg|eot)") {

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) {

#setting prerender as a variable forces DNS resolution since nginx caches IPs and doesnt play well with load balancing

set $prerender "service.prerender.io";

rewrite .* /$scheme://$host$request_uri? break;

proxy_pass http://$prerender;

}

if ($prerender = 0) {

uwsgi_pass 127.0.0.1:xxxx;

}

}

}

　　然后重启服务器，通过Google Search Console或其他站长工具提交页面进行爬取检测。可以看到 Prerender.io 成功拦截了爬虫请求并渲染：

　　

　　嗯，终于解决了。就在博主感叹不容易的时候，发现Google Search Console的抓取结果不自然：

　　

　　抓取到的内容仍然充满了 ${ article.views }} 渲染模板。当时觉得应该是网站的缓存问题，所以没多想。但是，一周后我再次对其进行了测试，情况仍然如此。回望。Prerender 渲染的网页：

　　

　　它根本不起作用！之后，我查看了配置和文档，尝试联系 Prerender.io 的技术支持，甚至向 Prerender 的 Github 提出了相关问题，但问题没有解决。最后，博主放弃了 Prerender 作为最后的手段。

　　4、构建自己的后端渲染服务

　　Prerender 的解决方案启发了我通过判断访问请求的 User-Agent 来允许不同的后端服务器进行响应。虽然网上SEO优化讨论中明确提到判断UA返回不同页面会受到搜索引擎的惩罚。但我想只有在返回不同的内容时才会受到惩罚。如果返回相同的内容，搜索引擎不会受到惩罚。区别在于一个是前端直接渲染的页面，一个是后端渲染的页面。每个页面呈现的内容基本相同，所以搜索引擎不会找到它。

　　自己动手，吃饱穿暖，有想法立即验证。首先将网站代码的前端渲染部分改成后端渲染，然后push到一个新的分支。博主网站修改很简单，大概只修改不到50行代码就完成了需求：RaPo3-Shadow

　　然后将后端渲染代码部署到服务端，然后假设uWSGI运行在11011端口，

　　此时前端渲染代码被uWSGI假设运行在11000端口；

　　最后修改nginx配置文件nginx.conf：

　　server {

listen 80;

server_name www.rapospectre.com;

location @prerender {

include uwsgi_params;

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;

}

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

resolver 8.8.8.8;

if ($prerender = 1) {

uwsgi_pass 127.0.0.1:11011;

}

if ($prerender = 0) {

uwsgi_pass 127.0.0.1:11000;

}

}

}

　　爬虫由UA判断。如果是，就转发到11011端口，如果不是，就转发到11000端口。当然，两个端口返回的页面基本一样，所以不用担心被惩罚通过搜索引擎。

　　经过以上配置，动态页面的SEO问题终于解决了。反应最快的是谷歌，第二天就爬到搜索引擎上更新了：

　　

　　然后360搜索：

　　

　　那么其他没有提交网址的搜索引擎也分为收录网站：

　　

　　

　　（Bing没有收录正常页面，应该是nginx.conf中没有添加bing爬虫UA）

　　当然不知道为什么百度两个多月了还是没有收录。在站长工具中提交网页甚至投诉时都没有新页面收录。没错，一开始用来处理的图片是百度的结果，刚剪下来。

　　应该说还好没有更新，不然之前的例子就找不到了，哈哈哈。

　　

　　5、最后的猜测

　　博主搭建了后端渲染服务，解决了动态页面SEO优化问题，但博主对可行的方式还是有所猜测。不知道是否可行。看完上面的方法，你可以试试。.

　　规范标签是谷歌、雅虎、微软等搜索引擎联合推出的标签。它的主要功能是解决不同URL形式、相同内容导致的内容重复问题。这个标签已经制定了很长时间，所以现在主流搜索引擎都支持这个标签。其原功能是将不同网址但内容相同的网址的权重全部集中在其中一个网址上，避免大量重复内容的网页受到影响。搜索引擎收录，例如：

　　http://www.rapospectre.com/archives/1

http://www.rapospectre.com/archives/1?comments=true

http://www.rapospectre.com/archives/1?postcomment=true

　　这三个网址的内容其实完全一样。为了避免重复收录和去中心化，把这个添加到原创网页中，这样其他重复的网页将被视为所有

　　那么假设对于一个动态网页，我们写他的静态网页：，然后在页面中添加：，这样也能达到动态SEO优化的目的吗？

　　总结

　　随着越来越多的页面呈现在前端，动态页面的SEO优化也逐渐进入了人们的视野。博主把自己在动态页面SEO优化方面的经验写出来，希望对注意到这个领域或者遇到同样问题的其他人有所帮助，提供一些思路。谢谢。