Add Meta Description in Next.js Page

Published on 21 Jul, 2021

Meta description tag is added to a page for SEO. Next.js framework comes with the <Head/> component. In a Next.js page, we can import it using:

import Head from "next/head";

Then, inside the component we can use it like:

<Head>
  <meta name="description" content="Description content" />
</Head>

When Next.js renders the page, the content inside <Head /> tag will be placed under html <head/>. We can also add other elements like <title> inside <Head />.

In case of a dynamic page, usually the meta description content is taken from page frontmatter.

<Head>
  <meta name="description" content={frontMatter.summary} />
</Head>