谷歌SEO教程 2023年06月21日
0 收藏 0 点赞 1,147 浏览 2050 个字

现代网站会使用 JavaScript 显示大量动态内容。使用 JavaScript 在网站上生成结构化数据时,您需要注意一些事项,而本指南介绍了最佳做法和实施策略。如果您不熟悉结构化数据,可以详细了解结构化数据的运作方式。

使用 JavaScript 生成结构化数据的方法有多种,最常见的方法有:

  • Google 跟踪代码管理器
  • 自定义 JavaScript

通过 Google 跟踪代码管理器这一平台,您无需修改代码即可管理网站上的标记。如需使用 Google 跟踪代码管理器生成结构化数据,请按以下步骤操作:

  1. 在您的网站上设置并安装 Google 跟踪代码管理器。
  2. 向容器添加新的自定义 HTML 标记。
  3. 将所需的结构化数据块粘贴到标记内容中。
  4. 按照容器管理菜单中的安装 Google 跟踪代码管理器部分所示安装容器。
  5. 若要将该标记添加到您的网站中,请在 Google 跟踪代码管理器界面中发布容器。
  6. 测试实现效果。

Google 跟踪代码管理器 (GTM) 支持变量,使您能够将网页上的信息用在结构化数据中。您可以使用变量从网页中提取结构化数据,而不是在 GTM 中复制信息。在 GTM 中复制信息会导致网页内容与通过 GTM 插入的结构化数据不一致的风险增大。

例如,您可以通过创建以下名为 recipe_name 的自定义变量,动态创建将网页标题用作食谱名称的 Recipe JSON-LD 块:

function() { return document.title; }

然后,您可以在自定义 HTML 代码中使用 {{recipe_name}}

我们建议您创建变量,并使用这些变量从网页中收集所有必要信息。

下面是自定义 HTML 代码内容的示例:

<script type="application/ld+json">
  {
    "@context": "https://schema.org/",
    "@type": "Recipe",
    "name": "{{recipe_name}}",
    "image": [ "{{recipe_image}}" ],
    "author": {
      "@type": "Person",
      "name": "{{recipe_author}}"
    }
  }
</script>

您还可以通过另一种方法生成结构化数据:使用 JavaScript 生成所有结构化数据,或者向服务器端呈现的结构化数据添加更多信息。无论采用上述哪种方式,Google 搜索都能在呈现网页时理解和处理 DOM 中提供的结构化数据。如需详细了解 Google 搜索如何处理 JavaScript,请参阅 JavaScript 基础知识指南。

下面是 JavaScript 生成的结构化数据的示例:

  1. 查找您想使用的结构化数据类型。
  2. 修改您网站的 HTML,并添加如以下示例所示的 JavaScript 代码段(请参阅您的 CMS 或托管服务提供商的文档,或者咨询您的开发者)。
    fetch('https://api.example.com/recipes/123')
    .then(response => response.text())
    .then(structuredDataText => {
      const script = document.createElement('script');
      script.setAttribute('type', 'application/ld+json');
      script.textContent = structuredDataText;
      document.head.appendChild(script);
    });
  3. 使用富媒体搜索结果测试来测试您的实现效果。

如果您使用的是服务器端呈现,还可以在呈现的输出中包含所需的结构化数据。查看您所用框架的文档,了解如何为您想使用的结构化数据类型生成 JSON-LD。

若要确保 Google 搜索可以抓取您的结构化数据并将其编入索引,请测试您的实现效果:

  1. 打开富媒体搜索结果测试。
  2. 输入您要测试的网址。
  3. 点击测试网址成功:如果您的所有操作都正确无误,并且该工具支持您的结构化数据类型,系统会显示“网页能显示富媒体搜索结果”这一消息。
    如果您要测试富媒体搜索结果测试工具不支持的结构化数据类型,请检查所呈现的 HTML。 如果所呈现的 HTML 包含相应结构化数据,Google 搜索将能够处理该结构化数据。

    重试:如果您看到错误或警告,则很可能是语法错误或属性缺失。 请阅读您的结构化数据类型对应的文档,并确保您已添加所有属性。如果问题仍然存在,还请务必查看解决与 Google 搜索相关的 JavaScript 问题的指南。

微信扫一扫

支付宝扫一扫

版权: 转载请注明出处:https://www.mizhanw.com/blog/gugeseo/2565.html

相关推荐
谷歌SEO教程第97篇—Google 图片中的图片元数据
指定图片元数据后,Google 图片可以显示有关图片的更多详细信息,例如创作者是谁、用户可以如何使用图片以及版权归属信息。例如,提供许可信息…
日期:2023-07-27 点赞:0 阅读:511
谷歌SEO教程第96篇—HowTo (HowTo) 结构化数据
请使用 HowTo 结构化数据明确告诉 Google 您的内容是 HowTo 内容。HowTo 内容旨在引导用户通过一系列步骤成功完成某项任…
日期:2023-07-27 点赞:0 阅读:512
谷歌SEO教程第95篇—居家活动 (VirtualLocation) 结构化数据
为了帮助用户发现可在家中参与的活动,您可以在自己的线上活动和视频网页中添加结构化数据。当用户搜索可在家中参与的活动时,相关视频和线上活动便会…
日期:2023-07-26 点赞:0 阅读:412
谷歌SEO教程第94篇—FAQ(FAQPage、Question、Answer)结构化数据
常见问题解答 (FAQ) 页包含一系列有关特定主题的问题和答案。如果您正确标记了 FAQ 页,它们可能会在 Google 搜索中显示为富媒体…
日期:2023-07-26 点赞:0 阅读:527
谷歌SEO教程第93篇—事实核查 (ClaimReview) 结构化数据
如果您的某个网页会对他人的声明进行审核,您可以在该网页中添加 ClaimReview 结构化数据。使用 ClaimReview 结构化数据后…
日期:2023-07-26 点赞:0 阅读:431
谷歌SEO教程第92篇—活动 (Event) 结构化数据
我们添加了几个可选属性:organizer、eventStatus、eventAttendanceMode 和 previousStartD…
日期:2023-07-26 点赞:0 阅读:656
发表评论
暂无评论

还没有评论呢,快来抢沙发~