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

Web・ブログのこと Wordpress
スポンサーリンク

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

いつのまにか対応されていた。カズヤ(@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://applian.jp”>
<span itemprop=”title”>Home</span>
</a>
</li>
<li>
<a itemprop=”url” href=”https://applian.jp/starbucks/”>
<span itemprop=”title”>スターバックス</span>
</a>
</li>
<li>
<a itemprop=”url” href=”https://applian.jp/starbucks/press-release/”>
<span itemprop=”title”>プレスリリース</span>
</a>
</li>
<li>
<a itemprop=”url” href=”https://applian.jp/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タグが必要

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

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

<div id=”breadcrumb” itemscope itemtype=”http://schema.org/BreadcrumbList”>
<ul>
<li itemprop=”itemListElement” itemscope itemtype=”http://schema.org/ListItem”>
<a itemprop=”item” href=”https://applian.jp”>
<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://applian.jp/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://applian.jp/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://applian.jp/press-apricot-honey-soy-latte/”>
<span itemprop=”name”>スタバ アンズを使った新作ソイラテ「アプリコット ハニー・・・</span>
</a>
<meta itemprop=”position” content=”4″ />
</li>
</ul>
</div>

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

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

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

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

お疲れ様でした。

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

最後に

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

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

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

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

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

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

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

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

スポンサーリンク

この記事は私が書きました。

管理人:カズヤ(@kazumiso_s)

31歳、横浜市在住の2児の父。本業はシステムエンジニアで目標は今の会社で取締役になること。「毎日に価値を見出す」ことを信念に置き、未来に役立つ情報を発信しています。難病「好酸球性副鼻腔炎」という嗅覚障害持ち。最近生まれて初めて坊主にした。詳細なプロフィールはこちらから

この記事をシェアはこちらから。

フォローして頂けるとブログの更新情報をお届けできます。

この記事が気に入ったら「いいね!」
最新情報をお届けします。

もう1記事いかがですか。