一个臭名昭着的单页面应用（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如何看到它，右侧的屏幕截图显示了用户将如何看到它。它们似乎完全相同。

许多开发人员看到谷歌2014年关于JavaScript渲染的公告是对SEO内容的SEO担忧的终结。实际上，无法保证Googlebot会正确呈现网页，如果确实如此，它仍然可能会将网页排名低于竞争网站中的静态HTML网页。