WebページをGoogle リッチカードに対応する

概要

Googleのリッチカードに対応すると、検索結果に追加の情報を表示できます。

スキーマ

以下のリッチカードに対応しています。
ただし、リッチカードを記述しても必ず検索結果でリッチカードの情報が使われるとは限らないようです。
JSONのフォーマットやどのような情報をJSON内に記述できるかは schema.org のサイトで確認できます。

コード

HTMLのHeadタグ内に下記のコードを記述します。
今回は、Organization のリッチカードの記述を記載します。

タグの例

<html>
  <head>
    <!-- 中略 -->
  <script type="application/ld+json">
    {
      "@context": "http://schema.org",
      "@type": "Organization",
      "url": "http://www.ipentec.com",
      "logo": "http://www.ipentec.com/images/logo.png"
    }
  </script>
    <!-- 中略 -->
  </head>
  <body>
    <!-- 中略 -->
  </body>
</html>

動作確認

Googleのリッチリザルトテスト(https://search.google.com/test/rich-results)を利用します。

リッチリザルトテストのページを表示します。下図のページが表示されます。
WebページをGoogle リッチカードに対応する:画像1

ページ中央のテキストボックスに確認したいページのURLを入力します。入力後[URLをテスト]ボタンをクリックします。
WebページをGoogle リッチカードに対応する:画像2

ページのテストが始まります。
WebページをGoogle リッチカードに対応する:画像3

テストが完了すると下図のテスト結果のページが表示されます。
WebページをGoogle リッチカードに対応する:画像4

Organization のリッチカードの場合の例です。[ロゴ]のセクションが表示され、Organization のタイプとURL、ロゴ、設立日などの情報が検出されていることが確認できます。
WebページをGoogle リッチカードに対応する:画像5