Metadata and OG images

The Metadata APIs can be used to define your application metadata for improved SEO and web shareability and include:
With all the options above, Next.js will automatically generate the relevant <head> tags for your page, which can be inspected in the browser's developer tools.
The metadata object and generateMetadata function exports are only supported in Server Components.
There are two default meta tags that are always added even if a route doesn't define metadata:
The other metadata fields can be defined with the Metadata object (for static metadata) or the generateMetadata function (for generated metadata).
To define static metadata, export a Metadata object from a static layout.js or page.js file. For example, to add a title and description to the blog route:
You can view a full list of available options, in the generateMetadata documentation.
You can use generateMetadata function to fetch metadata that depends on data. For example, to fetch the title and description for a specific blog post:
For dynamically rendered pages, Next.js streams metadata separately, injecting it into the HTML once generateMetadata resolves, without blocking UI rendering.
Streaming metadata improves perceived performance by allowing visual content to stream first.
Streaming metadata is disabled for bots and crawlers that expect metadata to be in the <head> tag (e.g. Twitterbot, Slackbot, Bingbot). These are detected by using the User Agent header from the incoming request.
You can customize or disable streaming metadata completely, with the htmlLimitedBots option in your Next.js config file.
Prerendered pages don’t use streaming since metadata is resolved at build time.
Learn more about streaming metadata.
There may be cases where you need to fetch the same data for metadata and the page itself. To avoid duplicate requests, you can use React's cache function to memoize the return value and only fetch the data once. For example, to fetch the blog post information for both the metadata and the page:
The following special files are available for metadata:
You can use these for static metadata, or you can programmatically generate these files with code.
Favicons are small icons that represent your site in bookmarks and search results. To add a favicon to your application, create a favicon.ico and add to the root of the app folder.
You can also programmatically generate favicons using code. See the favicon docs for more information.
Open Graph (OG) images are images that represent your site in social media. To add a static OG image to your application, create a opengraph-image.jpg file in the root of the app folder.
You can also add OG images for specific routes by creating a opengraph-image.jpg deeper down the folder structure. For example, to create an OG image specific to the /blog route, add a opengraph-image.jpg file inside the blog folder.
The more specific image will take precedence over any OG images above it in the folder structure.
Other image formats such as jpeg, png, and gif are also supported. See the Open Graph Image docs for more information.
The ImageResponse constructor allows you to generate dynamic images using JSX and CSS. This is useful for OG images that depend on data.
For example, to generate a unique OG image for each blog post, add an opengraph-image.tsx file inside the blog/[slug] folder, and import the ImageResponse constructor from next/og:
ImageResponse supports common CSS properties including flexbox and absolute positioning, custom fonts, text wrapping, centering, and nested images. See the full list of supported CSS properties.
Learn more about the Metadata APIs mentioned in this page.
Last updated August 25, 2026
Subscribe to our newsletter
Stay updated on new releases and features, guides, and case studies.