0
0
NextJSframework~5 mins

Metadata in layouts in NextJS

Choose your learning style9 modes available
LearnWhyDeepVisualTryChallengeProjectRecallPerf
Introduction

Metadata helps describe your web page to browsers and search engines. Using metadata in layouts means you set this info once for many pages.

You want all pages in a section to share the same title prefix or description.
You want to add social media preview info for all pages inside a layout.
You want consistent keywords or author info across multiple pages.
You want to improve SEO by setting metadata in one place.
You want to avoid repeating metadata code on every page.
Syntax
NextJS
export const metadata = {
  title: 'Page Title',
  description: 'Page description here',
  openGraph: {
    title: 'OG Title',
    description: 'OG Description',
    url: 'https://example.com/page',
    siteName: 'Site Name',
    images: [
      {
        url: 'https://example.com/image.png',
        width: 800,
        height: 600,
        alt: 'Image description'
      }
    ],
    locale: 'en_US',
    type: 'website'
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Twitter Title',
    description: 'Twitter Description',
    images: ['https://example.com/twitter-image.png']
  }
};

The metadata object is exported from a layout file in Next.js.

Next.js automatically uses this metadata for the HTML head of pages using this layout.

Examples
Simple metadata with just title and description.
NextJS
export const metadata = {
  title: 'My Blog',
  description: 'Welcome to my blog'
};
Adding Open Graph info for social media previews.
NextJS
export const metadata = {
  title: 'Shop - Electronics',
  openGraph: {
    title: 'Shop Electronics',
    description: 'Best electronics online',
    url: 'https://shop.com/electronics'
  }
};
Adding Twitter card metadata for better sharing on Twitter.
NextJS
export const metadata = {
  title: 'Portfolio',
  twitter: {
    card: 'summary_large_image',
    title: 'My Portfolio',
    images: ['https://portfolio.com/image.png']
  }
};
Sample Program

This layout sets metadata for all pages inside it. The metadata includes title, description, Open Graph, and Twitter info. The layout wraps page content with header and footer.

NextJS
import React from 'react';

export const metadata = {
  title: 'My Website',
  description: 'This is my website built with Next.js',
  openGraph: {
    title: 'My Website',
    description: 'This is my website built with Next.js',
    url: 'https://mywebsite.com',
    siteName: 'My Website',
    images: [
      {
        url: 'https://mywebsite.com/og-image.png',
        width: 1200,
        height: 630,
        alt: 'My Website Logo'
      }
    ],
    locale: 'en_US',
    type: 'website'
  },
  twitter: {
    card: 'summary_large_image',
    title: 'My Website',
    description: 'This is my website built with Next.js',
    images: ['https://mywebsite.com/twitter-image.png']
  }
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <header>
          <h1>Welcome to My Website</h1>
        </header>
        <main>{children}</main>
        <footer>
          <p>Ā© 2024 My Website</p>
        </footer>
      </body>
    </html>
  );
}
OutputSuccess
Important Notes

Metadata in layouts applies to all pages using that layout automatically.

You can override metadata in individual pages if needed.

Use meaningful titles and descriptions to help users and search engines.

Summary

Metadata describes your page for browsers and search engines.

Setting metadata in layouts saves time and keeps info consistent.

Next.js uses the exported metadata object to add tags to the HTML head.