Easy SEO for Next.js with next-seo

One of many reasons to use Next.js is improved SEO for your react application and an important part of this are the numerous SEO meta tags. While adding these tags is already supported by the framework, the process can be made even easier with using next-seo. In this post we will compare the approach with and without next-seo.

October 13, 2020

Simplify SEO in your Next.js application with next-seo

Adding SEO meta tags with next/head

The Head component imported from next/head allows us to add elements to our page's head element.

import Head from 'next/head'

export default function (props) => (
    <div>
       <Head>
            <title>Page Title</title>
            <meta name="description" value="The description" />
            <meta property="og:type" content="website" />
       </Head>
       /* page content */
    </div>
)

However, when using next-seo we can make this process slightly easier.

Advantages of using next-seo

Meta tags via properties

In contrast to the approach used by Head, meta tags are added by using predefined properties on the NextSeo component:

import { NextSeo } from 'next/seo'

export default function (props) => (
    <div>
        <NextSeo
            title="Page Title"
            description="The description"
            openGraph={{
                type: "website"
            }}
        />
    </div>
)

Despite the difference appearing minor at first, using this approach provides several advantages:

It is easier to read
Predefined properties and less typing leave little room for errors
Improved organization by grouping related properties, as in the openGraph property

Additionally next-seo helps us by offering some smart capabilities around meta tags.

next-seo tag optimization

In many cases there are various alternatives for certain tags and it would be useful to avoid duplication in such cases. We can see how next-seo helps us here by looking at the twitter properties:

<NextSeo
  openGraph={{
    title: 'The title used by twitter',
    description: 'The description used by twitter',
  }}
  twitter={{
    handle: '@handle',
    site: '@site',
    cardType: 'summary_large_image',
  }}
/>

While twitter is able to use twitter:title and twitter:description in addition to our three defined twitter tags, next-seo does not provide properties to set these tags, for good reason! Twitter is also able to use the openGraph (og) tags for these properties. Therefore, a clean API provided by next-seo helps us to avoid unnecessary duplication.

Another important part to avoid duplication is the possibility to set default seo tags for pages.

DefaultSeo

In most cases we will face both tags which we need on all pages and tags which we want to set for pages that don't define their own specific meta tags. next-seo's DefaultSeo component helps us to achieve this. A typical place to use this tag would be in your _app.js component.

import { DefaultSeo } from 'next-seo'

export default class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props
    return (
      <>
        <DefaultSeo
          titleTemplate="%s | MyCompanyName"
          openGraph={{
            type: 'website',
            locale: 'en_US',
            url: 'https://wwww.manuelkruisz.com/',
          }}
        />
      </>
    )
  }
}

Unless we override a specific property in a specific page,the page is going to use the tags provided by DefaultSeo. One thing that is especially nice about this component is the titleTemplate property. In many cases we always want to use a specific template for our title tags. For example, each title should end with our company name. next-seo supports this functionality by allowing us to provide a template in DefaultSeo.

With the above configuration, if we set the title tag on any page, next-seo will automatically append | MyCompanyName to the title.

But... I could do all of that with next/head already?

Yes, you could! But as we have seen next-seo helps us to make this process slightly easier. Of course there's the possibility to roll your own implementation of components like DefaultSeo and NextSeo, but would you rather use a well-tested and documented library which is already used by many others. Or spend way more time on building your own solution?

Summary

We saw how next-seo helps to make seo tags easier to work with by providing a more readable approach, less typing required and some smart capabilities like avoiding duplicated tags and titleTemplates.

Here's where you can read more:

next-seo github repository

post about next-seo by the creator