单页应用 SPA 做 SEO 优化的一种新奇方案

[litpen]

网上有好几种单页应用转 seo 的方案，有服务端渲染 ssr、有预渲染 prerender、google 抓 AJAX、静态化。。。这些方案都各有优劣，开发者可以根据不同的业务场景和环境决定用哪一种方案。本文将介绍另一种思路比较清奇的 SEO 方案，这个方案也是有优有劣，就看读者觉得适不适合了。

以前写过一种单页应用 seo 的方案，就是自己先在本地用爬虫做预渲染，生成同样目录结构的静态化的 html，前端项目服务器判断请求的 UA 是搜索引擎蜘蛛的话就会转发到我事先静态化过的 html 页面

当时的项目只是一个简单的只有几个页面的企业官网，预渲染没啥问题。

跟着这个思路，只要判断搜索引擎蜘蛛让蜘蛛看到另一个有内容的页面不就行了。

所以可以针对 SEO 做另一套网站，没有样式，只有符合 seo 规范的 html 标签和对应的数据，不需要在原有项目上改造，开发成本也不会很高，体积小加载速度更快。

缺点也有，就是需要另外维护一套网站，主网站界面变化不会影响，如果展示数据有变化就需要同步修改 seo 版的网站。

说了那么多废话，直接看看我的代码和示例网站就明白了 seo-mask

示例网站：http://seo-mask.lipten.link/

这只是我的一种思路，在这里分享给大家，目前已经在我项目里尝试一部分页面了，搜索引擎里查看快照也确实看得到蜘蛛爬出来的是理想内容，至于会有什么副作用就还不清楚。

v 友们见多识广，要是有更好的思路和建议都可以提哈。

[kakudesu]

spa 在前端做 seo 有什么好的方案么

[litpen]

@kakudesu 我这篇帖子就是在分享一种好的方案呐😂

[userdhf]

在页面 body 下紧接着塞一些 display:none 的 ul，里面填充页面数据不行吗？

[kisnows]

如果爬虫爬到的用户看到的差异比较大，会判定你作弊，然后进行降权。

[xylitolLin]

所以还不如 ssr 来得直接？维护一套就行了

[zqjilove]

这也是黑产常用的方法。

[litpen]

@kisnows 按原理只抓取数据不会像浏览器一样解析 html 加载 js 之类的。想知道搜索引擎是怎么判定跟用户访问差异较大的，有没有好的文章讲述这块的原理的？

[litpen]

@zqjilove 我也了解过这方面的黑客常用操作，所以感觉应该行得通😂

[hoythan]

爬虫访问到的东西和用户访问到的不一样，会判定作弊。

[litpen]

@xylitolLin 对于已经在线上运行的项目改造成 ssr 成本会很大，除非是用脚手架搭的会提供完美的改造方案就还行。

[Wichna]

这个方案我也想过，不过没有付出行动

[kisnows]

@litpen #7 没有，所以我们最终选择了 ssr