Next SEO: A better way to Manage SEO for Next.js ๐Ÿ”

Next SEO: A better way to Manage SEO for Next.js ๐Ÿ”

Avneesh Agarwal
ยทDec 16, 2021ยท

3 min read

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article

Table of contents

  • Installing the package
  • Using next SEO
  • Changing data based on pages
  • Conclusion

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.

  • 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 โœŒ๏ธ

Next SEO package

Next.js SEO course

Connect with me

Did you find this article valuable?

Support Avneesh Agarwal by becoming a sponsor. Any amount is appreciated!

See recent sponsors |ย Learn more about Hashnode Sponsors
ย 
Share this