【Google・Yahoo】検索結果にパンくずリストを表示させる最も適切な方法【構造化データマークアップ】

2017-12-01 2019-08-27

ホームページにパンくずリストを導入することはユーザーの利便性を考えると必須の項目になります。構造化マークアップを適切に行うと、Google、Yahooの検索結果にパンくずリストを表示することができます。

コンテンツ

1 パンくずリストの必要性
2 検索結果に表示されるパンくずリスト
- 2.1 Google検索結果
- 2.2 Yahoo検索結果
3 検索結果にパンくずリストを表示させるための構造化マークアップ
- 3.1 記述例
- 3.2 WORDPRESSの場合
4 構造化データマークアップのチェック

パンくずリストの必要性

パンくずリストに関してはGoogleが公開している『検索エンジン最適化スターターガイド』の10ページ目、【ナビゲーションをわかりやすくしよう】の項目において、ユーザーの利便性がアップすると掲載しております。

検索結果に表示されるパンくずリスト

下記は当ブログの検索結果です。Google、Yahooともに指定したパンくずリストが表示されています。

Google検索結果

Yahoo検索結果

検索結果にパンくずリストを表示させるための構造化マークアップ

検索結果にパンくずリストを表示させるためには<head>内に下記のように記述いたします。ここではGoogleが推奨している『JSON-LD』を採用します。詳しくは下記記事をご参照ください。

Google サーチコンソールから解るWEB管理者が施すべきSEO対策【構造化データマークアップ】

記述例

&lt;script type=&quot;application/ld+json&quot;&gt;
{
  &quot;@context&quot;: &quot;http://schema.org&quot;,
  &quot;@type&quot;: &quot;BreadcrumbList&quot;,
  &quot;itemListElement&quot;: [
    {
      &quot;@type&quot;: &quot;ListItem&quot;,
      &quot;position&quot;: 1,
      &quot;item&quot;: {
        &quot;@id&quot;: &quot;https://deco8.net&quot;,
        &quot;name&quot;: &quot;deco8 blog&quot;
      }
    },
    {
      &quot;@type&quot;: &quot;ListItem&quot;,
      &quot;position&quot;: 2,
      &quot;item&quot;: {
        &quot;@id&quot;: &quot;https://deco8.net/category/dtm/&quot;,
        &quot;name&quot;: &quot;DTM&quot;
      }
    },
    {
      &quot;@type&quot;: &quot;ListItem&quot;,
      &quot;position&quot;: 3,
      &quot;item&quot;: {
        &quot;@id&quot;: &quot;https://deco8.net/category/dtm/sale/&quot;,
        &quot;name&quot;: &quot;セール情報&quot;
      }
    },
    {
      &quot;@type&quot;: &quot;ListItem&quot;,
      &quot;position&quot;: 4,
      &quot;item&quot;: {
        &quot;@id&quot;: &quot;https://deco8.net/web/google-search-console-seo/&quot;,
        &quot;name&quot;: &quot;2017 BLACK FRIDAY DTM関連セール情報まとめ【音源・プラグイン】&quot;
      }
    }
  ]
}
&lt;/script&gt;

WORDPRESSの場合

プラグイン『Markup (JSON-LD) structured in schema.org』で簡単に設定することが可能です。

プラグインをインストールするとナビゲーションに『Schema.org 設定』が表示されるのでこれをクリック。

Schema.org 設定

設定画面、『Breadcrumb』の『編集』をクリックします。

Breadcrumb

『Enabled』にチェックを入れ、『変更を保存』をクリックすれば完了です。

Enabled

構造化データマークアップのチェック

設置が完了したら構造化データマークアップが正しく記述出来ているか、『Google 構造化データテストツール』でチェックすることをお勧めします。

以上で設定完了です。