構造化データの作り方
ホームページに構造化データを作成すると検索エンジンでコンテンツ内容が認識されやすくなり、検索結果がリッチリザルトで表示されやすくなります。
例えば、「カサブランカ」のページの場合、それが花の名前を意味するのか、レストランの名前を意味するのか、あるいはモロッコの地名や映画のタイトルを意味するのかが分かりにくいです。
そのような場合、映画の場合は「Movie」、レストランの場合は「ローカルビジネス」、あるいは花の栽培方法なら「ハウツー」など、それぞれのタイプに合った構造化データを作成することでコンテンツ内容が正確に認識されやすくなります。
この構造化データはセマンティック・ウェブに関するものになりますが、コンテンツの意味内容を正確に認識してもらいやすくなるメリットがあります。
構造化データ作成による「リッチリザルト」のメリット
構造化データを作成することにより、検索結果では画像付きなどのリッチリザルトで表示されやすくなるメリットがあります。
例えば、当サイトではホームページの作り方に関するハウツー情報を公開しているため、構造化データについては主に「HowTo」タイプを選択しており、このような<script>形式で作成した構造化データをフッター部分に差し込んでいます。
"@type": "HowTo"と記載していますが、この場合は「ハウツー」タイプの構造化データになり、検索結果が通常よりも表現力豊かな形式で表示されるようになります。
あるいは、"@type": "Article"で作成すれば、「記事」タイプの構造化データとなり、検索結果ではこのように表示されるかもしれません。
もしくは、"@type": "Question"を選択すれば、「よくある質問」でこのように表示されるようになります。
加えて、"@type": "BreadcrumbList"を選択すれば、URLに「パンくずリスト」が表示されるようになります。
1ページに複数の構造化データを設置することができますので、全ページに「パンくずリスト」や「記事タイプ」を作成しつつ、「ハウツー」や「よくある質問」については当てはまるページのみ個別に対応しておくとよいでしょう。
ちなみに、「ハウツー」のなかでも料理の作り方に関するハウツーについては「レシピ」を選択する必要があり、意味や意図の違いを考えて最適なタイプを選択されることをおすすめします。
CMSサイトの場合は個別ページでの対応はなかなか難しいと感じていますが、一般的な「HTMLサイト」ならJSON-LD形式の<script>を作成して挿入するだけで簡単に対応できます。
また、AMP化していなくても構造化データの機能は利用できますが、AMPに対応しておいた方がより多彩なリッチリザルト機能を利用できるようになります。
実際に構造化データの作る際、HTMLタグ属性を利用する「microdata」や「RDFa」などもありますが、Googleが推奨している「JSON-LD(ジェイソン-エルディー)」形式で作成するのがおすすめです。
構造化データの機能タイプを選択
構造化データのタイプには、レシピやハウツー、ニュース、レビュー、ローカルビジネスなど多岐にわたっていますので、まずは自サイトにあった構造化データを選択します。
Google検索セントラルの公式サイトではギャラリーが公開されていますので、そちらの「スタートガイド」を参考にされるとよいでしょう。
→ 検索ギャラリーとリッチリザルトを見る | Google 検索セントラル
一般的なサイトの場合、以下のタイプを選択できるかもしれません。
■レシピ
料理関連のレシピを公開している場合は「レシピ」を選択します。料理関連ではない作り方の場合は「レシピ」ではなく、「HowTo」を選択することをおすすめします。
■ぱんくずリスト
通常、検索結果でのぱんくずリストはURLで表示されますが、その名前をカスタマイズしたり、複数のカテゴリに当てはまる記事に設定することができます。
■ローカルビジネス
お店などを運営しているローカルビジネスの場合、「Googleマイビジネス」と同様、「ローカルビジネス」の構造化データも作成しておくとよいでしょう。
■ハウツー
作り方や方法などのハウツー情報を公開しているコンテンツに使用します。ただし、料理の作り方の場合は「レシピ」を選択します。
■Article
大手ニュースサイトの場合は「Article」を利用するとよいかもしれません。ただし、Seach Consoleにて大きな画像が必要とエラーが出てくるため、画像を用意するのが難しいかもしれません。
Article構造化データの画像サイズについては、「1200px × 675px」や「1200px × 900px」あたりの大きなサイズを用意することをおすすめします。
加えて、「datePublished」の公開日時の指定は必須ですが、当サイト運営者の場合、公開日時の代わりにファイルの作成日を指定しています。この「作成日」についてはファイルを右クリックし、「プロパティ」の箇所で調べることができます。
もしファイル数が多い場合、以下のコマンドでチェックするとよいでしょう。
PowerShell "Get-ChildItem | Select-Object Name, @{Name=\"CreationTime\"; Expression={$_.CreationTime.ToString(\"yyyy-MM-ddTHH:mm:ss+09:00\")}} | Sort-Object CreationTime"
調べたいフォルダに移動し、パスの窓の箇所に「cmd」と入力してエンターを押し、コマンドプロンプトを起動して上記のコマンドを実行するだけです。
すると、ファイルの「作成日」が以下のような一覧で表示されます。
一方、「更新日」で表示する場合、上記の「CreationTime」の箇所を「LastWriteTime」に書き変えて実行すれば出てくるはずです。
これらをテキストファイルで出力する場合、上記コマンドの最後に「 > sample.txt」を加えて実行すれば、同じフォルダ内にテキストファイルで出力されるはずです。
ただし、パソコンの買い替えなどでファイルを移転した場合、コピーした日時が作成日となるため、その場合は更新日の方が近いかもしれません。上記の画像でも作成日が2012年3月13日となっていますが、アクセス解析上は2008年10月10日からデータが残っており、正確な日時をチェックするのは難しいと思います。
同様に、「dateModified」の更新日については必須ではありませんが、現在の時刻を入力しておくとよいでしょう。
■よくある質問
こちらもビジネスサイトで設定しておくことをおすすめします。
これらの「タイプ」を選択したのち、「スタートガイド」のテンプレートを参考に、それぞれの構造化データをJSON-LD形式で作成していきます。
当ホームページでも5つほど対応しており、Search Consoleの「拡張」の箇所から確認できますが、「Article」の画像の大きさについては「AMP」の箇所から警告が来ていました。
「ぱんくずリスト」や「Article」の構造化データは簡単に作成できますが、「レシピ」や「ハウツー」については、材料や費用、所要時間、手順、画像などで設定する項目が多く、少し面倒かもしれません。
JSON-LDテンプレートを参考に<script>を作成
QAやレストラン、映画、お店やサービスなどの場合、「構造化データ マークアップ支援ツール」を利用すると便利です。
マークアップしたい箇所を選択し、タグ付けをすることでのJSON-LDコードを作成することができます。
もし利用したいタイプがない場合、上記Google検索の公式サイトにて、それぞれテンプレートのサンプルが掲載されていますので、そちらを参考にJSON-LDの<script>を作成します。
ぱんくずリストが分かりやすいかと思いますが、テンプレートではパンくずの一つの階層が波括弧でこのようになっているはずです。
{ほにゃ}
これを階層ごとにカンマで続けて並んでいます。
{ほにゃ1},{ほにゃ2},{ほにゃ3}
これを角括弧で括るとこのようになります。
[ {ほにゃ1},{ほにゃ2},{ほにゃ3} ]
これをさらに波括弧で括ってこのようになっています。
{ ほにゃらら [ {ほにゃ1},{ほにゃ2},{ほにゃ3} ] }
複数を指定する場合は、これを複数作成し、さらにカンマで続けて角括弧で括る感じになります。
「レシピ」や「ハウツー」、あるいは「ローカルビジネス」の場合は複雑になりますが、おおむね波括弧と角括弧、カンマの組み合わせとなっているため、あらかじめメモ帳などに必要な要素を書き出してから作成することをおすすめします。
例えば、このページの場合は以下のようになります。
■「ハウツー」の例
タイトル:構造化データの作り方
説明:構造化データの作成する際、HTMLタグ属性を利用する「microdata」形式や「RDFa」形式などがありますが、Googleが推奨している「JSON-LD」形式で作成することをおすすめします。
費用:なし
素材:テンプレートサンプル
道具:なし
ステップ1:構造化データの機能タイプを選択
指示:Google検索セントラルのギャラリーを参考に、レシピやハウツー、ニュース、レビュー、ローカルビジネスなど、自サイトにあった構造化データのタイプを選択します。
ステップ2:テンプレートを参考にscriptを作成
指示:各タイプの「スタートガイド」にテンプレートのサンプルが掲載されていますので、そちらを参考にscriptを作成します。
ステップ3:フッターなどにJSON-LDのコードを挿入
指示:HTMLファイルに作成したコードを挿入します。場所はフッターなどでも機能します。
ステップ4:リッチリザルトテストでエラーの確認
指示:「リッチリザルトテスト」でエラーがないか確認します。また、Search Consoleでも警告が出ていないかを確認します。
所要時間:1時間
また、ページ内のステップの箇所の見出しタグなどに「id属性」を埋め込んでおき、「#step1」などの形で指定します。
レシピの場合は時間の単位が難しいかもしれません。
Pは「Period」の略で継続時間の意味になりますが、P1Mで一カ月間(Month)の意味になります。分(Minutes)もMですが、この場合はタイムのTを付けてPT1Mで1分間の意味になります。PT1M30Sで1分30秒、PT2H30Mで2時間半、1日半でP1DT12Hなどとなりますが、Pのあと「年月日」と「時分秒」の間にはTを入れます。
そのため、「"prepTime": "PT20M","cookTime": "PT30M","totalTime": "PT50M",」などとあった場合、下ごしらえ(prepare)で20分、調理時間で30分、合計50分などといった意味になります。
あとは、テンプレートにそのまま埋め込んでいけばJSON-LDコードの完成です。
■JSON-LDスクリプトの貼り付け位置
公式サイトにて動画で解説されていますが、コードの貼り付け位置はHEADタグ内の終わりでもBODYタグの終わりでも機能するとのことです。リッチリザルトは検索結果での表示機能のため、直ちにコードを読み込む必要はないと思いますので、当サイト運営者はサイトの表示を優先させて一番最後に置いています。
リッチリザルトテストでエラーを確認
コードの貼り付けが完了しましたら、リッチリザルトテストでエラーが出ないかを確認します。
また、プレビュー機能でどのように表示されるかも確認します。「記事」タイプなどで画像が表示されない場合、画像を推奨サイズまで大きくすることをおすすめします。
ただし、実際の検索結果では必ずしもリッチリザルトで表示されないこともあるため、表示されるされないは検索キーワードなどによっても違うと思います。
また、時間を置いてSearch Consoleでも警告が出ていないかを確認します。
できるだけ、画像なども設定して完全な形で公開することをおすすめします。