検索結果に表示されるGoogleでおすすめしているパンくず「microformats」について

検索結果に表示されるGoogleでおすすめしているパンくず「microformats」について

パンくずが無いwebサイトをたまに見かけます。仕事でもリニューアルの案件でサイトの中を見ているとパンくずが無いこともあるので「パンくず」は重要視されてないのかなと思ってしまいます。

photo credit: Lotus Carroll via photopin cc

パンくずっていらないんじゃない?

「閲覧数が多ければパンくずとかSEOとかいらないんじゃない?」なことをクライアントに言われたことがあります。たしかに人気のWebサイト、ブログになればSEOとかやらなくて見に来てくれる人がいるならいませんがサイト立ち上げはほとんど見に来ませんよね。

パンくずのメリット

  • 閲覧ユーザーが今現在どこにいるのか把握ができます。
  • Googleがサイト構造を理解するためのパンくず

メリットしかなさそうですよね。なのでWebサイト構築の際にはパンくずリストは必ず入れてください。

検索結果にパンくずを反映方法

Googleでオススメしているマークアップ方式を利用する。

  • microdata(推奨)
  • microformats
  • RDFa

この3つの形式をオススメしています。

参考リッチ スニペットと構造化データについて

microdata(推奨)のマークアップについて

推奨しているmicrodataをマークアップの例としてあげてみます。

microdata では、HTML タグ(主に <span> や <div>)内でシンプルな属性を使用して、簡潔でわかりやすい名前をアイテムやプロパティに割り当てます。

divを使ってパンくずを作ります。

itemscope

itemscopeは範囲を示します。
最初のホームをdivをくくって範囲を指定するためにitemscopeとか記述しています。Webカテゴリーも同様に1個づつ囲む必要があります。

itemtype

itemtypeはいくつか値の例があって

パンくずリスト http://data-vocabulary.org/Breadcrumb
個人 http://data-vocabulary.org/Person
組織・団体 http://data-vocabulary.org/Organization
音楽 http://schema.org/MusicRecording

itemprop

itempropは属性を示します。

リンクにitempropをつけるならitemprop=”url”として
タイトルにitempropをつけるならitemprop=”title”になります。

microdataでマークアップした結果

パンくず

構造化コーディングをするとGoogleの検索結果にパンくずリストが表示されるようになります。
※検索結果やプレイスページに表示されるまでには、時間がかかることがあります。

確認ツール

すぐには反映されないのでちゃんとマークアップされているか確認したい場合は構造化データ テスト ツールがあります。

URLを打ち込んで確認してみてください。

確認

上記の結果みたいになっていればOKです!

まとめ

googleが推奨しているmicrodataでパンくずをgoogleの検索結果に反映させる方法でした。パンくずをサイトに反映させるだけでもユーザーにもサイト内で迷わす必要もないですのでパンくずは是非ともサイトに導入してください。

検索結果に表示されるGoogleでおすすめしているパンくず「microformats」について

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*