HUGOで作成したページで構造化データのエラーのため、有効なAMPにならない

HUGOで出力されたページをAMPにしたい

AMPチェックをしました。

Open-source framework for publishing content のエラー

構造化データでエラーになりました。構造化データの指定が正しくないようです。

構造化データ

構造化データとは、ページに関する情報を提供し、そのコンテンツを分類するために標準化されたデータ形式です。
構造化データの仕組みについて

構造化データ用意することで、google検索にコンテンツを理解してもらえます。構造化データは、Schema.orgを使用して指定できます。 Googleの検索の動作の定義は、Googleのドキュメントの方法がいいみたいです。

検索ギャラリー

検索ギャラリーでページに実装する機能を選択してみます。冒頭のエラーの原因は、必須のプロパティがないためにエラーとなっていたようです。

構造化データのタイプ

このサイトではArticle構造化データを追加します。 HUGOのテンプレートに下記のコードを追加します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29


    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "NewsArticle",
        "mainEntityOfPage": {
          "@type": "WebPage",
          "@id": "{{ .Page.Permalink | htmlEscape }}"
        },
        "headline": {{.Title}},
        "image": [
          "{{ .Site.Params.publisherImage | absLangURL }}"
        ],
        "datePublished": {{.PublishDate}},
        "dateModified": {{.Lastmod}},
        "author": {
          "@type": "Person",
          "name": "{{.Site.Params.Author}}",
          "url": "{{ "/about" | absLangURL }}"
        },
        "publisher": {
          "@type": "Organization",
          "name": "{{.Site.Params.Author}}",
          "logo": {
            "@type": "ImageObject",
            "url": "{{ .Site.Params.publisherImage | absLangURL }}"
          }
        }
      }
    </script>

Siteの設定ファイルに情報を追加します。

1
2
3
4
5
6
7


"params": {
  "author": "Persimmon Tokyo",
  "description": "Various memorandum of Persimmon TOKYO",
  "publisherImage": "/images/persimmon.svg",
  "images": ["/images/sidewalk.jpg"],
  "title": "Various memorandum of Persimmon TOKYO"
}

結果

エラーが表示されなくなり、記事の構造化データが検出されるようになりました。