Metadataとは何か（Next.jsでの位置づけ）
まず「Metadata（メタデータ）」という言葉から整理します。
これは、ページの「裏側の情報」です。HTML でいうと <head> の中に書く情報で、ユーザーの目には直接見えませんが、
- ブラウザのタブに表示されるタイトル
- 検索結果に出るタイトル・説明文
- SNS でシェアしたときの表示内容
などに大きく関わります。
Next.js の App Router では、このメタデータを metadata というオブジェクトや generateMetadata 関数で宣言的に設定する仕組み が用意されています。
つまり、「コードの中で title / description をオブジェクトとして書いておくと、Next.js がよしなに <head> を組み立ててくれる」イメージです。
title / description の基本と SEO での意味
title の役割
title は、そのページの「名前」です。
- ブラウザのタブに表示される
- 検索結果の青い太字の部分になることが多い
Next.js では、次のように書くとページタイトルが設定されます。
// app/page.tsx など
import type { Metadata } from "next";
export const metadata: Metadata = {
title: "Next.js × React 入門講座",
};
これを書いておくと、出力される HTML には <title>Next.js × React 入門講座</title> が入ります。
description の役割
description は、そのページの「短い説明」です。
- 検索結果のタイトルの下に出る説明文として使われやすい
- Google の評価項目でも、description が無いと減点扱いになることがある
Next.js では、こう書きます。
export const metadata: Metadata = {
title: "Next.js × React 入門講座",
description: "Next.js と React の基本をゼロから学ぶ入門講座です。",
};
これによって、HTML には
<title>Next.js × React 入門講座</title>
<meta name="description" content="Next.js と React の基本をゼロから学ぶ入門講座です。" />
のようなタグが自動で生成されます。
「検索結果にどんな顔で並びたいか」を決めるのが、title / description だと思ってください。
SEOの考え方（最低限おさえておきたいこと）
SEO でメタデータが担う役割
SEO（検索エンジン最適化）と言うと難しく感じますが、
まず最初におさえるべきポイントはシンプルです。
検索エンジンは、ページの内容を理解するために
- ページの本文
- 見出し（
<h1>など） - メタタグ（特に title / description）
などを読みます。
その中でも title / description は、
- 検索結果にほぼそのまま出る
- クリックしたくなるかどうかに直結する
という意味で、「顔」と「自己紹介」に近い存在です。
初心者がまず意識すべき SEO の軸
細かいテクニックよりも、次の 3 点が「最低限」です。
1つのページに 1つのわかりやすい title
そのページで何を伝えるかがひと目で分かる文言にする
description で「このページを開くと何が分かるか」を 1〜2文で書く
キーワードを詰め込みすぎず、人間が読んで自然な文章にする
ページの内容と title / description の内容を一致させる
釣りタイトルにせず、本文とズレないようにする
この「中身とメタ情報の一貫性」が、長期的に見ると一番効きます。
ページごとの設定方法（App Router）
layout でサイト全体のデフォルトを決める
Next.js の App Router では、app/layout.tsx や各セグメントの layout.tsx に metadata を書くことで、その階層全体のデフォルトメタデータを定義できます。
// app/layout.tsx（ルートレイアウト）
import type { Metadata } from "next";
export const metadata: Metadata = {
title: "Next.js × React 入門講座",
description: "Next.js と React をゼロから学ぶための入門サイトです。",
};
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="ja">
<body>{children}</body>
</html>
);
}
これで、何も指定していないページはこの title / description が使われます。
page.tsx ごとに上書きする
特定のページで個別の metadata を設定したい場合、その page.tsx にも metadata を書きます。
// app/about/page.tsx
import type { Metadata } from "next";
export const metadata: Metadata = {
title: "このサイトについて | Next.js × React 入門講座",
description: "このサイトの目的と、学べる内容について説明します。",
};
export default function AboutPage() {
return (
<main>
<h1>このサイトについて</h1>
<p>…本文…</p>
</main>
);
}
こうすると、
/→ ルートレイアウトの title / description/about→ about ページの title / description
というように、パスごとにメタ情報を変えられます。
動的ページでの Metadata（軽く触れておく）
ブログ詳細のように「URLごとにタイトルが変わる」場合は、generateMetadata という関数を使って動的に metadata を返すこともできます。
import type { Metadata } from "next";
type Props = { params: { slug: string } };
export async function generateMetadata({ params }: Props): Promise<Metadata> {
const post = await fetchPost(params.slug); // 仮の関数
return {
title: `${post.title} | ブログ | Next.js × React 入門講座`,
description: post.summary,
};
}
今は「そういうこともできるんだな」くらいの理解で十分です。
最低限のSEO対応を Next.js でやっておく
まずはルートと主要ページだけきちんと書く
最初から全ページ分を完璧に書こうとするとしんどいので、
- トップページ (
/) - 主要な説明ページ（例：
/aboutや/courses）
だけでも、ちゃんとした title / description をつけておくと良いです。
整理すると、最低限やっておきたいことは次の通りです。
app/layout.tsx にサイト全体の title と description を定義する
主要な page.tsx には個別の metadata を書き、ページ固有のタイトルと説明をつける
description を「そのページの内容を 1〜2文で要約した自然な日本語」にする
Next.js の Metadata API を使うことで、
これらを「JavaScript のオブジェクトとして宣言するだけ」で済ませられるのが、大きなメリットです。
まとめと小さな練習
ここまでをまとめると、こうなります。
- Metadata は HTML
<head>に入る「ページの裏側の情報」で、特にtitleとdescriptionは SEO と検索結果の見栄えに直結する。 - Next.js App Router では、
export const metadata（と必要に応じてgenerateMetadata）で、ページやレイアウトごとにメタデータを宣言的に設定できる。 - まずは
app/layout.tsxでサイト全体のデフォルトのtitle/descriptionを決め、主要ページのpage.tsxで個別のメタデータを上書きするのが「最低限のSEO対応」としておすすめ。
練習としては、
/用に「講座全体のタイトルと説明」/about用に「この講座のコンセプト」/lesson-1用に「第1回の具体的な内容」
の metadata を実際に書いてみると、
「URLごとにどんな顔で検索結果に並ぶか」を意識できるようになって、一気に“サイトを作っている感”が出てくるはずです。