ECサイト構築クラウド型プラットフォーム

モバイルファーストマーケティングラボ

パンくずリストを構造化データにして検索結果の視認性を上げる方法

  • 2021.01.25
  • 2021.01.26
  • SEO
パンくずリストを構造化データにして検索結果の視認性を上げる方法

構造化データとは

構造化データとは、ページ内のコンテンツを説明するための、標準化されたデータ形式のことです。

例えば、そのページの作成者やアップロードの日付、レシピに関するページであればカロリーや調理時間など、様々なものを設定することができます。

GoogleはWEB上にアップロードされたページを正しく分類するために、この構造化データを使います。

単なる文字列ではなくクローラに対して意味を持ったデータであるので、構造化データを設定することで、Googleがそのページをより正確に理解できるようになります。

パンくずリストを構造化データにするメリット

構造化データ自体は、ランキング向上につながる要素ではありません。ただ、構造化データがあることで、関連性がある場合に表示されやすくなったり、様々な検索機能の対象になったりします。

詳しくは、検索ギャラリーとリッチリザルトをご参照ください。

パンくずリストもリッチリザルトの対象になります。

通常、パンくずリストを構造化データとして設定していない状態では、Googleは以下のように、そのページのURLを基にリストを生成します。

しかし、構造化データとして設定することによって、以下のようなリッチリザルト表示の対象となり、そのページが何の説明をしているものなのかといったページの視認性を上げることができます。

これは、結果的にクリック率の向上などに貢献します。

構造化データでのパンくずリストの設置方法

構造化データでのパンくずの設置はschema.orgによる定義が主流となっています。data-vocabulary.orgによるマークアップもなされていましたが、

2021 年 1 月 29 日以降、data-vocabulary.org マークアップは Google のリッチリザルト機能でサポートされなくなるという公式の発表がありました。

またその記述方法としてはJSON-LD , microdata , RDFaの3種類があります。

今回はこのうちJSON-LD , microdataの2つについての記述方法を記載しておきます。

どちらで書いてもデータとしては同じですが、GoogleはJSON-LDでの記述を推奨していますし、data-vocabulary.orgからschema.orgへの移行時も変更点が少ないのでおすすめです。

JSON-LDでの記述方法

JSON-LDはページのヘッダー内にjsonというデータフォーマットで記述します。

<script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [{
        "@type": "ListItem",
        "position": 1,
        "name": "<パンくず1階層目の名称>",
        "item": "<パンくず1階層目のサイトURL>"
      },{
        "@type": "ListItem",
        "position": 2,
        "name": "<パンくず2階層目の名称>",
        "item": "<パンくず2階層目のサイトURL>"
      }]
    }
</script>

 

パンくずのリッチリザルトはあくまでページの視認性を上げるためのものなので、必ずしもそのページのURLに従った構造にする必要はなく、そのページが何を表しているのかをカテゴリ分けして、階層的に表示させることが効果的です。

ちなみに、サイトのトップページのURLは自動生成されるので、リストに記載する必要はありません。

また、jsonはデータを送信するための言語なので、検索結果には反映されますが、ページ内にはパン屑の表示がされません。そのため、ページ内にもパン屑を表示させたい場合は、以下のようにHTMLとまとめて書くようにします。

<script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [{
        "@type": "ListItem",
        "position": 1,
        "name": "<パンくず1階層目の名称>",
        "item": "<パンくず1階層目のサイトURL>"
      },{
        "@type": "ListItem",
        "position": 2,
        "name": "<パンくず2階層目の名称>",
        "item": "<パンくず2階層目のサイトURL>"
      }]
    }
</script>
<div class="pankuzu">
    <a  href="<#サイトURL>">
      <span>TOP</span>
    </a>
    <a href="<パンくず1階層目のサイトURL>">
      <span><パンくず1階層目の名称></span>
    </a>
    <a href="<パンくず2階層目のサイトURL>">
      <span><パンくず2階層目の名称></span>
    </a>
</div>

 

パンくずはページ内でも訪問者がサイトの階層を理解し、効率的に移動するのに役立つので、表示させるのがおすすめです。

microdataでの記述方法

microdataは通常のページ作成と同様、HTMLを用いて記述します。

<div class="pankuzu">
  <div itemscope="" itemtype="http://schema.org/BreadcrumbList">
      <a  href="<#サイトURL>">
      <span>TOP</span>
      </a>
    <div itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
      <meta itemprop="position" content="1" />
      <a href="<パンくず1階層目のサイトURL>"  itemprop="item">
      <span itemprop="name"><パンくず1階層目の名称></span>
      </a>
    </div>
    <div itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
      <meta itemprop="position" content="2" />
      <a href="<パンくず2階層目のサイトURL>"  itemprop="item">
      <span itemprop="name"><パンくず2階層目の名称></span>
      </a>
    </div>
</div>
</div>

ちなみにこのようにしてパン屑を設置した後は、リッチリザルト テストツールで正しく認識されているか確認してみましょう。

リッチリザルトの対象となっていれば、以下のような表示が出るはずです。

また、実際にパンくずリストの構造化データを設置しても、検索結果上での反映はGoogleのクロールが終了した後になるので、Search Consoleなどで状況を確認すると良いでしょう。

そして、適切な設置ができていても必ずしもリッチリザルトになるとは限りません。

詳しくは、構造化データに関する一般的なガイドラインをご参照ください。

まずは先程のテストツールで、しっかりと構造化ができているかを確認しましょう。

以上、構造化データでのパンくずリストの設置について説明してきました。

リッチリザルトは少しの変化ですが、ページの視認性は大きく上がると思います。ぜひ今回の記事を参考にサイトの設定を見直してみてください。

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。

SEOカテゴリの最新記事