Thilo Maier

Improve SEO for your Next.js site by adding canonical URLs

Thilo Maier •
Last modified:

Duplicate content within a domain or across domains should be avoided since it can result in unexpected search rankings if not handled properly. When a search engine detects duplicate content it has to figure out which version it considers to be the canonical (or original) version. A search engine will rank the canonical version higher than duplicates. If a search engine thinks that your original content is a duplicate, you have a problem. You can run into this issue when you syndicate content to other websites intending to increase visibility in search results for your website. If you do not configure canonical URLs correctly, there is a chance that you achieve the exact opposite, i.e. you lower the visibility of your website in search results.

What is a canonical URL?

A canonical URL is a link tag added to the head of an HTML page that gives search engines a hint by pointing to the canonical version of the page:

<link
	rel="canonical"
	href="https://maier.tech/posts/improve-seo-for-your-next-js-site-by-adding-canonical-urls"
/>

Search engines will honor this declaration and rank the canonical URL higher than any duplicates unless they come across conflicting declarations of what the canonical URL of a specific piece of content is.

Why would you want duplicate content?

The best way to handle duplicate content is to avoid it. But you might want to make a conscious decision to allow duplicate content for one of the following reasons:

But chances are that duplicate content is the result of a configuration error. For instance, if your blog serves the same content whether or not you put a trailing slash on URLs, you should configure your site to use one type of URL only. This URL

https://maier.tech/improve-seo-for-your-next-js-site-by-adding-canonical-urls

(without trailing slash) and this URL

https://maier.tech/improve-seo-for-your-next-js-site-by-adding-canonical-urls/

(with a trailing slash) are not the same. Next.js automatically redirects a URL with trailing slash to the corresponding URL without trailing slash.

Add canonical URLs and other SEO metadata to your pages with next-seo

You can use package next-seo to add SEO metadata to every page in Next.js. You can create an SEO component as a wrapper around NextSeo to handle canonical URLs:

components/seo.tsx
import { useRouter } from 'next/router';
import { NextSeo } from 'next-seo';

const siteUrl = 'https://maier.tech';

type Props = {
  title: string;
  description: string;
  canonicalUrl?: string;
};

export default function SEO({ title, description, canonicalUrl }: Props) {
  const router = useRouter();
  const path = router.asPath;
  const url = `${siteUrl}${path}`;
  return (
    <NextSeo
      title={title}
      description={description}
      canonical={canonicalUrl ?? url}
      openGraph={{ url, title, description }}
    />
  );
}

SEO receives a title, description and optional canonicalUrl as props. Passing in canonicalUrl means that the generated page is a duplicate and its metadata will contain a link tag that points search engines to the canonical URL. Omitting canonicalUrl means that the generated page is the original page and its URL is the canonical URL. Then add SEO to every page:

pages/posts/[slug].tsx
...
<Layout>
  <SEO title={post.title} description={post.description} />
  ...
</Layout>
...

In this example, post needs to be retrieved with getStaticProps from a CMS or from the frontmatter of a Markdown file. The resulting head of the generated HTML page looks like this:

...
<head>
	<meta name="viewport" content="width=device-width" />
	<meta charset="utf-8" />
	<title>Improve SEO for your Next.js site by adding canonical URLs – Thilo Maier</title>
	...
	<meta
		name="description"
		content="Syndicating content can have a negative impact on your search ranking. Learn how to fix this by adding link tags with canonical URLs to your Next.js site."
	/>
	...
	<link
		rel="canonical"
		href="https://maier.tech/posts/improve-seo-for-your-next-js-site-by-adding-canonical-urls"
	/>
	...
</head>
...

Note the link tag with rel="canonical", which contains the canonical URL. If the generated page is served from the canonical URL, you can omit the canonical link tag since in this case there is no duplicate content.

But if you syndicate content from your website to another website, such as DEV, you also need to add a canonical URL on the other website. The canonical URL needs to point to the original content on your website. The exact way how this is done varies by service. You can find the instructions for adding a canonical URL on DEV here.

Links