Web制作の技術情報を中心に、WordPress、jQuery、CSSなどの情報など幅広く発信中。Web制作スキルや知識のアウトプットブログです。

Sedori Plan

Web

検索結果に表示される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を使ってパンくずを作ります。

<div id="breadcrumb">
    <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
        <a itemprop="url" href="http://sedoriplan.com">
            <span itemprop="title">ホーム</span>
        </a> &gt;
    </div>
    
    <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
        <a itemprop="url" href="http://sedoriplan.com/category/web/">
            <span itemprop="title">Webカテゴリー</span>
        </a> &gt;
	</div>
    
    <div>
    	現在のページ
    </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の検索結果に反映させる方法でした。パンくずをサイトに反映させるだけでもユーザーにもサイト内で迷わす必要もないですのでパンくずは是非ともサイトに導入してください。

[amazonjs asin="4798114073" locale="JP" title="検索にガンガンヒットさせるSEOの教科書"]

スポンサーリンク
  • この記事を書いた人
  • 最新記事
しん

しん

Webサイトの構築、プログラムを制作しています。中小企業、個人のホームページの制作、更新作業も承ります。 仕事以外はバスケをしたり、ジムで筋トレしております。 映画/海外ドラマ/プログラミング/バスケ/トレーニング/カナダ/カメラ・写真

-Web

Copyright© Sedori Plan , 2019 All Rights Reserved.