搜索引擎优化方法(如何优化特定类型的JS内容-单页应用（SPA）)

　　搜索引擎优化方法(如何优化特定类型的JS内容-单页应用（SPA）)

　　近年来，新的 SEO 挑战进一步推动了纯 HTML。因此，我们现在经常面临不必优化基于 JavaScript (JS) 的内容的问题。

　　现在，JavaScript SEO 当然，这不是一件坏事。毕竟，这项技术为呈现内容和改善用户体验开辟了许多新的可能性。

　　但让我们面对现实吧；获取被搜索引擎抓取和索引的 JavaScript 页面并不像优化传统网页那么简单。

　　这就是 文章 的原因。在此页面上，您将学习如何优化特定类型的 JS 内容 - 单页应用程序 (SPA) - SEO。我还将与您分享一些这样做的最佳实践。

　　但是让我们首先了解什么是单页应用程序以及这种技术如何影响 SEO。

　　什么是单页应用程序？

　　顾名思义，单页应用程序是基于 js 的应用程序，它从单个页面加载其所有内容。

　　与传统的 网站 不同，单页应用程序不会将单个页面存储为单独的 HTML 文件。相反，它使用单个页面作为模板，使用 AJAX 调用呈现相关内容。

　　在与 网站 交互时填充用户请求的最简单方法是使用一个大的空占位符。

　　从 SEO 的角度来看，占位符只加载一次是很重要的。根据用户请求的信息，改变的是什么。

　　单页应用程序 vs 网站

　　这与传统的 网站 的工作方式相反。每次用户单击典型 网站 上的按钮时，都会将一个新页面加载到浏览器窗口中。这将导致页面加载至少需要一些等待时间。

　　对于 spa，占位符仅加载一次。它在浏览器中保持打开状态，只有当用户单击导航按钮时其内容才会发生变化。

　　Gmail 是一个众所周知的单页应用程序示例。请注意，无论您如何与收件箱进行交互，侧边栏和标题始终保持不变。

　　Twitter 是另一个受欢迎的水疗中心。Instagram 和 Jira 也是如此。

　　许多人采用 spa 来创建仪表板和构建表单密集型应用程序。

　　因此，使用 SPA 提供了令人难以置信的好处：

　　不幸的是，单页应用程序也给 SEO 带来了一些挑战。

　　优化单页应用程序的 SEO 挑战

　　我承认水疗中心背后的技术是惊人的。不幸的是，这对 SEO 来说也是一个挑战。

　　首先，SPA 仅在其代码中收录基本的页面结构。所有内容和单个页面元素都是通过动态 API 调用来调用的。这意味着所有内容都在浏览器的客户端加载，但仅显示给请求它的单个用户。

　　输入，谷歌机器人。为了让 Google 对您的内容进行排名，搜索引擎必须首先发现页面、呈现页面、抓取并理解其内容，最后将其编入索引。

　　但由于 spa 不收录 Googlebot 可以轻松访问的内容，因此爬虫只能看到一个空容器。

　　让我用一个例子来说明。这是一个 spa 页面，任何用户都会看到它：

　　从搜索引擎的角度来看，您在上面看到的所有内容都不是。以下是 Googlebot 在访问该页面时看到的内容：

　　那么，你能做些什么来避免它呢？

　　幸运的是，您有三个选择。

　　为单页应用程序优化 SEO #1 的三种方法。预呈现的内容

　　您可以使用单页应用程序在预呈现内容时运行无头浏览器。然后拍摄页面快照并使用该快照替换服务器响应中的 HTML 文件。Google Mobile Friendly Test Tool 是一款无头浏览器，用于测试您的应用在 HTML 中的呈现方式。

　　使用这种方法，预渲染将发生在预开发中，而不是在运行的服务器上。

　　结果是一个可以被 Googlebot 访问、抓取和索引的静态页面。

　　不幸的是，这种方法有其缺点。

　　首先，由于您正在创建页面的静态快照，因此这种方法对于数据不断变化的内容并不理想。

　　它不适用于特定于用户的内容，例如出于类似原因显示用户详细信息的页面。

　　最后，由于预渲染内容的工作方式，这种方法在大型 网站 上也需要大量资源。

　　#2。动态渲染内容

　　动态呈现创建一个单独的、平面的、基于 HTML 的单页应用程序版本，供 Google 抓取和呈现。

　　在这种方法中，呈现的站点版本取决于访问内容的检测用户代理。如果检测到的代理是机器人，则服务器将提供静态的、平面的 HTML 内容。但是，如果检测到的代理是人，则浏览器将显示单页应用程序。

　　但是，这种方法的一个主要缺点是 Google 可能会放弃对动态呈现的支持，从而导致网站没有可索引的版本。

　　#3。服务器端渲染

　　最后一种方法是目前最流行的。

　　使用服务器端呈现，页面由 Web 服务器呈现，作为服务器请求/响应周期的一部分。在服务器端渲染时，SPA 基于虚拟 DOM。这又被转换为 HTML 字符串，该字符串将收录在页面中，然后再显示给用户。

　　这种方法也有它的缺点。

　　呈现的代码必须在浏览器和基于服务器的 JavaScript 环境中工作。单页应用程序将运行对服务器的每个请求，因此运行速度较慢，从而增加了页面加载时间。

　　优化水疗中心的最佳实践

　　最后，让我分享一些最佳实践，帮助您优化单页应用程序的 SEO。

　　# 1. 立即加载内容

　　正如您在上面看到的，使用 spa 的挑战是将框架（或容器）加载到浏览器中。用户可以使用它来做任何他们需要的事情——查找信息、访问信息等等。

　　但是，谷歌做不到。正如我在上面的屏幕截图中所示，搜索引擎的框架仍然是空的。

　　通过我解释的三种渲染方法中的任何一种立即加载内容，可以让搜索引擎在访问页面时进行抓取和索引。

　　#2。用不同的 URL 打破长关

　　SPA 通常收录长期内容。其中许多页面可以很容易地拆分为单独的页面，Google 可以单独索引这些页面，从而提高 网站 的搜索可见性。

　　在这些部分使用不同的 url 会导致用户仍然体验相同的 UX - 滚动浏览长页面。另一方面，搜索引擎会将这些 URL 视为单独的实体并相应地对它们进行索引。

　　此步骤涉及使用 History API 创建不同的 URL。

　　#3。输出链接是，不是 js onclick

　　虽然 SPA 是一个基于 JS 的框架，但不要使用 JavaScript onClick 操作代码链接。这将使它们对 GoogleBot 不可见。相反，使用搜索引擎理解和遵循的 HTML 标记对所有链接进行编码。

　　#4。始终在源代码中收录导航

　　创建 SPA 时，您的目标可能是在框架之外收录导航。但是，这将导致通过 AJAX 调用调用链接，而不是立即在 HTML 中呈现。

　　浏览框架源代码的好处是，无论您选择哪种方法来呈现实际页面的内容，搜索引擎都会立即访问它。

　　关键要点

　　JavaScript 和单页应用程序正在慢慢成为当今 Web 开发的标准。这意味着我们 seos 必须学习和改进动态呈现 JavaScript 内容的优化。

　　特别是，有三种主要方法可以确保该内容可以被搜索引擎呈现、抓取和索引：