网站页面后端渲染的时代，动态SEO优化的踩坑之路

　　网站页面后端渲染的时代，动态SEO优化的踩坑之路

　　前言

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

　　随着前端和后端技术的更新，越来越多的前端框架进入了开发人员的视野。 网站的前后分离架构越来越受到开发人员的欢迎和认可。后端仅提供数据接口，业务逻辑和持久性服务，而视图，控件和呈现则留给前端。因此，越来越多的网站从后端渲染更改为前端渲染，这带来的直接问题是主要搜索引擎的抓取工具无法抓取在前端渲染的页面（动态内容） 。 ，这会导致搜索引擎收录无法搜索网站的内容，这直接影响了网站的点击量和曝光率。

　　自去年5月起，博客作者网站还采用了单独的体系结构，即使用AngularJS框架构建NewRaPo，然后使用Vue.js框架整体重建RaPo3。毫无例外，它们都是基于前端渲染的，然后一年多的时间，搜索引擎收录的页面都是这样的：

　　

　　（其他搜索引擎也是如此，最早的屏幕截图已消失，让我们先来处理它）

　　快照如下：

　　

　　博客的实际网站如下：

　　

　　和这个：

　　

　　我觉得自己完全被搜索引擎抛弃了！谁能找到这个东西！如果找到它，谁来订购！

　　为了使搜索引擎正常收录博客作者的网站，因此博客作者走上了动态SEO优化的道路：

　　1、片段标签

　　首先，博客作者Google会将其添加到动态页面，从而告知抓取工具它是动态内容页面，然后抓取工具会将？_escaped_fragment_ = tag添加到当前链接以获取静态版本。相应的页面，因此他决定性地计算出进行更改的路线，然后重写一组后端呈现的页面以返回带有？_escaped_fragment_ = tag的所有链接。

　　当我很高兴这个问题很容易解决时，我突然发现在线信息表明此方法仅由Google的抓取工具批准，其他搜索引擎没有用！ wtf，一无所获。

　　2、 PhantomJS

　　PhantomJS是基于WebKit的服务器端JavaScript API。它完全支持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帐户，免费用户可以呈现250页，这足以写博客网站；

　　安装中间件并设置令牌后，博主直接采用了nginx配置方案（Prerender.io还提供了其他解决方案：...）根据Prerender.io提供的nginx.conf，博主的后端服务器是uWSGI。进行以下更改：

　　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将返回不同的页面将得到搜索引擎的惩罚，但是我猜只有返回不同的内容才会受到惩罚。如果返回相同的内容，搜索引擎将不会受到处罚。区别在于，一个页面是由前端页面直接呈现的，而另一个页面是由后端页面呈现的，这两个页面所呈现的内容基本相同，因此搜索引擎将找不到它。

　　自己动手做，要有足够的温饱，并在有想法时立即进行验证。首先，将网站代码的前端渲染部分更改为后端渲染，然后推送到新分支。博客网站的修改非常简单，可能只需修改少于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问题终于得以解决。响应速度最快的是Google，第二天便对其进行了爬网并将其更新到搜索引擎：

　　

　　下一个360搜索：

　　

　　然后，其他未提交URL的搜索引擎也分为收录 网站：

　　

　　

　　（没有bing的收录正常页面，这应该是由于在nginx.conf中未添加bing爬网程序UA）

　　当然，我不知道为什么百度在两个多月后仍然没有收录，并且在通过网站站长工具提交网页甚至抱怨后也没有收录新页面。没错，一开始用来处理图片的是百度刚剪裁的结果。

　　我应该说幸运的是它尚未更新，否则将找不到以前的示例，哈哈哈哈。

　　

　　5、最后的猜想

　　由博客作者构建后端呈现服务已经解决了动态页面SEO优化的问题，但是博客作者仍然对可行的方法有所猜测。我不知道这是否可行。如果您阅读上述方法，那么在这里写就不容易了。您可以尝试。

　　规范标签是由Google，雅虎，微软和其他搜索引擎共同推出的标签。它的主要功能是解决由于URL格式不同和内容相同而导致的内容重复问题。这个标签已经制定了很长时间，因此现在主流的搜索引擎都支持该标签。它的原创功能是将具有不同URL但内容相同的URL的所有权重集中到其中一个URL上，从而避免影响大量重复的内容网页。搜索引擎收录，例如：

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

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

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

　　这三个URL的内容实际上完全相同。为了避免重复收录和分散操作，请将它们添加到原创网页中，以便将其他重复的网页视为全部

　　然后假设对于一个动态网页，我们先编写他的静态网页：，然后在该网页中添加：，这还能达到动态SEO优化的目的吗？

　　摘要

　　随着越来越多的页面呈现在前端，动态页面的SEO优化逐渐进入人们的视野。博客写出自己的SEO动态页面优化经验，希望能帮助其他人注意到这一领域或遇到同样的问题的人，提供一些想法。谢谢。