一个臭名昭着的单页面应用（SPA）开发领域是SEO。根据您的要求，搜索引擎抓取客户端呈现的内容要么完全正常，只要它是同步的，或者根本不是很好。
由于所有这些相互矛盾的建议引起的混乱，我经常看到问题“我的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秒才能完成异步调用！
Googlebot如何看待SPA
典型的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进行排名的话题，他说：