Blog Article

Next.js のメタデータとは何か？

2026年01月26日

はじめに

ブログサイトを構築すると、「記事の表示」自体は比較的スムーズに実装できます。しかし、実際に記事を公開し、検索エンジンや SNS から読者を呼び込もうとすると、必ず次の壁にぶつかります。

それが メタデータの設定です。

検索結果に表示されるタイトルを記事ごとに変えたい
SNS でシェアしたときに、記事タイトルや画像を正しく表示したい
すべての記事が同じタイトルになってしまうのを避けたい

こうした要件を満たすために欠かせないのが、Next.js に用意されている metadata と generateMetadata という仕組みです。

この記事では、メタデータとは何かという基本から、Next.js（App Router）におけるメタデータの考え方、microCMS と組み合わせた使い方までを、解説していきます。

参考リンク

メタデータとは何か

メタデータとは、「このページがどんな内容なのかを、検索エンジンや SNS に伝えるための情報」です。

Web ページは、私たちが画面上で読む本文だけで成り立っているわけではありません。HTML には <head> という領域があり、そこにページの説明情報が書かれています。これがメタデータです。

例えば、ブラウザのタブに表示されるページタイトル、Google 検索結果に表示される説明文、X や Facebook に URL を貼ったときに表示されるカード情報などは、すべてメタデータをもとに生成されています。

重要なのは、メタデータは 人間ではなく機械のための情報だという点です。検索エンジンや SNS は、ページの本文を人間のように正確に理解できません。そのため、「このページは何について書かれているのか」を、あらかじめ要約して渡してあげる必要があります。

メタデータがなぜ必要なのか

メタデータが正しく設定されていないと、検索エンジンはページの内容を正しく判断できません。その結果、検索結果に意味のわからないタイトルが表示されたり、本文と関係のない説明文が表示されたりします。

また、SNS で記事を共有しても、タイトルや画像が表示されず、リンクだけが無機質に表示されることもあります。これは読者にとって不親切であり、記事がクリックされる可能性を大きく下げてしまいます。

つまり、メタデータは ブログ記事の第一印象を決める重要な要素なのです。

メタデータは、ブログ内のすべての記事ページで使います。記事本文が存在する以上、その記事が何について書かれているのかを外部に伝える必要があるためです。

Next.js（App Router）におけるメタデータの考え方

一言で言うなら、「URL 構造とメタデータをセットで管理する仕組み」です。

Next.js（App Router）では、ページ構成をディレクトリ構造で表現します。/blog、/blog/[slug] のように、URL とファイル構成が直結しています。

この考え方をメタデータにも適用し、「どの URL 配下のページなのか」によって、共通のメタデータを自動的に引き継げるように設計されています。

これにより、ブログ全体に共通するルールと、記事ごとの個別ルールを、無理なく分離できます。

静的メタデータ（metadata）とは

一言で言うなら、「内容が変わらないページに使うメタデータ」です。

metadata は、ページごとに内容が変化しない場合に使用します。例えば、ブログのトップページやプロフィールページ、利用規約ページなどが該当します。

ブログ記事ページのように内容が頻繁に変わる場合には向きませんが、サイト全体の土台を支える重要な役割を担います。

すべてのページで動的なメタデータ生成を行うと、コードの意図が分かりにくくなります。metadata を使うことで、「このページのメタデータは固定である」という意思を、コード上ではっきり示せます。

import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'ブログトップ',
  description: 'Next.js と microCMS で作った技術ブログです。',
}

このコードでは、metadata というオブジェクトを export しています。Next.js はこれを検出し、ページ表示時に自動的に <head> に反映します。開発者が HTML を直接操作する必要はありません。

静的メタデータは以下の状況で使います。

ブログトップページ
固定ページ

動的メタデータ（generateMetadata）とは

一言で言うなら、「記事ごとに内容が変わるメタデータを生成する仕組み」です。

microCMS を使ったブログでは、記事タイトルや概要文は CMS 側で管理されます。これらをそのまま検索結果や SNS 表示に反映するためには、ページごとに異なるメタデータを生成する必要があります。

generateMetadata は、そのために用意された仕組みです。

動的メタデータは以下の状況で使われます。

/blog/[slug] のような動的ルーティング
CMS のデータをメタデータに使いたい場合

export async function generateMetadata({ params }) {
  const article = await getArticle(params.slug)

  return {
    title: article.title,
    description: article.description,
  }
}

この関数は、ページが表示される前にサーバー上で実行されます。URL から取得した slug を使って microCMS から記事データを取得し、その内容をメタデータとして返しています。

重要なのは、この処理が クライアントではなくサーバーで完結する点です。これにより、SEO 的にも安全で、不要な通信も発生しません。

親メタデータ（parent）

一言で言うなら、「共通メタデータを引き継ぎつつ、差分だけを上書きする仕組み」です。

ブログ全体のサイト名や OGP 設定は共通ですが、記事タイトルは個別に変えたい、というケースがほとんどです。parent を使うことで、この要件を無理なく満たせます。

export async function generateMetadata(_, parent) {
  const parentMetadata = await parent

  return {
    title: `記事 | ${parentMetadata.title?.absolute}`,
  }
}

この例では、親 layout で設定されたタイトルを取得し、それを加工して新しいタイトルを生成しています。共通ルールを壊さずに拡張できる点が大きなメリットです。

共通メタデータと個別メタデータ

ブログでは、すべての記事で共通して使うメタデータと、記事ごとに変更するメタデータがあります。

例えば、サイト名や基本的な OGP 設定などはブログ全体で共通して使えます。一方、記事タイトルや説明文は記事ごとに異なるため、それぞれ個別に設定する必要があります。

Next.js では、親となる layout.tsx に共通のメタデータを設定し、記事ページの page.tsx で個別のメタデータを設定するように分けられます。

このように、共通する設定は親で管理し、ページごとに異なる設定だけを個別に定義することで、同じメタデータを各ページに繰り返し記述する必要がなくなります。

ファイル	主な役割
`layout.tsx`	共通メタデータを設定する
`page.tsx`	ページ固有のメタデータを設定する

この考え方は、先ほど説明した parent によるメタデータの継承にもつながります。

まとめ

メタデータはページ内容を外部に伝える情報
固定ページには metadata
記事ページには generateMetadata
parent を使うことで、親のメタデータを引き継ぎながら必要な部分だけ変更できる
共通するメタデータは layout.tsx、ページ固有のメタデータは page.tsx で管理できる

チャレンジ問題

理解度チェック

学んだ内容を確認してみましょう。各問題の選択肢から正しい答えを選んでください。

メタデータとは、何のための情報ですか？

内容が変わらないページのメタデータを設定する場合、何を使いますか？

記事ごとに異なるタイトルや説明文を設定する場合、何を使いますか？

parent を使うと何ができますか？

Next.js