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.