ホーム> メディア> HUGO> HUGOのサイトを構造化マークアップに対応する方法

HUGOのサイトを構造化マークアップに対応する方法


約2300字 約10分で読めます
カテゴリー:HUGO

HUGOのサイトを構造化マークアップ(JSON-LD)に対応させる方法を紹介します。

構造化マークアップに対応すると、Googleの評価も上がりやすくSEOの面でメリットがあります。

HUGOに特化した構造化マークアップの方法を紹介するので、表示が早くて構造化に強いサイトを作成するのに役立ててください。

HUGOで構築したサイトを構造化マークアップ(JSON-LD)に対応させる前に

HUGOで構築したサイトを構造化マークアップする前に、

構造化マークアップ(JSON-LD)に対応する意味

HUGOで構築したサイトを構造化マークアップ(JSON-LD)に対応させるのは少し手間がかかるが、SEO対策の効果があります。

構造化マークアップすることで、検索エンジンに対して情報をわかりやすく伝えられるので、結果的にサイトが伸びやすくなります。

構造化マークアップ（JSON-LD）で対応するべき項目

構造化データ(schema)の項目は沢山あるので、どこからどこまで構造化マークアップしたら良いか不安があるかもしれません。

ですが、Google検索セントラル に構造化データに関するドキュメントがあり、構造化マークアップの推奨項目が書いています。

構造化マークアップの範囲で悩んだ場合は、Google検索セントラル のドキュメントを基準に対応範囲を決めると良いでしょう。

次のセクションでは、HUGOで構築したサイトを構造化マークアップ（JSON−LD）していく手順を解説します。

HUGOで構築したサイトを構造化マークアップ（JSON-LD）の実践

HUGOで構築したサイトを構造化マークアップするのは以下の手順で進めます。

  1. どこを構造化マークアップするかリストアップ
  2. 構造化マークアップのベースを作成する
  3. ベースにHUGOの関数を当てはめる
  4. スクリプトをテンプレートに埋める
  5. チェックツールで確認する

いきなりHUGOの関数を当てはめて考えるとハードルが高くなってしまうので、少しずつステップアップする方式で進めましょう。

この方法でやれば、確実にHUGOで構築したサイトを構造化マークアップできます。

どこを構造化マークアップするかリストアップ

まず、HUGOで構築したサイトのどのページや項目を構造化マークアップするか決めましょう。

基本的には、Google検索セントラル のドキュメント記載の範囲をカバーすれば大丈夫でしょう。

HUGOで構築できるサイトは静的サイトなので、Articleの項目を抑えればある程度カバーできるはずです。

また、個別にレシピやHow-toなどをマークアップしたい場合は、別途リストアップしましょう。

構造化マークアップに関するサイトは、head内やbody最下部でマークアップする前提のサイトが多いです。

たしかに、head内やbody最下部でマークアップする方が綺麗ですが、たまにレシピやHow-toを構造化する場合はbodyの任意の場所でマークアップしても問題ありません。

構造化マークアップのベースを作成する

マークアップする項目が決まったら、ベース部分を作成しましょう。

構造化マークアップのベースは、MERKLEの「Schema Markup Generator」 を使って作成すると便利です。

下記は、MERKLEの「Schema Markup Generator」 を使って作成した、articleに関する構造化マークアップのベースです。

type@article
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "ここにタイトル",
  "image": [
    "画像1のURL",
    "画像2のURL"
  ],  
  "author": {
    "@type": "Person",
    "name": "著者名",
    "url": "著者のURL"
  },  
  "publisher": {
    "@type": "Organization",
    "name": "サイト名",
    "logo": {
      "@type": "ImageObject",
      "url": "サイトURL"
    }
  },
  "datePublished": "公開日",
  "dateModified": "更新日"
}
</script>

わかりやすいように、日本語で項目の中を仮で埋めてみました。

このように先にベースを作成すると、ゴールのイメージがつかみやすくなります。

実際、日本語で書いた部分を見ると、HUGOの関数でカンタンに置換できる項目が多いのもわかるはずです。

HUGOの関数を当てはめる

では、直前に作ったマークアップのベースにHUGOの関数を当てはめていきましょう。

articleのマークアップベースにHUGOの関数を当てはめてみました。

type@article
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "{{ .Title }}",
  "image": [
    {{ .Title }}
  ],  
  "author": {
    "@type": "Person",
    "name": "{{ .Params.author }}",
  },    
  "publisher": {
    "@type": "Organization",
    "name": "{{ .Site.Title }}",
    "logo": {
      "@type": "{{ .Params.image }}",
      "url": "{{ .Site.Params.logo | absURL }}"
    }
  },
  "datePublished": "{{ .Date }}",
  "dateModified": "{{ .Lastmod }}"
}
</script>

サイトの設定によって調整する場所はあると思いますが、そのままコピペでも使えるはずです。

スクリプトをテンプレートに埋める

構造化マークアップ（JSON−LD）のスクリプトができたら、テンプレートに埋め込みましょう。
head内か、bodyの下部に入れれば大丈夫です。

私は記事ページ用テンプレートのbody下部に入れてます。

テンプレートに追加で関数を書いて、ページごとにスクリプトを出し分けても良いですが、今回はそこまでは実装してません。

チェックツールで確認する

スクリプトをテンプレートに埋めて、サイトをビルドしたら上手く実装できているかをチェックしましょう。

構造化マークアップできているかは、以下の確認ツールを使います。

2つのツールの違いですが、リッチザルトテスト はGoogleのリッチリザルトに対応しているデータを確かめるツールで、スキーマ マークアップ検証ツール は構造化データ（schema.org）全てをチェックするツールです。

Googleの推奨項目以外も構造化した場合は、スキーマ マークアップ検証ツール で検証した方が良いですが、推奨項目を対応しただけならリッチザルトテスト での確認で問題ありません。

カテゴリー:HUGO

HUGOサイトをPWA対応させる方法

HUGOのPaninateで一覧ページを出し分ける方法