リッチスニペット(構造化データ)でGoogle検索結果にパンくずリストを表示させる
最近話題のリッチスニペット(構造化データ)ですが、Googleも採用に積極的のようで、SEO的観点からも注目されています。
そこで、今回、導入編としてGoogleのガイドラインに習ってパンくずリストを装飾して、Google検索結果への影響を試したい思います。
Breadcrumbs | Structured Data | Google Developers
例えば、以下のようなパンくずを装飾します。
HOME > Structured Data > sample1 > sample2 > リッチスニペット(構造化データ)でGoogle検索結果にパンくずリストを表示させる
装飾にはJSONやRDFAが使えるようですが、今回は比較的導入が容易なMICRODATAをhtmlソースに組み込みます。
以下、これまでのhtmlコードです。
<ol class="breadcrumb"> <li><a href="http://web.helog.jp">HOME</a></li> <li><a href="http://web.helog.jp/category/structured-data/">Structured Data</a></li> <li><a href="http://web.helog.jp/category/structured-data/sample1/">sample1</a></li> <li><a href="http://web.helog.jp/category/structured-data/sample1/sample2/">sample2</a></li> <li>リッチスニペット(構造化データ)でGoogle検索結果にパンくずリストを表示させる</li> </ol>
ガイドラインに従い、MICRODATAを組み込むと以下のようになります。
<ol class="breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList"> <li><a href="http://web.helog.jp">HOME</a></li> <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="http://web.helog.jp/category/structured-data/" itemprop="url"><span itemprop="title">Structured Data</span></a></li> <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="http://web.helog.jp/category/structured-data/sample1/" itemprop="url"><span itemprop="title">sample2</span></a></li> <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="http://web.helog.jp/category/structured-data/sample1/sample2/" itemprop="url"><span itemprop="title">sample2</span></a></li> <li>リッチスニペット(構造化データ)でGoogle検索結果にパンくずリストを表示させる</li> </ol>
プロパティ「position」でリストの深さを指定できるようですが、今回はなりゆきのため、タグを省略しています。
リッチスニペットが正しく組み込まれているかどうかは、Googleの同サイトにテストツールが公開されているので、チェックも楽ちんです。
Structured Data Testing Tool | Google Developers
さて、本サイトに組み込んでみましたが、Google検索結果にパンくずは表示されるでしょうか。。。後日ご報告します。
コメントする