パンくずのマークアップ構造化を「schema.org」に変えてみた。「data-vocabulary.org」は古いみたい。

パンくず構造化の「data-vocabulary.org」は古いようなので「schema.org」に変えてみた。

いつのまにか対応されていた。カズヤ(@kazumiso_s)です。

Googleの検索結果に表示された当ブログ記事の情報にパンくずが表示されていない！ってことに気付きました。

パンくずが検索結果に出るように構造化は組んでいるんだけど・・・。

と、色々調べてみると今までマークアップに使っていたdata-vocabulary.orgは古くなったそうです！

それに伴い、以前はGoogleが対応していなかった『schema.org』がサポート対象になっているとの情報がありましたので、当ブログも対応してみました。

schema.orgのパンくずリストをようやくGoogleがサポート開始 | 海外SEO情報ブログ

パンくずの構造化マークアップを「schema.org」に変更してみた

変更前に使用していた「data-vocabulary.org」は古くなったとはいえ、Googleのサポートから外れたわけではないそうです。
ただし、運営維持を停止しその役割をschema.orgに譲っているとのこと。

運営維持を停止となっているものをGoogleがいつまでサポートするのか分からないから「schema.org」に変更！

変更前後のパンくずマークアップ例をご紹介します。
恐らく使用者が多いであろう、シンタックスにmicrodataを使った例となります。

data-vocabulary.orgでのマークアップ例

まずは変更前に使用していた「data-vocabulary.org」のマークアップ例はこちら。

<ul>

<li>

</a>

</li>

<li>

<span itemprop=”title”>スターバックス</span>

</a>

</li>

<li>

<span itemprop=”title”>プレスリリース</span>

</a>

</li>

<li>

<span itemprop=”title”>スタバアンズを使った新作ソイラテ「アプリコットハニー・・・</span>

</a>

</li>

</ul>

</div>

schema.orgでのマークアップ例

次に新たに取り込んだ「schema.org」のマークアップ例はこちら。

data-vocabulary.orgと異なる部分は以下の通り。

パンくず全体を括るタグのitemtypeに「schema.org」用マークアップ
liタグ毎にマークアップが必要
aタグのitempropには「item」を指定
カテゴリ名などの文字を括るspanタグのitempropには「name」を指定
パンくずの順番を示すmetaタグが必要

修正箇所を赤い字にしてあります。
・・・真っ赤っ赤ｗ

※下のコピーするとダブルクォーテーションが全角になるので半角に直して使ってください。

<ul>

</a>

</li>

<span itemprop=”name”>スターバックス</span>

</a>

</li>

<span itemprop=”name”>プレスリリース</span>

</a>

</li>

<span itemprop=”name”>スタバアンズを使った新作ソイラテ「アプリコットハニー・・・</span>

</a>

</li>

</ul>

</div>

最後はチェックツールで確認！

タグのマークアップが済んだらGoogleが公開しているマークアップのチェックツールを使って問題ないかをチェックしましょう！

自サイトのURLを指定して検証。

右側のBreadcrumbListという箇所が「問題ありません。」と表示されていれば正しくマークアップできた証！

お疲れ様でした。

マークアップチェックツールで確認_3

最後に

マークアップを「schema.org」に変更後、しばらくしてもGoogleの検索結果にパンくずは表示されませんでした。

「data-vocabulary.org」はGoogleのサポートから外れたわけではないので、検索結果にパンくずが表示される・されないは関係なさそうです！

単に当ブログの評価が低いだけなのかもしれませんね。
たまにパンくずが表示される記事は見かけるのでなんとも言えませんが・・・

神（Google）のみぞ知るってとこでしょうか。

また、今回参考にさせて頂いた「海外SEO情報ブログ」様の記事にはJSON-LDを使った例もご紹介されております。

マークアップはJSON-LD派という方は参考にしてみてください。

どちらか一方対応できていれば問題ないはずですが、私はなんとなく両方共対応していますｗ

ブログ・サイト運営している方は参考にしてみてください！

カルタ付 HTML5マークアップ現場で使える最短攻略ガイド (WEB PROFESSIONAL)

posted with カエレバ

浜俊太朗アスキー・メディアワークス 2013-12-11

Amazonで見る ≫

楽天市場で見る ≫

パンくずのマークアップ構造化を「schema.org」に変えてみた。「data-vocabulary.org」は古いみたい。