Why Metadata in layouts in NextJS? - Purpose & Use Cases

The Big Idea

Discover how a small change in layouts can boost your site's SEO and save hours of repetitive work!

The Scenario

Imagine you have a website with many pages, and you want to add titles and descriptions to each page manually by editing every single HTML file.

The Problem

Manually adding metadata to each page is slow, easy to forget, and causes inconsistent titles or missing descriptions, which hurts user experience and search engine ranking.

The Solution

Using metadata in layouts lets you set default titles and descriptions once, then customize them per page easily, ensuring consistency and saving time.

Before vs After

✗ Before

<title>Home</title>
<meta name="description" content="Welcome to our homepage">

✓ After

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

What It Enables

This makes your website SEO-friendly and user-friendly with less effort and fewer mistakes.

Real Life Example

A blog site where each article page automatically shows the article title in the browser tab and a summary in search results without repeating code.

Key Takeaways

Manually adding metadata is repetitive and error-prone.

Layouts let you define metadata once and reuse it.

This improves consistency, SEO, and developer productivity.