検索結果に表示されるGoogleでおすすめしているパンくず「microformats」について

投稿日：2014年11月7日

パンくずが無いwebサイトをたまに見かけます。仕事でもリニューアルの案件でサイトの中を見ているとパンくずが無いこともあるので「パンくず」は重要視されてないのかなと思ってしまいます。

photo credit: Lotus Carroll via photopin cc

ページコンテンツ

パンくずっていらないんじゃない？

「閲覧数が多ければパンくずとかSEOとかいらないんじゃない？」なことをクライアントに言われたことがあります。たしかに人気のWebサイト、ブログになればSEOとかやらなくて見に来てくれる人がいるならいませんがサイト立ち上げはほとんど見に来ませんよね。

パンくずのメリット

閲覧ユーザーが今現在どこにいるのか把握ができます。
Googleがサイト構造を理解するためのパンくず

メリットしかなさそうですよね。なのでWebサイト構築の際にはパンくずリストは必ず入れてください。

検索結果にパンくずを反映方法

Googleでオススメしているマークアップ方式を利用する。

microdata（推奨）
microformats
RDFa

この3つの形式をオススメしています。

参考リッチスニペットと構造化データについて

microdata（推奨）のマークアップについて

推奨しているmicrodataをマークアップの例としてあげてみます。

microdata では、HTML タグ（主に＜span＞や＜div＞）内でシンプルな属性を使用して、簡潔でわかりやすい名前をアイテムやプロパティに割り当てます。

divを使ってパンくずを作ります。

<div id="breadcrumb">
    <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
        <a itemprop="url" href="http://sedoriplan.com">
            <span itemprop="title">ホーム</span>
        </a> &gt;
    </div>
    
    <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
        <a itemprop="url" href="http://sedoriplan.com/category/web/">
            <span itemprop="title">Webカテゴリー</span>
        </a> &gt;
	</div>
    
    <div>
    	現在のページ
    </div>
</div>

</a> >

</div>

<span itemprop="title">Webカテゴリー</span>

</a> >

</div>

<div>

現在のページ

</div>

itemscope

itemscopeは範囲を示します。
最初のホームをdivをくくって範囲を指定するためにitemscopeとか記述しています。Webカテゴリーも同様に1個づつ囲む必要があります。

itemtype

itemtypeはいくつか値の例があって

パンくずリスト	http://data-vocabulary.org/Breadcrumb
個人	http://data-vocabulary.org/Person
組織・団体	http://data-vocabulary.org/Organization
音楽	http://schema.org/MusicRecording