DEV Community

Cover image for Next SEO: A better way to Manage SEO for Next.js ๐Ÿ”
Avneesh Agarwal
Avneesh Agarwal

Posted on • Updated on • Originally published at blog.avneesh.tech

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

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.

let's start

Installing the package

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

npm i next-seo
Enter fullscreen mode Exit fullscreen mode

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",
        }}
      />
Enter fullscreen mode Exit fullscreen mode

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} />
    </>
Enter fullscreen mode Exit fullscreen mode

You will also need to import it-

import { NextSeo } from "next-seo";
Enter fullscreen mode Exit fullscreen mode

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" />
Enter fullscreen mode Exit fullscreen mode

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

Top comments (2)

Collapse
 
stunaz profile image
stunaz

how is it useful comparing to next/head?

Collapse
 
avneesh0612 profile image
Avneesh Agarwal

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.