コンテンツにスキップ

Chapter 16: メタデータ

最後はアプリを公開する際に欠かせないメタデータを整理します。SEO や SNS 共有で必要となる情報を Next.js の宣言的 API で設定していきましょう。

この章で扱う内容

  • メタデータとは何か。
  • メタデータの種類。
  • メタデータで Open Graph 画像 を追加する方法。
  • メタデータで favicon を追加する方法。

メタデータとは？

Web 開発におけるメタデータは，ページに関する追加情報です。ユーザーからは見えず，多くの場合 <head> 内に埋め込まれます。検索エンジンや各種システムがページ内容をよりよく理解するために不可欠です。

なぜメタデータが重要か？

メタデータは，検索エンジンやソーシャルメディアに対してページをわかりやすく提示し，SEO を向上させます。適切なメタデータは，検索エンジンによるインデックス精度を高め，検索結果での表示を改善します。さらに Open Graph などを設定すると，SNS でのリンクプレビューが見やすく魅力的になります。

メタデータの種類

それぞれ目的の異なるメタデータが存在します。代表例は次のとおりです。

タイトルメタデータ：ブラウザのタブに表示されるページタイトルで，検索エンジンに内容を伝えるうえでも重要です。

<title>Page Title</title>

ディスクリプションメタデータ：ページ内容の要約で，検索結果などに表示されることがあります。

<meta name="description" content="A brief description of the page content." />

キーワードメタデータ：ページ内容に関連するキーワードで，インデックス作成を助けます。

<meta name="keywords" content="keyword1, keyword2, keyword3" />

Open Graph メタデータ：SNS で共有された際の表示（タイトル，説明，プレビュー画像など）を改善します。

<meta property="og:title" content="Title Here" />
<meta property="og:description" content="Description Here" />
<meta property="og:image" content="image_url_here" />

Favicon メタデータ：アドレスバーやタブに表示される小さなアイコンを指定します。

<link rel="icon" href="path/to/favicon.ico" />

メタデータの追加方法

Next.js には Metadata API があり，アプリのメタデータを定義できます。方法は 2 通りです。

  1. 設定ベース：layout.tsx または page.tsx に 静的な metadata オブジェクト をエクスポート，または 動的な generateMetadata 関数 をエクスポートします。

  2. ファイルベース：メタデータ専用の特殊ファイルを配置します。

  3. favicon.ico，apple-icon.jpg，icon.jpg：favicon／アイコン

  4. opengraph-image.jpg，twitter-image.jpg：SNS 用画像
  5. robots.txt：クローラへの指示
  6. sitemap.xml：サイト構造の提示

どちらの方法でも，Next.js が自動的に <head> の要素を生成します。 ファイルは 固定ファイルとして使うことも，プログラム生成することも可能です。

Favicon と Open Graph 画像

/public フォルダに favicon.ico と opengraph-image.jpg があるはずです。これらを /app フォルダ直下に移動してください。

移動すると，Next.js が自動的に favicon と OG 画像として認識・使用します。DevTools で <head> を確認してみましょう。

補足：ImageResponse コンストラクタを使って 動的な OG 画像 を生成することも可能です。

ページタイトルとディスクリプション

layout.tsx または page.tsx で metadata オブジェクトをエクスポートすると，タイトルや説明などを追加できます。レイアウトの metadata は子ページに継承されます。

まずルートレイアウトにメタデータを追加します。

/app/layout.tsx
import { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Acme Dashboard',
  description: 'The official Next.js Course Dashboard, built with App Router.',
  metadataBase: new URL('https://next-learn-dashboard.vercel.sh'),
};

export default function RootLayout() {
  // ...
}

Next.js が自動で <head> に反映します。

特定ページで個別タイトルを設定したい場合は，そのページに metadata を定義すると，親のメタデータを上書きできます。例として /dashboard/invoices でページタイトルを更新します。

/app/dashboard/invoices/page.tsx
import { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Invoices | Acme Dashboard',
};

動きますが，アプリ名を毎回書くのは冗長です。会社名が変わったら全ページ修正が必要になります。

そこで タイトルテンプレートを使います。

/app/layout.tsx
import { Metadata } from 'next';

export const metadata: Metadata = {
  title: {
    template: '%s | Acme Dashboard',
    default: 'Acme Dashboard',
  },
  description: 'The official Next.js Learn Dashboard built with App Router.',
  metadataBase: new URL('https://next-learn-dashboard.vercel.sh'),
};

テンプレートの %s に各ページのタイトルが入ります。 以後，ページ側はシンプルに：

/app/dashboard/invoices/page.tsx
import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Invoices',
};

/dashboard/invoices の <head> を見ると，Invoices | Acme Dashboard になっているはずです。

Practice：メタデータを追加しよう

学んだ内容を用いて，以下のページにタイトルを追加してください。

  • /login
  • /dashboard/
  • /dashboard/customers
  • /dashboard/invoices/create
  • /dashboard/invoices/[id]/edit

ヒント：共通の「アプリ名」はテンプレートで layout.tsx にまとめ，ページ側は短いタイトルだけを設定すると保守しやすくなります。 さらに keywords，robots，alternates.canonical なども必要に応じて追加できます。ドキュメントを参照して拡張してみてください。