Photo by
golchiki
【SEOに強い理由】Next.js の Metadata API で、SNS映えするOGP画像や検索結果を「ページ単位」で完璧に制御する
今日は、アプリの「顔」を整え、検索エンジンに正しく伝えるための「Metadata（メタデータ）と SEO」 を攻略します。
React単体では react-helmet などが必要だった「タイトルや説明文の設定」が、Next.jsでは驚くほどシステマチックに管理できます。
📝 9日目の学習ポイント：検索エンジンへの「名刺」を作る
Next.js（App Router）には、ページの <head> 内を管理するための強力な仕組みが備わっています。
💡 1. 静的メタデータ (Static Metadata)
ほとんどのページでは、オブジェクトを export するだけでOKです。
// app/about/page.tsx
import { Metadata } from 'next'
export const metadata: Metadata = {
title: '会社概要 | My App',
description: '私たちのビジョンを紹介します。',
}
export default function Page() {
return <h1>About Us</h1>
}
💡 2. 動的メタデータ (Dynamic Metadata)
3日目に学んだ「動的ルーティング」と組み合わせる時に威力を発揮します。記事のタイトルなどをAPIから取得して、そのままメタデータに反映できます。
// app/blog/[id]/page.tsx
export async function generateMetadata({ params }) {
const post = await fetchPost(params.id) // データを取得
return {
title: post.title,
description: post.summary,
openGraph: {
images: [post.coverImage], // SNSでシェアした時の画像
},
}
}
💡 3. メタデータの継承
layout.tsx で定義したメタデータは、子ページに引き継がれます。
例えば、layout.tsx でアプリ名を title.template として設定しておけば、子ページでタイトルを書くだけで「ページ名 | アプリ名」という形式に自動整形してくれます。
📝 9日目の課題
app/layout.tsx に、アプリ全体のデフォルトタイトルと説明文を設定してみましょう。
以前作った app/users/[id]/page.tsx で generateMetadata を使い、URLのIDがタイトルに表示されるか確認してください。
ブラウザでページを開き、右クリック→「ページのソースを表示」で、<title> や <meta name="description"> が正しく書き換わっているかチェックしましょう！
