Web制作

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

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

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

パンくずリストの必要性

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

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

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

Google検索結果

Google検索結果

Yahoo検索結果

Yahoo検索結果

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

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

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

記述例

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

WORDPRESSの場合

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

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

Schema.org 設定

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

Breadcrumb

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

Enabled

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

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

以上で設定完了です。

この記事を書いた人

o-saka(@abiko41)

フリーランスでWEB作ったりロゴ作ったりしてます。
お仕事のご依頼等は下記フォームより承っております 。お気軽にお問い合わせください。

お問い合わせ