HTML、CSS、JavaScriptなどWebに悩む人のネタ帳です。

最近話題のリッチスニペット(構造化データ)ですが、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検索結果にパンくずは表示されるでしょうか。。。後日ご報告します。

このエントリーをはてなブックマークに追加

Comment

Comment Form

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Monthly Archives

Search