最新コラム
-
-
-
-
Webサイト制作Web開発
【shopify】テーマをカスタマイズするためのLiquidの書き方
-
Webサイト制作Webデザイン
Webデザインの初心者必見!Webデザインの勉強方法を徹底解説
リッチスニペットとは、通常よりも多くの情報が盛り込まれている「視覚的アピール度」の高いスニペットのことです。とは言え、表示させる方法が分からなくて諦めている方も多いのではないでしょうか。そこで今回は、設定方法・HTMLの書き方・テスト方法などをまとめてみました。
目次
リッチスニペットとは、「レビューの点数」や「パンくずリスト」といった通常より多くの情報まで検索結果に表示されるスニペットを指しています。
より多くの情報を盛り込んでいるため、「豊な=rich」という単語が名称に反映されているのでしょう。
ただし、名称は統一されておらず、下記の全てがリッチスニペットを表しています。
名称の種類
ちなみに、最も新しい名称は「リッチリザルト」です。
スニペットには下記の3種類があり、最大の違いは掲載される情報量です。
スニペットの種類と特徴
情報量が多くなるほど人目を引く反面、表示される難易度は高くなります。
「実際の見た目を画像で確かめたい!」という方は、下記の記事を参照して下さい。
関連記事
ここからは、特にニーズの高い11種類のリッチスニペットをご紹介します。
なお、「もっと自社のサービスに適したタイプはないのかな?」と悩まれているからは、全種類のリッチスニペットが紹介されているGoogle検索セントラルの「検索ギャラリーを見る」をチェックしてみましょう。
にて、全種類のリッチスニペットが紹介されていまする
商品の価格・在庫・特徴・レビューなどが表示されます。ECサイトや個人輸入のオンラインサイト、通販アフィリエイトサイトなどにおすすめです。
パンくずリストとは、ユーザーが今WEBサイト内のどの位置にいるのかを視覚的に分かりやすくするために、トップページから該当ページまでのリンク経路を表示したものです。
パンくずリストについては下記の記事で解説しています。
関連記事
ランキングサイトや口コミサイト、オンライン通販サイトなどで多用されているのがレビューのリッチスニペットです。
レビューの星の部分は黄色表示されます。また、どのくらいの人からレビューが投稿されているのかも数字で表示されます。
通常のスニペットの下に、直近のイベントについて「いつ・どこで・何が」行われるのかが表示されます。
イベントサイトやチケットサイトを運営している場合は、ぜひ掲載したいところです。
大手不動産サイトや通販サイトで見かけた方もいると思います。
特にサイト全体のコンテンツ数が多かったり複雑な階層だったりした場合は、検索窓から直接キーワードを入力してアクセスできるので、ユーザーにとって便利な機能です。
検索窓(サイト内検索)については下記の記事でも解説しています。
関連記事
料理レシピ・DIY・ガーデニング・市販家具の組み立て方など、ハウツー情報が集客に役立つサイトにおすすめ。実物のイメージが伝わるほど、CVアップが期待できます。
レシピのリッチスニペットは、youtubeなどの動画やレビューが含まれているのが特徴。
ユーザーの目に留まりやすいので、該当するコンテンツには積極的に設定した方が良いでしょう。
会社概要は、その会社がどのような組織なのか知りたい方に役に立つ情報です。会社の規模や事業など、その会社がどのような業務を手掛けているかが一目でわかります。
特に、就職や転職活動をされている方にとっては、事業内容や採用情報の有無など欲しい情報が一目で見つかりるので、利便性の高い機能と言えるでしょう。
「会社概要」と「商品情報」をミックスした使用になっているのが特徴。
商品情報と同様、レビュー・価格帯・営業時間・休店日なども一緒に表示されます。今後は、モバイルユーザー向けの仕様が必須となるでしょう。
「求人・業種・エリア」などのキーワード検索でヒットするリッチスニペットは、ひと際サイズが大きく、いくつかの類似情報がまとめて表示されるのが特徴です。
給与・勤務形態・残業の有無など、ユーザーが興味を示す情報が掲載され、類似求人へ誘導できる仕組みになっています。
検索下位よりテキストが長文で、下部に「お申込みについて」や「料金(お支払い)について」などのリンクがあり、直接アクセスできるようになっています。
関連記事
結論から言うと、通常のスニペットからリッチスニペットへと昇進しても、直接的なSEO効果はありません。
Googleも長らく「リッチスニペットと検索ランキングは無関係」と、否定的な立場を貫いています。
とはいえ、通常のスニペットよりも人目を引くのは周知の事実。
そこでここからは、リッチスニペット化がSEOに与える間接的な効果についてご紹介します。
リッチスニペットのメリット
最大のメリットは、何と言ってもオーガニック検索からの流入増に伴うCTRの向上が見込めるという点でしょう。
通常のSERP(検索結果)には、似たようなスニペットが並んで表示されており、どのコンテンツにアクセスすべきか迷ってしまうユーザーも少なくありません。
そんな中、明らかに他とは違うリッチスニペットが表示されていれば、ユーザーに大きなインパクトを与えるのは当然でしょう。
他のサイトより目立っているというだけで、ユーザーのアクションを後押ししてくれるのです。
リッチスニペットは表示面積が通常より広い分、より多くの情報が盛り込まれているうえ、レビューの星マークや画像や動画といった視覚的にアピールできる要素が満載です。
直接的な表現は、最短距離で答えに辿り着こうとしているユーザーにとって良質なヒントとなり、結果的にユーザーエクスペリエンスがアップします。
検索結果に反映される速さは、クローラーがどれだけ早く情報を処理できるかどうかで決まります。
つまり、リッチスニペット化するために作成した構造化データはクローラーが理解しやすいHTMLに設置していますので、通常より短時間で検索結果に反映される可能性が高いのです。
構造化データを介してクローラーに情報を伝えていることで得られるメリットは、検索結果の反映速度だけではありません。
反映速度と同じ原理で、検索結果における正確性のアップも期待できます。
手動によるリッチスニペットの設定プロセスを大きく分類すると、下記の2ステップに分かれています。
リッチスニペットの設定手順
なお、後述する支援ツールまたはデータハイランダーであれば一連の作業をまとめて行えますが、トラブルが発生した時に対処できるよう、手書きの設定方法も把握しておいた方が良いでしょう。
関連記事
リッチスニペットを検索結果に表示させるには、検索エンジン(クローラー)にコンテンツの内容を正しく伝える必要があります。
しかし、人間なら「佐藤」という文字を見ただけで「これは名前だな!」と理解できますが、検索エンジンはあくまでロボットですから、サイト内に書かれているテキスト情報を「文字の羅列」としてしか認識できません。
そこで重要となるのが構造化データのマークアップ、すなわち「HTMLのタグ付け」です。
HTMLに「addressタグ」が付いていれば、検索エンジンは「連絡先」だと正しく理解できるようになります。
つまり、構造化データのマークアップとは、検索エンジンにとって難解な表記方法を理解しやすい形式に書き換える作業なのです。
構造化データをマークアップする方法は、下記の3種類から選べます。
マークアップ方法の種類
Googleの公式サイトではサポートしている支援ツールを紹介していますが、最もメジャーなのはGoogle Search Consoleの機能を使う「データハイライター」です。
同じレイアウトのコンテンツを「ページ群」として認識してくれるので、まとめてタグ付けしてくれます。
ただし、データハイライターは全ての構造化データに対応している訳ではありません。
下記に該当している場合のみ、有力な選択肢となります。
データハイライターが使用できるケース
手書きで構造化データのマークアップを行う場合は、あらかじめ使用する「ボキャブラリー」と「シンタックス」を決めておかなければなりません。
どちらも数種類の規格が存在していますが、その全てがGoogleのサポート対象という訳ではありません。
今回は、Googleが推奨している「schema.org」というボキャブラリーと、「JSON-LD」というシンタックスを使った構造化データのマークアップ方法について解説します。
手書きでマークアップした構造化データの設置場所は、「ページの末尾」が最もおすすめです。
設置場所の影響
構造体が悪影響を受けないよう、bodyの閉じタグ(</body>)の手前などに設置しましょう。
ここからは、「schema.org」と「JSON-LD」を使った構造化データの書き方について解説します。
HTMLの記述例
上記のリッチスニペットを検索結果に表示させるには、下記のように記述します。
<script type="application/ld+json"> { "@context": "https://schema.org/", "@type": "Product", "name": "商品名", "description": "説明文", "image": [ "https://example.com/photos/16x9/image.jpg", "https://example.com/photos/4x3/image.jpg", "https://example.com/photos/1x1/image.jpg" ], "sku": "商品アイテムID", "mpn": "グローバル識別子", "brand": { "@type": "Brand", "name": "空気清浄機" }, "review": { "@type": "Review", "reviewRating": { "@type": "Rating", "ratingValue": "4", "bestRating": "5" }, "author": { "@type": "Person", "name": "レビュー人物名" } }, "aggregateRating": { "@type": "AggregateRating", "ratingValue": "4.6", "reviewCount": "449" }, "offers": { "@type": "Offer", "url": "http://www.example.com/item", "price": "17360", "priceCurrency": "JPY", "priceValidUntil": "2022-12-31", "itemCondition": "http://schema.org/NewCondition", "availability": "http://schema.org/InStock" } } </script>
上記の構造化データは、表している内容が異なる3つのパートで成り立っています。
各パートの内容
下記の12項目を書き換えるだけで、別商品のリッチスニペットとして使えます。
※必須ではないものを除くと、書き換える項目はさらに少なくなります。
書き換える個所
より詳しく知りたい方は、こちらGoogle検索セントラル「Product」をご参照ください。
上記のリッチスニペットを検索結果に表示させるには、下記のように記述します。
<script type="application/ld+json"> { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [ { "@type": "ListItem", "position": 1, "name": "SEO対策なら株式会社ペコプラ", "item": "https://pecopla.net/" }, { "@type": "ListItem", "position": 2, "name": "SEO対策", "item": "https://pecopla.net/seo-column" }, { "@type": "ListItem", "position": 3, "name": "SEO内部対策", "item": "https://pecopla.net/seo-column/internal-countermeasure" } ] } </script>
押さえておくべきポイントは、下記の3点です。
ポイント
今回のパンくずリストは3層なので、ポジション1~3に沿って「各要素のURL」と「ページのタイトル」を書き替えるだけで、簡単に転用できるようになります。
より詳しく知りたい方は、こちらGoogle検索セントラル「パンくずリスト」をご参照ください。
リッチスニペットを検索結果に表示させるには、下記のように記述します。
<script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Event", "name": "イベント名", "startDate": "2022-06-01", "endDate": "2022-06-30", "eventAttendanceMode": "https://schema.org/OfflineEventAttendanceMode", "eventStatus": "https://schema.org/EventScheduled", "location": { "@type": "Place", "name": "イベント名", "address": { "@type": "PostalAddress", "name": "開催場所の住所" } }, "image": [ "https://example.com/photos/16x9/image.jpg", "https://example.com/photos/4x3/image.jpg", "https://example.com/photos/1x1/image.jpg" ], "description": "説明文", "offers": { "@type": "Offer", "url": "https://example.com/event", "price": "3000", "priceCurrency": "JPY", "availability": "https://schema.org/InStock", "validFrom": "2022-04-01" }, "performer": { "@type": "PerformingGroup", "name": "パフォーマー名" }, "organizer": { "@type": "Organization", "name": "運営会社", "url": "https://example.com/" } } </script>
書き換える個所
より詳しく知りたい方は、こちらGoogle検索セントラル「Event」をご参照ください。
完成した構造化データは、必ずテストを行ってからHTMLに内に設置しましょう。
構造化データをテストする方法は、下記の3種類があります。
テスト方法
テスト結果で構造化データが正しくマークアップされていると実証されたら、HTML内の末尾に設置して完了です。
「URL」または「HTMLコード」のどちらでも有効性を確認することができます。
PCとスマホの切り替えが可能なので、両方確認してみましょう。
テストの手順
関連記事
こちらは、「Google Search Console」の拡張機能を使ったテストです。
リッチリザルトレポートが装備されており、構造化データを設置するだけで「拡張メニュー」一覧が表示され、結果のステータスが一目で分かる仕組みになっています。
ステータスの種類
期間を置いてもリッチスニペットとして表示されない時は、下記の項目をチェックしてみましょう。
リッチスニペットを表示させるには、下記の全項目を満たしていなければなりません。
チェック項目
ただし、構造化データのマークアップが完璧で、なおかつ上記のチェック項目を全て満たしているからと言って、100%スニペット化に成功する訳ではありません。
リッチスニペットとして検索結果に表示されるのは、ほんの一握りのページだけ。
検索キーワードを扱っているサイトが多いほど、難易度は高くなります。
関連記事
リッチスニペット化は、より多くのユーザーに閲覧してもらえる有効な手段ですが、万能ではありません。
下記のような注意点についても理解しておきましょう。
注意点
リッチスニペットの設定方法は、構造化データをマークアップするコツさえ掴めれば、さほど難しくはありません。
手軽な支援ツールを使うのも賢い方法ですが、トラブルに備えて一度は手書きで試しておくと良いでしょう。
必ずしも希望通りにリッチスニペットとして表示されるとは限りませんが、間接的なSEO効果が期待できるので、挑戦してみる価値は十分にあります。