
この記事をご覧いただいている皆様へ。
このページは、SEO情報ブログ「ディーエムソリューションズの社員が作った、【SEOまとめ】」にて公開されていた記事であり、2014年12月にデジタルマーケティング研究所へ統合されました。
皆さん、パンくずリスト、使ってますか。
パンくずリスト、ああ、なんてかわいらしく、愛おしい響きなんでしょう。
かの有名な「ヘンゼルとグレーテル」が帰り道で迷わないようにパンをすこしずつちぎって残していったというエピソードに由来するこのパンくずリストは、その名の通りユーザーも検索エンジンも迷子にさせない、それはもう、必須といっていいサイトパーツでは無いでしょうか。
今日はそんなパンくずリストに対する私のこだわりをご紹介します。
さて、そんなパンくずリストですが私がマークアップする際に注意しているポイントが2つあります。
実はul(リストタグ)を使ってパンくずをマークアップする方法やmicrodata形式の適用方法はそれぞれ個別に素晴らしい記事が紹介されているんですが、両方兼ね備えたものがなかったのでここでご案内しようと思います。
別に<div>でも<p>でもいいなんて言わないで!見えないコードを飾るのが江戸っ子の粋なところ。せっかくですからGoogleフレンドリーなセマンティックWeb(意味のあるコーディング)にとことんこだわりましょう。「パンくずリスト」ですからリストタグ(<ul>→<li>で)を使います。まずはHTMLのサンプルをどうぞ。
</li>
<li>
<a href=”http://www.example.com/category/”>カテゴリー名</a> >
</li>
<li>
記事名
</li>
</ul>
続いてスタイルシートで横に並べちゃいましょう。hoverなんかも設定して付けてオシャレに。細かいところは異なりますがこのページのパンくずリストも同じ原理で記述されています。サンプルとしてご覧ください。このページのパンくずリスト
float: left;
text-align: left;
}
#bread-crumb-list li {
display: inline;
padding-right: 2px;
text-align: left;
}
#bread-crumb-list li a {
color: #333333; /* 通常時の文字色 */
}
#bread-crumb-list li a:hover {
text-decoration: underline;
color: #bbbbbb; /* マウスオンした時の文字色 */
}
構造化マークアップというのは特定の形式をHTMLに追記することで、ページ内に含まれる情報に意味付けするソースコード記述方法のことです。
この構造化マークアップはパンくずリストを指し示すのにも使えます。かつてはmicrodata、microformats、RDFaなど、仕様が乱立していましたが紆余曲折ありまして現在はmicrodata形式が主流になりつつあります。
そして、構造化マークアップをパンくずリストに適用すればGoogleの検索結果にパンくずリストが表示されるようになるという、嬉しいメリットがあるんですよ。
以下はGoogleで「構造化マークアップ」と検索した時のこのサイトのスニペット。緑の文字のところに注目してください。
「構造化マークアップ」に関する上記のページが、「HTMLソースコードの最適化」に類する内容であることがひと目でわかるようになりますよね。
下記はulタグを使用したパンくずリストのコードに構造化マークアップを適用したサンプルコード。
</li>
<li itemscope itemtype=”http://data-vocabulary.org/Breadcrumb”>
<a itemprop=”url” href=”http://www.example.com/category/”><span itemprop=”title”>カテゴリー名</span></a> >
</li>
<li>
記事名
</li>
</ul>
一見すると複雑に見えますが、
構造化マークアップによるリッチスニペットがクリック率にどれだけ影響するのかは分かりません。ですが少なくともGoogleとユーザー、両方にとって親切なものになることは確実です。であればWebマスターとして実装しない手はありませんよね。
@tyto_styleさんが上記をWordPressで実現する方法をブログで紹介しています。大変わかりやすい記事ですのでWordPressユーザーの方はこちらも合わせてご覧ください。
Breadcrumb NavXTを使ったパンくずリストの構造化マークアップ(SEOモード)
この記事をご覧いただいている皆様へ。 このページは、SEO情報ブログ「ディーエムソリューションズの社員が作った、【SEOまとめ】」にて公開さ…
この記事をご覧いただいている皆様へ。 このページは、SEO情報ブログ「ディーエムソリューションズの社員が作った、【SEOまとめ】」にて公開さ…
SEO対策を行っていると、「メタキーワード(meta keywords)」という項目に出会うと思います。メタキーワードがどのような役割を果た…
この記事をご覧いただいている皆様へ。 このページは、SEO情報ブログ「ディーエムソリューションズの社員が作った、【SEOまとめ】」にて公開さ…
この記事をご覧いただいている皆様へ。 このページは、SEO情報ブログ「ディーエムソリューションズの社員が作った、【SEOまとめ】」にて公開さ…
GoogleやYahoo!で検索を行った際、みなさんはどのようなサイトをクリックしますか? 検索順位が上位のサイトはもちろんクリックされやす…