Vue.js 和 SEO：如何为搜索引擎和机器人优化响应式网站

　　Vue.js 和 SEO：如何为搜索引擎和机器人优化响应式网站

　　这个实验告诉我们什么？基本上，即使来自外部网络服务，Google 也会对动态生成的内容进行索引，但不能保证如果内容“到达太晚”就会被索引。除了这个实验，我在其他真实的生产网站上也有过类似的经历。

　　有竞争力的 SEO

　　好的，所以内容被索引了，但这个实验没有告诉我们的是：内容会被竞争排名吗？与动态生成的网站相比，Google 会更喜欢具有静态内容的网站吗？这不是一个容易回答的问题。

　　根据我的经验，我可以看出动态生成的内容可以在 SERPS 中排名靠前。我在一家大型汽车公司的新车型网站上工作，推出了一个具有新三级域的新网站。该网站完全是用 Vue.js 生成的——除了标签和meta描述之外，静态 HTML 中的内容很少。

　　该网站在发布后的头几天开始对次要搜索进行排名，SERP 中的文本片段报告了直接来自动态内容的单词。

　　在三个月内，它在与该车型相关的大多数搜索中排名第一——这相对容易，因为它托管在属于汽车制造商的官方域上，并且该域与知名网站有大量链接。

　　但考虑到我们不得不面对负责该项目的 SEO 公司的强烈反对，我认为结果仍然是显着的。

　　*敏*感*词*文字

　　谷歌没有索引的是大量*敏*感*词*文本。我与之合作的一家公司Rabbit Hole Consulting的网站包含大量文本*敏*感*词*，这些*敏*感*词*是在用户滚动时执行的，并且需要将文本分成不同标签的多个块。

　　网站主页中的主要文本不适用于搜索引擎索引，因为它们没有针对 SEO 进行优化。它们不是由技术语言制成的，也不使用关键字：它们只是为了陪伴用户进行关于公司的概念之旅。当用户进入主页的各个部分时，文本会动态插入。

　　网站这些部分中的任何文本都不会被谷歌索引。为了让 Google 在 SERP 中显示一些有意义的内容，我们在联系表单下方的页脚中添加了一些静态文本，这些内容确实作为 SERP 中页面内容的一部分显示。

　　页脚中的文本被编入索引并显示在 SERP 中，即使用户不会立即看到它，除非他们滚动到页面底部并单击“问题”按钮打开联系表单。这证实了我的观点，即内容确实会被索引，即使它没有立即显示给用户，只要它很快呈现到 HTML - 而不是按需呈现或在长时间延迟后呈现。

　　预渲染呢？

　　那么，为什么要对预渲染大惊小怪——无论是在服务器端还是在项目编译时完成？真的有必要吗？虽然一些框架，比如Nuxt，让它更容易执行，但它仍然不是野餐，所以选择是否设置它并不是一个轻松的选择。

　　我认为这不是强制性的。如果您希望被 Google 编入索引的许多内容都来自外部 Web 服务并且在呈现时不能立即使用，并且可能（在某些不幸的情况下）根本不可用，这当然是一项要求，例如，web 服务停机。如果在 Googlebot 访问期间您的某些内容到达太慢，则可能无法将其编入索引。如果 Googlebot 恰好在您对 Web 服务执行维护的时刻为您的页面编制索引，它可能根本不会索引任何动态内容。

　　此外，我没有证据证明静态内容和动态生成的内容之间的排名差异。这可能需要另一个实验。我认为很有可能，如果内容来自外部网络服务并且没有立即加载，它可能会影响谷歌对您网站性能的看法，这是排名的一个非常重要的因素。

　　其他注意事项

　　兼容性

　　直到最近，Googlebot 还使用了一个相当老的 Chromium 版本（Google Chrome 所基于的开源项目），即版本 41。这意味着 Google 无法正确呈现一些最近的 JavaScript 或 CSS 功能（例如 IntersectionObserver、 ES6 语法，等等）。

　　谷歌最近宣布，它现在正在 Googlebot 中运行最新版本的 Chromium（在撰写本文时为 74），并且该版本将定期更新。Google 运行 Chromium 41 的事实可能对那些决定无视与 IE11 和其他旧浏览器的兼容性的网站产生重大影响。

　　始终使用 polyfill，因为您永远不知道哪个浏览器缺少对您认为司空见惯的功能的支持。例如，Safari 直到2019 年 3 月发布的 12.1 版本才支持像 IntersectionObserver 这样的主要且非常有用的新功能。

　　JAVASCRIPT 错误

　　如果您依靠 Googlebot 执行 JavaScript 来呈现重要内容，则必须不惜一切代价避免可能阻止内容呈现的主要 JavaScript 错误。虽然机器人可能会解析和索引并非完全有效的 HTML（尽管在任何站点上总是最好有有效的 HTML！），但如果存在阻止加载某些内容的 JavaScript 错误，那么 Google 将无法索引那个内容。

　　在任何情况下，如果您依赖 JavaScript 向最终用户呈现重要内容，那么您很可能已经进行了大量的单元测试来检查任何类型的阻塞错误。但是请记住，Javascript 错误可能来自不可预测的情况，例如，在 API 响应错误处理不当的情况下。

　　其他搜索引擎

　　其他搜索引擎在动态内容方面的表现不如谷歌。Bing 似乎根本没有索引动态内容，DuckDuckGo 或百度也没有。可能这些搜索引擎缺乏谷歌所拥有的资源和计算能力。

　　使用无头浏览器解析页面并执行几秒钟的 JavaScript 来解析呈现的内容肯定比仅仅读取纯 HTML 更耗费资源。或者这些搜索引擎可能出于其他原因选择不扫描动态内容。不管是什么原因，如果您的项目需要支持这些搜索引擎中的任何一个，您需要设置预渲染。

　　注意：要获取有关其他搜索引擎渲染功能的更多信息，您可以查看Bartosz Góralewicz 的这篇文章。它有点旧，但根据我的经验，它仍然有效。

　　其他机器人

　　请记住，您的网站也会被其他机器人访问。最重要的例子是 Twitter、Facebook 和其他社交媒体机器人，它们需要获取有关您的页面的元信息，以便在用户链接页面时显示页面的预览。这些机器人不会索引动态内容，只会显示它们在静态 HTML 中找到的元信息。这导致我们进入下一个考虑。

　　子页面

　　如果您的网站是所谓的“单页网站”，并且所有相关内容都位于一个主 HTML 中，那么您可以毫无问题地将该内容编入 Google 索引。但是，如果您需要 Google 索引并显示网站上的任何二级页面，您仍然需要为每个二级页面创建静态 HTML— 即使您依赖 JavaScript 框架检查当前 URL 并提供相关内容以放置在那个页面中。在这种情况下，我的建议是创建至少提供正确title标签和元描述/信息的服务器端（或静态）页面。

　　结论

　　我在研究这篇文章时得出的结论如下：

　　如果您只针对 Google，则不必使用预渲染来让您的网站完全编入索引，但是：

　　对于需要编制索引的内容，您不应依赖第三方Web 服务，尤其是在他们没有快速回复的情况下。

　　您通过 Vue.js 渲染立即插入 HTML的内容确实会被编入索引，但您不应使用*敏*感*词*文本或在用户操作（如滚动等）后插入 DOM 中的文本。

　　确保您测试 JavaScript 错误，因为它们可能导致整个页面/部分没有被索引，或者您的网站根本没有被索引。

　　如果您的网站有多个页面，您仍然需要一些逻辑来创建页面，这些页面虽然依赖与主页相同的前端呈现系统，但可以被 Google 索引为单独的 URL。

　　如果您需要在不同页面之间为社交媒体提供不同的描述和预览图像，您也需要在服务器端或通过为每个 URL 编译静态页面来解决这个问题。

　　如果您需要您的网站在Google 以外的搜索引擎上运行，您肯定需要进行某种预渲染。