在 Hugo 中添加结构化数据标记

如果 Hugo 主题不支持结构化数据...

目录

Google 在搜索结果中展示了一些增强功能，例如电影详情、职位发布、活动和课程信息，这些信息是从网站的 结构化数据 中获取的。以下是 - 如何使用 Hugo 生成器将结构化数据添加到网站。

以下是 Google 搜索结果中食谱结构化数据的示例。 Google 搜索结果中的食谱结构化数据

以下是将类似内容添加到页面的步骤。需要：

  • 添加页面 front matter
  • 添加站点部分布局代码
  • 生成、检查并部署 Hugo 网站
  • 使用 Google 开发工具测试结构化数据

食谱结构化数据的描述请参见 https://developers.google.com/search/docs/appearance/structured-data/recipe 。

作为示例，我将展示如何向网页添加 FAQ 结构化数据。

添加页面 front matter

打开你的页面 markdown 代码，并添加以下代码，如果你在 front matter 中使用的是 toml：


[faq]
title = "这是 FAQ 的标题"
[[faq.section]]
question = "我们对醉酒的水手会怎么做？"
answer = "用生锈的剃刀剃他的肚子"
+++

如果你使用的是 yaml，则添加以下代码：

faq:
  title: '这是这个 FAQ 的标题'
  section: [{question: '我们对醉酒的水手会怎么做？', answer: '用生锈的剃刀剃他的肚子。'}]
---

添加站点部分布局代码

在部分布局中添加 struct-data.html：

{{- if eq .Kind "page" }}
  {{- if $.Page.Params.faq.title -}}
    {{ `<script type="application/ld+json">` | safeHTML }}
      {
          "@context": "https://schema.org",
          "@type": "FAQPage",
          "mainEntity": [
          {{ with $.Page.Params.faq }}
              {{ $len := len .section }}
              {{ range $index, $element := .section }}
                  {{ $jsonAnswer := .answer | markdownify | jsonify }}
                  {{ $jsonAnswer := replace $jsonAnswer "\\u003c" "<"}}
                  {{ $jsonAnswer := replace $jsonAnswer "\\u003e" ">"}}
                  {
                      "@type": "Question",
                      "name": "{{ .question | markdownify }}",
                      "acceptedAnswer": {
                      "@type": "Answer",
                      "text": {{ $jsonAnswer | safeHTML }}
                      }
                  }
                  {{ if not (eq (add $index 1) $len) }},{{ end }}
              {{ end }}
          {{ end }}
          ]
      }
    {{ `</script>` | safeHTML }}
  {{- end }}
{{- end }}

并将其包含在 head 部分中：

	{{- partial "struct-data.html" . -}}
</head>

生成、检查并部署 Hugo 网站

运行

hugo

然后在 public 文件夹中找到并打开你刚刚生成的页面文件。

在 HTML 页面的 head 部分中你应该能看到类似以下的内容：

<script type="application/ld+json">
      {
          "@context": "https://schema.org",
          "@type": "FAQPage",
          "mainEntity": [
                  {
                      "@type": "Question",
                      "name": "我们对醉酒的水手会怎么做？",
                      "acceptedAnswer": {
                      "@type": "Answer",
                      "text": "用生锈的剃刀剃他的肚子。"
                      }
                  }
          ]
      }
    </script>

不错，对吧？

使用结构化数据测试网站

使用 Google 的结构化数据测试页面：https://developers.google.com/search/docs/appearance/structured-data

进入 Schema 验证器 -> 代码片段

粘贴上面的代码片段，点击 Run Test，然后看吧：

验证后的 FAQ 代码片段截图

恭喜，它有效了。 你可以将网站部署到例如 AWS S3，并在 Google 搜索控制台中检查是否能识别你的 结构化数据 作为增强功能。

有用的链接