すなばいじり

はてなブログを使って、トンピーを揃えるまで止めないブログ。ふっくらかわいい。

パンくずリストの考え方を整理する

更新されたエントリーがあります。

psn.hatenablog.jp

 

 

構造化テストツールが新しくなり、機能変更・追加が行われたというお話で、今までOKだった記述がNGになったというネタを見て「これはこういう意味ですよ。」という解説を書いておかないとなぁと考えていたら一週間くらい過ぎそうなので、いい加減書いておきます。

 

構造化テストツールのチェックが厳しくなった?

パンくずリストの部分で起こっているようです。
厳密に言えばそうなります。

f:id:psne:20150304213629p:plain
この部分ですね。きちんとリンクを置かないとエラーが表示されるようになった。というお話のようです。

そういえば、このエントリーを書いてもシブタクさん気づかないですね。
IDコールできません。

 

そもそもどういう事だろう?

一例として、簡単にパンくずを表現すると

カテゴリ > 今見ているページのタイトル

このような表現になります。

HTML+microdataマークアップすると、このようになります。

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.example.com/category" itemprop="url">
<span itemprop="title">カテゴリ</span>
</a> ›

</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.example.com/detail/ima-miteru-page" itemprop="url">
<span itemprop="title">今見ているページのタイトル</span>
</a>
</div>

 

今までの構造化テストツールでは、このような記述でもOKとなっていました。

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.example.com/category" itemprop="url">
<span itemprop="title">カテゴリ</span>
</a> ›
</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<span itemprop="title">今見ているページのタイトル</span>
</div>

今見ているページのリンクは無くても問題として検出されませんでした。(Aタグの部分を省略)

現在の構造化テストツール仕様では、こちらはエラーになります。
データが足りていないので、当然ですね。

 

じゃあ、どうすれば良いの?

足すか、引くか。どちらかを決めて修正しましょう。

欠落している必須プロパティを追加する(足す)

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.example.com/detail/ima-miteru-page" itemprop="url">
<span itemprop="title">今見ているページのタイトル</span>
</a>
</div> 

 足元(今見ているページ)にも置きます。

f:id:psne:20150304213630p:plain
正しくマークアップされ、「問題ありません」となりました。

 

欠落している必須プロパティを削除する(引く)

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.example.com/category" itemprop="url">
<span itemprop="title">カテゴリ</span>
</a> ›
</div>
<div>
<span>今見ているページのタイトル</span>
</div>

カテゴリ表示のみを対象にします。

f:id:psne:20150304213631p:plain
正しくマークアップされ、「問題ありません」となりました。

 

再確認:足元にパンくずリストを置かなくても良いの?

今回説明しているエラー表示はデータが足りていない為に出ているものであり、足元に置く必要を指摘しているエラーではない為、特に必要は無いようです。


リッチ スニペット - パンくずリスト - ウェブマスター ツール ヘルプ

こちらのページのパンくずリストは、このエントリーを書いた時点では、足元に置いてありません。
足元に置いても、もちろんエラーにはなりません。

もう一つ。複数パンくずリストの例を挙げていますが、こちらも足元には置いてありません。

「このページは何処に属するの?」という事が解れば良いようです。

 

 

すなばいじりで提供しているやつについて 

psn.hatenablog.jp

 

JSON-LDなど

Googleの「検索結果内の検索ボックス」を設定するやつを作った - すなばいじり

 

Googleにsocial profile を教えるやつを作った - すなばいじり

 

色々ありますよ。

 

大はてな実験 - すなばいじり

 

NEW リズムでともだち こぐまのトンピー

NEW リズムでともだち こぐまのトンピー