Googleの検索結果にページの階層を表示してもらうパンくずの美しいマークアップ

  • あとで読みたい人は…

コーディングに奮闘中の@cappeeです。

Googleの検索結果をよく見てみるとこんな感じでページの階層がちゃんと表示されているサイトと、URLだけ掲載されているサイトがあります。

breadcrumbs Googleの検索結果にページの階層を表示してもらうパンくずの美しいマークアップ

この階層を表示させるにはパンくずでよく見る「 › 」を画像ではなくテキストでコーディングする必要があり、コードの美しさやデザイン性からいっても画像置換している人が多いと思います。

Googleさんが公開しているパンくず記述例

<a href="http://www.example.com/dresses">洋服</a> ›
<a href="http://www.example.com/dresses/real">ドレス</a> ›
<a href="http://www.example.com/dresses/real/green">緑のドレス</a>

詳しくはGoogleウェブマスター ツールをご覧ください。

でも、今までリストを使ってきたし、デザインからいっても画像を使って、かつもっとキレイにマークアップする方法もあります。

上記リンクにもあった「Microdata」を指定することで階層を認識してくれます。

Microdataとは

HTML5で使用出来る、HTML文書の中にメタデータを埋め込むための仕様です。こちらを指定して今までと同じマークアップでもパンくずであることを伝えることができます。

リッチスニペット

今回のパンくずだけでなく、Googleの検索結果には「リッチスニペット」と言って、レシピページであればレシピの合計時間、写真、レビュー、製品ページであれば価格やレビューなどが表示されるようになりました。表示させるにはGoogleで指定された方法でマークアップする必要があります。

パンくずのマークアップサンプル

<ol class="breadcrumbs">
 <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
 <a href="/" itemprop="url"><span itemprop="title"> ホーム</span></a>
 </li>
 <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
 <a href="#" itemprop="url"><span itemprop="title">前の階層</span></a>
 </li>
 <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
 <span itemprop="title">表示してるページ</span>
 </li>
</ol>

 

今回こちらの記事を参考にしつつ、実際階層が表示されているサイトを色々と見て自分的に一番美しいパンくずのマークアップになりました。

【パンクズ超重要】Googleに認識されるパンクズとされないパンクズ
Microformats、RDFa、Microdataとschema.orgとリッチスニペット

Pocket
article clipper Googleの検索結果にページの階層を表示してもらうパンくずの美しいマークアップ

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>