スポンサーリンク
いつのまにか対応されていた。カズヤ(@kazumiso_s)です。
Googleの検索結果に表示された当ブログ記事の情報にパンくずが表示されていない！ってことに気付きました。
パンくずが検索結果に出るように構造化は組んでいるんだけど・・・。
と、色々調べてみると今までマークアップに使っていたdata-vocabulary.orgは古くなったそうです！
それに伴い、以前はGoogleが対応していなかった『schema.org』がサポート対象になっているとの情報がありましたので、当ブログも対応してみました。
スポンサーリンク
パンくずの構造化マークアップを「schema.org」に変更してみた
変更前に使用していた「data-vocabulary.org」は古くなったとはいえ、Googleのサポートから外れたわけではないそうです。
ただし、運営維持を停止しその役割をschema.orgに譲っているとのこと。
運営維持を停止となっているものをGoogleがいつまでサポートするのか分からないから「schema.org」に変更！
変更前後のパンくずマークアップ例をご紹介します。
恐らく使用者が多いであろう、シンタックスにmicrodataを使った例となります。
data-vocabulary.orgでのマークアップ例
まずは変更前に使用していた「data-vocabulary.org」のマークアップ例はこちら。
<div id=”breadcrumb” itemscope itemtype=”http://data-vocabulary.org/Breadcrumb”>
<ul>
<li>
<a itemprop=”url” href=”https://kazumiso.info”>
<span itemprop=”title”>Home</span>
</a>
</li>
<li>
<a itemprop=”url” href=”https://kazumiso.info/starbucks/”>
<span itemprop=”title”>スターバックス</span>
</a>
</li>
<li>
<a itemprop=”url” href=”https://kazumiso.info/starbucks/press-release/”>
<span itemprop=”title”>プレスリリース</span>
</a>
</li>
<li>
<a itemprop=”url” href=”https://kazumiso.info/press-apricot-honey-soy-latte/”>
<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タグが必要
修正箇所を赤い字にしてあります。
・・・真っ赤っ赤ｗ
※下のコピーするとダブルクォーテーションが全角になるので半角に直して使ってください。
<div id=”breadcrumb” itemscope itemtype=”http://schema.org/BreadcrumbList”>
<ul>
<li itemprop=”itemListElement” itemscope itemtype=”http://schema.org/ListItem”>
<a itemprop=”item” href=”https://kazumiso.info”>
<span itemprop=”name”>Home</span>
</a>
<meta itemprop=”position” content=”1″ />
</li>
<li itemprop=”itemListElement” itemscope itemtype=”http://schema.org/ListItem”>
<a itemprop=”item” href=”https://kazumiso.info/starbucks/”>
<span itemprop=”name”>スターバックス</span>
</a>
<meta itemprop=”position” content=”2″ />
</li>
<li itemprop=”itemListElement” itemscope itemtype=”http://schema.org/ListItem”>
<a itemprop=”item” href=”https://kazumiso.info/starbucks/press-release/”>
<span itemprop=”name”>プレスリリース</span>
</a>
<meta itemprop=”position” content=”3″ />
</li>
<li itemprop=”itemListElement” itemscope itemtype=”http://schema.org/ListItem”>
<a itemprop=”item” href=”https://kazumiso.info/press-apricot-honey-soy-latte/”>
<span itemprop=”name”>スタバ アンズを使った新作ソイラテ「アプリコット ハニー・・・</span>
</a>
<meta itemprop=”position” content=”4″ />
</li>
</ul>
</div>
最後はチェックツールで確認！
タグのマークアップが済んだらGoogleが公開しているマークアップのチェックツールを使って問題ないかをチェックしましょう！
自サイトのURLを指定して検証。
右側のBreadcrumbListという箇所が「問題ありません。」と表示されていれば正しくマークアップできた証！
お疲れ様でした。
最後に
マークアップを「schema.org」に変更後、しばらくしてもGoogleの検索結果にパンくずは表示されませんでした。
「data-vocabulary.org」はGoogleのサポートから外れたわけではないので、検索結果にパンくずが表示される・されないは関係なさそうです！
単に当ブログの評価が低いだけなのかもしれませんね。
たまにパンくずが表示される記事は見かけるのでなんとも言えませんが・・・
神（Google）のみぞ知るってとこでしょうか。
また、今回参考にさせて頂いた「海外SEO情報ブログ」様の記事にはJSON-LDを使った例もご紹介されております。
マークアップはJSON-LD派という方は参考にしてみてください。
どちらか一方対応できていれば問題ないはずですが、私はなんとなく両方共対応していますｗ
ブログ・サイト運営している方は参考にしてみてください！
浜俊太朗 アスキー・メディアワークス 2013-12-11
スポンサーリンク
