SEO関連のあれこれ：構造化データマークアップをしてみよう～パンくず編～

SEO女子のサイトでは度々話題に上がっている構造化データマークアップですが、つじさんは最近勉強をする機会を頂きます。根本の理解は出来ているのですが、なにせ書くとなったら勝手が違う！分かりやすく解説してくれてるとこないのか！

…あれ、そういえば、説明はしたことあるけど、このサイトで実際にマークアップの方法って説明したことなかったんじゃない？

ということで、やりましょう！構造化マークアップを実際にする方法です！

構造化データマークアップ実践

今回やるのはパンくずリストへのマークアップです！どのサイトでも簡単に実装出来るのでぜひぜひやっていただきたいですね。
構造化データマークアップとは何か、という疑問と基礎知識はこちらのページで。
構造化データマークアップ｜SEO女子コラム

それでは早速実践です。今回使うシンタックスは私が好きなので「Microdata」、ボキャブラリーは現在一番使われている「schema.org」を使用します。
基礎となるパンくずはこれを使いましょう！

ソースはこんな感じのソース。CSSで綺麗に成形をしているので、classがついています。分かりやすいよう改行を含めました。

ではこれにパンくずの構造化データマークアップをしていきます。
まず、Microdataを使ってパンくずリストのマークアップをします、という宣言をしなければなりません。Microdataの宣言にはitemscopeを使用します。パンくずリストのことですよ、という宣言はitemtypeで、ボキャブラリーを指定します。
schema.orgの中でパンくずリストを示すのは「http://schema.org/BreadcrumbList」なので、これを指定します。ここまでを入れましょう。

構造化データマークアップはタグの一種なので、divなどに付属させることが出来ます。今回はパンくず全体を<div class="breadcrumbs">が囲んでいたので、こちらに付属させてます。これで最初の宣言が完成です。

では次に、パンくずリストの中に入っているデータたちはリスト要素(順番が付いている！)なんですよ、ということを記述します。itempropを使って、itemListElementを付属させることで、全ての階層に詳細情報をくっつけてあげることが出来ます。そして、それぞれ一つ一つがリストの1個なのだと示すために「http://schema.org/ListItem」を使いましょう。これがschema.orgのリストアイテム用のボキャブラリーです。

こんな感じで、階層全部に情報を入れましょう。ここでポイントなのが<span>タグを使っていることです。付属させるタグがいい場所にない時は、<span>タグを上手く活用します。

最後に、リストにしたアイテム1個ずつに詳しい情報を付けてあげます。ここで付けられるのが、

• URL
• ページのタイトル
• パンくずの順番

を付けることが出来ます。URLは言わずもがな、その階層のURLですね。タイトルも分かるとして、順番というのは何でしょうか？これはパンくずの先頭から考えて何個目の階層なのか、というのを示してあげるものです。
URLは「itemprop="item"」
タイトルは「itemprop="name"」
を使います。これはそのまま、アイテムですよ、名前ですよ、という記述ですね。
順序に関しては「itemprop="position"」を使うのですが、検索エンジンに向けて発信する情報なのでmetaタグを使います。content部分には、何番目の階層なのか、という数字を入れていきましょう。
全て詰め込んでみると…

完成しました！！これでパンくずリストの構造化が出来ました。この記述に間違いが無いか、前にブログでも紹介した構造化データマークアップのテストツールに入れて試してみます。

はい、エラーもなく行けていますね！やったね！

では、実際のソースとしてさっきの構造化データを見てみましょう。タグや付属情報には色がつくので分かりやすいでしょうか？

<div class="breadcrumbs" itemscope itemtype="http://schema.org/BreadcrumbList">
<span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemprop="item" href="http://comic22.sakura.ne.jp/beginner-seogirl.com">
<span itemprop="name">SEO初心者女子がゆく</span></a>
<meta itemprop="position" content="1" />
</span>
>
<span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemprop="item" href="http://beginner-seogirl.com/category/blog/">
<span itemprop="name">SEO女子のブログ</span></a>
<meta itemprop="position" content="2" />
</span>
>
<span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<span itemprop="name">IT女子の日常</span>
<meta itemprop="position" content="3" />
</span>
</div>

さらにさらに、これを一度図にしてみましょう。

どの範囲をどの情報で囲んであげれば良いのか、少しは分かるでしょうか？
これでパンくずリストがマークアップされました。Googleに情報が伝わることで、スニペットに表示されたりと、より見やすいサイトになります。

今回はパンくずリストのマークアップでしたが、他にもこれってどうマークアップするの？という情報はたくさんあると思うので、他のタグについてもやりたいなぁ…。(と、つじさんは思うのだった。)