Next.js にパンくずリストを追加したら、Google に構造化データとして認識された話

2026/5/23

最近、ポートフォリオサイトに BreadcrumbList の構造化データを追加したところ、Google 検索結果に変化が出始めました。

今回やったことと、実際にどう変わったのかをまとめます。

きっかけ

Google Search Console の構造化データを見ていると、サイトとしての構造認識がかなり弱い状態でした。

特に、

ページ同士の関係
階層構造
サイト内導線

が Google に十分伝わっていない印象。

そこで、まずはシンプルに BreadcrumbList を導入することにしました。

実装したもの

今回追加したのは、schema.org の BreadcrumbList。

Next.js App Router 環境で、JSON-LD を <script type="application/ld+json"> として埋め込んでいます。

パンくずデータ生成

export function createBreadcrumbSchema(items: BreadcrumbItem[]) {
  return {
    '@context': 'https://schema.org',
    '@type': 'BreadcrumbList',
    itemListElement: items.map((item, index) => ({
      '@type': 'ListItem',
      position: index + 1,
      name: item.name,
      item: `${BASE_URL}${item.path}`,
    })),
  };
}

ページ側

const breadcrumbJsonLd = createBreadcrumbSchema([
  {
    name: 'Home',
    path: '/',
  },
  {
    name: 'Blog',
    path: '/blog',
  },
  {
    name: blog.title,
    path: `/blog/${blog.id}`,
  },
]);

<JsonLd data={breadcrumbJsonLd} />

実際にどう変わった？

数日後、Google の検索結果に変化が出始めました。

検索結果に：

Works
About
Blog

などのリンクが表示されるようになり、サイト構造を認識している雰囲気に。

いわゆる：

Sitelinks（サイトリンク）

が出始めた状態です。

これは Google が：

このサイトは構造化されている

と判断し始めたサイン。

パンくずリストだけが理由？

完全にそれだけではないと思います。

今回合わせてやっていたのは：

title の整理
Open Graph
internal links の整理
metadata の共通化
JSON-LD の追加
URL 構造の整理

など。

ただ、BreadcrumbList は Google に：

ページ同士の階層関係

を直接伝えられるので、効果はかなり大きかった印象です。

Search Console 上ではどう見える？

Google のリッチリザルトテストでは、以下のように認識されます。

BreadcrumbList
 └ ListItem
    └ position
    └ name
    └ item

ただし UI 上では：

名前のないアイテム

と表示されることがあります。

これはエラーではなく、BreadcrumbList 自体にはタイトル概念がないためです。

特に問題ありません。

実際に感じたメリット

かなり大きかったのは：

Google がサイトを「ページの集合」ではなく、
「構造を持ったサイト」として認識し始めた感覚

です。

個人サイトやポートフォリオ系では、ここが意外と重要。

Next.js App Router と相性が良い

App Router は：

metadata
generateMetadata
JSON-LD
layout.tsx

など、SEO 周りを整理しやすい構成になっています。

今回も：

metadata は Server Component
UI は Client Component

に分離したことでかなり綺麗に整理できました。

まとめ

パンくずリスト追加後、

構造化データとして認識
sitelinks 表示
サイト構造の理解向上

など、SEO 的な変化を実感できました。

特に個人サイトやポートフォリオでは、

「このサイトはどういう構造か」

を Google に伝えるのがかなり重要そうです。

Next.js App Router なら導入もそこまで難しくないので、早めに入れておくのはおすすめです。

※ 変わったことに気づいた直後に記事とキャプチャを書いています。

"About"はまだ良いとして、リンクになっている”Amb”がどこの何を参照しているのかよくわかりませんので、調べながら経過観察していきます。