Metadata API (static metadata) in NextJS

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>
  );
}

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.

Practice

1. What is the primary purpose of exporting a metadata object in a Next.js page or layout?

easy

A. To provide static information like title and description for SEO and social sharing

B. To define dynamic routes for the page

C. To handle user authentication on the page

D. To style the page with CSS variables

Solution

1. Step 1: Understand the role of metadata in Next.js

   The metadata object is used to add static information such as page title and description.

2. Step 2: Connect metadata to SEO and social sharing

   This information helps search engines and social media platforms display the page correctly.

3. Final Answer:

   To provide static information like title and description for SEO and social sharing -> Option A

4. Quick Check:

   Metadata = SEO info [OK]

Hint: Metadata sets page info for SEO and sharing [OK]

Common Mistakes:

• Confusing metadata with routing or styling
• Thinking metadata handles user login
• Assuming metadata is dynamic by default

2. Which of the following is the correct way to export static metadata in a Next.js page?

easy

A. export default { metadata: { title: 'Home' } }

B. export function metadata() { return { title: 'Home' } }

C. export const metadata = { title: 'Home' }

D. const metadata = { title: 'Home' }; export metadata

Solution

1. Step 1: Recall the syntax for static metadata export

   Next.js expects a named export called metadata as an object.

2. Step 2: Check each option's syntax

   export const metadata = { title: 'Home' } correctly exports a constant object named metadata. The other options use incorrect export forms or syntax.

3. Final Answer:

   export const metadata = { title: 'Home' } -> Option C

4. Quick Check:

   Named export of object = export const metadata = { title: 'Home' } [OK]

Hint: Use named export const metadata = {...} [OK]

Common Mistakes:

• Using default export instead of named export
• Exporting a function instead of an object
• Incorrect export syntax causing errors

3. Given this metadata export in a Next.js page:

export const metadata = { title: 'About Us', description: 'Learn about our team' }

What will be the page's title shown in the browser tab?

medium

A. About Us

B. Learn about our team

C. metadata

D. No title will be shown

Solution

1. Step 1: Identify the title property in metadata

   The metadata object has a title set to 'About Us'.

2. Step 2: Understand how Next.js uses metadata

   Next.js uses the title property to set the browser tab's page title.

3. Final Answer:

   About Us -> Option A

4. Quick Check:

   Page title = metadata.title [OK]

Hint: Page title comes from metadata.title [OK]

Common Mistakes:

• Confusing description with title
• Expecting metadata object name as title
• Assuming no title is set without explicit <title> tag

4. You wrote this metadata export:

export const metadata = { title: 'Contact', description: Contact us page }

Why does this cause an error?

medium

A. export keyword is not allowed here

B. Missing quotes around the description string

C. title property cannot be 'Contact'

D. metadata must be a function, not an object

Solution

1. Step 1: Check the syntax of the description value

   The description value is written without quotes, which is invalid for strings in JavaScript.

2. Step 2: Understand JavaScript string syntax

   Strings must be enclosed in quotes (' or ") to be valid. Missing quotes cause a syntax error.

3. Final Answer:

   Missing quotes around the description string -> Option B

4. Quick Check:

   Strings need quotes [OK]

Hint: Always quote string values in metadata [OK]

Common Mistakes:

• Forgetting quotes around strings
• Thinking metadata must be a function
• Misplacing export keyword

5. You want to add static metadata with a title, description, and open graph image to a Next.js layout. Which is the correct way to include all these in the metadata export?

hard

A. export const metadata = { title: 'Blog', description: 'Latest posts', openGraph: { images: { src: '/blog.png' } } }

B. export const metadata = { title: 'Blog', description: 'Latest posts', openGraph: '/blog.png' }

C. export const metadata = { title: 'Blog', description: 'Latest posts', openGraph: { image: '/blog.png' } }

D. export const metadata = { title: 'Blog', description: 'Latest posts', openGraph: { images: [{ url: '/blog.png' }] } }

Solution

1. Step 1: Understand openGraph image format in Next.js metadata

   The openGraph images property expects an array of objects with a url key.

2. Step 2: Check each option's openGraph structure

   export const metadata = { title: 'Blog', description: 'Latest posts', openGraph: { images: [{ url: '/blog.png' }] } } correctly uses an array with an object containing url. The other options use incorrect formats.

3. Final Answer:

   export const metadata = { title: 'Blog', description: 'Latest posts', openGraph: { images: [{ url: '/blog.png' }] } } -> Option D

4. Quick Check:

   openGraph images = array of {url} objects [OK]

Hint: Use array of objects with url for openGraph images [OK]

Common Mistakes:

• Using string instead of array for images
• Using wrong property name like image instead of images
• Not wrapping image url in an object