schema.orgでパンくずリストなどを記述する

パンくずリストの構造化マークアップなどにdata-vocabulary.orgを使っていましたが、これは今では古くなっています。そこでschema.orgの記述に変更してみました。HTML5文法チェッカーでも、構造化テストツールでもエラーはありません。

schema.orgとdata-vocabulary.orgの関係

パンくずリストの構造化マークアップは以前は、data-vocabulary.orgを使っていました。私のサイトもこれを使っていました。data-vocabulary.orgは、今となっては古くなり、その役割をschema.orgに譲っています。

Googleもschema.orgのパンくずリストを推奨しています。そこで、このサイトでもschema.orgを使ったパンくずリストの記述に変更しました。

パンくずリストとは

パンくずリストの例の画像

ウェブサイト楽天 が巨大になってくると、閲覧しているウェブページが、サイト内でどのような位置関係にあるのかを把握するのが難しくなってきます。

そこで、この画像のように、トップページから該当ページへの道筋を表示することが行われています。これがパンくずリスト(breadcrumb)と呼ばれるものです。

具体的には次のようなものです。「このページのタイトル」以外はクリック可能なリンク表示になっています。

トップページ名 > 大項目名 > 小項目名 > このページのタイトル

パンくずリストの効果

パンくずリストがグーグルの検索結果ページに表示されると少しだけ目立ちます。パンくずリストが検索結果に表示されると、URLだけ表示している他のサイトより、日本語表示のパンくずリストは少しだけ目立つようになります。

これによって、少しでもアクセスが増えれば良いのですがどうでしょうか。それよりも、ユーザーにとってウェブページが見やすくなる効果の方が大きいでしょう。

schema.orgでのマークアップ方法

まずschema.org/BreadcrumbListとschema.org/ListItemを使って、ListItemをBreadcrumbListに埋め込み、構造化マークアップをしました。

パンくずリストの順番をitemprop="position"を用いてマークアップします。これはmetaタグで記述する必要があります。contentの番号はパンくずリストの順番を示しています。メタタグは次のurlの記述と前後してもかまいません。

次に、パンくずリストが示すページのURLを、itemprop="item"を用いてマークアップします。また、パンくずリストのラベルをitemprop="name"を用いてマークアップします。

私のサイトでは、ルート以下のディレクトリが1階層しかないので、パンくずリストのリンクがあるのは2項目だけです。3項目目はリンクの無いページのタイトルの一部を表示させています。

schema.orgでパンくずリストを記述した例

私のサイトで行なっている、schema.orgでパンくずリストをマークアップした具体例を次に示します。全体をdivタグで記述して、spanタグとmetaタグとaタグを使っています。

よくリスト(olタグとliタグ)を使っている例がありますが、別にリスト表示にする必要はありません。ご自分の好きなタグやふさわしいと思うタグを使ってください。

<div id="breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList">
　　<span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
　　　　<meta itemprop="position" content="1" />
　　　　<a itemprop="item" href="/"><span itemprop="name">アスナロネット</span></a> &gt;
　　</span>
　　<span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
　　　　<meta itemprop="position" content="2" />
　　　　<a href='/ant/' itemprop='item'><span itemprop='name'>アンテナ</span></a> &gt;
　　</span>
　 ダイポールアンテナ
</div>

実際はPHPで記述してHTMLを自動的に書き出す

実際私は、この辺のスクリプトをPHPで記述して、HTMLコードを自動的に書き出しています。

<a href='/ant/' itemprop='item'><span itemprop='name'>アンテナ</span></a> &gt;

この行と

 ダイポールアンテナ

この行は自動的にPHPで生成しています。具体的には、PHPの explode() 関数を使ってファイルのディレクトリ(フォルダ)名などを取得してページ毎に変化させています。

具体的にはパンくずリストの作り方のページを参照してください。

schema.orgで著者情報を記述

ついでに、schema.orgを使って簡単な著者情報を構造化マークアップで記述してみました。

<div itemscope itemtype="http://schema.org/WebPage">
<span itemprop="author" itemscope itemtype="http://schema.org/Person">Author:
<span itemprop="name"><a href="https://www.facebook.com/******" rel="author">氏名</a></span>
</span>
</div>

schema.orgを設定したらHTMLエラーになる場合

私は、schema.orgで著者情報を記述したら、HTML5の文法チェックで次のようなエラーになりました。

「The itemprop attribute was specified, but the element is not a property of any item.」

これは、翻訳すると、「itemprop属性が指定されましたが、その要素はどの項目のプロパティでもありません」という意味で、最初の行で「 itemscope itemtype="http://schema.org/WebPage"」を追加したらOKでした。

リッチスニペット テストツールで確認します

構造化マークアップができたら、グーグルの「構造化データテストツール」を使ってうまく設定できているかどうかを確認します。テストツールにURLを指定して「テストを実行」ボタンをクリックします。抽出された構造化データにちゃんと表示されていればOKです。