对于一些新创业公司的网站来说，由于追求时尚或者某种原因，他们选择了一些高端的Web框架。但有些框架只能由前端渲染，即页面中的某些数据只有前端浏览器加载后才能检索。然而，搜索引擎蜘蛛不是浏览器，仅获取后端服务器返回的数据。没有办法你可以看到所有的数据，所以你看到的页面信息是不完整的。

这种情况在做SEO的时候经常会看到，比如各种使用ajax的网站。有多种 SEO 解决方案。大多数原则是用户和搜索引擎各架一个服务器。用户和蜘蛛各自返回不同的页面。当然，蜘蛛会获得已渲染且包含数据的页面。 。

逛V2EX的时候发现这篇文章，觉得不错，就翻了。地址请点击左下角“原始链接”。

PS：如果你去一家创业公司面试SEO职位，别忘了关注网站使用的是什么框架。如果需要前端渲染生成数据，就要求他们改。如果他们觉得麻烦，请说出来。

前言

SEO对于搜索引擎时代的网站具有重要意义。一个网站，无论是小网站还是大网站，都离不开搜索引擎的流量导入。因此，做好SEO一直是站长/开发者的重要功课。

在网站页面后端渲染的时代，开发者只需要按照规范制作对搜索引擎友好的页面，就能快速让搜索引擎收录自己网站的每个页面。

随着前后端技术的更新，越来越多的前端框架进入了开发者的视野，网站的前后端分离架构也越来越受到开发者的喜爱和认可。后端只提供数据接口、业务逻辑和持久化服务，视图、控制和渲染则交给前端。因此，越来越多的网站正在从后端渲染转向前端渲染，而由此带来的直接问题是各大搜索引擎爬虫仍然无法完全抓取前端渲染的页面（动态内容）。这样就导致网站内容无法被搜索引擎索引，直接影响网站流量和曝光度。

该博主的网站从去年5月份开始也采用了前后端分离的结构，使用框架来搭建，然后使用Vue.js框架进行整体重构。无一例外都是基于前端渲染，而在接下来的一年多时间里，被搜索引擎收录的页面是这样的：

（其他搜索引擎也是如此，最早的截图已经找不到了，我们先处理一下这个问题。）

快照看起来像这样：

博主的实际网站如下所示：

感觉就像是彻底被搜索引擎抛弃了！谁能找到这个东西？搜索完后谁来订购？

为了让搜索引擎正确收录博主的网站，博主踏上了动态SEO优化的陷阱：

1. 标签

首先博主到来，添加到动态页面

告诉爬虫这是一个动态内容的页面，然后爬虫会在当前链接后面添加：

?_escaped_fragment_=tag

为了获取对应页面的静态版本，所以我果断决定在路由上改一下，然后重写一套后端渲染的页面返回全部带。

?_escaped_fragment_=tag

关联。正当我庆幸这个问题可以这么轻松解决的时候，突然发现网上资料说这个方法只有爬虫识别，其他搜索引擎都没用！ wtf，无缘无故的高兴。

2.

是一个基于.它完全支持 Web，无需浏览器支持，速度快，并且原生支持各种 Web 标准：DOM 处理、CSS 选择器、JSON 和 SVG。可用于页面自动化、网络监控、网页截图、无界面测试等。

简单来说，它可以在服务器端解析html和js。

具体如何使用呢？简而言之，爬虫在爬取页面时，先运行各个动态页面，然后将静态结果返回给爬虫。具体流程可以参考：

当然，博主看完这篇之后并没有使用自己的服务进行动态内容优化，主要是因为：

3..io

.io是专门为动态页面SEO提供静态页面渲染而开发的在线服务。基本上解决了自己搭建服务遇到的问题。网站配置.io后，将直接替换网站后端响应爬虫请求。 ，将提前渲染好的动态页面直接返回给爬虫。

具体配置：

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

好在，终于解决了。正当博主感叹不容易的时候，爬取结果

捕获的内容仍然充满了 ${ 。 }} 渲染模板。当时以为是网站缓存问题，就没多想。然而一周后我再次测试，情况还是一样。我回头看了一下渲染后的网页：

事实证明它根本不起作用！之后我检查了配置和文档，尝试联系.io的技术支持，甚至提出了问题，但问题并没有解决。最终博主无奈只能放弃。

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

该解决方案启发我通过判断传入请求的User-来让不同的后端服务器做出响应。虽然网上关于SEO优化的讨论中明确提到判断UA返回不同页面会受到搜索引擎的惩罚，但我猜测这只是对返回不同内容的惩罚。如果返回相同的内容，搜索引擎不会对其进行处罚。区别在于，一种是通过前端直接渲染的页面，一种是后端渲染的页面。两个页面渲染的内容基本相同，所以搜索引擎不会找到。

自己动手，吃饱穿暖，立即验证自己的想法。首先将网站代码的前端渲染部分改为后端渲染，然后push到新的分支。博主网站的修改非常简单，只做了50行左右的修改。该代码满足要求：-

然后将后端渲染代码部署到服务器上，然后假设它在端口上运行。此时，前端渲染代码假设它运行在该端口上；

最后修改配置文件.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来判断爬虫。如果是，它将被转发到该端口。如果不是，它将被转发到该端口。当然，两个端口返回的页面基本相同，所以不用担心会受到搜索引擎的惩罚。

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

然后360搜索：

当然，我不知道为什么两个多月了百度还是没有收录。即使在站长工具中提交了网页，甚至进行了申诉，也没有新的网页被收录。没错，一开始用来处理的那张图是百度的结果，刚拍的。

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