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

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

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

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

 

構造化データにするパンくずリストの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つだけにマークアップ範囲を絞り分かりやすくしています。最終的に完成したパンくずリストのコードは記事の最後に載せています。

 

Advertisement

 

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の場合は、HTML5で導入されたタグのセットです。

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

 

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

 

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

 

 

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

 

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

 

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という団体の構造化データを使用しています」ということの指定をしている部分です。

Advertisement

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”を記述して名前だとわかるようにします。

 

Advertisement

 

そして一番下には以下のような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がおすすめしているのが「リッチリザルトテスト」です。

 

 

https://search.google.com/test/rich-results

 

上記のURLでリッチリザルトのページが開きます。

リッチリザルトの画面でパンくずの構造化データエラーをチェックする場合には「コード」にタブを切り替えてマークアップした構造化データのHTMLをコピペで貼り付けます。

構造化データにしたパンくずリストがWebページに組み込んである場合にはリッチリザルトの画面でタブを「URL」に切り替えて構造化データのエラーをチェックしたいページのURLをコピペします。

コードかURLを貼り付けたらオレンジ色の「コードをテスト」をクリックします。するとタブに貼り付けた構造化データ、または構造化データをマークアップしているURLのページのテストが自動で開始されます。

 

 

リッチリザルトテストでマークアップしたパンくずリストの構造化データのテストが終わるとテスト結果が分かります。上の画像のように「このページはリッチリザルトの対象です」と構造化データのテスト結果になれば、テストしたパンくずリストは構造化データとして問題なしです。

 

 

HTMLでパンくずリストをマークアップした構造化データのテストでエラーになる場合は、上の画像のようにテスト結果の説明文が赤文字で表示されます。

 

 

例えば「一部のマークアップがリッチリザルトの対象ではありません」と構造化データエラーになった場合、「検出されたアイテム数」に表示されいるエラーが構造化アイテムのどのマークアップ部分で、何が指定していなくてエラーになっているか確認できます。

エラーになったテスト結果内容とパンくずの構造化データを照らし合わせてパンくずリストの修正をしてから再度リッチリザルトテストでエラーチェックをします。

 

構造化データテスト(廃止予定)

 

マークアップした構造化データのエラーテストで「構造化データテスト」もあるのですが、今後は構造化データテストは廃止になる予定です。

 

 

構造化データ テストツール

 

参考程度に構造化データテストの説明をしておきますが、先に説明した「リッチリザルトテスト」と同じやり方で構造化データにしたパンくずリストの「コード」か「URL」をコピペで貼り付け「テストを実行」をクリックすると自動でテストが開始します。

 

 

2020年12月7日の時点では「構造化データテスト」でマークアップした構造化データのエラー結果のときに画面左下に上の画像のように「このツールは廃止されます。」と表示されます。

構造化データテストでパンくずリストをマークアップした構造化データのテストをした後にツールの廃止告知が表示するので、ページが開けるうちは構造化データテストが使用できるかと思いますが、今後はGoogleがおすすめするリッチリザルトを優先して使用した方が良さそうです。

 

まとめ

 

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

ですが、構造化データのどの部分がエラーになったのか、HTMLでマークアップしたパンくずリストを構造化データテストすることで、「この要素はこんな構造化データになる要素なんだ」という理解を深めることもできました。

 

HTMLでパンくずリストのマークアップが途中だとしても、理解しづらい構造化データの記述があった場合、いったん構造化データをテストしてみると分かりやすくなることもあるかと思います。

HTMLカテゴリの最新記事