The Next.js head tags are a good way to add the meta tags, title, description, open graph image, etc. but you might not remember all the meta tags and it can also look messy, so we are going to see how to simplify this process using a package called next seo.

Installing the package

As it is an external library we need to install it-

npm i next-seo

Using next SEO

I like to add all the properties in _app.js so it automatically works on all pages and to modify some data for pages I add it to that page. Now let's see how to use it. Inside _app.js, in the return block add this-

   <NextSeo
        title="Avneesh Agarwal"
        titleTemplate="Avneesh Agarwal"
        defaultTitle="Avneesh Agarwal"
        description="A full stack web developer, who loves to design and develop beautiful websites. I have been coding for over a year now. One of my hobbies is writing, I love to document my journey by writing blog posts and also teach others through them."
        canonical="https://www.avneesh.tech/"
        openGraph={{
          url: "https://www.avneesh.tech/",
          title: "Avneesh Agarwal",
          description: "A full stack web developer, who loves to design and develop beautiful websites. I have been coding for over a year now. One of my hobbies is writing, I love to document my journey by writing blog posts and also teach others through them.",
          images: [
            {
              url: "/og-image.png",
              width: 800,
              height: 420,
              alt: "Avneesh Agarwal",
            },
          ],
        }}
        twitter={{
          handle: "@avneesh0612",
          site: "@avneesh0612",
          cardType: "summary_large_image",
        }}
      />

If you didn't have a wrapper/fragment then you need to wrap this and <Component {...pageProps} /> like-

   <>
       <NextSeo
        title="Avneesh Agarwal"
        titleTemplate="Avneesh Agarwal"
        defaultTitle="Avneesh Agarwal"
        description="A full stack web developer, who loves to design and develop beautiful websites. I have been coding for over a year now. One of my hobbies is writing, I love to document my journey by writing blog posts and also teach others through them."
        canonical="https://www.avneesh.tech/"
        openGraph={{
          url: "https://www.avneesh.tech/",
          title: "Avneesh Agarwal",
          description: "A full stack web developer, who loves to design and develop beautiful websites. I have been coding for over a year now. One of my hobbies is writing, I love to document my journey by writing blog posts and also teach others through them.",
          images: [
            {
              url: "/og-image.png",
              width: 800,
              height: 420,
              alt: "Avneesh Agarwal",
            },
          ],
        }}
        twitter={{
          handle: "@avneesh0612",
          site: "@avneesh0612",
          cardType: "summary_large_image",
        }}
      />
      <Component {...pageProps} />
    </>

You will also need to import it-

import { NextSeo } from "next-seo";

What each of the props does

• title: This is the title of the webpage that you can see in the browser and when you share it as a link

• titleTemplate: title template is the same as the title

• defaultTitle: If you don't provide any title on some page, then this will be used there.

  Our Amazing Sponsors

  View Website

  DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.

  View Website

  Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.

  View Website

  A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. Learn more about the DevDojo sponsorship program and see your logo here to get your brand in front of thousands of developers.

• description: This is the description of the site which helps search engines find the websites and is also shown when you share the URL.

• canonical: This should be the domain of your website in most cases but suppose you are republishing a post then this would link to the original post.

• openGraph: This takes in an object of data like title, description, image. This data will be used to show when you share these links on discord, Twitter, Facebook, WhatsApp, Slack, etc.

• Twitter: Here you can define your username, site, and how the card should look. In most cases summary_large_image works fine.

Changing data based on pages

Suppose you want to change the title or description of a page, you can add in the NextSeo with the tags you want to change. For example, I want to change the title to About Me, I will add this to the about.js page-

<NextSeo title="About Me" />

You can pass in as many props depending on what you need to change :D.

Conclusion

Hope you found this article useful. See ya next time ✌️

Useful links

Next SEO package

Next.js SEO course

Connect with me