メインコンテンツまでスキップ

generateMetadata

このページでは、generateMetadataと静的メタデータオブジェクトを使用したすべての構成ベースのメタデータオプションについて説明します。

layout.tsx | page.tsx
import type { Metadata } from 'next'

// either Static metadata
export const metadata: Metadata = {
title: '...',
}

// or Dynamic metadata
export async function generateMetadata({ params }) {
return {
title: '...',
}
}

Good to know:

  • metadataオブジェクトとgenerateMetadata関数のエクスポートは、Server Componentsのみサポートされています。
  • 同じルートセグメントからmetadataオブジェクトとgenerateMetadata関数の両方をエクスポートすることはできません。
  • 初回のロード時、generateMetadataが完全に解決され、loading.jsからのコンテンツが含まれている場合、ストリーミングはブロックされます。

metadataオブジェクト

静的メタデータを定義するには、layout.jsまたはpage.jsファイルからMetadataオブジェクトをエクスポートします。

layout.tsx | page.tsx
import type { Metadata } from 'next'

export const metadata: Metadata = {
title: '...',
description: '...',
}

export default function Page() {}

サポートされているオプションの完全なリストについては、メタデータフィールドを参照してください。

generateMetadata関数

動的メタデータは、現在のルートパラメータ、外部データ、または親セグメントのmetadataのような動的情報に依存し、Metadataオブジェクトを返すgenerateMetadata関数をエクスポートすることで設定できます。

app/products/[id]/page.tsx
import type { Metadata, ResolvingMetadata } from 'next'

type Props = {
params: { id: string }
searchParams: { [key: string]: string | string[] | undefined }
}

export async function generateMetadata(
{ params, searchParams }: Props,
parent: ResolvingMetadata
): Promise<Metadata> {
// ルートパラメータを読み込む
const id = (await params).id

// データを取得する
const product = await fetch(`https://.../${id}`).then((res) => res.json())

// 親のメタデータをアクセスして拡張する(置き換えるのではなく)
const previousImages = (await parent).openGraph?.images || []

return {
title: product.title,
openGraph: {
images: ['/some-specific-page-image.jpg', ...previousImages],
},
}
}

export default function Page({ params, searchParams }: Props) {}

パラメータ

generateMetadata関数は次のパラメータを受け取ります:

  • props - 現在のルートのパラメータを含むオブジェクト:

    • params - rootセグメントからこのセグメントへの動的ルートパラメータを含むオブジェクトです。例:

      ルートURLparams
      app/shop/[slug]/page.js/shop/1{ slug: '1' }
      app/shop/[tag]/[item]/page.js/shop/1/2{ tag: '1', item: '2' }
      app/shop/[...slug]/page.js/shop/1/2{ slug: ['1', '2'] }
    • searchParams - 現在のURLの検索パラメータを含むオブジェクトです。例:

      URLsearchParams
      /shop?a=1{ a: '1' }
      /shop?a=1&b=2{ a: '1', b: '2' }
      /shop?a=1&a=2{ a: ['1', '2'] }
  • parent - 親ルートセグメントからの解決済みメタデータのPromise。

戻り値

generateMetadataは1つ以上のメタデータフィールドを含むMetadataオブジェクトを返すべきです。

Good to know:

  • メタデータが実行時の情報に依存しない場合は、generateMetadataではなく静的なmetadataオブジェクトを使用して定義するべきです。
  • fetchリクエストは、generateMetadatagenerateStaticParams、レイアウト、ページ、およびServer Componentsの異なるデータに対して自動的にメモ化されます。React cacheを使用してデータをキャッシュすることができます。
  • searchParamspage.jsセグメント内でのみ利用できます。
  • Next.jsのredirect()notFound()メソッドはgenerateMetadata内でも使用可能です。

メタデータフィールド

title

title属性はドキュメントのタイトルを設定するために使用されます。シンプルな文字列として定義することも、オプションのテンプレートオブジェクトとして定義することもできます。

文字列

layout.js | page.js
export const metadata = {
title: 'Next.js',
}
<head> 出力
<title>Next.js</title>

テンプレートオブジェクト

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

export const metadata: Metadata = {
title: {
template: '...',
default: '...',
absolute: '...',
},
}
デフォルト

title.defaultは、titleを定義していない子ルートセグメントにフォールバックタイトルを提供するために使用できます。

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

export const metadata: Metadata = {
title: {
default: 'Acme',
},
}
app/about/page.tsx
import type { Metadata } from 'next'

export const metadata: Metadata = {}

// Output: <title>Acme</title>
テンプレート

title.templateは、ルートセグメントで定義されたtitleにプレフィックスやサフィックスを追加するために使用できます。

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

export const metadata: Metadata = {
title: {
template: '%s | Acme',
default: 'Acme', // テンプレートを作成するにはデフォルトが必要です
},
}
app/about/page.tsx
import type { Metadata } from 'next'

export const metadata: Metadata = {
title: 'About',
}

// Output: <title>About | Acme</title>

Good to know:

  • title.templateは、定義されたセグメントではなく、ルートセグメントに適用されます。これは以下を意味します:

    • title.templateを追加する場合、title.default必須です。
    • layout.jsに定義されたtitle.templateは、同じルートセグメントのpage.jsに定義されたtitleには適用されません。
    • page.jsに定義されたtitle.templateは、ページが常に終端セグメントであるため、効果がありません(子ルートセグメントがありません)。
  • ルートにtitleまたはtitle.defaultが定義されていない場合、title.templateは効果がありません。

絶対

title.absoluteは、親セグメントで設定されたtitle.template無視するタイトルを提供するために使用できます。

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

export const metadata: Metadata = {
title: {
template: '%s | Acme',
},
}
app/about/page.tsx
import type { Metadata } from 'next'

export const metadata: Metadata = {
title: {
absolute: 'About',
},
}

// Output: <title>About</title>

Good to know:

  • layout.js

    • title(文字列)とtitle.defaultは、それ自身のtitleを定義しない子セグメントのデフォルトタイトルを定義します。存在する場合、最も近い親セグメントからのtitle.templateにアクセントを加えます。
    • title.absoluteは、子セグメントのデフォルトタイトルを定義します。親セグメントからのtitle.templateを無視します。
    • title.templateは、子セグメントの新しいタイトルテンプレートを定義します。
  • page.js

    • ページが独自のタイトルを定義していない場合、最も近い親の解決済みタイトルが使用されます。
    • title(文字列)はルートのタイトルを定義します。存在する場合、最も近い親セグメントからのtitle.templateにアクセントを加えます。
    • title.absoluteはルートのタイトルを定義します。親セグメントからのtitle.templateを無視します。
    • title.templateはルートのタイトルを定義します。ページは常にルートの終端セグメントであるため、page.jsでは効果がありません。

description

layout.js | page.js
export const metadata = {
description: 'The React Framework for the Web',
}
<head> 出力
<meta name="description" content="The React Framework for the Web" />

基本的なフィールド

layout.js | page.js
export const metadata = {
generator: 'Next.js',
applicationName: 'Next.js',
referrer: 'origin-when-cross-origin',
keywords: ['Next.js', 'React', 'JavaScript'],
authors: [{ name: 'Seb' }, { name: 'Josh', url: 'https://nextjs.org' }],
creator: 'Jiachi Liu',
publisher: 'Sebastian Markbåge',
formatDetection: {
email: false,
address: false,
telephone: false,
},
}
<head> 出力
<meta name="application-name" content="Next.js" />
<meta name="author" content="Seb" />
<link rel="author" href="https://nextjs.org" />
<meta name="author" content="Josh" />
<meta name="generator" content="Next.js" />
<meta name="keywords" content="Next.js,React,JavaScript" />
<meta name="referrer" content="origin-when-cross-origin" />
<meta name="color-scheme" content="dark" />
<meta name="creator" content="Jiachi Liu" />
<meta name="publisher" content="Sebastian Markbåge" />
<meta name="format-detection" content="telephone=no, address=no, email=no" />

metadataBase

metadataBaseは、完全修飾URLを必要とするmetadataフィールドのベースURLプレフィックスを設定するための便利なオプションです。

  • metadataBaseを使用すると、現在のルートセグメントおよびそれ以下で定義されるURLベースのmetadataフィールドが、他に必須となる絶対URLの代わりに相対パスを使用できます。
  • フィールドの相対パスは、metadataBaseと組み合わされて完全修飾URLを形成します。
  • 設定されていない場合、metadataBaseデフォルト値自動的に設定されます。
layout.js | page.js
export const metadata = {
metadataBase: new URL('https://acme.com'),
alternates: {
canonical: '/',
languages: {
'en-US': '/en-US',
'de-DE': '/de-DE',
},
},
openGraph: {
images: '/og-image.png',
},
}
<head> 出力
<link rel="canonical" href="https://acme.com" />
<link rel="alternate" hreflang="en-US" href="https://acme.com/en-US" />
<link rel="alternate" hreflang="de-DE" href="https://acme.com/de-DE" />
<meta property="og:image" content="https://acme.com/og-image.png" />

Good to know:

  • metadataBaseは、URLベースのmetadataフィールドに対して全ルートに適用するために、root app/layout.jsで設定されるのが一般的です。
  • 完全URLを必要とするすべてのURLベースのmetadataフィールドは、metadataBaseオプションで設定できます。
  • metadataBaseはサブドメインe.g.https://app.acme.comやベースパスe.g.https://acme.com/start/from/hereを含むことができます。
  • metadataフィールドが絶対URLを提供する場合、metadataBaseは無視されます。
  • URLベースのmetadataフィールドで相対パスを使用し、metadataBaseを設定しないと、ビルドエラーが発生します。
  • Next.jsはmetadataBase(例:https://acme.com/)と相対フィールド(例:/path)の間の重複するスラッシュを単一のスラッシュ(例:https://acme.com/path)に正規化します。

デフォルト値

設定されていない場合、metadataBaseにはデフォルト値があります。

Vercel上:

  • 本番デプロイメントの場合、VERCEL_PROJECT_PRODUCTION_URLが使用されます。
  • プレビューデプロイメントの場合、VERCEL_BRANCH_URLが優先され、存在しない場合はVERCEL_URLがフォールバックとして使用されます。

これらの値が存在する場合、metadataBaseデフォルト値として使用されます。そうでない場合、http://localhost:${process.env.PORT || 3000}にフォールバックします。これにより、Open Graphの画像がローカルビルド、Vercelプレビュー、および本番デプロイメントの両方で機能します。デフォルトを上書きする場合、環境変数を使用してURLを計算することをお勧めします。これにより、ローカル開発、ステージング、および本番環境のURLを構成できます。

これらの環境変数についての詳細は、システム環境変数ドキュメントに表示されます。

URLの組成

URLの構成は、ディレクトリトラバーサルのデフォルトの意味よりも開発者の意図を優先します。

  • metadataBasemetadataフィールドの間のトレイリングスラッシュは正規化されます。
  • metadataフィールド内の「絶対」パス(通常はURLパス全体を置き換える)は、「相対」パス(metadataBaseの終わりから開始)として扱われます。

例えば、次のmetadataBaseが与えられた場合:

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

export const metadata: Metadata = {
metadataBase: new URL('https://acme.com'),
}

上記のmetadataBaseを継承し、独自の値を設定するmetadataフィールドは、次のように解決されます:

metadata フィールド解決済みURL
/https://acme.com
./https://acme.com
paymentshttps://acme.com/payments
/paymentshttps://acme.com/payments
./paymentshttps://acme.com/payments
../paymentshttps://acme.com/payments
https://beta.acme.com/paymentshttps://beta.acme.com/payments

openGraph

layout.js | page.js
export const metadata = {
openGraph: {
title: 'Next.js',
description: 'The React Framework for the Web',
url: 'https://nextjs.org',
siteName: 'Next.js',
images: [
{
url: 'https://nextjs.org/og.png', // 必須:絶対URL
width: 800,
height: 600,
},
{
url: 'https://nextjs.org/og-alt.png', // 必須:絶対URL
width: 1800,
height: 1600,
alt: 'My custom alt',
},
],
videos: [
{
url: 'https://nextjs.org/video.mp4', // 必須:絶対URL
width: 800,
height: 600,
},
],
audio: [
{
url: 'https://nextjs.org/audio.mp3', // 必須:絶対URL
},
],
locale: 'en_US',
type: 'website',
},
}
<head> 出力
<meta property="og:title" content="Next.js" />
<meta property="og:description" content="The React Framework for the Web" />
<meta property="og:url" content="https://nextjs.org/" />
<meta property="og:site_name" content="Next.js" />
<meta property="og:locale" content="en_US" />
<meta property="og:image" content="https://nextjs.org/og.png" />
<meta property="og:image:width" content="800" />
<meta property="og:image:height" content="600" />
<meta property="og:image" content="https://nextjs.org/og-alt.png" />
<meta property="og:image:width" content="1800" />
<meta property="og:image:height" content="1600" />
<meta property="og:image:alt" content="My custom alt" />
<meta property="og:video" content="https://nextjs.org/video.mp4" />
<meta property="og:video:width" content="800" />
<meta property="og:video:height" content="600" />
<meta property="og:audio" content="https://nextjs.org/audio.mp3" />
<meta property="og:type" content="website" />
layout.js | page.js
export const metadata = {
openGraph: {
title: 'Next.js',
description: 'The React Framework for the Web',
type: 'article',
publishedTime: '2023-01-01T00:00:00.000Z',
authors: ['Seb', 'Josh'],
},
}
<head> 出力
<meta property="og:title" content="Next.js" />
<meta property="og:description" content="The React Framework for the Web" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2023-01-01T00:00:00.000Z" />
<meta property="article:author" content="Seb" />
<meta property="article:author" content="Josh" />

Good to know:

  • Open GraphイメージのためにファイルベースのメタデータAPIを使用する方が便利かもしれません。実際のファイルと設定エクスポートを同期させる必要はなく、ファイルベースのAPIが自動的に正しいメタデータを生成します。

robots

layout.tsx | page.tsx
import type { Metadata } from 'next'

export const metadata: Metadata = {
robots: {
index: false,
follow: true,
nocache: true,
googleBot: {
index: true,
follow: false,
noimageindex: true,
'max-video-preview': -1,
'max-image-preview': 'large',
'max-snippet': -1,
},
},
}
<head> 出力
<meta name="robots" content="noindex, follow, nocache" />
<meta
name="googlebot"
content="index, nofollow, noimageindex, max-video-preview:-1, max-image-preview:large, max-snippet:-1"
/>

icons

Good to know: アイコンには可能な限りファイルベースのメタデータAPIを使用することをお勧めします。実際のファイルと設定エクスポートを同期させる必要はなく、ファイルベースのAPIが自動的に正しいメタデータを生成します。

layout.js | page.js
export const metadata = {
icons: {
icon: '/icon.png',
shortcut: '/shortcut-icon.png',
apple: '/apple-icon.png',
other: {
rel: 'apple-touch-icon-precomposed',
url: '/apple-touch-icon-precomposed.png',
},
},
}
<head> 出力
<link rel="shortcut icon" href="/shortcut-icon.png" />
<link rel="icon" href="/icon.png" />
<link rel="apple-touch-icon" href="/apple-icon.png" />
<link
rel="apple-touch-icon-precomposed"
href="/apple-touch-icon-precomposed.png"
/>
layout.js | page.js
export const metadata = {
icons: {
icon: [
{ url: '/icon.png' },
new URL('/icon.png', 'https://example.com'),
{ url: '/icon-dark.png', media: '(prefers-color-scheme: dark)' },
],
shortcut: ['/shortcut-icon.png'],
apple: [
{ url: '/apple-icon.png' },
{ url: '/apple-icon-x3.png', sizes: '180x180', type: 'image/png' },
],
other: [
{
rel: 'apple-touch-icon-precomposed',
url: '/apple-touch-icon-precomposed.png',
},
],
},
}
<head> 出力
<link rel="shortcut icon" href="/shortcut-icon.png" />
<link rel="icon" href="/icon.png" />
<link rel="icon" href="https://example.com/icon.png" />
<link rel="icon" href="/icon-dark.png" media="(prefers-color-scheme: dark)" />
<link rel="apple-touch-icon" href="/apple-icon.png" />
<link
rel="apple-touch-icon-precomposed"
href="/apple-touch-icon-precomposed.png"
/>
<link
rel="apple-touch-icon"
href="/apple-icon-x3.png"
sizes="180x180"
type="image/png"
/>

Good to know: msapplication-*メタタグは、Microsoft EdgeのChromiumビルドでサポートされていないため、もはや必要ありません。

themeColor

Deprecated: metadata内のthemeColorオプションはNext.js 14から非推奨です。代わりにviewportの設定を使用してください。

manifest

Web Application Manifest仕様で定義されているWebアプリケーションマニフェスト。

layout.js | page.js
export const metadata = {
manifest: 'https://nextjs.org/manifest.json',
}
<head> 出力
<link rel="manifest" href="https://nextjs.org/manifest.json" />

twitter

Twitter仕様は、X(旧Twitter)だけでなく、他の用途にも使用されます。

Twitter Cardマークアップリファレンスについて詳しく学びましょう。

layout.js | page.js
export const metadata = {
twitter: {
card: 'summary_large_image',
title: 'Next.js',
description: 'The React Framework for the Web',
siteId: '1467726470533754880',
creator: '@nextjs',
creatorId: '1467726470533754880',
images: ['https://nextjs.org/og.png'], // 必須:絶対URL
},
}
<head> 出力
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site:id" content="1467726470533754880" />
<meta name="twitter:creator" content="@nextjs" />
<meta name="twitter:creator:id" content="1467726470533754880" />
<meta name="twitter:title" content="Next.js" />
<meta name="twitter:description" content="The React Framework for the Web" />
<meta name="twitter:image" content="https://nextjs.org/og.png" />
layout.js | page.js
export const metadata = {
twitter: {
card: 'app',
title: 'Next.js',
description: 'The React Framework for the Web',
siteId: '1467726470533754880',
creator: '@nextjs',
creatorId: '1467726470533754880',
images: {
url: 'https://nextjs.org/og.png',
alt: 'Next.js Logo',
},
app: {
name: 'twitter_app',
id: {
iphone: 'twitter_app://iphone',
ipad: 'twitter_app://ipad',
googleplay: 'twitter_app://googleplay',
},
url: {
iphone: 'https://iphone_url',
ipad: 'https://ipad_url',
},
},
},
}
<head> 出力
<meta name="twitter:site:id" content="1467726470533754880" />
<meta name="twitter:creator" content="@nextjs" />
<meta name="twitter:creator:id" content="1467726470533754880" />
<meta name="twitter:title" content="Next.js" />
<meta name="twitter:description" content="The React Framework for the Web" />
<meta name="twitter:card" content="app" />
<meta name="twitter:image" content="https://nextjs.org/og.png" />
<meta name="twitter:image:alt" content="Next.js Logo" />
<meta name="twitter:app:name:iphone" content="twitter_app" />
<meta name="twitter:app:id:iphone" content="twitter_app://iphone" />
<meta name="twitter:app:id:ipad" content="twitter_app://ipad" />
<meta name="twitter:app:id:googleplay" content="twitter_app://googleplay" />
<meta name="twitter:app:url:iphone" content="https://iphone_url" />
<meta name="twitter:app:url:ipad" content="https://ipad_url" />
<meta name="twitter:app:name:ipad" content="twitter_app" />
<meta name="twitter:app:name:googleplay" content="twitter_app" />

viewport

Deprecated: metadata内のviewportオプションはNext.js 14から非推奨です。代わりにviewportの設定を使用してください。

verification

layout.js | page.js
export const metadata = {
verification: {
google: 'google',
yandex: 'yandex',
yahoo: 'yahoo',
other: {
me: ['my-email', 'my-link'],
},
},
}
<head> 出力
<meta name="google-site-verification" content="google" />
<meta name="y_key" content="yahoo" />
<meta name="yandex-verification" content="yandex" />
<meta name="me" content="my-email" />
<meta name="me" content="my-link" />

appleWebApp

layout.js | page.js
export const metadata = {
itunes: {
appId: 'myAppStoreID',
appArgument: 'myAppArgument',
},
appleWebApp: {
title: 'Apple Web App',
statusBarStyle: 'black-translucent',
startupImage: [
'/assets/startup/apple-touch-startup-image-768x1004.png',
{
url: '/assets/startup/apple-touch-startup-image-1536x2008.png',
media: '(device-width: 768px) and (device-height: 1024px)',
},
],
},
}
<head> 出力
<meta
name="apple-itunes-app"
content="app-id=myAppStoreID, app-argument=myAppArgument"
/>
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-title" content="Apple Web App" />
<link
href="/assets/startup/apple-touch-startup-image-768x1004.png"
rel="apple-touch-startup-image"
/>
<link
href="/assets/startup/apple-touch-startup-image-1536x2008.png"
media="(device-width: 768px) and (device-height: 1024px)"
rel="apple-touch-startup-image"
/>
<meta
name="apple-mobile-web-app-status-bar-style"
content="black-translucent"
/>

alternates

layout.js | page.js
export const metadata = {
alternates: {
canonical: 'https://nextjs.org',
languages: {
'en-US': 'https://nextjs.org/en-US',
'de-DE': 'https://nextjs.org/de-DE',
},
media: {
'only screen and (max-width: 600px)': 'https://nextjs.org/mobile',
},
types: {
'application/rss+xml': 'https://nextjs.org/rss',
},
},
}
<head> 出力
<link rel="canonical" href="https://nextjs.org" />
<link rel="alternate" hreflang="en-US" href="https://nextjs.org/en-US" />
<link rel="alternate" hreflang="de-DE" href="https://nextjs.org/de-DE" />
<link
rel="alternate"
media="only screen and (max-width: 600px)"
href="https://nextjs.org/mobile"
/>
<link
rel="alternate"
type="application/rss+xml"
href="https://nextjs.org/rss"
/>
layout.js | page.js
export const metadata = {
appLinks: {
ios: {
url: 'https://nextjs.org/ios',
app_store_id: 'app_store_id',
},
android: {
package: 'com.example.android/package',
app_name: 'app_name_android',
},
web: {
url: 'https://nextjs.org/web',
should_fallback: true,
},
},
}
<head> 出力
<meta property="al:ios:url" content="https://nextjs.org/ios" />
<meta property="al:ios:app_store_id" content="app_store_id" />
<meta property="al:android:package" content="com.example.android/package" />
<meta property="al:android:app_name" content="app_name_android" />
<meta property="al:web:url" content="https://nextjs.org/web" />
<meta property="al:web:should_fallback" content="true" />

archives

歴史的な興味を持つ記録、文書、その他の資料の集まりを記述します(ソース)。

layout.js | page.js
export const metadata = {
archives: ['https://nextjs.org/13'],
}
<head> 出力
<link rel="archives" href="https://nextjs.org/13" />

assets

layout.js | page.js
export const metadata = {
assets: ['https://nextjs.org/assets'],
}
<head> 出力
<link rel="assets" href="https://nextjs.org/assets" />

bookmarks

layout.js | page.js
export const metadata = {
bookmarks: ['https://nextjs.org/13'],
}
<head> 出力
<link rel="bookmarks" href="https://nextjs.org/13" />

category

layout.js | page.js
export const metadata = {
category: 'technology',
}
<head> 出力
<meta name="category" content="technology" />

facebook

特定のFacebookソーシャルプラグインのためにFacebookアプリまたはFacebookアカウントをページに接続することができます。Facebookのドキュメント

Good to know: appIdまたはadminsのいずれかを指定できますが、両方を指定することはできません。

layout.js | page.js
export const metadata = {
facebook: {
appId: '12345678',
},
}
<head> 出力
<meta property="fb:app_id" content="12345678" />
layout.js | page.js
export const metadata = {
facebook: {
admins: '12345678',
},
}
<head> 出力
<meta property="fb:admins" content="12345678" />

複数のfb:adminsメタタグを生成する場合は、配列値を使用できます。

layout.js | page.js
export const metadata = {
facebook: {
admins: ['12345678', '87654321'],
},
}
<head> 出力
<meta property="fb:admins" content="12345678" />
<meta property="fb:admins" content="87654321" />

other

すべてのメタデータオプションは、組み込みのサポートを使用してカバーされるべきです。ただし、サイト固有のカスタムメタデータタグや、新しくリリースされたメタデータタグが存在するかもしれません。その場合は、otherオプションを使用して任意のカスタムメタデータタグをレンダリングできます。

layout.js | page.js
export const metadata = {
other: {
custom: 'meta',
},
}
<head> 出力
<meta name="custom" content="meta" />

同じキーのメタタグを複数生成したい場合は、配列値を使用できます。

layout.js | page.js
export const metadata = {
other: {
custom: ['meta1', 'meta2'],
},
}
<head> 出力
<meta name="custom" content="meta1" /> <meta name="custom" content="meta2" />

サポートされていないメタデータ

現在、組み込みサポートがないメタデータタイプは以下のとおりです。ただし、それらはレイアウトまたはページ自体でレンダリングできます。

メタデータ推奨
<meta http-equiv="...">適切なHTTPヘッダーを使用(redirect()Middlewareセキュリティヘッダーを使用)
<base>レイアウトまたはページ自体でタグをレンダリング
<noscript>レイアウトまたはページ自体でタグをレンダリング
<style>Next.jsでのスタイリングについて詳しく学ぶ
<script>スクリプトの使用について詳しく学ぶ
<link rel="stylesheet" />スタイルシートをレイアウトまたはページ自体で import
<link rel="preload />ReactDOM preloadメソッドを使用
<link rel="preconnect" />ReactDOM preconnectメソッドを使用
<link rel="dns-prefetch" />ReactDOM prefetchDNSメソッドを使用

リソースヒント

<link>要素には、外部リソースが必要とされる可能性があることをブラウザにヒントするために使用できるいくつかのrelキーワードがあります。ブラウザはこの情報を使用して、キーワードに応じてプリロードの最適化を適用します。

メタデータAPIはこれらのヒントを直接サポートしているわけではありませんが、新しいReactDOMメソッドを使用して、ドキュメントの<head>内にそれらを安全に挿入できます。

app/preload-resources.tsx
'use client'

import ReactDOM from 'react-dom'

export function PreloadResources() {
ReactDOM.preload('...', { as: '...' })
ReactDOM.preconnect('...', { crossOrigin: '...' })
ReactDOM.prefetchDNS('...')

return '...'
}

ページレンダリング(ブラウザ)ライフサイクルの早期にリソースの読み込みを開始します。MDN Docs

ReactDOM.preload(href: string, options: { as: string })
<head> 出力
<link rel="preload" href="..." as="..." />

オリジンへの接続を事前に開始します。MDN Docs

ReactDOM.preconnect(href: string, options?: { crossOrigin?: string })
<head> 出力
<link rel="preconnect" href="..." crossorigin />

リソースの要求前にドメイン名を解決しようとします。MDN Docs

ReactDOM.prefetchDNS(href: string)
<head> 出力
<link rel="dns-prefetch" href="..." />

Good to know:

  • これらのメソッドは現在、Client Componentsでのみサポートされています。これらは初回ページロード時にはサーバーサイドでレンダリングされます。
  • Next.jsの組み込み機能であるnext/fontnext/imagenext/scriptなどは、関連するリソースヒントを自動的に処理します。

Metadata型を使用してメタデータに型安全性を追加できます。もしIDEで組み込みTypeScriptプラグインを使用している場合、手動で型を追加する必要はありませんが、必要であれば明示的に追加することもできます。

metadataオブジェクト

layout.tsx | page.tsx
import type { Metadata } from 'next'

export const metadata: Metadata = {
title: 'Next.js',
}

generateMetadata関数

通常の関数

layout.tsx | page.tsx
import type { Metadata } from 'next'

export function generateMetadata(): Metadata {
return {
title: 'Next.js',
}
}

非同期関数

layout.tsx | page.tsx
import type { Metadata } from 'next'

export async function generateMetadata(): Promise<Metadata> {
return {
title: 'Next.js',
}
}

セグメントprops付き

layout.tsx | page.tsx
import type { Metadata } from 'next'

type Props = {
params: { id: string }
searchParams: { [key: string]: string | string[] | undefined }
}

export function generateMetadata({ params, searchParams }: Props): Metadata {
return {
title: 'Next.js',
}
}

export default function Page({ params, searchParams }: Props) {}

親メタデータ付き

layout.tsx | page.tsx
import type { Metadata, ResolvingMetadata } from 'next'

export async function generateMetadata(
{ params, searchParams }: Props,
parent: ResolvingMetadata
): Promise<Metadata> {
return {
title: 'Next.js',
}
}

JavaScriptプロジェクト

JavaScriptプロジェクトでは、JSDocを使用して型安全性を追加できます。

layout.js | page.js
/** @type {import("next").Metadata} */
export const metadata = {
title: 'Next.js',
}

バージョン履歴

バージョン変更点
v13.2.0viewportthemeColor、およびcolorSchemeは、viewportの設定を推奨し非推奨になりました。
v13.2.0metadatagenerateMetadataが導入されました。