MENU
HTML head (Fields)
This page lists the metadata fields that you can specify in a Next.js app and the corresponding HTML output.
title
The title for this page is 'Good! Good!' as it uses the title template from layout.tsx.
description, category, generator, applicationName, referrer, keywords, authors, creator, publisher, colorScheme, formatDection
These metadata fields are pretty much self-explanatory.
The referrer meta tag controls how the browser sends the Referrer header when navigating from your site to another site or when loading external resources (like images or scripts).
The format-detection meta tag is used to control how browsers and devices automatically detect and format certain types of text, such as telephone numbers, email addresses, and physical addresses. This is particularly useful in mobile web development where some devices, like iPhones, can automatically turn such text into clickable links (e.g., for making a call or opening an email app).
export const metadata = {
description: 'The React Framework for the Web',
category: 'technology',
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',
colorScheme: 'dark',
formatDetection: {
email: false,
address: false,
telephone: false,
},
}<meta name="description" content="The React Framework for the Web" />
<meta name="category" content="technology" />
<meta name="generator" content="Next.js" />
<meta name="application-name" content="Next.js" />
<meta name="referrer" content="origin-when-cross-origin" />
<meta name="keywords" content="Next.js,React,JavaScript" />
<meta name="author" content="Seb" />
<link rel="author" href="https://nextjs.org" />
<meta name="author" content="Josh" />
<meta name="creator" content="Jiachi Liu" />
<meta name="publisher" content="Sebastian Markbåge" />
<meta name="color-scheme" content="dark" />
<meta name="format-detection" content="telephone=no, address=no, email=no" />metadataBase
metadataBase is an optional configuration that simplifies setting a base URL prefix for metadata fields requiring fully qualified URLs. It allows relative paths to be used for these fields, which are then combined with the metadataBase value to form a complete URL. If not set, metadataBase defaults to an automatically populated value.
Key Features
Base URL Prefix:
- When defined, metadataBase applies to URL-based metadata fields in the current route segment and its children.
- Relative paths in these fields are resolved using the metadataBase to create fully qualified URLs.
Default Behavior:
- If not specified, metadataBase is automatically populated.
- Without a metadataBase, using relative paths in metadata fields causes build errors.
Good to Know
Typical Setup:
- Set metadataBase in the root app/layout.js to apply it across all routes.
Customizable URLs:
- Supports subdomains (e.g., https://app.acme.com) and paths (e.g., https://acme.com/start/from/here).
- If a metadata field provides an absolute URL, metadataBase is ignored.
Error Prevention:
- Relative paths in URL-based metadata fields require metadataBase to avoid build errors.
Normalization:
- Next.js merges duplicate slashes between metadataBase (e.g., https://acme.com/) and metadata field paths (e.g., /path) into a single slash (e.g., https://acme.com/path).
Default Value
If metadataBase is not configured:
On Vercel:
- Production Deployments: Uses VERCEL_PROJECT_PRODUCTION_URL.
- Preview Deployments: Prefers VERCEL_BRANCH_URL and falls back to VERCEL_URL.
Local Development:
- Defaults to http://localhost:${process.env.PORT || 3000}.
This ensures Open Graph images work locally, in previews, and in production. For overrides, environment variables are recommended for flexibility across environments.
More information on environment variables can be found in the System Environment Variables documentation.
URL Composition Rules
Trailing Slash Normalization:
- Duplicate slashes between metadataBase and metadata paths are reduced to a single slash.
Relative Path Resolution:
- Metadata fields with an "absolute" path are treated as "relative," starting from the end of metadataBase.
- Example: Given a metadataBase of https://acme.com/ and a metadata field of /path, the final URL is https://acme.com/path.
- This approach prioritizes developer intent over default directory traversal semantics.
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',
},
}<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" />twitter, facebook, appleWebApp, appLinks, verification
These tags optimize how the site interacts with social media platforms, enables smooth app integration, enhances mobile web app functionality, provides ownership verification, and shares contact details. They are essential for improving user experience, visibility, and connectivity across devices and platforms.
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'], // Must be an absolute URL
},
facebook: {
appId: '12345678',
admins: ['12345678', '87654321'],
},
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)',
},
],
},
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,
},
},
verification: {
google: 'google',
yandex: 'yandex',
yahoo: 'yahoo',
other: {
me: ['my-email', 'my-link'],
},
},
}<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" />
<meta property="fb:app_id" content="12345678" />
<meta property="fb:admins" content="12345678" />
<meta property="fb:admins" content="87654321" />
<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"
/>
<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" />
<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" />icons, robots, manifest
These tags enhance site presentation and behavior by:
- Setting icons for different platforms and scenarios.
- Controlling how search engines and crawlers interact with the site.
- Enabling PWA functionality through a manifest file.
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',
},
},
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,
},
},
manifest: 'https://nextjs.org/manifest.json',
}<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"
/>
<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"
/>
<link rel="manifest" href="https://nextjs.org/manifest.json" />alternates, bookmarks, archives, assets
These tags optimize content accessibility and organization by:
- Specifying a canonical URL to manage duplicates.
- Providing language, device, and content format alternatives for better user and SEO experiences.
- Linking to bookmarks, archives, and assets to enhance navigation and resource management.
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',
},
},
bookmarks: ['https://nextjs.org/13'],
archives: ['https://nextjs.org/13'],
assets: ['https://nextjs.org/assets'],
}<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"
/>
<link rel="bookmarks" href="https://nextjs.org/13" />
<link rel="archives" href="https://nextjs.org/13" />
<link rel="assets" href="https://nextjs.org/assets" />other
You can define custom <meta> tags.
export const metadata = {
other: {
custom: ['meta1', 'meta2'],
},
}<meta name="custom" content="meta1" />
<meta name="custom" content="meta2" />