HTML パンくずリストを構造化データにしてマークアップする

パンくずリストを作成するためにHTMLで要素をリストにしてマークアップするのは比較的簡単なのですが、作成したパンくずリストを構造化データにしてマークアップしたことが一度もなかったので、勉強と練習を兼ねて記事にまとめておこうと思います。

Googleが構造化データの種類でdata-vocabularyサポート終了からschema.org へ移行になっているので、インデックス登録するサイトでパンくずエラーが出ないようにするためにも覚えておきたいことですね。

HTMLでパンくずリストを作成

HTMLでパンくずリストをマークアップして作成していく場合には、HTMLの<div>タグを親要素にしてclassやid属性をつけておき<ul>か<ol>を使い<li>タグの子要素でパンくずリストになる内容をマークアップします。

<div class="breadcrumb">
　<ul>
　　<li><a href="#"><span itemprop="name">ホーム</span></a></li>
　　<li>パンくず1</li>
　　<li>パンくず2</li>
　　<li>パンくず3</li>
　</ul>
</div>

上記のマークアップしてるHTMLの場合は、<div class=”breadcrumb”></div>でパンくずリストになる要素を囲んでいるだけの簡単なマークアップをしています。

またパンくずリストのそれぞれのリスト項目にはaタグでリンク先の指定もします。

またHTML5から追加された<nav>タグはサイトの主要なメニューで使用することを想定して使わなようにしました。

そしてHTMLでマークアップできたパンくずリストには、CSSでパンくずリストらしくするためにスタイルを整えていきます。

/*オリジナルパンくず作成*/
.breadcrumb{
　display: inline-block;
　background: #22c4b7;
　margin: 0px;
　padding: 0px;
　border-radius: 50px;
}
.breadcrumb ul{
　list-style: none;
　padding: 0 20px;
}
.breadcrumb li{
　display: inline;
　font-weight: bold;
　color: #555;
}

HTMLのマークアップでは<ul></ul>タグでリスト形式になってるので、リスト先頭の黒ポチを消すために<div class=”breadcrumb”></div>の中の<ul>タグに対してCSSでlist-style:none;を指定して消しておきます。

そしてパンくずリストを横並びにするので、<div class=”breadcrumb”></div>の中の<li>タグに対してdisplay:inline;の指定でインライン形式にします。

ここまでの時点で作成したパンくずリストは以下の画像のようなパンくずリストです。

横並びにしたパンくずリストはサイトの階層をわかりやすくする目的として見やすくしたいので、順番がわかりやすいように矢印やアイコンなどで階層を示します。

.breadcrumb li:after{
　content: '>';
　color: tomato;
　padding-left: 2px;
}
.breadcrumb li:last-child:after {
　content: '';
}

CSSの擬似要素で::afterがあります。これをパンくずリストのセレクタに使用することでパンくずリストのリストの間に擬似要素を作り矢印やアイコンを表示することができます。

このとき擬似要素で表示した矢印やアイコンがパンくずリストの一番右にも表示されてしまいます。表示させないようにするためにlast-child:afterでパンくずリストの一番最後の擬似要素は表示させないようにします。

これでHTMLとCSSでのパンくずリストは完成です。次に作成したパンくずリストに構造化データをマークアップします。

パンくずリストを構造化データにする

HTMLでマークアップしただけのパンくずリストでは、検索エンジンにパンくずリストの内容を伝えきれていません。

もちろんCSSもHTMLでマークアップした要素にデザインするためのものなので検索エンジンに伝えられることは、デザインに関してのことになってしまいます。

このときHTMLでマークアップしたパンくずリストの内容を検索エンジンにもっと詳しく理解してもらうための方法としてあるのが「構造化データ」でマークアップする方法です。

構造化データについて

構造化データとは、HTMLでマークアップしたタグの他に、ページの情報やデータを一定の構造に従って記述することでHTMLだけでは伝えきれない情報を検索エンジンが理解できるようにタグ付けすることです。

例えば今回作成しているパンくずリストのHTMLを例にした場合。

<li>ホーム</li>というようにリスト形式でテキスト文字列「ホーム」を表示するよう検索エンジンに指示しています。ですが、<li></li>のHTMLタグはそのテキスト文字列の意味に関する情報までは理解できません。

検索エンジンが<li></li>で理解できるのは「リスト形式のコンテンツなんだな」というだけです。

ですがパンくずリストでマークアップしている<li></li>に構造化データもマークアップすることで、検索エンジンはリスト形式でパンくずリストの中身のそれぞれの要素が「どんな情報記載なのか」理解できるのです。

schema.orgのmicrodataについて

schema.orgという共同コミュニティがあります。schema.orgは検索エンジンがインデックスしているページのコンテンツを把握しやすいような構造化データのスキーマ作成、管理、促進を行なっています。

schema.org

そんなschema.orgにはパンくずリストにも使用できる構造化データを作成する方法として「microdata」「JSON-LD」「RDFa」の3種類の書き方があります。

今回のパンくずリストには構造化データの種類の中でも「microdata(マイクロデータ)」を使用しました。

microdataの場合は、HTML5で導入されたタグのセットです。

マイクロデータは、値をプロパティに割り当てるためにアイテムと名前と値の組み合わせを記述するためのサポート語彙を使用します。

パンくずリストを構造化データでマークアップしたいのでパンくずリストに使用する語彙を使用します。構造化データのマークアップに使用する語彙にも、たくさんの種類があるので一度目を通しておくとサイト作成のときに役立ちます。

パンくずリストを構造化データでマークアップ

構造化データを言葉だけで理解しようとしても分かりづらいことの方が多いかと思います。初めて構造化データを理解したい場合には尚更分かりずらかったので、実際に構造化データをマークアップして追加していきながら進めていきます。

schema.org/BreadcrumbList

<div class="breadcrumb">
　<ul>
　　<li><a　href="#"><span>ホーム</span></a></li>
　　<li>パンくず1</li>
　　<li>パンくず2</li>
　　<li>パンくず3</li>
　</ul>
</div>

実際に先ほどHTMLでマークアップしてパンくずリストを作成した上記のHTMLのパンくずリスト要素に構造化データのmicrodataで必要な属性や値を追加して理解していこうと思います。

これから構造化データのmicrodataでマークアップする必要な属性や値を軽く頭に入れておきます。

こんな感じの属性や値が登場するんだなくらいで大丈夫です。

itemscope

まずitemscopeです。itemscopeはページのブロックで構造化データをマークアップしてある要素をブラウザが特定できるようにできます。

「itemscope」アイテムのスコープなのでアイテム範囲ということですね。

以下のHTMLのように、パンくずリスト作成した<ul>開始タグにitemscopeの記述を追加します。

<div class="breadcrumb">
　<ul itemscope>
　　<li><a　href="#"><span>ホーム</span></a></li>
　　<li>パンくず1</li>
　　<li>パンくず2</li>
　　<li>パンくず3</li>
　</ul>
</div>

追加したitemscopeにより、<ul>…</ul>ブロックに含まれるHTML が特定のアイテムに関するものであることを指定できます。

しかしitemscopeの記述だけだと、パンくずリストの中身の内容までは伝えられていないため「どんな種類のデータ」かが分かりません。

itemtype

itemscopeだけではパンくずリストの情報を伝えきれない部分があるので、itemtype使用します。

パンくずリストをマークアップしたブロックの<ul>開始タグにitemscopeの記述をした後にitemtype=””を記述します。

<div class="breadcrumb">
　<ul itemscope itemtype="http://schema.org/BreadcrumbList">
　　<li><a　href="#"><span>ホーム</span></a></li>
　　<li>パンくず1</li>
　　<li>パンくず2</li>
　　<li>パンくず3</li>
　</ul>
</div>

そして記述したitemtype直後に属性を使用して、アイテムのタイプを指定します。

アイテムのタイプはパンくずリストを意味する「http://schema.org/BreadcrumbList」を記述。

itemtypeの属性に記述したURLのhttp://schema.orgは「パンくずリストがschema.orgという団体の構造化データを使用しています」ということの指定をしている部分です。

http://schema.orgの後に指定するBreadcrumbListというのは、schema.orgで使用できるコンテナアイテムで、http://schema.orgのコンテナアイテムのBreadcrumbListで「このブロックはschema.orgの構造化データを使用したパンくずリストですよ」ということを伝えています。

BreadcrumbListはリスト内のすべての要素を保持するコンテナアイテムとして使用するということなのですね。

itemprop

パンくずリストの親要素を構造化データとしてマークアップできたら、子要素の<li>や<a>、<span>の開始タグにも構造化データを追加してマークアップします。

itemprop属性を使用します。

<div class="breadcrumb">
　<ul itemscope itemtype="http://schema.org/BreadcrumbList">
　　<li itemprop="itemListElement" itemscope itemtype="http://schema.org/Listitem">
　　　<a itemprop="item" href="#"><span itemprop="name">ホーム</span></a>
　　　<meta itemprop="position" content="1"/>
　　</li>
　　<li>パンくず1</li>
　　<li>パンくず2</li>
　　<li>パンくず3</li>
　</ul>
</div>

itemprop属性はアイテムにプロパティを追加するために使用します。

上のパンくずリストのHTMLで言えば、<ul>の指定したitemscopeで囲んでいる<li></li>や<a><span></span>でマークアップしてるのがアイテムです。

分かりやすいようにパンくずリストうち一つの部分を切り分けてみました。

<li itemprop="itemListElement" itemscope itemtype="http://schema.org/Listitem">
　<a itemprop="item" href="#"><span itemprop="name">ホーム</span></a>
　<meta itemprop="position" content="1"/>
</li>

上のHTML要素はパンくずリストの中でサイトのホームをパンくずにしている部分です。

<li>開始タグにitemprop属性を記述して、値には”itemListElement”を指定します。

そしてitemscopeとitemtypeで

itemscope itemtype=”http://schema.org/Listitem”

を指定することでパンくずリストの中のホーム部分がリストアイテムだということの指定ができます。

<a>のリンクにはitemprop=”item”を記述してパンくずリストのアイテムだとわかるようにします。

<span>のリンクテキストにはitemprop=”name”を記述して名前だとわかるようにします。

そして一番下には以下のようなmeta要素の記述も必要です。

<meta itemprop=”position” content=”1″/>

このmeta要素のitemprop属性は値をpositionと指定するのですが、意味はパンくずリストの中での順番を伝えるためのマークアップです。

パンくずリストの中で「この部分は一番目です」と言うのをcontent=”1″/で伝えることができます。パンくずリストで2番目の項目ならcontent=”2″/です。

パンくずリストを構造化テストでエラー確認

HTMLでパンくずを作成して、そのパンくずリストに構造化データもマークアップした全てのHTMLが以下です。

<div class="breadcrumb">
　<ul itemscope itemtype="http://schema.org/BreadcrumbList">

　　<li itemprop="itemListElement" itemscope itemtype="http://schema.org/Listitem">
　　　<a itemprop="item" href="#"><span itemprop="name">ホーム</span></a>
　　　<meta itemprop="position" content="1"/>
　　</li>

　　<li itemprop="itemListElement" itemscope itemtype="http://schema.org/Listitem" >
　　　<a itemprop="item" href="#"><span itemprop="name">パンくず1</span></a>
　　　<meta itemprop="position" content="2">
　　</li>

　　<li itemprop="itemListElement" itemscope itemtype="http://schema.org/Listitem" >
　　　<a itemprop="item" href="#"><span itemprop="name">パンくず2</span></a>
　　　<meta itemprop="position" content="3">
　　</li>

　　<li itemprop="itemListElement" itemscope itemtype="http://schema.org/Listitem" >
　　　<a itemprop="item" href="#"><span itemprop="name">パンくず3</span></a>
　　　<meta itemprop="position" content="4">
　　</li>
　
　</ul>
</div>

今回HTMLでマークアップした構造化データは、アイテムの順番を指定するcontent=””の値が違うだけでそれ以外は同じ記述です。

このマークアップしたパンくずリストを最後にエラーが出ないか構造化データのテストにかけて確認をします。

確認方法は以下の構造化テストができるGoogleのツールを使用します。

URLで構造化データのテストもできますが、今回はパンくずリストのHTMLコードだけテストします。

コードをコピペで貼り付けて「テスト実行」をクリックするだけの簡単操作でエラー確認ができます。

構造化データのテストをして、もしエラーが出た場合はエラー箇所が赤く表示されるのでクリックすると修正箇所が特定できます。

例えば今回作成したパンくずリストで構造化データをマークアップした要素のホームから<span itemprop=”name”>ホーム</span>を削除してエラーを出してみます。

当然エラーになるのですが、1件のエラーがあることを教えてくれて、そのエラーがどこの部分にあるのか、そしてエラーの内容も教えてくれます。

このときエラー説明がある赤い説明をクリックすると構造化データのテストでテストしたHTMLコード側でエラー要素をハイライトしてくれます。

私の場合、今回初めて構造化データをパンくずリストにマークアップしたのですが、何回か作成したパンくずリストの構造化データでエラーになりました。

もしパンくずリストの作成途中で理解しづらい点ができた場合、パンくずリスト作成途中でも一度、構造化データのエラーテストをしてみると分かりやすくなることもあるかと思います。