グーグルの検索結果に一味(ひとあじ)追加したい、そう、リッチリザルト(リッチスニペット)のことだ。検索結果には、通常、リンクと説明しか表示されない。
*イメージです。実際の掲載方法とは異なります。
イメージとしては、このようなものである。講座名、日時が追加されている(赤枠)。これがリッチリザルト。もし、タグマネージャー講座に興味のある方がこの検索結果を見たら、この日程なら都合が良いと、すぐにリンクをクリックするかもしれない。
リッチスニペットの対象ページは、記事、イベント、映画、レストラン等がある
私の場合、いくつかWebマーケに関わる講座を開講しているので、イベントで考えてみたのだ。
飲食店経営者の場合は、お客様からの評価、商品イメージ等が掲載可能である。最近でもないが、モバイルでは商品の写真が検索結果に出たりするのも、リッチリザルトと言えよう。
*実は、これからご紹介する方法を使わなくても写真が掲載されているケースがある。グーグルは様々な方法でリッチリザルトを展開しているようだ。
リッチリザルトに必要な構造化のための記述方法を、まずは2つ提示する。
ここでは、構造化の詳しい説明は省く。この2つは、グーグルの構造化データテストツールやリッチリザルトテストに合格している。(2019年3月)
JSON-LDを使ったschema.orgの記述方法
<script type="application/ld+json"> { "@context": "http://schema.org", "@type": "Event", "name": "グーグル広告基礎講座", "startDate": "2019-03-17T16:00:00+09:00", "location": { "@type": "Place", "name": "新宿第五葉山ビル7階", "address": { "@type": "PostalAddress", "streetAddress": "新宿5-11-30", "addressLocality": "新宿区", "postalCode": "1600022", "addressRegion": "東京都", "addressCountry": "日本" } }, "image": "https://asiastars.org/wp-content/uploads/2017/01/100.jpg", "description": "Google 広告の基本的な使い方、検索連動型広告、ディスプレイネットワーク型広告等", "endDate": "2019-03-17T18:00:00+09:00", "offers": { "@type": "Offer", "url": "https://www.street-academy.com/myclass/2291", "price": "5500", "priceCurrency": "JPY", "availability": "http://schema.org/PreOrder", "validFrom": "2019-03-03T16:30+09:00" }, "Performer": "アジアスターズ株式会社代表 土肥 秀幹" } </script>
Microdataを使ったschema.orgの記述方法
<div class="time" itemscope itemtype="http://schema.org/Event"> 講座名: <span itemprop="name">Google タグマネージャー基礎講座</span> 日時: <div class="day">03/17(日) </div> <span content="2019-03-17T13:00:00+09:00" itemprop="startDate">13:00</span>〜<span content="2019-03-17T15:00:00+09:00" itemprop="endDate">15:00</span> *質問の応答等により、最大30分程度時間が延長される可能性があります。 会場:<div itemprop="Location" itemscope itemtype="http://schema.org/Place"><span itemprop="name">新宿第五葉山ビル7階会議室</span> 住所:<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"><span itemprop="addressLocality">新宿区</span><span itemprop="streetAddress">新宿5-11-30 </span> <meta itemprop="addressRegion" content="東京都"> <meta itemprop="addressCountry" content="日本"> <meta itemprop="postalCode" content="1600022"> </div> </div> 講師: <img src="https://asiastars.org/wp-content/uploads/2017/01/100.jpg"/> <meta itemprop="image" content="https://asiastars.org/wp-content/uploads/2017/01/100.jpg"> <span itemprop="Performer">アジアスターズ株式会社代表 土肥 秀幹</span> <h3>タグマネ講座主な内容</h3> <span itemprop="description"> タグマネージャー(タグマネ)とは? なぜタグマネが必要なのか? タグ・トリガー・変数 タグマネ実例 タグマネの構成 デバッグツール紹介 こんな時どうする </span> <h3>タグマネ実例</h3> 1)アナリティクス 2)アドワーズ(コンバージョン・リマーケ) 3)ヤフースポンサードサーチ(コンバージョン・リターゲ) 4)UID*カスタムディメンションも 5)スクロール 6)クリックイベント取得(uid連携も) 7)仮想PV設定 8)e-commerce設定 *内容は変更となる可能性があります。 お申込み: <div itemprop="offers" itemscope itemtype="http://schema.org/Offer"> 価格:<span itemprop="price">7500</span>円<meta itemprop="priceCurrency" content="JPY" /> <link itemprop="availability" href="http://schema.org/PreOrder" /> <span> <a href="https://www.street-academy.com/myclass/7576?sessiondetailid=513353" itemprop="url">https://www.street-academy.com/myclass/7576?sessiondetailid=513353</a> <meta itemprop="validFrom" content="2019-03-05T16:00+09:00"> </div> </div>
さて、残り1つ、データハイライターである。
*データハイライターは構造化データ マークアップ支援ツールとなりました。
1)サーチコンソール
2)以前のツールとレポート
3)Web Tools
4)テストツール
5)構造化データ マークアップ支援ツール
の順で「構造化データ マークアップ支援ツール」をお使いください。使い方はデータハイライターと同様と考えていただいて良いです。
データ ハイライターを使ったschema.org記述方法
サーチコンソール(従来版)のデータハイライターで、講座名、場所などを選択し完了ボタンクリック。
JSON-LDを使ったschema.orgのコードが表示されるので、それをコピー。必要なページにペーストする。
掲載結果
上記3種の設定(構造化)をそれぞれGoogle広告講座、Googleタグマネージャー講座、Googleサーチコンソール講座各ページに対して行った。
*実施後、それぞれサーチコンソールのURL 検査から「インデックス登録をリクエスト」(従来のFetch As Googleに相当するクローラーのリクエスト)を行った。
なお、構造化は同じ日に連続的に実施している。その後2時間以内に結果がでた。
グーグル広告講座スニペット(JSON-LDで構造化)
タグマネージャー講座スニペット(Microdataで構造化)
サーチコンソール講座スニペット(データハイライターで構造化)
データハイライターでは構造化データテストツール、リッチリザルトテスト、両方ともパスしていない。私のサイトではデータハイライターの結果が出なかった。
*(追記)あいかわらず、構造化データテストツール、リッチリザルトテスト両方ともパスしていないが、設定から4日後に結果が出た。以下の通りである。