使用 JavaScript 生成结构化数据
现代网站会使用 JavaScript 显示大量动态内容。使用 JavaScript 在网站上生成结构化数据时,您需要注意一些事项,而本指南介绍了最佳做法和实施策略。如果您不熟悉结构化数据,可以详细了解结构化数据的运作方式。
使用 JavaScript 生成结构化数据的方法有多种,最常见的方法有:
Google 跟踪代码管理器
自定义 JavaScript
使用 Google 跟踪代码管理器动态生成 JSON-LD
通过 Google 跟踪代码管理器这一平台,您无需修改代码即可管理网站上的标记。如需使用 Google 跟踪代码管理器生成结构化数据,请按以下步骤操作:
1、在您的网站上设置并安装 Google 跟踪代码管理器。
2、向容器添加新的自定义 HTML 标记。
3、将所需的结构化数据块粘贴到标记内容中。
4、按照容器管理菜单中的安装 Google 跟踪代码管理器部分所示安装容器。
5、若要将该标记添加到您的网站中,请在 Google 跟踪代码管理器界面中发布容器。
6、测试实现效果。
在 Google 跟踪代码管理器中使用变量
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>
注意:上一个示例假设您在 GTM 中定义了 recipe_name、recipe_image 和 recipe_author 变量。
使用自定义 JavaScript 生成结构化数据
您还可以通过另一种方法生成结构化数据:使用 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、输入您要测试的网址。
我们建议您使用网址输入(而非代码输入),因为使用代码输入时存在 JavaScript 限制(例如 CORS 限制)。
3、点击测试网址。
成功:如果您的所有操作都正确无误,并且该工具支持您的结构化数据类型,系统会显示“网页能显示富媒体搜索结果”这一消息。
如果您要测试富媒体搜索结果测试工具不支持的结构化数据类型,请检查所呈现的 HTML。 如果所呈现的 HTML 包含相应结构化数据,Google 搜索将能够处理该结构化数据。
重试:如果您看到错误或警告,则很可能是语法错误或属性缺失。 请阅读您的结构化数据类型对应的文档,并确保您已添加所有属性。如果问题仍然存在,还请务必查看解决与 Google 搜索相关的 JavaScript 问题的指南。