了解 JavaScript SEO 基础知识

JavaScript 是网络平台的重要组成部分,因为它提供的很多功能可将网络转变成一个非常强大的应用平台。请设法让用户能够通过 Google 搜索轻松找到您的由 JavaScript 提供支持的网络应用,这样做会有助于您在用户搜索您的网络应用所提供的内容时找到新用户并再度吸引现有用户。虽然 Google 搜索使用常青 Chromium 来运行 JavaScript ,但您可从几个方面进行优化

本指南将介绍 Google 搜索对 JavaScript 的处理方式,以及与针对 Google 搜索改进 JavaScript 网络应用相关的最佳做法。

Googlebot 对 JavaScript 的处理方式

Googlebot 对 JavaScript 网络应用的处理流程分为 3 大阶段:

  1. 抓取
  2. 呈现
  3. 编入索引

Googlebot 会抓取并呈现网页,然后将其编入索引。

Googlebot 会从待抓取队列中获取某个网址,抓取它,然后将它传递到处理阶段。在处理阶段,Googlebot 会提取重回到待抓取队列的链接,并将相应网页加入待呈现队列。相应网页会从待呈现队列进入呈现器,呈现器会将所呈现的 HTML 传递回处理阶段,从而将相应内容编入索引并提取链接以将其放入待抓取队列中。

当 Googlebot 尝试通过发出 HTTP 请求来从待抓取队列中抓取某个网址时,它首先会检查您是否允许抓取。Googlebot 会读取 robots.txt 文件。如果此文件将该网址标记为“disallowed”,Googlebot 就会跳过向该网址发出 HTTP 请求的操作,然后会跳过该网址。

接下来,Googlebot 会解析 HTML 链接的 href 属性中其他网址的响应,并将这些网址添加到待抓取队列中。若不想让 Googlebot 发现链接,请使用 nofollow 机制

抓取网址并解析 HTML 响应非常适用于经典网站或服务器端呈现的网页(在这些网站或网页中,HTTP 响应中的 HTML 包含所有内容)。某些 JavaScript 网站可能会使用应用 Shell 模型(在该模型中,初始 HTML 不包含实际内容,并且 Googlebot 需要执行 JavaScript 才能查看 JavaScript 生成的实际网页内容)。

Googlebot 会将所有网页都加入待呈现队列,除非漫游器元标记或标头告知 Googlebot 不要将相应网页编入索引。相应网页在此队列中的存在时长可能会是几秒钟,但也可能会是更长时间。一旦 Googlebot 的资源允许,无头 Chromium 便会呈现相应网页并执行 JavaScript。Googlebot 会再次解析所呈现的链接 HTML,并将自己找到的网址加入待抓取队列。Googlebot 还会使用所呈现的 HTML 将相应网页编入索引。

请注意,服务器端呈现或预呈现仍不失为上乘之选,因为:(1) 它可让用户和抓取工具更快速地看到您网站上的内容;(2) 并非所有漫游器都能运行 JavaScript。

用独特的标题和摘要来描述您的网页

独特的描述性标题和有用的元描述可帮助用户快速找到符合其目标的最佳结果。我们的指南中解释了怎样才算是良好的标题和描述

您可以使用 JavaScript 来设置或更改元描述及标题。

编写兼容的代码

浏览器提供了很多 API,而 JavaScript 是一种快速演变的语言。Googlebot 对所支持的 API 和 JavaScript 功能有一些限制。要确保您的代码与 Googlebot 兼容,请遵循我们的 JavaScript 问题排查指南

使用有意义的 HTTP 状态代码

Googlebot 会使用 HTTP 状态代码来确定抓取网页时是否出现了问题。

您应该使用有意义的状态代码告知 Googlebot 是否不应抓取某个网页或不应将某个网页编入索引(例如:404 代码表示找不到相应网页,401 代码表示相应网页位于登录墙后面)。您可以使用 HTTP 状态代码让 Googlebot 知道某个网页是否已移至新网址,以便系统相应地更新索引。

下面列出了可用的 HTTP 状态代码及其适用情形:

HTTP 状态代码 适用情形
301 / 302 网页已移至新网址。
401 / 403 因为权限不足,无法访问网页。
404 / 410 网页已不可用。
5xx 服务器端出问题了。

慎重地使用漫游器元标记

您可以通过漫游器元标记阻止 Googlebot 将某个网页编入索引或跟踪链接。例如,在网页顶部添加以下元标记可阻止 Googlebot 将该网页编入索引:

<!-- Googlebot won't index this page or follow links on this page -->
<meta name="robots" content="noindex, nofollow">

您可以使用 JavaScript 将漫游器元标记添加到某个网页或更改其内容。以下示例代码展示了如何使用 JavaScript 更改漫游器元标记以防止在 API 调用未返回内容时将当前网页编入索引。

fetch('/api/products/' + productId)
  .then(function (response) { return response.json(); })
  .then(function (apiResponse) {
    if (apiResponse.isError) {
      // get the robots meta tag
      var metaRobots = document.querySelector('meta[name="robots"]');
      // if there was no robots meta tag, add one
      if (!metaRobots) {
        metaRobots = document.createElement('meta');
        metaRobots.setAttribute('name', 'robots');
        document.head.appendChild(metaRobots);
      }
      // tell Googlebot to exclude this page from the index
      metaRobots.setAttribute('content', 'noindex');
      // display an error message to the user
      errorMsg.textContent = 'This product is no longer available';
      return;
    }
    // display product information
    // ...
  });
    

当 Googlebot 在运行 JavaScript 之前在漫游器元标记中遇到 noindex 后,它便不会呈现相应网页,也不会将其编入索引。

修正图片和延迟加载的内容

图片在带宽和性能方面的开销可能会非常高昂。一种可取的策略是:使用延迟加载方法,仅在用户即将看到图片时才予以加载。要想确保以方便用户搜索的方式实现延迟加载,请遵循我们的延迟加载指南