SMART LLC

Google検索結果にパンくずリストを表示する方法

公開日:2014/10/11

既存のパンくずリストをmicrodataでマークアップしてgoogleの検索結果にパンくずリストを表示できたのでメモ。

microdataとRDFa

リッチスニペット-パンくずリストを見ながら作業した。
microdataとRDFaどちらでマークアップしても結果は同じぽいけどRDFaでマークアップしてる人はあまりいない?
Googleはmicrodataを推奨してるので今回はmicrodataを採用。

マークアップ

修正前。

<ul class="breadcrumbs">
	<li>
		<a href="https://www.smartllc.jp/"><i class="fa fa-home"></i></a>
	</li>
	<li>
		<a href="https://www.smartllc.jp/blog/">開発ブログ</a>
	</li>
	<li>
	</li>
</ul>

修正後。

<ul class="breadcrumbs">
	<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
		<a href="https://www.smartllc.jp/" itemprop="url"><span itemprop="title"></span><i class="fa fa-home"></i></a>
	</li>
	<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
		<a href="https://www.smartllc.jp/blog/" itemprop="url"><span itemprop="title">開発ブログ</span></a>
	</li>
	<li>
	</li>
</ul>

ブログ記事ページのパンくずリスト。
ホーム>開発ブログ>ブログ記事の3階層。
liタグの「itemscope itemtype="http://data-vocabulary.org/Breadcrumb"」でパンくずですよて定義する。
aタグの「itemprop="url"」でURLですよて定義する。
階層名をspanタグで囲って「itemprop="title"」でタイトルですよて定義する。
すごく簡単だった。
が、このホームページのパンくずリストはホームをアイコンフォントのみで表現している。
最上層のタイトルは定義してもしなくても必ずルートディレクトリが表示されるので恰好は悪いがspanタグを空にしてみた。

確認

表示された。リンクもされてる。

最上層のspanタグは空でもOKだった。
アイコンフォントをspanタグに入れてみても結果は同じだった。

spanタグが空でも表示されるけどspanタグ自体省略したら表示されなかった。
2階層目のページでは親の1階層(ホーム)だけマークアップしてるけどこれも表示されない。
2階層以上マークアップしないと効果がないみたいだ。
あとandroidではパンくずリストは表示されるけどリンクされてなくて押せない。
ちなみにリッチスニペットによるインデックス順位への影響は一切ないとGoogleが言っている。
それでもないよりはいいでしょう。
次は何をしよう。サイトマップかな(:3_ヽ)_

SHARE