パンくずリストを構造化データにしてマークアップするパンくずリストを作成するためにHTMLで要素をリストにしてマークアップするのは比較的簡単なのですが、作成したパンくずリストを構造化データにしてマークアップしたことが一度もなかったので、勉強と練習を兼ねて記事にまとめておこうと思います。移行になっているので、インデックス登録するサイトでパンくずエラーが出ないようにするためにも覚えておきたいことですね。パンくずリストを構造化テストでエラー確認HTMLでパンくずリストを作成HTMLでパンくずリストをマークアップして作成していく場合には、HTMLの<div>タグを親要素にしてclassやid属性をつけておき<ul>か<ol>を使い<li>タグの子要素でパンくずリストになる内容をマークアップします。class=”breadcrumb”></div>でパンくずリストになる要素を囲んでいるだけの簡単なマークアップをしています。パンくずリストのそれぞれのリスト項目にはaタグでリンク先の指定もします。今回の場合パンくずリストのリスト項目は4項目にしてます。構造化データもマークアップする部分は1項目だけに焦点を絞り分かりやすくしています。最終的に完成したパンくずリストのコードは記事の最後に載せています。HTML5から追加された<nav>タグはサイトの主要なメニューで使用することを想定して使わなようにしました。AdvertisementそしてHTMLでマークアップできたパンくずリストには、CSSでパンくずリストらしくするためにスタイルを整えていきます。class=”breadcrumb”></div>の中の<ul>タグに対してCSSでlist-style:none;を指定して消しておきます。class=”breadcrumb”></div>の中の<li>タグに対してdisplay:inline;の指定でインライン形式にします。ここまでの時点で作成したパンくずリストは以下の画像のようなパンくずリストです。横並びにしたパンくずリストはサイトの階層をわかりやすくする目的として見やすくしたいので、順番がわかりやすいように矢印やアイコンなどで階層を示します。'';}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を使用してschema.orgを開始するmicrodataの場合は、HTML5で導入されたタグのセットです。マイクロデータは、値をプロパティに割り当てるためにアイテムと名前と値の組み合わせを記述するためのサポート語彙を使用します。語彙(ごい)という用語が出ましたが、語彙は「ある言語を持っている集まりの数」と言えると思います。今回の構造化データのことで言えばschema.orgのmicrodataで構造化データをマークアップするために必要な語彙集」となるかと思います。パンくずリストを構造化データでマークアップしたいのでパンくずリストに使用する語彙を使用します。構造化データのマークアップに使用する語彙にも、たくさんの種類があるので一度目を通しておくとサイト作成のときに役立ちます。http://schema.org/docs/full.htmlパンくずリストを構造化データでマークアップ構造化データを言葉だけで理解しようとしても分かりづらいことの方が多いかと思います。構造化データを理解したい場合には尚更分かりずらかったので、実際に構造化データをマークアップして追加していきながら進めていきます。</ul></div>実際に先ほどHTMLでマークアップしてパンくずリストを作成した上記のHTMLのパンくずリスト要素に構造化データのmicrodataで必要な属性や値を追加して理解していこうと思います。これから構造化データのmicrodataでマークアップする必要な属性や値を軽く頭に入れておきます。schemaBreadcrumbListitemscopeitemtypeitempropこんな感じの属性や値が登場するんだなくらいで大丈夫です。itemscopeまずitemscopeです。itemscopeはページのブロックで構造化データをマークアップしてある要素をブラウザが特定できるようにできます。「itemscope」アイテムのスコープなのでアイテム範囲ということですね。以下のHTMLのように、パンくずリスト作成した<ul>開始タグにitemscopeの記述を追加します。特定のアイテムに関するものであることを指定できます。itemscopeの記述だけだと、パンくずリストの中身の内容までは伝えられていないため「どんな種類のデータ」かが分かりません。itemtypeitemscopeだけではパンくずリストの情報を伝えきれない部分があるので、itemtype使用します。パンくずリストをマークアップしたブロックの<ul>開始タグにitemscopeの記述をした後にitemtype=””を記述します。</ul></div>そして記述したitemtype直後に属性を使用して、アイテムのタイプを指定します。アイテムのタイプはパンくずリストを意味する「http://schema.org/BreadcrumbList」を記述。itemtypeの属性に記述したURLのhttp://schema.orgは「パンくずリストがschema.orgという団体の構造化データを使用しています」ということの指定をしている部分です。Advertisementhttp://schema.orgの後に指定するBreadcrumbListというのは、schema.orgで使用できるコンテナアイテムで、http://schema.orgのコンテナアイテムのBreadcrumbListで「このブロックはschema.orgの構造化データを使用したパンくずリストですよ」ということを伝えています。BreadcrumbListはリスト内のすべての要素を保持するコンテナアイテムとして使用するということなのですね。itempropパンくずリストの親要素を構造化データとしてマークアップできたら、子要素の<li>や<a>、<span>の開始タグにも構造化データを追加してマークアップします。itemprop属性を使用します。</ul></div>itemprop属性はアイテムにプロパティを追加するために使用します。上のパンくずリストのHTMLで言えば、<ul>の指定したitemscopeで囲んでいる<li></li>や<a><span></span>でマークアップしてるのがアイテムです。分かりやすいようにパンくずリストうち一つの部分を切り分けてみました。content="1"/></li>上のHTML要素はパンくずリストの中でサイトのホームをパンくずにしている部分です。<li>開始タグにitemprop属性を記述して、値には”itemListElement”を指定します。itemtype=”http://schema.org/Listitem”を指定することでパンくずリストの中のホーム部分がリストアイテムだということの指定ができます。itemprop属性はプロパティを示すものなのですが、プロパティと言うのは対象に付いている情報を表すようなものです。そのためパンくずリストとしてマークアップしている<a>や<span>タグも対象としてitemprop属性を指定する必要があります。<a>のリンクにはitemprop=”item”を記述してパンくずリストのアイテムだとわかるようにします。<span>のリンクテキストにはitemprop=”name”を記述して名前だとわかるようにします。Advertisementそして一番下には以下のようなmeta要素の記述も必要です。content=”1′′/>このmeta要素のitemprop属性は値をpositionと指定するのですが、意味はパンくずリストの中での順番を伝えるためのマークアップです。パンくずリストの中で「この部分は一番目です」と言うのをcontent=”1′′/で伝えることができます。パンくずリストで2番目の項目ならcontent=”2′′/です。パンくずリストを構造化テストでエラー確認HTMLでパンくずを作成して、そのパンくずリストに構造化データもマークアップした全てのHTMLが以下です。</ul></div>今回HTMLでマークアップした構造化データは、アイテムの順番を指定するcontent=””の値が違うだけでそれ以外は同じ記述です。このマークアップしたパンくずリストを最後にエラーが出ないか構造化データのテストにかけて確認をします。確認方法は以下の構造化テストができるGoogleのツールを使用します。テストツールURLで構造化データのテストもできますが、今回はパンくずリストのHTMLコードだけテストします。コードをコピペで貼り付けて「テスト実行」をクリックするだけの簡単操作でエラー確認ができます。構造化データのテストをして、もしエラーが出た場合はエラー箇所が赤く表示されるのでクリックすると修正箇所が特定できます。itemprop=”name”>ホーム</span>を削除してエラーを出してみます。エラーになるのですが、1件のエラーがあることを教えてくれて、そのエラーがどこの部分にあるのか、そしてエラーの内容も教えてくれます。このときエラー説明がある赤い説明をクリックすると構造化データのテストでテストしたHTMLコード側でエラー要素をハイライトしてくれます。私の場合、今回初めて構造化データをパンくずリストにマークアップしたのですが、何回か作成したパンくずリストの構造化データでエラーになりました。どの要素がエラーなのかハイライトすることで修正がしやすかったのはもちろんのこと、それ以外にも「この要素はこんな構造化データになる要素なんだ」という理解が構造化データのエラーテストによって深まりました。パンくずリストの作成途中で理解しづらい点ができた場合、パンくずリスト作成途中でも一度、構造化データのエラーテストをしてみると分かりやすくなることもあるかと思います。投稿一覧WordPressとWeb関係のことを趣味的に学んでます。独学なので記事で間違ってることがあればご指摘ください。記事が少しでも誰かの参考になればと思います。2019.08.02HTMLのlabelとinputをidとforで紐付けしてみようと思います。2019.10.09HTMLでimgタグを使用すると画像表示することができます。WordPress.。