Adding canonical tag in Next.js

Next.js doesn't come SEO optimized
and you need to do some things on your own
to make sure that your Next.js based blog
or website is properly optimized to be
indexed and ranked well in Search Engines.

The Problem

First, what is canonical URL or canonical tag?

Canonical URL is a URL which tells search engines
the original source of a particular page.
Let's take the example of this URL:

https://kizie.co

This is a straightforward URL. So when Google
crawls this link it would know that
the source and canonical of the page is same,
which is https://kizie.co.

The problem arises in cases when there are
some query with the URL or when there are UTM
parameters. Whole lot of sites like to add
UTM parameters to external links and for various reasons.

The same URL with UTM parameters can look like this:

https://kizie.co/?ref=vercel.com

In this case, the search engine would consider the
canonical URL of this page same as the original URL
which also includes the UTM parameters.

Which means that search engine might consider these:

https://kizie.co
https://kizie.co/?ref=vercel.com

as two different sources or URLs.
But we know both these URL are same.
The use of canonical URL is to tell
search engines that these two URLs
are same and that search engines should
consider these as same and not different sources.

Setting up canonical tag in Next.js

Adding canonical tag in Next.js is pretty
simple. There are two steps to it:

• Determining the canonical URL
• then Adding it in Head

Determining the canonical URL in Next.js apps

People who have used Next.js might think
this as an easy thing to do, you just
import the router and then use router.pathname
to figure out the canonical URL.

// URL: https://kizie.co/example

const canonical = `https://kizie.co` + router.pathname;

// canonical will be https://kizie.co/example

Thats it, no? The first search result's most upvoted
answer says so. But it's, wrong!

Although the above setup would work in most cases,
it won't work in sites that use ISR
(Incrementally statically generated pages)
or have dynamically generated routes.
In ISR blogs and dynamically generated setups,
if you access:

// URL: https://kizie.co/example/isr-generated-page

const canonical = `https://kizie.co` + router.pathname;

// canonical will be https://kizie.co/example/[slug]

Certainly https://kizie.co/example/[slug] is not the
canonical for this page. The issue is that router.pathname
doesn't know the actual slug of statically or dynamically
generate pages.

The solution

The solution is to use router's asPath
because it works even on dynamically generated pages.

// URL: https://kizie.co/example/isr-generated-page

const canonical = `https://kizie.co` + router.asPath;

// canonical will be https://kizie.co/example/isr-generated-page

And to make sure the canonical URL doesn't contain
any UTM parameters, we can use the following.

// URL: https://kizie.co/example/isr-generated-page?ref=vercel.com

const canonical = (`https://kizie.co` + router.asPath).split("?")[0];

// canonical will be https://kizie.co/example/isr-generated-page

Basically, we are just stripping off the
UTM parameters part in the URL.

Adding canonical tag in Head

For this I highly recommend to use NextSEO
npm library since it makes really easy not just
to add canonical tag but also other tags like title,
description and Open Graph tags.

Open the pages/_app.js file in your Next.js project
and make the changes like below. Also make sure to change
kizie.co with your site's domain name.

import { useRouter } from "next/router";
import { DefaultSeo } from "next-seo";

function MyApp({ Component, pageProps }) {
  const router = useRouter();
  const canonicalUrl = (`https://kizie.co` + (router.asPath === "/" ? "": router.asPath)).split("?")[0];


  return (
    <>
      <DefaultSeo
        canonical={canonicalUrl}
      />
      
      // Other stuff
    </>
  );
}

export default MyApp;

If you don't want to use NextSEO, you can also use
Next.js's Head to add the canonical tag like so:

import { useRouter } from "next/router";
import Head from "next/head";

function MyApp({ Component, pageProps }) {
  const router = useRouter();
  const canonicalUrl = (`https://kizie.co` + (router.asPath === "/" ? "": router.asPath)).split("?")[0];


  return (
    <>
      <Head>
        <link rel="canonical" href={canonicalUrl} />
      </Head>
      
      // Other stuff
    </>
  );
}

export default MyApp;

The above will make sure you have proper canonical URL
in all the pages of your sites, even the pages
which are generated through ISR or SSR.