先生と生徒の会話形式で理解しよう

生徒

「先生、Next.jsでページごとのタイトルや説明文ってどうやって変えるんですか？」

先生

「それはHEAD管理という仕組みを使います。以前はnext/headを使っていましたが、app routerではmetadata APIという新しい方法が推奨されています。」

生徒

「metadata APIって何ですか？難しそうです。」

先生

「簡単に言うと、ページのタイトルや説明、SNSでシェアされたときの画像などの情報を一つの場所で管理できる仕組みです。app routerでは各ページのファイルで直接設定できます。」

生徒

「じゃあ具体的にどんな風に書くんですか？」

先生

「それでは、実際のコードを見ながら説明します！」

1. Next.jsのHEAD管理とは？基本の考え方

Next.jsでは、各ページごとにHTMLのタグ内の情報を設定できます。これをHEAD管理と呼びます。タイトルや説明文、メタデータはSEO対策やSNSシェアに重要です。app router時代ではmetadataというAPIを使うことで、従来よりシンプルに管理できます。

2. app routerでのmetadata APIの使い方

app routerを使うと、ページごとにexport const metadataで情報を設定できます。


export const metadata = {
  title: "Next.js HEAD管理の例",
  description: "Next.jsのapp router時代におけるmetadata APIの使い方を解説します"
};

export default function HomePage() {
  return <h1>Next.jsのHEAD管理ページ</h1>;
}

（ブラウザのタイトルバーに「Next.js HEAD管理の例」と表示され、検索結果にも説明文が反映されます）

3. タイトルだけを動的に変更する方法

ページごとにタイトルを動的に変更したい場合、metadata APIを関数で設定することが可能です。


export function generateMetadata({ params }) {
  return {
    title: `ユーザー ${params.id} のプロフィール`
  };
}

export default function UserProfile({ params }) {
  return <h1>ユーザーID: {params.id}</h1>;
}

（URLに応じてタイトルが変わり、例えば「ユーザー 123 のプロフィール」と表示されます）

4. SNSでのシェア用メタデータの設定

metadata APIではOpen GraphやTwitterカードなどSNS向けの情報も簡単に設定できます。


export const metadata = {
  title: "Next.js SNS対応",
  description: "SNSでシェアしたときのタイトルと画像を設定",
  openGraph: {
    title: "Next.js SNS対応",
    description: "Open GraphタグでSNSシェア情報を管理",
    url: "https://example.com",
    images: [
      {
        url: "/og-image.png",
        width: 800,
        height: 600
      }
    ]
  },
  twitter: {
    card: "summary_large_image",
    title: "Next.js SNS対応",
    description: "Twitterカードで見栄えの良い情報を設定",
    images: ["/og-image.png"]
  }
};

（SNSでリンクを共有すると、指定した画像とタイトル、説明文が表示されます）

5. グローバルなHEAD管理とページ単位のHEAD管理の違い

app routerではlayout.tsxで全体共通のmetadataを設定し、各ページで個別に上書きできます。これにより、共通のタイトルやfaviconをまとめて管理できます。


export const metadata = {
  title: "サイト全体のタイトル",
  description: "サイト全体の説明文"
};

export default function RootLayout({ children }) {
  return (
    <html lang="ja">
      <body>{children}</body>
    </html>
  );
}

（全ページで共通タイトルが表示され、必要に応じて各ページで個別のタイトルに変更できます）

6. メタデータにfaviconを設定する方法

metadata APIではfavicon（ブラウザタブのアイコン）も簡単に設定可能です。


export const metadata = {
  title: "Next.js Favicon設定例",
  icons: {
    icon: "/favicon.ico",
    apple: "/apple-touch-icon.png"
  }
};

export default function HomePage() {
  return <h1>Faviconが設定されたページ</h1>;
}

（ブラウザタブにfaviconが表示され、iPhoneやiPadでもアイコンが反映されます）

7. 動的なdescriptionの設定例

ページ内容に応じて説明文(description)を動的に変更することも可能です。


export function generateMetadata({ params }) {
  return {
    title: `記事 ${params.slug}`,
    description: `この記事は${params.slug}について詳しく解説しています`
  };
}

export default function BlogPost({ params }) {
  return <h1>記事: {params.slug}</h1>;
}

（例えばURLが /posts/react の場合、タイトルと説明文が「記事 react」「この記事はreactについて詳しく解説しています」と表示されます）

8. metadata APIを使うメリットまとめ

metadata APIを使うと、ページごとのタイトルや説明文、SNS向け情報を簡単に管理でき、SEO対策やSNSシェアの見栄えを改善できます。従来のnext/headよりもシンプルで、app router時代に最適化された方法です。初心者でも少ないコードで設定できるのでおすすめです。

まとめ

今回の解説では、Next.jsのapp router時代におけるHEAD管理とmetadata APIの基本から応用までを詳しく学びました。各ページごとのタイトル設定、descriptionやfaviconの設定、SNSでのシェア情報管理、そして動的にタイトルやdescriptionを生成する方法など、SEOに効果的な実践的な使い方を体系的に理解できました。従来のnext/headでは手間がかかっていた部分も、metadata APIを使うことでコード量を減らし、可読性と保守性を高めることが可能です。また、全体共通のlayoutでグローバル設定を行いながら、ページ単位で個別の情報に上書きできる設計は、サイト運用やSEOの観点からも非常に便利です。

特にSEO対策として重要なポイントは、タイトル、description、Open GraphやTwitterカードの設定です。ページの内容に応じて動的にタイトルや説明文を変えることで、検索エンジンに正確にコンテンツ内容を伝えることができ、検索結果でのクリック率向上につながります。また、faviconやApple Touch Iconを設定することで、ユーザー体験の向上にも寄与します。Reactのコンポーネント内で動的にmetadataを設定する例を通して、実務での応用方法も理解できました。

実際にコードを書く際には、export const metadataやgenerateMetadataを活用することで、静的ページでも動的ページでも柔軟にHEAD情報を管理できます。例えば、ブログ記事のスラッグやユーザーIDに応じてタイトルやdescriptionを自動生成することで、効率的かつSEOに強いサイト設計が可能です。さらに、Open GraphやTwitterカードを設定すれば、SNSでのシェア時に適切なタイトルや画像が表示され、情報の伝わりやすさも向上します。

下記は簡単なサンプルコードです。ページごとにタイトルと説明文を設定する基本的な例を示しています。


export const metadata = {
  title: "Next.js まとめページ",
  description: "Next.js app routerでのmetadata APIの活用例を解説"
};

export default function SummaryPage() {
  return (
    <div>
      <h1>Next.js HEAD管理まとめ</h1>
      <p>このページではmetadata APIを使った基本的な設定方法を確認できます。</p>
    </div>
  );
}

（このコードを実行すると、ブラウザのタイトルに「Next.js まとめページ」と表示され、検索結果やSNSシェアでも説明文が反映されます）

先生と生徒の振り返り会話

生徒

「先生、今回のまとめで改めて理解したいのですが、metadata APIを使うと何が便利になるんですか？」

先生

「metadata APIを使うと、ページごとのタイトルやdescriptionを簡単に設定できるだけでなく、SNSでシェアされる時の画像や説明文もまとめて管理できる点が便利です。しかもapp routerではページ単位で直接設定できるので、従来よりシンプルに書けます。」

生徒

「動的にタイトルを変えることもできるんですよね？ブログ記事やユーザーIDに応じて変えられるってことはSEO的にも良さそうです。」

先生

「その通りです。generateMetadata関数を使えば、URLのパラメータに応じてタイトルや説明文を動的に生成できます。これにより検索エンジンに正確な情報を伝えやすくなり、クリック率の向上やSNSでの見栄えの改善にもつながります。」

生徒

「全ページで共通のタイトルやfaviconもまとめて設定できるので、サイト全体の統一感も出せるんですね。」