Hugo に構造化データのマークアップを追加する

Hugoのテーマが構造化データをサポートしない場合...

目次

Googleは検索結果に、Movie details（映画の詳細）、Job postings（求人情報）、Event（イベント）およびCourse information（コース情報）などの強化を表示しています。これらはウェブサイトの Structured Dataから取得しています。以下に、 How to add Structured Data to the site using Hugo generatorの方法を紹介します。

以下は、Google検索結果に表示されるレシピの構造化データの例です。 Recipe Structured data in Google search results

以下は、このような構造化データをページに追加する手順です。必要な作業は以下の通りです。

  • ページのフロントマターを追加
  • サイトのパーシャルレイアウトコードを追加
  • Hugoウェブサイトを生成、確認、デプロイ
  • Google開発ツールで構造化データをテスト

レシピの構造化データの詳細は、https://developers.google.com/search/docs/appearance/structured-data/recipe に記載されています。

この例では、FAQ構造化データをウェブページに追加する方法を紹介します。

ページのフロントマターを追加

ページのマークダウンコードを開き、FAQ構造化データを追加する場合、フロントマターにTomlを使用している場合は以下を追加してください。


[faq]
title = "This is the title of the FAQ"
[[faq.section]]
question = "What will we do to the drunken sailor?"
answer = "Shave his belly with a rusty razor"
+++

YAMLを使用している場合は以下を追加してください。

faq:
  title: 'This is the title of this FAQ'
  section: [{question: 'What will we do to the drunken sailor?', answer: 'Shave his belly with a rusty razor.'}]
---

サイトのパーシャルレイアウトコードを追加

パーシャルレイアウトに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

その後、publicフォルダに生成されたページファイルを開きます。

HTMLページのheadセクションには、以下のようなコードが表示されるはずです。

<script type="application/ld+json">
      {
          "@context": "https://schema.org",
          "@type": "FAQPage",
          "mainEntity": [
                  {
                      "@type": "Question",
                      "name": "What will we do to the drunken sailor?",
                      "acceptedAnswer": {
                      "@type": "Answer",
                      "text": "Shave his belly with a rusty razor."
                      }
                  }
          ]
      }
    </script>

素晴らしいですね、ではありませんか？

構造化データでウェブサイトをテスト

Googleの構造化データテストページを使用してください: https://developers.google.com/search/docs/appearance/structured-data

Schema Validator -> Code snippet に移動し、先ほどコピーしたスニペットを貼り付け、Run Testをクリックしてください。すると以下のように表示されます。 Validated FAQ snipped screenshot

おめでとうございます、動作しています。ウェブサイトをAWS S3にデプロイし、Google Search Consoleで構造化データが強化として認識されているかを確認できます。 Structured Data

有用なリンク