Metadata API for SEO in NextJS

Introduction

Metadata helps search engines understand your page. It improves how your site shows up in search results.

When you want to set the page title and description for better search results.

When you need to add social media preview info like images and titles.

When you want to improve accessibility by providing clear page info.

When you want to customize metadata for different pages in your Next.js app.

Syntax

NextJS

import { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Page Title',
  description: 'Page description for SEO',
  openGraph: {
    title: 'Open Graph Title',
    description: 'Open Graph description',
    url: 'https://example.com/page',
    images: [{ url: 'https://example.com/image.png' }],
  },
};

The metadata object is exported from your page or layout file.

Next.js automatically uses this metadata to set HTML meta tags.

Examples

Simple metadata with just title and description.

NextJS

export const metadata = {
  title: 'Home Page',
  description: 'Welcome to our homepage',
};

Metadata including Open Graph info for social media previews.

NextJS

export const metadata = {
  title: 'Blog Post',
  description: 'Read our latest blog post',
  openGraph: {
    title: 'Blog Post',
    description: 'Read our latest blog post',
    url: 'https://example.com/blog/post',
    images: [{ url: 'https://example.com/blog-image.png' }],
  },
};

Metadata with Twitter card info for better Twitter sharing.

NextJS

export const metadata = {
  title: 'Contact Us',
  description: 'Get in touch with us',
  twitter: {
    card: 'summary_large_image',
    title: 'Contact Us',
    description: 'Get in touch with us',
    images: ['https://example.com/contact-image.png'],
  },
};

Sample Program

This Next.js page exports metadata for SEO. The page shows a heading and paragraph. The metadata sets the page title, description, and social preview info automatically.

NextJS

import React from 'react';

export const metadata = {
  title: 'About Us',
  description: 'Learn more about our company',
  openGraph: {
    title: 'About Us',
    description: 'Learn more about our company',
    url: 'https://example.com/about',
    images: [{ url: 'https://example.com/about-image.png' }],
  },
};

export default function AboutPage() {
  return (
    <main>
      <h1>About Us</h1>
      <p>Welcome to our company page.</p>
    </main>
  );
}

Important Notes

Metadata API works with Next.js App Router pages and layouts.

Always provide a descriptive title and description for better SEO.

Use Open Graph and Twitter metadata to improve social media sharing previews.

Summary

Metadata API lets you set SEO info easily in Next.js pages.

It improves search engine results and social media previews.

Export a metadata object with title, description, and social info.

Practice

1. What is the main purpose of the metadata export in a Next.js page?

easy

A. To define the page's layout and styling

B. To provide SEO information like title and description for the page

C. To handle user authentication on the page

D. To manage API routes for the page

Solution

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

   The metadata export is used to set SEO-related information such as the page title and description.

2. Step 2: Differentiate from other page features

   Layout, styling, authentication, and API routes are handled differently and not via metadata.

3. Final Answer:

   To provide SEO information like title and description for the page -> Option B

4. Quick Check:

   Metadata = SEO info [OK]

Hint: Metadata sets SEO info like title and description [OK]

Common Mistakes:

• Confusing metadata with layout or styling
• Thinking metadata handles API routes
• Assuming metadata manages authentication

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

easy

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

B. export default metadata = { title: 'Home' }

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

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

Solution

1. Step 1: Recall correct export syntax for named exports

   In Next.js, metadata is exported as a named export using export const metadata = {...}.

2. Step 2: Identify syntax errors in other options

   Options A, B, and C use invalid export syntax or missing keywords.

3. Final Answer:

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

4. Quick Check:

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

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

Common Mistakes:

• Using default export instead of named export
• Missing 'const' keyword
• Incorrect export statement syntax

3. Given this metadata export in a Next.js page, what will be the page title shown in the browser tab?

export const metadata = {
  title: 'About Us - MySite',
  description: 'Learn more about us'
}

medium

A. MySite

B. Learn more about us

C. About Us - MySite

D. No title will show

Solution

1. Step 1: Identify the title property in metadata

   The title property is set to 'About Us - MySite'. This is what appears in the browser tab.

2. Step 2: Understand description does not affect title

   The description is for SEO and social previews, not the browser tab title.

3. Final Answer:

   About Us - MySite -> Option C

4. Quick Check:

   Title property sets browser tab title [OK]

Hint: Page title = metadata.title value [OK]

Common Mistakes:

• Confusing description with title
• Assuming default title if metadata is present
• Thinking title is empty if not set in layout

4. You wrote this metadata export but the page title does not update:

const metadata = {
  title: 'Contact'
}
export default metadata

What is the error?

medium

A. metadata object must be wrapped in a React component

B. title property must be inside a function

C. title property should be 'pageTitle' instead of 'title'

D. metadata must be exported as a named export, not default

Solution

1. Step 1: Check export type for metadata

   Next.js requires metadata to be a named export, not a default export.

2. Step 2: Verify other options

   Title property does not need a function, React component, or different key name.

3. Final Answer:

   metadata must be exported as a named export, not default -> Option D

4. Quick Check:

   Named export required for metadata [OK]

Hint: Use 'export const metadata', not 'export default' [OK]

Common Mistakes:

• Using default export instead of named export
• Thinking metadata needs to be inside a component
• Changing property names incorrectly

5. You want to add Open Graph metadata for social sharing in Next.js using the Metadata API. Which is the correct way to add the Open Graph title and image?

hard

A. export const metadata = { openGraph: { title: 'My Page', images: ['https://example.com/image.png'] } }

B. export const metadata = { ogTitle: 'My Page', ogImage: 'https://example.com/image.png' }

C. export const metadata = { social: { title: 'My Page', image: 'https://example.com/image.png' } }

D. export const metadata = { openGraphTitle: 'My Page', openGraphImage: 'https://example.com/image.png' }

Solution

1. Step 1: Recall Open Graph structure in Next.js metadata

   Open Graph data is nested under the openGraph key with properties like title and images (array of URLs).

2. Step 2: Compare options for correct property names and structure

   Only export const metadata = { openGraph: { title: 'My Page', images: ['https://example.com/image.png'] } } uses the correct nested openGraph object with title and images array.

3. Final Answer:

   export const metadata = { openGraph: { title: 'My Page', images: ['https://example.com/image.png'] } } -> Option A

4. Quick Check:

   Open Graph uses openGraph key with images array [OK]

Hint: Use openGraph object with images array for social metadata [OK]

Common Mistakes:

• Using flat keys like ogTitle instead of nested openGraph
• Passing image as string instead of array
• Using incorrect property names like social or openGraphTitle