How to implement meta tags for better SEO in Next.js?

Published in

Coffeed

5 min readSep 6, 2023

When starting out with a new website, it is good to have one key aspect sorted out of the box: the meta tags. Not only the meta tags serve to inform your users on the site title in their browsers, but it also provides information to search engines when your site is being indexed.

Further, some of these tags also can be used to customize the site preview when sharing to social platforms.

Starting out it would be frustrating to see the site favicon and title. So you would end up with something like this:

Or even worse, with no title tag, it defaults to the site url and you have this:

I will help you customize this title and we will even go a step further and customize many of the other available meta tags. With Next.js, we can customize the <head> tags in each and every page of the website and leverage the best of server side rendered pages.

Getting started

Ideally, you would already have your Next.js app setup. If not, you can use the following command to bootstrap your new app:

yarn create next-app

Head on over to any of your pages in the pages folder. Here for example I am going to work with the index page. We are going to be using the Head component from next/head

import Head from 'next/head'

Then we can use the head component in our page as follows:

<Head>
  <title>Home | My awesome app</title>
</Head>

In between the <Head></Head> tags we can make use of the meta tags just like a normal html page. The added advantage of this is that this page title can be dynamically generated by making use of variables in the page.

Here is the full code of the index page:

import Head from 'next/head'

export default function Home() {
  return (
    <>
      <Head>
          <title>Home | My awesome app</title>
      </Head>
      <p>Hello Universe!</p>
    </>
  )
}

Now, if you check the app in the browser, you will find the title has been updated.

Digging in deeper

Now that we have added the title tag, below are listed a few of the other tags we can add in the Head section. Let’s go in deeper to setup more of these tags in the page and optimize our on-page SEO.

1. Meta description

Page description should be between 160–200 characters.

<meta name="description" content="Describe in 160-200 characters about 
    my awesome app" />

2. Open Graph Tags

Open graph tags are used by facebook to render the site preview.

og:type — type of the page: “website” or “article”
og:title — title of the page — can be same as <title> tag
og:description — description of the page — Can be same as the meta description
og:url — url of the page
og:image — link to the image to shown in the site preview

<meta key="og:type" property="og:type" content={"website"} />
<meta key="og:title" property="og:title" content={"Title of my page"} />
<meta
    key="og:description"
    property="og:description"
    content={"Description of my page"}
/>
<meta
    key="og:url"
    property="og:url"
    content={"site url"}
/>
<meta key="og:image" property="og:image" content={"Link to cover image"} />

3. Twitter tags

These tags are used to generate a preview in twitter.

twitter:card — The card type
twitter:site — your twitter @username
twitter:title — Title of content (max 70 characters)
twitter:description— Description of content (maximum 200 characters)
twitter:image — URL of image to use in the card. Images must be less than 5MB in size.

<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:site" content={"@twitter_handle"} />
<meta property="twitter:title" content={"Title of the page"} />
<meta property="twitter:description" content={"Description of the page"} />
<meta property="twitter:image" content={"Link to image preview"} />

Read more about twitter cards markup here.

Bringing it all together

Now that you have a better understanding of the meta tags that you can use, you can bring it all together on your page like this:

<Head>
    <title>Home | My awesome app</title>
    <meta key="og:type" property="og:type" content={"website"} />
    <meta key="og:title" property="og:title" content={"Title of my page"} />
    <meta
        key="og:description"
        property="og:description"
        content={"Description of my page"}
    />
    <meta
        key="og:url"
        property="og:url"
        content={"URL of the page"}
    />
    <meta key="og:image" property="og:image" content={"Link to cover image"} />
    <meta property="twitter:card" content="summary_large_image" />
    <meta property="twitter:site" content={"@twitter_handle"} />
    <meta property="twitter:title" content={"Title of the page"} />
    <meta property="twitter:description" content={"Description of the page"} />
    <meta property="twitter:image" content={"Link to image preview"} />
</Head>

There you go! Now your site is supercharged with meta tags and organic SEO.

Bonus

If you plan to use the same title, description and image for all the platforms, you can make use of the following custom component:

import Head from 'next/head';

const CoffeeHead = ({
    title,
    description,
    image,
    page_url,
}) => {
    return (
        <Head>
            <title>{title}</title>
            <meta name="title" content={title} />
            <meta name="description" content={description} />
            <meta key="og:type" property="og:type" content={"website"} />
            <meta key="og:title" property="og:title" content={title} />
            <meta
                key="og:description"
                property="og:description"
                content={description}
            />
            <meta
                key="og:url"
                property="og:url"
                content={page_url}
            />
            <meta key="og:image" property="og:image" content={image} />
            <meta property="twitter:card" content="summary_large_image" />
            <meta property="twitter:site" content={process.env.SOCIAL_HANDLE} />
            <meta property="twitter:title" content={title} />
            <meta property="twitter:description" content={description} />
            <meta property="twitter:image" content={image} />
        </Head>
    );
};

export default CoffeeHead;

Now include the CoffeeHead component in your page like below:

import CoffeeHead from 'components/CoffeeHead';

export default function Home() {
  return (
    <>
      <CoffeeHead
          title="Home | My awesome app"
          description="Describing my awesome app within 200 characters"
          image="https://i.pinimg.com/474x/33/05/02/330502e36c568fe40122856d8467823c.jpg"
          page_url={"https://myawesomeapp.com"}
         />
      <p>Hello Universe!</p>
    </>
  );
}

Hope that helped you kickstart your on page SEO.

This page is part of the Next.js playbook, which is in the works at Coffee. Drop a mail to coffee@coffeeinc.in if you want to get on the waitlist.