0
0
NextJSframework~5 mins

Metadata API (static metadata) in NextJS

Choose your learning style9 modes available
LearnWhyDeepVisualTryChallengeProjectRecallPerf
Introduction

The Metadata API lets you add information about your web page that helps browsers and search engines understand it better.

When you want to set the page title and description for better search results.
When you want to add icons or social media preview info to your page.
When you want to improve how your page looks when shared on social networks.
When you want to provide consistent metadata for all pages in your Next.js app.
Syntax
NextJS
export const metadata = {
  title: 'Page Title',
  description: 'Page description here',
  icons: {
    icon: '/favicon.ico'
  },
  openGraph: {
    title: 'Open Graph Title',
    description: 'Open Graph description',
    url: 'https://example.com/page',
    siteName: 'Site Name',
    images: [
      {
        url: 'https://example.com/image.png',
        width: 800,
        height: 600
      }
    ],
    locale: 'en_US',
    type: 'website'
  }
};

This metadata object is exported from a page or layout file in Next.js.

Next.js uses this static metadata to generate <head> tags automatically.

Examples
Basic metadata with just title and description.
NextJS
export const metadata = {
  title: 'Home Page',
  description: 'Welcome to our homepage'
};
Adding a custom icon for the page.
NextJS
export const metadata = {
  title: 'About Us',
  icons: {
    icon: '/about-icon.ico'
  }
};
Using Open Graph metadata for social media previews.
NextJS
export const metadata = {
  title: 'Blog Post',
  openGraph: {
    title: 'Blog Post Title',
    description: 'Summary of the blog post',
    url: 'https://example.com/blog/post',
    images: [
      { url: 'https://example.com/blog/post-image.png', width: 1200, height: 630 }
    ]
  }
};
Sample Program

This Next.js page exports static metadata that sets the page title, description, icon, and Open Graph data. The metadata helps browsers and social media show the page nicely.

NextJS
export const metadata = {
  title: 'My Next.js Page',
  description: 'This is a sample page using static metadata.',
  icons: {
    icon: '/favicon.ico'
  },
  openGraph: {
    title: 'My Next.js Page',
    description: 'This is a sample page using static metadata.',
    url: 'https://mywebsite.com',
    siteName: 'My Website',
    images: [
      {
        url: 'https://mywebsite.com/og-image.png',
        width: 1200,
        height: 630
      }
    ],
    locale: 'en_US',
    type: 'website'
  }
};

export default function Page() {
  return (
    <main>
      <h1>Welcome to My Next.js Page</h1>
      <p>This page uses static metadata for SEO and social sharing.</p>
    </main>
  );
}
OutputSuccess
Important Notes

Static metadata is defined outside the component and exported as a constant named metadata.

Next.js automatically adds this metadata to the HTML <head> when rendering the page.

Use absolute URLs for images in Open Graph metadata to ensure they display correctly on social platforms.

Summary

The Metadata API lets you add important info about your page like title and description.

Export a metadata object from your page or layout for static metadata.

This helps with SEO and how your page looks when shared on social media.