generateMetadata
メタデータを定義するには、metadataオブジェクトまたはgenerateMetadata関数を使用できます。
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関数をエクスポートすることで設定できます。
generateMetadataの解決は、ページのレンダリングの一部です。ページがプリレンダリング可能であり、generateMetadataが動的な動作を導入しない場合、結果のメタデータはページの初期HTMLに含まれます。
それ以外の場合、generateMetadataから解決されたメタデータは、初期UIの送信後にストリームできます。
app/products/[id]/page.tsx
import type { Metadata, ResolvingMetadata } from 'next'
type Props = {
params: Promise<{ id: string }>
searchParams: Promise<{ [key: string]: string | string[] | undefined }>
}
export async function generateMetadata(
{ params, searchParams }: Props,
parent: ResolvingMetadata
): Promise<Metadata> {
// read route params
const { id } = await params
// fetch data
const product = await fetch(`https://.../${id}`).then((res) => res.json())
// optionally access and extend (rather than replace) parent metadata
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) {}paramsおよびsearchParamsの型補完のために、最初の引数をPageProps<'/route'>またはページおよびレイアウトの場合はLayoutProps<'/route'>で型付けできます。
知っておくと良いこと:
- メタデータは
layout.jsおよびpage.jsファイルに追加できます。- Next.jsは自動的にメタデータを解決し、ページに関連する
<head>タグを作成します。metadataオブジェクトおよびgenerateMetadata関数エクスポートは、サーバーコンポーネントでのみサポートされています。- 同じルートセグメントから
metadataオブジェクトとgenerateMetadata関数の両方をエクスポートすることはできません。generateMetadata内のfetchリクエストは、generateMetadata、generateStaticParams、レイアウト、ページ、およびサーバーコンポーネント間で同じデータに対して自動的にメモ化されます。fetchが利用できない場合は、Reactのcacheを使用できます。- ファイルベースのメタデータは、
metadataオブジェクトとgenerateMetadata関数よりも優先度が高く、それらを上書きします。
リファレンス
Parameters
generateMetadata関数は、次のパラメータを受け取ります
-
props- 現在のルートのパラメータを含むオブジェクト-
params- ルートセグメントからgenerateMetadataが呼び出されるセグメントまでの動的ルートパラメータオブジェクトを含むオブジェクト。例:Route URL paramsapp/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の検索パラメータを含むオブジェクト。例:URL searchParams/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オブジェクトを返す必要があります。
知っておくと良いこと:
- メタデータが実行時情報に依存しない場合は、
generateMetadataではなく、静的なmetadataオブジェクトを使用して定義する必要があります。fetchリクエストは、generateMetadata、generateStaticParams、レイアウト、ページ、およびサーバーコンポーネント間で同じデータに対して自動的にメモ化されます。fetchが利用できない場合は、Reactのcacheを使用できます。searchParamsはpage.jsセグメントでのみ利用可能です。- Next.jsの
redirect()およびnotFound()メソッドもgenerateMetadata内で使用できます。
メタデータフィールド
以下のフィールドがサポートされています
title
title属性は、ドキュメントのタイトルを設定するために使用されます。これは、単純な文字列またはオプションのテンプレートオブジェクトとして定義できます。
文字列
layout.js | page.js
export const metadata = {
title: 'Next.js',
}<head> 出力
<title>Next.js</title>default
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>template
title.templateは、子ルートセグメントで定義されたtitleにプレフィックスまたはサフィックスを追加するために使用できます。
app/layout.tsx
import type { Metadata } from 'next'
export const metadata: Metadata = {
title: {
template: '%s | Acme',
default: 'Acme', // a default is required when creating a template
},
}app/about/page.tsx
import type { Metadata } from 'next'
export const metadata: Metadata = {
title: 'About',
}
// Output: <title>About | Acme</title>知っておくと良いこと:
title.templateは、定義されているセグメントではなく、子ルートセグメントに適用されます。これは意味します
title.templateを追加する場合は、title.defaultが必須です。layout.jsで定義されたtitle.templateは、同じルートセグメントのpage.jsで定義されたtitleには適用されません。page.jsで定義されたtitle.templateは、ページは常にルートの終端セグメントであるため（子ルートセグメントがないため）、効果がありません。- ルートに
titleまたはtitle.defaultが定義されていない場合、title.templateは効果がありません。
absolute
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>知っておくと良いこと:
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.dokyumento.jp' }],
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.dokyumento.jp" />
<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を形成します。
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" />知っておくと良いこと:
metadataBaseは通常、ルートのapp/layout.jsで設定され、すべてのルートのURLベースのmetadataフィールドに適用されます。- 絶対URLを必要とするすべてのURLベースの
metadataフィールドは、metadataBaseオプションで構成できます。metadataBaseには、サブドメイン（例：https://app.acme.com）またはベースパス（例：https://acme.com/start/from/here）を含めることができます。metadataフィールドが絶対URLを提供する場合、metadataBaseは無視されます。metadataBaseを設定せずにURLベースのmetadataフィールドで相対パスを使用すると、ビルドエラーが発生します。- Next.jsは、
metadataBase（例：https://acme.com/）と相対フィールド（例：/path）間の重複したスラッシュを、1つのスラッシュ（例：https://acme.com/path）に正規化します。
URLの構成
URLの構成は、デフォルトのディレクトリトラバーサルセマンティクスよりも開発者の意図を優先します。
metadataBaseとmetadataフィールド間の末尾スラッシュは正規化されます。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 |
payments | https://acme.com/payments |
/payments | https://acme.com/payments |
./payments | https://acme.com/payments |
../payments | https://acme.com/payments |
https://beta.acme.com/payments | https://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.dokyumento.jp',
siteName: 'Next.js',
images: [
{
url: 'https://nextjs.dokyumento.jp/og.png', // Must be an absolute URL
width: 800,
height: 600,
},
{
url: 'https://nextjs.dokyumento.jp/og-alt.png', // Must be an absolute URL
width: 1800,
height: 1600,
alt: 'My custom alt',
},
],
videos: [
{
url: 'https://nextjs.dokyumento.jp/video.mp4', // Must be an absolute URL
width: 800,
height: 600,
},
],
audio: [
{
url: 'https://nextjs.dokyumento.jp/audio.mp3', // Must be an absolute 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.dokyumento.jp/" />
<meta property="og:site_name" content="Next.js" />
<meta property="og:locale" content="en_US" />
<meta property="og:image" content="https://nextjs.dokyumento.jp/og.png" />
<meta property="og:image:width" content="800" />
<meta property="og:image:height" content="600" />
<meta property="og:image" content="https://nextjs.dokyumento.jp/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.dokyumento.jp/video.mp4" />
<meta property="og:video:width" content="800" />
<meta property="og:video:height" content="600" />
<meta property="og:audio" content="https://nextjs.dokyumento.jp/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" />知っておくと良いこと:
- Open Graph画像のメタデータAPI（ファイルベース）を使用する方が便利な場合があります。設定エクスポートと実際のファイルを同期する必要がある代わりに、ファイルベースAPIが自動的に正しいメタデータを生成します。
robots
layout.tsx | page.tsx
import type { Metadata } from 'next'
export const metadata: Metadata = {
robots: {
index: true,
follow: true,
nocache: false,
googleBot: {
index: true,
follow: true,
noimageindex: false,
'max-video-preview': -1,
'max-image-preview': 'large',
'max-snippet': -1,
},
},
}<head> 出力
<meta name="robots" content="index, follow" />
<meta
name="googlebot"
content="index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1"
/>icons
知っておくと便利：可能な場合は、アイコンにファイルベースのメタデータ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"
/>知っておくと便利：
msapplication-*メタタグは、Microsoft EdgeのChromiumビルドではサポートされなくなったため、不要になりました。
themeColor
非推奨：Next.js 14以降、
metadataのthemeColorオプションは非推奨になりました。代わりにviewport設定を使用してください。
colorScheme
非推奨：Next.js 14以降、
metadataのcolorSchemeオプションは非推奨になりました。代わりにviewport設定を使用してください。
manifest
Webアプリケーションマニフェスト。これはWeb Application Manifest仕様で定義されています。
layout.js | page.js
export const metadata = {
manifest: 'https://nextjs.dokyumento.jp/manifest.json',
}<head> 出力
<link rel="manifest" href="https://nextjs.dokyumento.jp/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.dokyumento.jp/og.png'], // Must be an absolute 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.dokyumento.jp/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.dokyumento.jp/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.dokyumento.jp/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
非推奨：Next.js 14以降、
metadataのviewportオプションは非推奨になりました。代わりに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.dokyumento.jp',
languages: {
'en-US': 'https://nextjs.dokyumento.jp/en-US',
'de-DE': 'https://nextjs.dokyumento.jp/de-DE',
},
media: {
'only screen and (max-width: 600px)': 'https://nextjs.dokyumento.jp/mobile',
},
types: {
'application/rss+xml': 'https://nextjs.dokyumento.jp/rss',
},
},
}<head> 出力
<link rel="canonical" href="https://nextjs.dokyumento.jp" />
<link rel="alternate" hreflang="en-US" href="https://nextjs.dokyumento.jp/en-US" />
<link rel="alternate" hreflang="de-DE" href="https://nextjs.dokyumento.jp/de-DE" />
<link
rel="alternate"
media="only screen and (max-width: 600px)"
href="https://nextjs.dokyumento.jp/mobile"
/>
<link
rel="alternate"
type="application/rss+xml"
href="https://nextjs.dokyumento.jp/rss"
/>appLinks
layout.js | page.js
export const metadata = {
appLinks: {
ios: {
url: 'https://nextjs.dokyumento.jp/ios',
app_store_id: 'app_store_id',
},
android: {
package: 'com.example.android/package',
app_name: 'app_name_android',
},
web: {
url: 'https://nextjs.dokyumento.jp/web',
should_fallback: true,
},
},
}<head> 出力
<meta property="al:ios:url" content="https://nextjs.dokyumento.jp/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.dokyumento.jp/web" />
<meta property="al:web:should_fallback" content="true" />archives
歴史的関心のある記録、文書、またはその他の資料のコレクションを記述します（ソース）。
layout.js | page.js
export const metadata = {
archives: ['https://nextjs.dokyumento.jp/13'],
}<head> 出力
<link rel="archives" href="https://nextjs.dokyumento.jp/13" />assets
layout.js | page.js
export const metadata = {
assets: ['https://nextjs.dokyumento.jp/assets'],
}<head> 出力
<link rel="assets" href="https://nextjs.dokyumento.jp/assets" />bookmarks
layout.js | page.js
export const metadata = {
bookmarks: ['https://nextjs.dokyumento.jp/13'],
}<head> 出力
<link rel="bookmarks" href="https://nextjs.dokyumento.jp/13" />category
layout.js | page.js
export const metadata = {
category: 'technology',
}<head> 出力
<meta name="category" content="technology" />facebook
一部のFacebookソーシャルプラグインのために、FacebookアプリまたはFacebookアカウントをウェブページに接続できます。Facebookドキュメント
知っておくと便利：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" />pinterest
ウェブページでPinterest Rich Pinsを有効または無効にできます。
layout.js | page.js
export const metadata = {
pinterest: {
richPin: true,
},
}<head> 出力
<meta name="pinterest-rich-pin" content="true" />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" />型
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',
}
}セグメントプロパティ付き
layout.tsx | page.tsx
import type { Metadata } from 'next'
type Props = {
params: Promise<{ id: string }>
searchParams: Promise<{ [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',
}サポートされていないメタデータ
以下のメタデータタイプは、現在組み込みサポートがありません。ただし、レイアウトまたはページ自体でレンダリングすることは still できます。
| Metadata | 推奨 |
|---|---|
<meta http-equiv="..."> | redirect()、Proxy、セキュリティヘッダーを介して適切なHTTPヘッダーを使用します。 |
<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 '...'
}<link rel="preload">
ページのレンダリング（ブラウザ）ライフサイクルの早い段階でリソースのロードを開始します。MDNドキュメント。
ReactDOM.preload(href: string, options: { as: string })<head> 出力
<link rel="preload" href="..." as="..." /><link rel="preconnect">
オリジンへの接続を事前に開始します。MDNドキュメント。
ReactDOM.preconnect(href: string, options?: { crossOrigin?: string })<head> 出力
<link rel="preconnect" href="..." crossorigin /><link rel="dns-prefetch">
リソースが要求される前にドメイン名の解決を試みます。MDNドキュメント。
ReactDOM.prefetchDNS(href: string)<head> 出力
<link rel="dns-prefetch" href="..." />知っておくと良いこと:
- これらのメソッドは現在、クライアントコンポーネントでのみサポートされています。クライアントコンポーネントは、初期ページロード時にまだサーバーサイドレンダリングされます。
next/font、next/image、next/scriptなどのNext.jsの組み込み機能は、関連するリソースヒントを自動的に処理します。
動作
デフォルトフィールド
ルートがメタデータを定義しない場合でも、常に2つのデフォルトmetaタグが追加されます。
- ウェブサイトの文字コードを設定するmeta charsetタグ。
- ウェブサイトのビューポート幅とスケールを設定して、さまざまなデバイスに調整するmeta viewportタグ。
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />知っておくと便利：デフォルトの
viewportメタタグを上書きできます。
ストリーミングメタデータ
メタデータのストリーミングにより、Next.jsはgenerateMetadataの完了を待たずに、初期UIをレンダリングしてブラウザに送信できます。
generateMetadataが解決されると、結果のメタデータタグは<body>タグに追加されます。JavaScriptを実行し、DOM全体を検査するボット（例：Googlebot）によってメタデータが正しく解釈されることを確認しました。
JavaScriptを実行できないHTML制限付きボット（例：facebookexternalhit）の場合、メタデータは引き続きページレンダリングをブロックします。結果のメタデータは<head>タグで利用可能になります。
Next.jsは、User Agentヘッダーを確認することでHTML制限付きボットを自動的に検出します。デフォルトのUser Agentリストをオーバーライドするために、Next.js構成ファイルでhtmlLimitedBotsオプションを使用できます。
ストリーミングメタデータを完全に無効にするには
next.config.ts
import type { NextConfig } from 'next'
const config: NextConfig = {
htmlLimitedBots: /.*/,
}
export default configメタデータのストリーミングは、TTFBを削減し、LCP時間を短縮するのに役立つため、知覚されるパフォーマンスを向上させます。
htmlLimitedBotsをオーバーライドすると、応答時間が長くなる可能性があります。メタデータのストリーミングは高度な機能であり、ほとんどの場合、デフォルトで十分です。
順序
メタデータは、ルートセグメントから最終的なpage.jsセグメントに最も近いセグメントまで、順序どおりに評価されます。例:
app/layout.tsx（ルートレイアウト）app/blog/layout.tsx（ネストされたブログレイアウト）app/blog/[slug]/page.tsx（ブログページ）
マージ
評価順序に従って、同じルートの複数のセグメントからエクスポートされたメタデータオブジェクトは、ルートの最終的なメタデータ出力として形成されるように浅くマージされます。重複するキーは、順序に基づいて置換されます。
これは、app/layout.jsなどのより早いセグメントで定義されたopenGraphやrobotsのようなネストされたフィールドを持つメタデータは、それらを定義する最後のセグメントによって上書きされることを意味します。
フィールドの上書き
app/layout.js
export const metadata = {
title: 'Acme',
openGraph: {
title: 'Acme',
description: 'Acme is a...',
},
}app/blog/page.js
export const metadata = {
title: 'Blog',
openGraph: {
title: 'Blog',
},
}
// Output:
// <title>Blog</title>
// <meta property="og:title" content="Blog" />上記の例では
app/layout.jsからのtitleは、app/blog/page.jsのtitleによって置換されます。app/blog/page.jsがopenGraphメタデータを設定しているため、app/layout.jsからのすべてのopenGraphフィールドはapp/blog/page.jsで置換されます。openGraph.descriptionがないことに注意してください。
セグメント間で一部のネストされたフィールドを共有しながら、他のフィールドを上書きしたい場合は、それらを別の変数に抽出できます。
app/shared-metadata.js
export const openGraphImage = { images: ['http://...'] }app/page.js
import { openGraphImage } from './shared-metadata'
export const metadata = {
openGraph: {
...openGraphImage,
title: 'Home',
},
}app/about/page.js
import { openGraphImage } from '../shared-metadata'
export const metadata = {
openGraph: {
...openGraphImage,
title: 'About',
},
}上記の例では、OG画像はapp/layout.jsとapp/about/page.jsの間で共有されますが、タイトルは異なります。
フィールドの継承
app/layout.js
export const metadata = {
title: 'Acme',
openGraph: {
title: 'Acme',
description: 'Acme is a...',
},
}app/about/page.js
export const metadata = {
title: 'About',
}
// Output:
// <title>About</title>
// <meta property="og:title" content="Acme" />
// <meta property="og:description" content="Acme is a..." />注釈
app/layout.jsからのtitleは、app/about/page.jsのtitleによって置換されます。app/about/page.jsがopenGraphメタデータを設定していないため、app/layout.jsからのすべてのopenGraphフィールドはapp/about/page.jsで継承されます。
バージョン履歴
| バージョン | 変更履歴 |
|---|---|
v15.2.0 | generateMetadataにストリーミングサポートを導入しました。 |
v13.2.0 | viewport、themeColor、colorSchemeは、viewport設定を支持して非推奨になりました。 |
v13.2.0 | metadataとgenerateMetadataが導入されました。 |
次のステップ
すべてのメタデータAPIオプションを表示します。
役に立ちましたか？