Blog Article

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

2026年01月26日

はじめに

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

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

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

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

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

参考リンク

この記事は、以下の公式ドキュメントを参考にしつつ、プログラミング初学者でも理解できるように内容を整理・再構成しています。

Next.js 公式ドキュメント（Metadata）
https://nextjs.org/docs/app/building-your-application/optimizing/metadata
Next.js 公式ドキュメント（App Router）
https://nextjs.org/docs/app/building-your-application/routing
microCMS 公式ドキュメント
https://document.microcms.io/

メタデータとは何か

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

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

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

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

なぜ必要なのか、これがないとどう困るのか

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

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

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

いつ使うか

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

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

一言で言うなら、

「URL 構造とメタデータをセットで管理する仕組み」です。

なぜ Next.js はこの設計なのか

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 で設定されたタイトルを取得し、それを加工して新しいタイトルを生成しています。共通ルールを壊さずに拡張できる点が大きなメリットです。

layout.tsx と page.tsx の役割分担

ここまでの内容を整理すると、次のようになります。

ファイル	役割
layout.tsx	ブログ全体の共通メタデータ
page.tsx	記事ごとのメタデータ

この役割分担を意識することで、メタデータ設計に迷いにくくなります。

まとめ

メタデータはページ内容を外部に伝える情報
固定ページには metadata
記事ページには generateMetadata
microCMS のデータはメタデータに直接使える

判断に迷ったときの基準

ページ内容は変わるか
共通か個別か

この 2 点を基準に考えると、適切な設計ができます。

おわりに

Next.js と microCMS を使ったブログでは、メタデータの設計がそのままブログの品質につながります。最初は難しく感じるかもしれませんが、考え方自体はシンプルです。

「URL 構造と一緒にメタデータを考える」

この意識を持って、ぜひ自分のブログに実装してみてください。

Next.js