27th February 2023

Next.js: How to Set Meta Tags

Meta tags allow you to control various aspects of your website and they are particularly important for SEO.

In order to optimize websites for search engines, you should always include a <title> tag and <meta name="description"> tag for every page.

Using the Next.js Head Component for Meta Tags

In Next.js, we can use the <Head> component to inject tags into the <head> section of the HTML document at any point in the component tree.

It's as easy as this:

pages/index.js
import Head from 'next/head'
function IndexPage() {
    return (
        <>
            <Head>
                <title>My website</title>
                <meta name="description">
                    This text will appear in the description section of search
                    engine results.
                </meta>
            </Head>
            {/* ... */}
        </>
    )
}
export default IndexPage

Setting Meta Tags When Using the App Directory (Next.js 13.2+)

In Next.js 13, the framework received built-in support for metadata that is compatible with streaming.

Using the generateMetadata function

If you use the new app directory, your pages and layouts can export a generateMetadata function.

app/page.tsx
export async function generateMetadata({ params, searchParams }) {
    return {
        title: 'My title',
        description: 'My description'
    }
}
function IndexPage() {
    return <h1>Hello world</h1>
}
export default IndexPage

Setting a Default Title in Next.js

Your layouts can also export helpful defaults for metadata, such as appending your application's name to the title:

app/layout.tsx
export const metadata = {
    title: {
        default: 'My App',
        template: '%s - My App'
    }
}

There are more cool things about the Next.js metadata API.

For example, your pages inherit metadata from the layouts it uses.

Check out the Next.js Metadata API docs for more information!

About the author

Hi, I’m Max! I'm a fullstack JavaScript developer living in Berlin.

When I’m not working on one of my personal projects, writing blog posts or making YouTube videos, I help my clients bring their ideas to life as a freelance web developer.

If you need help on a project, please reach out and let's work together.

To stay updated with new blog posts, follow me on Twitter or subscribe to my RSS feed.