NextjsHow-ToBeginner · 3 min read

How to Add Metadata in Next.js for SEO and Social Sharing

In Next.js, you add metadata by using the Head component from next/head. Place your metadata tags like title, meta, and others inside Head within your page or component to update the HTML document head.

📐

Syntax

Use the Head component from next/head to add metadata inside your page or component. Inside Head, include HTML tags like title, meta, and others to define your page's metadata.

Example tags:

<title>: Sets the page title shown in the browser tab.
<meta name="description" content="..." />: Adds a description for search engines.
<meta property="og:title" content="..." />: Defines Open Graph title for social sharing.

javascript

import Head from 'next/head';

export default function Page() {
  return (
    <>
      <Head>
        <title>Your Page Title</title>
        <meta name="description" content="Page description here" />
        <meta property="og:title" content="Open Graph Title" />
      </Head>
      <main>
        {/* Page content here */}
      </main>
    </>
  );
}

💻

Example

This example shows a Next.js page that sets the page title, description, and Open Graph metadata for social media previews. The metadata updates the HTML head dynamically when the page loads.

javascript

import Head from 'next/head';

export default function HomePage() {
  return (
    <>
      <Head>
        <title>Welcome to My Site</title>
        <meta name="description" content="This is the homepage of my awesome Next.js site." />
        <meta property="og:title" content="Welcome to My Site" />
        <meta property="og:description" content="This is the homepage of my awesome Next.js site." />
        <meta property="og:type" content="website" />
      </Head>
      <main>
        <h1>Hello, Next.js!</h1>
        <p>This page has metadata for SEO and social sharing.</p>
      </main>
    </>
  );
}

Output

<title>Welcome to My Site</title> <meta name="description" content="This is the homepage of my awesome Next.js site." /> <meta property="og:title" content="Welcome to My Site" /> <meta property="og:description" content="This is the homepage of my awesome Next.js site." /> <meta property="og:type" content="website" />

⚠️

Common Pitfalls

Common mistakes when adding metadata in Next.js include:

Not importing Head from next/head, which causes errors.
Placing Head outside the component or outside the React tree, so metadata does not update.
Using multiple title tags on the same page, which can confuse browsers and search engines.
Forgetting to add important meta tags like description or Open Graph tags for social sharing.

Correct usage ensures metadata updates properly and improves SEO and social previews.

javascript

/* Wrong way: Missing import and multiple titles */
export default function WrongPage() {
  return (
    <>
      <title>Wrong Title</title> {/* This won't work without Head */}
      <title>Another Title</title> {/* Multiple titles cause issues */}
      <main>Content</main>
    </>
  );
}

/* Right way: Import Head and use one title */
import Head from 'next/head';

export default function RightPage() {
  return (
    <>
      <Head>
        <title>Correct Title</title>
      </Head>
      <main>Content</main>
    </>
  );
}

📊

Quick Reference

Tips for adding metadata in Next.js:

Always import Head from next/head.
Wrap all metadata tags inside the <Head></Head> component.
Use one title tag per page.
Add meta name="description" for SEO.
Include Open Graph tags like og:title and og:description for social media previews.
Update metadata dynamically in components for better user experience.

✅

Key Takeaways

Use the Head component from next/head to add metadata in Next.js pages.

Place all metadata tags like title and meta inside the Head component.

Avoid multiple title tags and always include a description meta tag for SEO.

Add Open Graph meta tags to improve social media sharing previews.

Import Head correctly and update metadata dynamically within components.