App RouterにはSEOタグ(<title>、<meta>、Open Graphなど)のための組み込みメタデータAPIがあります — layout.tsxまたはpage.tsxからメタデータをエクスポートすると、Next.jsが正しい<head>タグをレンダリングします。
App RouterにはSEOタグ(<title>、<meta>、Open Graphなど)のための組み込みメタデータAPIがあります — layout.tsxまたはpage.tsxからメタデータをエクスポートすると、Next.jsが正しい<head>タグをレンダリングします。
// app/about/page.tsx
import type { Metadata } from "next";
export const metadata: Metadata = {
title: "About Us",
description: "Learn about our company and team.",
openGraph: {
title: "About Us",
images: ["/og-about.png"],
},
};
export default function About() { return <h1>About</h1>; }
Next.jsはエクスポートされたmetadataオブジェクトを読み込み、<title>、<meta name="description">、OGタグなどを生成します — <head>を手動で編集する必要はありません。
タイトルがフェッチされたコンテンツ(ブログ投稿、商品など)に依存するページの場合、非同期generateMetadata関数をエクスポートします:
// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }): Promise<Metadata> {
const post = await getPost(params.slug); // fetch the post
return {
title: post.title,
description: post.excerpt,
openGraph: { images: [post.coverImage] },
};
}
これはサーバー上で実行され、各動的ページが正確なコンテンツ固有のメタデータを持つことができます — 動的コンテンツのSEOとソーシャル共有に不可欠です。
// app/layout.tsx — defaults + a title template
export const metadata: Metadata = {
title: { default: "My Site", template: "%s | My Site" }, // child titles become "About | My Site"
};
レイアウトで定義されたメタデータは子ページと統合され(そしてオーバーライドされる可能性があります) — サイト全体のデフォルトを1回設定し、必要な場所でページごとの値を設定できます。templateは自動的にサイト名を追加します。
app/favicon.ico, app/opengraph-image.png, app/robots.ts, app/sitemap.ts
特殊なファイルは対応するメタデータ/ルートを自動的に生成します。
良いメタデータはSEOとソーシャルシェアプレビューを向上させます。
メタデータAPIはこれを宣言的でタイプセーフにします — 固定ページの場合は静的metadata、データドリブンページの場合は非同期generateMetadata、テンプレート付きレイアウトレベルのデフォルト — <head>の手動管理をクリーンでサーバーレンダリングされたシステムで置き換えます。