动态呈现入门

目前,处理 JavaScript 内容非常困难,而且并非所有搜索引擎抓取工具都能够成功或立即处理此类内容。我们希望日后可以解决这个问题,但与此同时,我们建议您采用动态呈现作为一种临时解决方案。动态呈现是指针对特定用户代理在客户端呈现的内容和预呈现的内容之间进行切换。

应使用动态呈现的网站

动态呈现适用于由 JavaScript 生成、可编入索引且快速变化的公开内容,或使用以下功能的内容:您关注的抓取工具不支持的 JavaScript 功能。并非所有网站都需要使用动态呈现,请注意,动态呈现是针对抓取工具的一种临时解决方案。

了解动态呈现的运作方式

要采用动态呈现,您的网络服务器必须能够检测抓取工具(例如,通过检查用户代理)。来自抓取工具的请求将路由到呈现器,来自用户的请求将以正常方式进行处理。如果需要,动态呈现器会提供适合抓取工具的内容版本,例如,它可能会提供静态 HTML 版本。您可以选择为所有网页启用动态呈现器,也可以按各个网页启用动态呈现器。

一个显示动态呈现运作方式的图表。在该图表中,服务器直接向浏览器提供初始 HTML 和 JavaScript 内容。而在该图表中,服务器向呈现器提供初始 HTML 和 JavaScript 内容,然后呈现器将初始 HTML 和 JavaScript 内容转换为静态 HTML 内容。内容转换完毕后,呈现器会向抓取工具提供静态 HTML 内容。

实现动态呈现

要为您的内容设置动态呈现,请遵循我们的通用指南。您需要参考具体的配置详细信息,因为不同实现方式的配置详细信息会有很大差别。

  1. 安装并配置动态呈现器,以便将内容转换为更便于抓取工具使用的静态 HTML 内容。一些常见的动态呈现器包括 PuppeteerRendertronprerender.io
  2. 选择您认为应该接收静态 HTML 内容的用户代理,并参考具体的配置详细信息,了解如何更新或添加用户代理。以下是 Rendertron 中间件中常见用户代理的列表示例:
    export const botUserAgents = [
      'googlebot',
      'google-structured-data-testing-tool',
      'bingbot',
      'linkedinbot',
      'mediapartners-google',
    ];
  3. 如果预呈现会拖慢服务器速度,或者预呈现请求非常多,请考虑为预呈现的内容实现缓存功能,或验证相应请求是否来自合法的抓取工具
  4. 确定用户代理需要桌面版内容还是移动版内容。使用动态提供内容,以便根据情况提供桌面版本或移动版本。请参阅以下示例,了解配置如何确定用户代理需要桌面版内容还是移动版内容:
    isPrerenderedUA = userAgent.matches(botUserAgents)
    isMobileUA = userAgent.matches(['mobile', 'android'])
    
    if (!isPrerenderedUA) { } else { servePreRendered(isMobileUA) }
  5. 将您的服务器配置为向您选择的抓取工具提供静态 HTML 内容。您可以通过多种方法来进行此项配置,具体取决于您的技术。以下是一些示例:
    • 将来自抓取工具的请求重定向到动态呈现器。
    • 在部署过程中进行预呈现,并使您的服务器向抓取工具提供静态 HTML 内容。
    • 将动态呈现机制内置到自定义服务器代码中。
    • 将来自预呈现服务的静态内容提供给抓取工具。
    • 为服务器使用中间件(例如,rendertron 中间件)。

验证您的配置

实现动态呈现后,请对某个网址进行以下测试,验证一切是否如预期一样正常运作:

  1. 使用移动设备适合性测试对您的移动版内容进行测试,确保 Google 可以看到您的内容。

    done 成功:您的移动版内容与您希望用户看到的内容一致。

    error 再试一次:如果您看到的内容与预期不符,请参阅问题排查部分

  2. 使用网址检查工具测试您的桌面版内容,确保在呈现的网页上也可以看到这些内容(呈现的网页是 Googlebot 所看到的网页样貌)。

    done 成功:桌面版内容与您希望用户看到的内容一致。

    error 再试一次:如果您看到的内容与预期不符,请参阅问题排查部分

  3. 如果您使用结构化数据,请使用结构化数据测试工具测试这些数据能否正确呈现。

    done 成功:结构化数据与您预期的显示效果一致。

    error 再试一次:如果结构化数据与您预期的显示效果不一致,请参阅问题排查部分

问题排查

如果您的内容在移动设备适合性测试中显示错误,或者无法显示在 Google 搜索结果中,请尝试解决下面列出的最常见问题。如果您仍遇到问题,请在网站站长论坛中发新帖提问

内容不完整或看起来不同

error 导致此问题的原因:您的呈现器可能未正确配置,或您的网页应用可能与您的呈现解决方案不兼容。有时,超时也可能会导致内容无法正确呈现。

done 解决此问题的方法:请参阅特定呈现解决方案的文档,以调试您的动态呈现设置。

响应时间较长

error 导致此问题的原因:使用无头浏览器按需呈现网页经常会导致响应时间较长,而这可能会导致抓取工具取消相应请求,且不会将您的内容编入索引。此外,响应时间较长还可能会导致抓取工具在抓取您的内容并将其编入索引时降低抓取速度。

done 解决此问题的方法

  1. 在构建流程中,为预呈现的 HTML 内容设置缓存,或为内容创建静态 HTML 版本。
  2. 确保在配置中启用缓存(例如,通过将抓取工具指向缓存)。
  3. 使用移动设备适合性测试webpagetest 等测试工具,检查抓取工具能否快速获取您的内容(采用 Google 抓取工具用户代理列表中的自定义用户代理字符串)。您的请求不应超时。

缺少结构化数据

error 导致此问题的原因:如果缺少结构化数据用户代理,或者输出中不包含 JSON-LD 脚本标记,便可能会导致结构化数据错误。

done 解决此问题的方法

  1. 使用结构化数据测试工具进行测试,确保结构化数据会显示在网页上。然后,针对结构化数据测试工具配置用户代理,以便测试预呈现的内容。
  2. 确保 JSON-LD 脚本标记包含在内容的动态呈现 HTML 版本中。有关详情,请参阅您的呈现解决方案的文档。

发送以下问题的反馈:

此网页