らくとん倶楽部
ラクトンC10(γ-デカラクトン)とラクトンC11(γ-ウンデカラクトン)の香りに魅了された日々の備忘録

「パンくずリスト」の役割とSEO的効果は?構造化データによる実装方法

「パンくずリスト」の役割とSEO的効果は?構造化データによる実装方法

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

パンくずリストの例

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

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

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

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

以下は、パンくずリストを設定する前の本サイトのGoogle検索結果です。緑色の文字で「https://lactone.club/IT/SEO.Breadcrumbs.php」とURLがそのまま表示されています。

パンくずリスト設定前

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

パンくずリスト設定後

元々URLが表記されていたところが、「https://lactone.club > IT・技術 > SEO」とパンくずリストとなっている事がわかります。

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

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

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

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

<div>https://lactone.club &gt; IT・技術</div>

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

<div>
<a href="/">
  https://lactone.club
</a>
 &gt; 
<a href="/IT/">
  IT・技術
</a>
</div>

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

microdata形式

<div itemscope itemtype="https://schema.org/BreadcrumbList">
<span itemprop=itemListElement itemscope itemtype="https://schema.org/ListItem">
  <a href="/" itemprop=item>
    <span itemprop=name>https://lactone.club</span>
  </a>
  <meta itemprop=position content=1 />
</span>
 &gt; 
<div itemscope itemtype="https://schema.org/BreadcrumbList">
<span itemprop=itemListElement itemscope itemtype="https://schema.org/ListItem">
  <a href="/IT/" itemprop=item>
    <span itemprop=name>IT・技術</span>
  </a>
  <meta itemprop=position content=2 />
</span>
</div>

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

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

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

以上がmicrodata形式による構造化データですが、最近ではmicrodata形式からJSON-LD形式が主流となっています。

JSON-LD形式

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

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

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement":
  [
    {
      "@type": "ListItem",
      "position": 1,
      "item":
      {
        "@id": "/",
        "name": "らくとん倶楽部"
      }
    },
    {
      "@type": "ListItem",
      "position": 2,
      "item":
      {
        "@id": "/IT/",
        "name": "IT・技術"
      }
    }
  ]
}
</script>

JSON-LD形式の最大の利点はHTMLコードと独立して記述することが出来る点にあります。こうすることで、以下のようなパンくずリストを表示させる事ができました。

パンくずリスト設定後

ちなみに、少し前までは、論理的なカテゴリとして、URLを記載する@idプロパティを書かかずにposition:3を記述するワザが使えたのですが、現在では@idプロパティが必須となっているのでこのワザは使えません(エラーになってしまいます)。

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

MFI(モバイルファーストインデックス)時代のSEOの知識と技術をまとめた1冊。本書では、Webサイトに実施すべき一通りのSEO施策に関して、その背景から実際の考え方、そして技術まで踏み込んだ実装方法をまとめています。SEOにはどういった施策があるのか、どういった手順で取り組むべきなのか、そして、どのように実装していけば効果的なのか。悩めるマーケティング担当、SEO担当だけでなく、実装を担当するエンジニアにも役立つ内容となっています。
Amazonで購入 楽天で購入
Amazonで購入 楽天で購入
らくとん
作成日 2019年01月29日 08時03分
更新日 2019年04月25日 00時37分
4747文字
Twitter Facebook はてなブックマーク Pocket
■ 関連記事
らくとん倶楽部らくとん倶楽部
Author: らくとん
ウェブサイトのコンテンツ情報をGoogleをはじめとした検索エンジンに的確に伝えるための手段である構造化データ。この構造化データが正しく記述されているかどうかをチェックするためのツールがGoogleか...
らくとん倶楽部らくとん倶楽部
Author: らくとん
アフィリエイトリンク等の外部リンクがクリックされた事をGoogleアナリティクスで集計する方法は、少しググれば沢山出てきます。Googleタグマネージャ(GTM:Google Tag Manager)...