NextjsHow-ToBeginner · 3 min read

How to Add Meta Description in Next.js for SEO

In Next.js, add a meta description by using the Head component from next/head. Place a <meta name="description" content="Your description here" /> tag inside Head within your page or component to set the meta description.

📐

Syntax

Use the Head component from next/head to add elements to the HTML <head> section. Inside Head, include a <meta> tag with name="description" and a content attribute for your description text.

import Head from 'next/head': Imports the Head component.
<Head>...</Head>: Wraps head elements.
<meta name="description" content="..." />: Sets the meta description.

javascript

import Head from 'next/head'

export default function Page() {
  return (
    <>
      <Head>
        <meta name="description" content="This is the page description." />
      </Head>
      <main>
        <h1>Page Content</h1>
      </main>
    </>
  )
}

💻

Example

This example shows a simple Next.js page that adds a meta description for SEO. The description appears in the page's HTML head and helps search engines understand the page content.

javascript

import Head from 'next/head'

export default function Home() {
  return (
    <>
      <Head>
        <title>Welcome to My Site</title>
        <meta name="description" content="Learn how to add meta descriptions in Next.js for better SEO." />
      </Head>
      <main>
        <h1>Hello, Next.js!</h1>
        <p>This page has a meta description set.</p>
      </main>
    </>
  )
}

Output

<title>Welcome to My Site</title> <meta name="description" content="Learn how to add meta descriptions in Next.js for better SEO." />

⚠️

Common Pitfalls

Common mistakes when adding meta descriptions in Next.js include:

Not importing Head from next/head.
Placing <meta> tags outside the Head component, which won't affect the HTML head.
Forgetting to add the name="description" attribute, which makes the meta tag ineffective.
Adding multiple conflicting meta descriptions on the same page.

Always ensure your meta description is unique and relevant to the page content.

javascript

/* Wrong way: meta tag outside Head */
export default function Wrong() {
  return (
    <>
      <meta name="description" content="Wrong placement" />
      <main>Content</main>
    </>
  )
}

/* Right way: meta tag inside Head */
import Head from 'next/head'
export default function Right() {
  return (
    <>
      <Head>
        <meta name="description" content="Correct placement" />
      </Head>
      <main>Content</main>
    </>
  )
}

📊

Quick Reference

Summary tips for adding meta descriptions in Next.js:

Always import Head from next/head.
Wrap meta tags inside the <Head> component.
Use name="description" and provide meaningful content.
Keep descriptions concise (about 150-160 characters).
Set unique descriptions per page for better SEO.

✅

Key Takeaways

Use the Head component from next/head to add meta tags in Next.js.

Place the meta description tag inside the Head component for it to work.

Always include name="description" and a clear content attribute.

Avoid multiple meta descriptions on the same page to prevent conflicts.

Keep meta descriptions unique and relevant for better SEO.