由于所有这些相互抵牾的建议引起的混乱，我常常看到问题“我的Vue SPA是否适宜SEO？” 来自像Vue.js Developers Facebook小组，Vue.js论坛和Reddit上的r / vuejs这样的地方。
在本文中，我们将寻衅盛行的不雅观点，做一些基本的测试，并考试测验总结一些明智的建议，建立SEO友好的SPA。
单页面运用程序的标准实现为浏览器供应了一个页面“shell”，而不包含任何故意义的内容。而是利用AJAX从做事器按需加载内容，然后通过JavaScript将其添加到页面。
这许可用户在没有页面刷新的情形下查看SPA站点的“页面”，从理论上改进UX。
虽然这种架构适用于在浏览器中查看页面的人类用户，但搜索引擎爬虫呢？抓取工具可以运行JavaScript吗？如果是这样，他们会在抓取页面之前等待AJAX调用完成吗？
主要的是要知道这一点，由于它可以确定网站的内容是否可以被搜索引擎索引，同样主要的是，它的内容排名是多少。
Googlebot由于Google是环球领先的搜索引擎，因此我们的调查应专注于Google搜索引擎抓取工具Googlebot。
在网络发布初期，Googlebot只会抓取页面中供应的静态HTML。然而，2014年宣告，Googlebot现在会考试测验在开始抓取之前呈现JavaScript。
为了帮助调试渲染经JavaScript修正的页面的任何问题，Google为网站管理员供应了Google抓取工具，该工具会显示Googlebot在特定网址上看到的内容的快照。
一个常见的误解是Googlebot不会抓取异步JavaScript。这篇文章在毁坏它方面做得很好。TLDR; Googlebot会等待至少20秒才能完成异步调用！
范例的Vue.js SPA示例是Vue HackerNews Clone 2.0。这是Vue团队供应的一个开源项目，用于演示Vue的全部功能和有效的设计模式。
我将此运用程序支配到Heroku实例并通过Fetch As Google运行。不才图中，左侧的屏幕截图显示了Googlebot如何看到它，右侧的屏幕截图显示了用户将如何看到它。它们彷佛完备相同。
删除做事器端呈现
Vue HackerNews Clone 2.0的一个关键特性是做事器端渲染（SSR）。这意味着，与更基本的SPA不同，每个页面的内容都在做事器上呈现，并在每次页面加载时供应给浏览器，就像它是静态HTML一样。
但是，我们试图理解的是Googlebot如何看待客户端呈现的内容。出于这个缘故原由，我关闭了SSR并再次运行测试：
纵然只供应客户端渲染，Googlebot也能轻松查看内容。我还等了几天才看看Google是否已将该运用编入索引。它有过：
可是等等...
虽然这个测试彷佛知足了对客户端呈现内容的任何担忧，但是有一些缘故原由让你不应该对它充满信心：
与所有JavaScript引擎一样，Googlebot也不是绝对可靠的，并且可能存在无法呈现页面的边缘情形。仅仅由于页面可以被索引，并不虞味着它将排名很好。对JavaScript持疑惑态度Googlebot在渲染Vue HackerNews方面没有任何问题。但我们不应该认为它可以使所有JavaScript完美无瑕。谷歌2014年终于JavaScript渲染的公告明确表示不会有任何担保，只管大多数开拓职员彷佛忽略了这一点。
就像浏览器一样，Googlebot必须拥有一个JavaScript引擎，个中包含已实现的Web标准和ES功能的特定子集，以及它们如何实现的特定特性。
根据该视频来自谷歌开拓者阿迪·奥斯马尼和罗布·多德森（发布2017年11月），Googlebot在目前基于Chrome的41有很多新的API，由于41版已发布，如果你利用的任何人，想必Googlebot无法呈现和索引您的网页。
您可能认为这是一个微不足道的问题，由于您无论如何都须要为旧浏览器转换或添补此类功能。但重点是，您不应该盲目相信每个搜索爬虫精确运行您的运用程序，就像您不会盲目相信您的运用程序被每个浏览器精确运行一样。
优化不要忘却“SEO”中的“O”代表“优化”。被索引是一个搜索引擎是不足的; 我们希望我们的网站排名也很好。Fetch As Google见告我们页面是如何被看到的，而不是页面与竞争对手的比拟情形。
关于SEO与React的文章有一个有趣的评论：网络爬虫比 SEO专家Barry Adams所做的更聪明。关于搜索引擎如何对SPA进行排名的话题，他说：
“当你在没有做事器端渲染的情形下利用React时会发生什么情形，爬虫会在第一页停滞，由于它看不到任何要跟随的超链接...它使爬行过程非常缓慢和低效。这便是为什么网站基于React（以及类似的JavaScript平台）构建在Google上的表现比紧张为爬虫程序供应纯HTML的网站更糟糕......纯HTML网站可以非常有效地被抓取，新添加和变动的内容将被更快地抓取和索引，并且Google可以更好地评估此类网站上各个网页的抓取优先级。“
虽然他没有为此供应任何证据，但它彷佛与其他排名决定者的理念同等，如页面速率。
如果SEO是至关主要的，该怎么办最主要的是，如果SEO很关键，您不能依赖SPA的客户端呈现，并且必须确保您的网页中包含内容。
但这并不虞味着您须要放弃SPA架构。有两种技能，做事器端渲染和预渲染，它们都可以实现预期的结果。
做事器端渲染做事器端呈现（SSR）是Web做事器作为做事器要求/相应周期的一部分呈现页面的位置。在Vue.js和其他类似框架的情形下，这是通过针对虚拟DOM实行app来完成的。
虚拟DOM的状态将转换为HTML字符串，然后在发送到客户端之前注入到页面中。当页面到达浏览器时，JavaScript运用程序将无缝地挂载在现有内容上。
SSR担保您的页面将是爬虫友好的，由于无论爬虫如何运行JavaScript，或者乃至是否运行JavaScript，页面内容都是完全的。
SSR有其缺陷：
您须要将代码设计为“通用”，即它必须在浏览器和基于做事器的JavaScript环境中事情。这意味着任何期望浏览器API和工具window可用的代码都不起浸染。您的运用将在每次向做事器发出要求时运行，增加额外的负载并减慢相应速率。缓存可以部分缓解这种情形。履行SSR既繁芜又耗时，因此项目须要更多的开拓职员韶光。它只适用于Node.js后端。SSR可以利用非节点后端完成，例如，通过利用PHP扩展v8js，但是这样的办理方案非常有限。如果您希望在Vue.js SPA中实现做事器端呈现，则应从官方指南开始：Vue.js做事器端呈现指南。我还写了一篇关于利用Laravel和Vue.js实现SSR的指南：利用Laravel和Vue.js 2.5进行做事器端渲染。
提示：像Nuxt.js这样的框架带有开箱即用的做事器端渲染。
预呈现如果由于上述缘故原由之一而无法利用SSR，则还有另一种方法：预渲染。利用此方法，您可以在开拓环境中利用无头浏览器运行运用程序，对页面输出进行快照，并利用此快照将HTML文件更换为做事器的相应。
它与SSR的观点险些相同，只是它是在支配前完成的，而不是在实时做事器上完成的。它常日利用像Chrome这样的无头浏览器来实行，并且可以与Webpack，Gulp等合并到构建流程中。
预呈现的优点是它不须要Node.js生产做事器，也不会向生产做事器添加负载。
然而，预渲染也有缺点：
它对付显示变动数据的页面不起浸染，例如，Vue HackerNews。它不适用于具有用户特定内容的页面，例如具有用户个人详细信息的帐户页面。然而，这些类型的页面对SEO不太主要; 你常日不肯望索引的帐户页面。您须要单独预渲染运用中的每条路线，这可能会占用大量网站的大量韶光。如果你热衷于在Vue.js运用程序中实现预渲染，我已经在这个博客上写了一个指南：Pre-Render A Vue.js App（带节点或Laravel）
提示：为prerendering for SEO可以从prerender.io作为做事购买
结论许多开拓职员看到谷歌2014年终于JavaScript渲染的公告是对SEO内容的SEO担忧的闭幕。实际上，无法担保Googlebot会精确呈现网页，如果确实如此，它仍旧可能会将网页排名低于竞争网站中的静态HTML网页。
我的建议：如果您打算利用SPA架构，请确保供应做事器呈现或预呈现的页面。
