陸マイラーの始め方。目指せ年間30万マイル!!
ここ数年、飛行機に全く乗らずして1年で30万マイルも稼ぎ出す「陸マイラー(おかマイラー)」が多数誕生しているのをご存知でしょうか?

「パンくずリスト」の役割とSEO的効果 〜ポイントサイトの対応状況〜⚡

このエントリーをはてなブックマークに追加

「パンくずリスト」なる言葉をご存知でしょうか?ウェブサイトを閲覧する中で、今自分がどのようなカテゴリのページを見ているのかを把握し、それを視覚化するために設けられた道先案内役とも言える文字列のことを「パンくずリスト」と呼んでいます。童話「ヘンゼルとグレーテル」で主人公が森の中で迷子にならないように道にパンのくずを少しずつ置いていった話が由来となっています。百聞は一見にしかず、具体的なパンくずリストの例を見てみましょう。

パンくずリストの例

上の図は、日経新聞のとある記事についていたパンくずリストです。「マーケット > 株式 > 注目株概況 > 記事」とあるのがそれです。

本サイトでは、記事のカテゴリ一覧のタップエリアを画面上部に設置し、記事が含まれるカテゴリの色を変更して表示しているのですが、これもパンくずリストの一種です。

ウェブサイトを訪れる利用者が最初に閲覧するページはトップページ(ホームページ)とは限りません。一般的にはGoogleやYahoo!などの検索サイトに表示されるページが最初に閲覧するランディングページになるのですが、そのページはヘンゼルとグレーテル風に言えば、森の奥深い場所にあり、道を見失いがちです。そこにパンくずリストがあれば、ウェブサイト全体の中における今のページの位置を把握することができ、利用者を他のページへと誘導することで、ページ回遊率が上がり、サイト滞在時間も長くなって、SEO的にも効果的なのです。

パンくずリストはウェブサイトに表示されるだけではありません。あまり一般的には知られていませんが、適切な設定をすればGoogleの検索結果にもパンくずリストが表示されるようになります。

以下は、パンくずリストを設定する前の本サイトのGoogle検索結果です。緑色の文字で「ana-jal-creditcard.com/Mileage/HapitasCampaign20161222.php」とURLがそのまま表示されています。

パンくずリスト設定前

一方、パンくずリストを設定した後では、以下のように表示されるようになります。

パンくずリスト設定後

元々URLが表記されていたところが、「ana-jal-creditcard.com > マイルの貯め方 > ハピタス」とパンくずリストとなっている事がわかります。

パンくずリストで表記されるようになったからといって検索順位が上がるわけではない(とGoogleの中の人は明言しています)ので、爆発的なアクセス数増加が望めるものではありませんが、どちらの表記がよりユーザーに優しいか、そしてより多くのアクセスを集めるかは一目瞭然ですよね。

パンくずリストをGoogle検索結果に表示させる方法

Google検索結果にパンくずリストを表示させるには、パンくずリストを単純にウェブページに記述しただけでは出来ません。構造化データなるものを指定してあげる必要があります。

以下は、パンくずリストを単純にHTML表記した例です。これではウェブページにはパンくずリストは表示されるもののGoogle検索結果には表示されません。

<div>ana-jal-creditcard.com &gt; マイルの貯め方 &gt; ハピタス</div>

後々わかりやすくなるように適当なところで改行を入れておきます。ついでにパンくずにハイパーリンクも設定しておきましょう。

<div>

<a href="/">
ana-jal-creditcard.com
</a>
 &gt; 

<a href="/Mileage/">
マイルの貯め方
</a>
 &gt; 

<a href="/Mileage/Hapitas/">
ハピタス
</a>

</div>

さて、このパンくずリストに構造化データを付与してみます。構造化データの実装にはmicrodata、RDFa、JSON-LDなど複数の方法がありますが、ここではまず最初にmicrodataを用いた実装方法を紹介します。

<div itemscope itemtype="http://schema.org/BreadcrumbList">

<span itemprop=itemListElement itemscope itemtype="http://schema.org/ListItem">
<a href="/" itemprop=item>
<span itemprop=name>ana-jal-creditcard.com</span>
</a>
<meta itemprop=position content=1 />
</span>

 &gt; 

<div itemscope itemtype="http://schema.org/BreadcrumbList">

<span itemprop=itemListElement itemscope itemtype="http://schema.org/ListItem">
<a href="/Mileage/" itemprop=item>
<span itemprop=name>マイルの貯め方</span>
</a>
<meta itemprop=position content=2 />
</span>

 &gt; 

<div itemscope itemtype="http://schema.org/BreadcrumbList">

<span itemprop=itemListElement itemscope itemtype="http://schema.org/ListItem">
<a href="/Mileage/Hapitas/" itemprop=item>
<span itemprop=name>ハピタス</span>
</a>
<meta itemprop=position content=3 />
</span>


</div>

黄色でハッチングしたところが追加した構造化データ用のコードです。なにやら複雑ですね。でも安心して下さい。こんな面倒な事をしなければならない人は自分でWordPress等でHTMLコードを自ら生成している人だけで、はてなブログ等の有名ブログサイトは自動で構造化コードを吐いてくれるようです。

一応簡単に説明すると、最初のdivタグにitemtypeとしてhttp://schema.org/BreadcrumbListを指定します。schema.orgがパンくずリストに対応したのは最近になってからなので、他のスキーマ、例えばhttp://data-vocabulary.org/Breadcrumbなどを設定しているサイトも多いようです。同じdivタグに設定しているitemscopeは構造化データ(BreadcrumbList)の範囲がこのdivタグを閉じるまでですよという意味になります。

そしてitemListElementプロパティでパンくずひとつひとつを設定していきます。aタグにitemプロパティを追加し、nameプロパティで具体的に表示するパンくず名を指定、その後、positionプロパティで表示順序を指定すれば出来上がりです。

以上がmicrodata形式による構造化データですが、最近ではmicrodata形式からJSON-LD形式が主流となっています。JSON-LD形式は複雑なHTMLタグを記載する必要がなく、シンプルかつわかりやすいスクリプトを記載すれば良いことから人気を集めています。Googleが正式にJSON-LD形式を推奨していることも人気の後押しとなっています。

さて、上述したmirodata形式による構造化データですが、これをJSON-LD形式で記述すると以下の通りとなります。

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "BreadcrumbList",
"itemListElement":
[
{
"@type": "ListItem",
"position": 1,
"item":
{
"@id": "http://ana-jal-creditcard.com/",
"name": "陸マイラーの始め方。"
}
},
{
"@type": "ListItem",
"position": 2,
"item":
{
"@id": "http://ana-jal-creditcard.com/Mileage/",
"name": "マイルの貯め方"
}
},
{
"@type": "ListItem",
"position": 3,
"item":
{
"name": "ハピタス"
}
}
]
}
</script>

JSON-LD形式の最大の利点はHTMLコードと独立して記述することが出来る点にあります。

当サイトの場合、記事カテゴリのフォルダ構成と同期しているパンくずリストは第2段階(position:2)までで、第3段階(position:3)は論理的なカテゴリです。従ってposition:1とposition:2まであった@idプロパティがposition:3には存在しません。JSON-LD形式ならこんな使い方も簡単で記述出来てしまいます。

もしこれから構造化データによる各種実装を導入していきたいというのであれば、JSON-LD形式を強くオススメします。

最後に、各ポイントサイトがパンくずリストにどのように対応しているか見てみることにしましょう。調査対象は、どこのポイントサイトにも存在するであろう「セゾン・カード・インターナショナル」の案件にしました。

  • ハピタス
    画面上部に「ポイントサイト|ハピタス > クレジットカード > エポスカード」と典型的なパンくずリストが表示されています。パンくずリストの構造化は行っていません。

  • PONEY
    画面上部に「トップページ > 「年会費永久無料!エポスカード」」とシンプルなパンくずリストが表示されています。パンくずリストの構造化は行っていません。

  • モッピー
    モッピーにはパンくずリストはありませんでした。当然ながらパンくずリストの構造化もありません。

  • モバトク
    モバトクにはパンくずリストがありませんでした。当然ながらパンくずリストの構造化はありません。

  • ちょびリッチ
    画面上部に「お小遣いサイトなら、ポイント交換ちょびリッチ > 登録・申込みで貯める > クレジットカード申込み > エポスカード」と背景画像付きの凝ったパンくずリストが表示されています。パンくずリストの構造化は行っていません。

  • ポイントインカム
    画面上部に「ポイントサイト|ポイントインカム > クレジットカード比較TOP > エポスカード(EPOS CARD)」とシンプルなパンくずリストが表示されています。そして、さらにJSON-LD形式のパンくずリストの構造化が行われていました。

  • ポイントタウン
    ポイントタウンにはパンくずリストはありませんでした。当然ながらパンくずリストの構造化もありません。

  • GetMoney!
    画面上部に「ポイントサイト GetMoney! > クレジットカードで貯める > エポスカード(カード利用)」と典型的なパンくずリストが表示されています。パンくずリストの構造化は行っていません。

パンくずリストを実装しているかどうかはポイントサイトによって異なり、その実装率は50%位であることがわかりました。しかしながら、構造化データまで実装しているのは、ポイントインカムのみ。ポイントインカム開発陣の努力を垣間見る事ができますね。

 他の陸マイラーさんたちはこちら 
にほんブログ村へ
マイレージ ブログランキングへ
カンポ・デル・パンターノ
作成日 2017年07月16日 14時15分
更新日 2017年08月16日 23時09分
5398文字
このエントリーをはてなブックマークに追加