🔍

リッチリザルトに対応してサイト訪問率を上げよう

2024/04/29に公開

リッチリザルトとは

リッチリザルトは、通常の青色リンクよりも高度な機能を持つ、Google サービス(Google 検索など)での検索結果です。リッチリザルトには、カルーセル、画像などテキスト以外の要素を含めることができます。
https://search.google.com/test/rich-results?hl=ja

皆さんもGoogleで検索をかけた際に、豪華な検索結果が出たことは無いでしょうか。

例えば、Google Earthの検索結果では「評価」の項目が星のアイコンと共に表示されています。

こういった検索結果があると、思わずクリックしたくなるかと思います。
すなわち、自分のサイトを見てもらえる率が上がるという事です。

では、これはどのように表示させているのでしょうか?

構造化データマークアップとは

リッチリザルトを反映するには、「構造化データ」をHTML内に埋め込む必要があります。
https://developers.google.com/search/docs/appearance/structured-data/intro-structured-data?hl=ja

例えば、こういったコードになります。(上記のサイトから抜粋)

<script type="application/ld+json">
    {
      "@context": "https://schema.org/",
      "@type": "Recipe",
      "name": "Party Coffee Cake",
      "author": {
        "@type": "Person",
        "name": "Mary Stone"
      },
      "datePublished": "2018-03-10",
      "description": "This coffee cake is awesome and perfect for parties.",
      "prepTime": "PT20M"
    }
    </script>

HTMLに上記コードを埋めると、検索した際、下記のように表示されます。

既存のサイトで見てみる

私はエビフライが好きなので、エビフライで検索をかけて出てきたDELISH KITCHENのサイトを見てみたいと思います。
https://delishkitchen.tv/recipes/166874897794990572

まず、「エビフライ」で検索した際に出てきた表示を見てみましょう。
赤で囲んだ部分にパンくずリストが表示されている事が分かるかと思います。
こちらはどのように表示させているのでしょうか?

サイトに入って、右クリックで「ソースを表示」を押下してみると、コードの画面が開きます。
その中の下記が、パンくず情報を表示している箇所になります。

<script data-n-head="ssr" type="application/ld+json">{"@context":"http://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","name":"TOP","position":1,"item":"https://delishkitchen.tv/"},{"@type":"ListItem","name":"魚介料理","position":2,"item":"https://delishkitchen.tv/categories/756"},{"@type":"ListItem","name":"揚げ物(魚介)","position":3,"item":"https://delishkitchen.tv/categories/19628"},{"@type":"ListItem","name":"エビフライ","position":4,"item":"https://delishkitchen.tv/categories/17540"},{"@type":"ListItem","name":"お家で挑戦!基本のエビフライ","position":5,"item":"https://delishkitchen.tv/recipes/166874897794990572"}]}</script>

リッチリザルトテストのページで確認してみます。
https://search.google.com/test/rich-results

先程のコードをリッチリザルトテストに貼ってみると、正しくパンくずの情報が読み取られることが分かります。

どうやって書くか

ではどのように書けば良いでしょうか。
パンくずであれば、下記に記載されているコードを参考にデータを入れてください。
https://developers.google.com/search/docs/appearance/structured-data/breadcrumb?hl=ja

書き終わったら、先ほどのリッチリザルトテストにコードを貼って、きちんと認識されるか確認してみましょう。また、デプロイ後であればURLを貼るだけで確認してくれます。

今回はパンくずで説明しましたが、それ以外にも見本が大量にあるので、こちらから使いたい構造化データのコードを採用して下さい。これで検索された際の見栄えが良くなり、サイト訪問率が上がる事でしょう。
https://developers.google.com/search/docs/appearance/structured-data/search-gallery?hl=ja

注意点

下記にあるよう、FAQとHowToの表示は変更がかかっているようです。

今後、よくある質問(FAQPage 構造化データ)のリッチリザルトは、よく知られていて信頼のおける政府ウェブサイトおよび医療ウェブサイトに対してのみ表示されます。そのほかのサイトでは、リッチリザルトは定期的に表示されなくなります。
https://developers.google.com/search/blog/2023/08/howto-faq-changes?hl=ja

おわりに

日本はまだまだ利用率が低いようなのでチャンスです!
https://ohdo.at21.jp/web/schema01/

Discussion