Softonic

パンくずリスト構造化データの例

ステップ 1 / 2

1 行につき 1 項目: 名前 | URL

次へ：結果

良いパンくずリストの構造化データの例には、Googleが読み取るすべての項目が含まれています。リストの種類、各階層の位置、名前、URLです。下の例を参考にしながら、上のツールに自分のパンくずを入力すると、同じ構造のコードが自分のページで生成されます。

例を自分のマークアップに変える手順

  1. 1

    行の書式をまねる

    1階層につき1行、「名前 | URL」の形で入力します。1行目は、たとえば ホーム | https://example.com/ です。

  2. 2

    深い階層を追加する

    2行目にカテゴリ、最後の行に現在のページを、それぞれ完全なURLで入力します。

  3. 3

    生成する

    結果画面へ進むと、ツールが1から番号を振り、scriptタグを組み立てます。

  4. 4

    例と見比べる

    出力にサンプルと同じキーが並んでいることを確認してから、コピーボタンを押します。

3階層のページの完全な例

https://example.com/blog/breadcrumb-basics/ というブログ記事を考えます。画面上のパンくずは「ホーム > ブログ > パンくずリストの基本」です。ツールには次のように入力します。

ホーム | https://example.com/
ブログ | https://example.com/blog/
パンくずリストの基本 | https://example.com/blog/breadcrumb-basics/

生成される出力は次のとおりです。

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "ホーム",
      "item": "https://example.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "ブログ",
      "item": "https://example.com/blog/"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "パンくずリストの基本",
      "item": "https://example.com/blog/breadcrumb-basics/"
    }
  ]
}
</script>

各項目の役割

項目 意味
@context 使用する語彙がschema.orgであることを示します。
@type: BreadcrumbList このブロックがパンくずの経路を表すことを宣言します。
itemListElement 階層を順に並べた配列です。
position 階層の番号で、最上位が1です。
name パンくずに表示されるラベルです。
item その階層のURLです。

例を自分のサイトに合わせるには

順序はサイトのトップから現在のページへ向かう流れにします。ラベルは、訪問者が画面上のパンくずで見ているものと同じ表記にし、URLはhttpsから始まる完全な形で書きます。名前かURLが欠けた行は無視されるため、番号に飛びは生じません。最後の階層にもURLが出力されますが、これは有効なマークアップです。

階層が深いページは行を増やすだけです。深さ5の商品ページなら、位置1から5までの5件になります。

自分の出力を読み解く

生成したら、サンプルと上から順に見比べます。最初はホームで位置1、最後はマークアップを置くページ自身のURLです。名前に誤りがあれば、その行を直して再生成してください。変わるのは番号だけで、ツールが自動で更新します。

浅いページ、たとえばホーム直下の会社概要ページなら、例は2件に縮みます。構造は変わらず、ListItemの数だけが変わります。

よくある質問

自分の名前とURLに置き換えた場合だけです。example.comは仮のドメインで、存在しないページや画面上のパンくずと合わない内容を指すマークアップは、無視されることがあります。

ページの階層の数だけです。一般的には2〜5階層で、ツールは何行でも受け付けます。

結果は、そのまま貼り付けられるapplication/ld+json形式のブロックだからです。ページのheadかbodyに置き、ほかのタグで囲む必要はありません。

その行は飛ばされ、番号も振られません。パイプ記号の後にURLを加えると、その階層が含まれます。

関連ツール

Open Graph チェッカー

ページの HTML を貼り付けるだけで、どの Open Graph タグと Twitter Card タグがあり、どの必須タグが欠けているか、そして各タグの正確な値を瞬時に確認できます。

インデックス可能性チェッカー

URLがインデックス対象であるかを確認してください：robots.txt、meta robots、X-Robots-Tag、正規化信号およびHTTPステータス。

SERPプレビュー

公開前にGoogleの検索結果をプレビューします。リアルタイムの文字数カウンターが長すぎるタイトルやメタディスクリプションを警告し、Google風のスニペットで結果の見え方を確認できます。

Canonical URLチェッカー

ページの canonical URL をチェック。ページを取得してリダイレクトをたどり、HTML と HTTP Link ヘッダーの rel=canonical を読み取り、参照先が 200 を返し、noindex が設定されていないかを確認します。

サイトマップジェネレーター

URL のリストを貼り付けて、changefreq・priority・任意の lastmod を含む有効な XML サイトマップを生成。保存して Search Console に送信する準備が整います。

バックリンクアンカーテキスト分析ツール

バックリンク、CSV行、URL | アンカーのペア、またはアンカーテキスト行を貼り付け、重複を数えて Anchor Text,Count,Share のCSVを出力します。

このツールは他の言語でも利用できます

使い方ガイドと活用例