一生懸命書いたブログ記事がGoogleの検索結果に表示された時、他のサイトよりもリッチ（詳細）に表示されて目を引くものと、そうでない単純な文字だけのものがありますよね。
その違いを生んでいるのが、サイト内に仕込まれた JSON-LD（ジェイソン・エルディー）による「構造化データ」 です。

この記事では、検索エンジンに「この記事のタイトルはこれで、画像はこれで、パンくずリスト（階層構造）はこれだよ」と正確に伝えるためのJSON-LDを、Hugoテーマ（seo.html）に自動出力させる方法を解説します。

1. 構造化データ（JSON-LD）とは？

Googleなどの検索エンジンは非常に賢いですが、それでもHTMLのタグだけでは「この文章が記事の本文なのか、サイドバーのおすすめ記事なのか」を正確に判別するのは難しい場合があります。

そこで、「このページは『記事（Article）』です。著者は『DIY Hugo』です」と**機械が理解しやすい専用のデータ形式（JSON）**で明記してあげる手法が考案されました。これが構造化データです。

構造化データを導入するメリット

  • リッチリザルトへの対応: 検索結果に記事のサムネイル画像や、パンくずリストがきれいに表示されやすくなります。
  • クリック率（CTR）の向上: 検索結果で目立つため、同じ順位でもアクセス数が増える効果が期待できます。
  • SEO評価の補助: 検索エンジンがサイトの構成を正しく理解する手助けになります。

2. Article（記事）とBreadcrumb（パンくず）の実装

今回は、これまで作った layouts/partials/seo.html ファイルに、2つの重要な構造化データを追加します。

  1. Article: 記事のタイトル、公開日、画像などの情報
  2. BreadcrumbList: サイトの階層構造（HOME > Posts > 記事タイトル）

コードの追記

themes/my-tutorial-theme/layouts/partials/seo.html の末尾（Twitter Cardの設定の下）に、以下のコードを追加してください。

{{/* JSON-LD 構造化データ */}}
{{- if .IsPage -}}
{{/* Article スキーマ (個別記事ページのみ) */}}
...
<script type="application/ld+json">
{{ $article | jsonify (dict "indent" "  ") | safeJS }}
</script>
{{- end -}}

{{- if not .IsHome -}}
{{/* BreadcrumbList スキーマ (ホーム以外の全ページ) */}}
...
<script type="application/ld+json">
{{ $breadcrumb | jsonify (dict "indent" "  ") | safeJS }}
</script>
{{- end -}}

💡ポイント解説：safeJS フィルタが必要な理由

JSON-LDを出力する際、Hugoのテンプレートエンジンによる 「コンテキスト対応エスケープ（Context-aware Auto-escaping）」 という機能が働きます。

Hugoは <script> タグ内をプログラム領域と判断し、jsonify で生成された文字列が「単なるテキスト」として扱われないよう、自動的に二重引用符 " で囲んで JavaScriptの文字列 に変換してしまいます。しかし、JSON-LDはスクリプトタグ内に 生のJSONオブジェクト が直接置かれている必要があります。

そこで | safeJS を追加することで、Hugoに対して「この文字列はエスケープ不要な安全なJavaScript（またはJSON）コードである」と伝え、二重引用符に囲まれるのを防いで正しい構文で出力させています。

3. 実装の確認方法

ビルド（hugo server）したページで右クリックし、「ページのソースを表示（View Page Source）」を開きます。
ソースの下の方に、以下のような記述が追加されていれば成功です！

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "dateModified": "2026-03-03T12:00:00+09:00",
  "datePublished": "2026-03-03T12:00:00+09:00",
  "description": "...",
  "headline": "【SEO対策】JSON-LDによる構造化データ...",
  "image": "https://diyhugo.com/images/json-ld.png",
  "url": "https://diyhugo.com/posts/json-ld/"
  // ...中略...
}
</script>

本番サーバーにデプロイした後は、Googleが提供している リッチリザルト テスト という公式ツールに自分の記事URLを入力することで、「正しく構造化データが認識されているか」をテストすることも可能です。

まとめ

JSON-LDによる構造化データは、導入したからといってすぐに順位が劇的に上がる魔法ではありません。しかし、検索エンジン（ロボット）との正しい対話を行うための「翻訳機」のような役割を果たし、中長期的なサイトの評価向上とクリック率アップに非常に重要な貢献をしてくれます。これを機に、盤石なSEO基盤を完成させましょう！