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

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

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

1. 構造化データにするパンくずリストのHTMLとCSS
2. パンくずリストを構造化データにする
- 2.1. 構造化データについて
- 2.2. schema.orgのmicrodataについて
3. パンくずリストを構造化データでマークアップ
4. マークアップした構造化データのエラーをテスト
- 4.1. リッチリザルトテスト
- 4.2. 構造化データテスト(廃止予定)
5. まとめ

構造化データにするパンくずリストのHTMLとCSS

構造化データを記述する土台になる基本的なパンくずリストから作成していきます。

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タグでリンク先の指定をします。

今回の場合、パンくずリストのリスト項目は4項目にしてますが、構造化データをマークアップする部分は1つだけにマークアップ範囲を絞り分かりやすくしています。最終的に完成したパンくずリストのコードは記事の最後に載せています。

HTMLでマークアップしたパンくずリストのCSSも記載しておきます。

.breadcrumb ul{
    background-color: #d6d6d6;
    width: 100%;
    display: flex; 
    padding: 10px;
    overflow-x: auto;
    white-space: nowrap;
}

.breadcrumb li{
    padding-left: 10px;
    font-size: 0.9rem;
}

.breadcrumb li::after{
    font-family: "Font Awesome 5 Free";
    content: '\f105';
    padding-left: 10px;
    color: rgb(65, 65, 65);
}

.breadcrumb li:last-child::after{ content: ''; }

ul要素にdisplay:flexを適用してパンくずリストを横並びに、そしてwhite-space: nowrapの記述でパンくずリストが折り返ししないようにしています。

また折り返しをしないため、スマホ画面ではパンくずリストが長くなった場合には幅がはみ出すので、

overflow-x: autoを指定することで、横スクロールするようにしています。

パンくずのリスト先頭のアイコンはFont Awesomeを読み込んで矢印にしていますが、パンくずリストの最後のリストにはアイコンが表示されないようにlast-child::afterセレクタのcontentの値を空にしています。

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

パンくずリストを長めにしてブラウザの画面を狭くすると以下の画像のように横スクロールします。

これで構造化データを記述していく土台になるパンくずリストは完成なので、作成したパンくずリストに構造化データをマークアップします。

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

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を使用してschema.orgを開始する

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

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

語彙(ごい)という用語が出ましたが、語彙は「ある言語を持っている集まりの数」と言えると思います。今回の構造化データのことで言えばschema.orgのmicrodataで構造化データをマークアップするために必要な語彙集」となるかと思います。

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

http://schema.org/docs/full.html

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

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

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でマークアップする必要な属性や値を軽く頭に入れておきます。

schema
BreadcrumbList
itemscope
itemtype
itemprop

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

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”

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

itemprop属性はプロパティを示すものなのですが、プロパティと言うのは対象に付いている情報を表すようなものです。そのためパンくずリストとしてマークアップしている<a>や<span>タグも対象としてitemprop属性を指定する必要があります。

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

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

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

この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=””の値が違うだけでそれ以外は同じ記述です。

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