随着 Web 变得越来越复杂，JavaScript 发现自己在开发引人入胜的网站中发挥着有用的作用。尽管它曾经被用来强调 HTML 中包含的内容，但现在它越来越成为中心舞台。然而，JavaScript 和 SEO 的问题仍然是许多网站开发人员关心的问题。
网站所有者希望确保 Googlebot 和其他搜索引擎爬虫能够正确理解包含大量 JavaScript 的网站，以便他们的页面不会在搜索引擎结果中受到影响。我们将分解 JavaScript SEO 的基本要素，以帮助我们的社区保持他们的网站优化并准备好在 SERP 上竞争。
文章目录
了解使用 JavaScript SEO 进行渲染
在我们深入研究 JavaScript SEO 之前，我们必须首先探索 JavaScript 网站的行为方式以及它们如何与用户和搜索引擎爬虫交互。首先，Google 区分了 JavaScript 网站和页面上仅包含一些 JavaScript 的网站。在后者中，JavaScript 有助于创建一些特殊效果，但核心内容——最重要的信息——以 HTML 形式出现。这意味着 JavaScript 不会影响 Googlebot 阅读和理解网站的能力，因此不会影响 SEO。然而，Javascript 站点使用 JavaScript 来显示关键信息。这意味着您希望包含在索引中的内容依赖于 JavaScript 来显示，这使得呈现成为索引过程的重要组成部分。
了解渲染
呈现是获取站点的内容、模板和其他功能并将它们显示给用户的过程。有两种主要的渲染类型：服务器端渲染和客户端渲染。
服务器端渲染
在服务器端渲染中，模板填充在服务器上。每次用户或爬虫访问站点时，页面都会在服务器上呈现，然后发送到浏览器。这意味着当用户访问您的网站时，他们会立即收到所有内容作为 HTML 标记。通常，这有利于 SEO，因为 Google 不必单独呈现 JavaScript 来访问您创建的所有内容。
客户端渲染
然而，对于某些情况，例如单页应用程序，客户端渲染确实有一些优势。
客户端 JavaScript 在性能方面可能很昂贵。在决定使用 JavaScript SEO 呈现页面中的元素时，不要忽视页面加载性能，这一点非常重要。移动设备上 4G 连接的目标页面加载时间应低于 2 秒。页面加载缓慢会对您的整体页面排名产生负面影响。谷歌表示页面加载性能是一个排名因素。较慢的页面加载时间会导致跳出率高于正常水平、页面总停留时间降低、每次会话低于平均页面、转换百分比降低并最终导致页面排名降低，这直接影响整体页面访问量。避免在您的网站上使用共享库，而是尝试有效地使用您的 JavaScript SEO 和 CSS。
中端手机的处理器速度较慢，通常 RAM 较低，GPU 速度较慢。当浏览器加载网页时，手机必须下载、解析、编译和执行所有 JavaScript。因此，如果您传递大量未使用的代码，则可以大大减慢整个页面加载时间。以下是一个来自实时站点的示例页面，其中包含大量未使用的代码。该报告是通过 Chrome 开发者工具覆盖率报告生成的。正如您在此示例中看到的，2.3 MB 中有 2.2 MB 未使用。
在 html 中显示尽可能多的重要链接也很重要，这样它们就可以在第一遍中被抓取。通过 JavaScript 呈现重要链接，您可以延迟获取这些链接。与您的开发团队密切合作，为您希望在网站上展示的功能设定切合实际的目标，以平衡字节数方面的占用空间，并针对具有 4G 网络速度的不同手机类型测试页面加载性能。一些网站还发现他们可以将这两种主要的渲染形式结合起来，从而实现动态渲染。例如，对于内容会发生很大变化的站点，动态呈现有助于站点利用客户端和服务器端呈现的优势。
这种技术允许站点在两者之间切换，具体取决于访问站点的人员。使用 rendertron，您可以对您的网站进行编程，以创建可交付给某些用户代理(如 Googlebot)的预渲染内容。但是，当普通用户访问该站点时，该站点可以使用客户端呈现，以便访问您的站点的访问者可以尽可能高效地获取最新信息。请注意，如果您确实使用此策略，您将需要定期更新站点的缓存版本，以确保爬虫看到的版本保持最新。
渲染和 JavaScript SEO
谷歌对 JavaScript 的理解相对较好。然而，爬虫试图解释和排名全球数十亿个网站，而 JavaScript 确实比标准 HTML 需要更多的努力。这有时会使它处于不利地位。Google 报告说，Googlebot 分两波索引 JavaScript 网站。在第一次通过期间，爬虫将查看 HTML 内容并使用它开始索引站点。稍后，他们将返回以渲染需要渲染的 JavaScript。但是请记住，使用服务器端呈现创建的网站会使用 HTML 标记显示内容。由于主要内容已经显示，Googlebot 将不必返回以在网站上呈现 JavaScript 以正确索引内容。这可以使您的 JavaScript SEO 策略变得更加容易。
由于第一次和第二次通过站点之间的延迟，JavaScript 中包含的内容不会很快被索引。这意味着内容将不计入初始排名，并且更改可能需要一段时间让 Google 注意到并相应地调整排名。出于这个原因，使用 JavaScript SEO 的品牌将希望确保他们在其网站的 HTML 中放置尽可能多的基本内容。应写入他们希望计入其排名的关键信息，以便爬虫可以在第一时间对其进行解释。
JavaScript SEO 的常见错误
尽管 JavaScript 有助于创建一些令人兴奋的网站，但通常会弹出一些错误，损害网站的 SEO 和在线潜力。我们想提请您注意其中的一些。
忽略 HTML
在 JavaScript 中包含站点中最重要的信息意味着爬虫在第一次索引您的站点时将几乎没有信息可以使用。如前所述，确保您希望快速索引的关键信息是使用 HTML 创建的。如果您不确定关键内容的位置，可以通过右键单击页面上的任意位置并从菜单中选择“检查”来检查页面源。您在检查页面中找到的内容是 Googlebot 立即看到的内容。您还可以在浏览器中关闭 JavaScript 以查看剩余的内容。在您完成站点审核时，ContentIQ 还能够解释您的 JavaScript 框架，帮助您了解您的站点为用户创建的整个体验。
没有正确使用链接
链接在任何网站中都起着至关重要的作用，因为它们可以帮助爬虫和用户了解页面的连接方式。在 JavaScript SEO 方面，它还有助于让人们更好地参与您的网站并对您的内容感兴趣。但是，对于 JavaScript SEO，您需要确保您的链接设置正确。这意味着使用相关的链接锚文本和 HTML 锚标记，包括 href 属性中目标页面的 URL。
Google 建议远离其他 HTML 元素，例如 以及 JavaScript 事件处理程序。这些类型的链接策略会使人们更难跟踪链接，并且还会给那些使用辅助技术的人带来糟糕的用户体验。Google 还建议远离基于散列的路由技术。如果 JavaScript 有助于在页面之间创建过渡，那么使用历史 API 会更好。
意外阻止 Google 索引您的 JavaScript
请记住，Googlebot 在第二次通过您的网站之前不会呈现 JavaScript。因此，某些网站会错误地包含标记，例如在 Google 首次通过网站时加载的 HTML 中的“无索引”标记。此标记可能会阻止 Googlebot 返回运行站点中包含的 JavaScript，从而阻止对站点的正确索引。另一个常见错误是阻止爬虫爬取 JavaScript 目录。因此，请确保您的 robots.txt 文件中没有 Disallow: /JavaScript 条目。
写在最后
JavaScript 仍然是网络的一个重要功能，因为品牌使用它来标记他们的页面并为他们的用户创建更具吸引力的网站。然而，了解 Googlebot 和其他爬虫如何读取 JavaScript 以及它如何与 JavaScript SEO 进行潜在交互仍然是许多人的首要任务。