DEV Community

Cover image for Does My Next.js Blog Need Canonical Links?
Dave Gray
Dave Gray

Posted on Originally published at davegray.codes on

Does My Next.js Blog Need Canonical Links?

#nextjs #seo #blog #blogging

While launching my blog, I've been reviewing some of the confusing metadata items that go inside the <head> element.

I built my blog with Next.js and previously discussed how Next.js orders and merges metadata and how Next.js handles favicons.

Today, I'm looking at canonical links and why I might need them on my blog.

What is a Canonical Link?

Surprisingly, MDN doesn't provide much info and only briefly mentions the canonical value for the rel attribute in a table of possible values.

Google's developer site provides much more information including a definition of canonicalization:

Canonicalization is the process of selecting the representative –canonical– URL of a piece of content.

The same Google site provides more info on how a canonical URL can be specified:

  • Using a redirect provides a strong indication that the target of the redirect should be a canonical URL.
  • rel="canonical" links indicate canonical URLs.
  • Sitemap links are considered a weaker indication of a canonical URL as well.

All good to know, and the rel="canonical" link is specifically what I wanted to learn about.

Why Should I Use a Canonical Link?

In Using the Cross Domain Rel=Canonical to Maximize the SEO Value of Cross-Posted Content, Rand Fishkin essentially answers the question in the title.

I not only want to publish content to my blog, I want to maximize the SEO value by cross-posting content to other sites like DEV, Hashnode, Medium and others.

By providing a canonical link in the <head> of my pages like the one below...

<link rel="canonical" href="https://www.davegray.codes/posts/nextjs-favicon-svg-icon-apple-chrome">
Enter fullscreen mode Exit fullscreen mode

...I can publish the same article on those other sites.

And as DEV notes on their FAQ page:

You can set the canonical_url of your post before publishing so that Google knows where to send the link juice (that precious, precious link juice).

In fact, all three sites I mentioned above allow you to provide the canonical URL of the content you share.

How to set a Canonical Link in Next.js

In my root layout file, I added my base URL with the metadataBase key:

export const metadata: Metadata = {
  title: {
    template: '%s | Dave Gray',
    default: "Dave Gray Teaches Code",
  },
  description: "Hello, I'm Dave. 👋 I teach coding and web development skills.",
  applicationName: "Dave Gray's Blog",
  authors: [{ name: "Dave Gray" }],
  generator: 'Next.js',
  keywords: ['dave gray', 'code', 'web development', 'javascript', 'react', 'node.js', 'next.js', 'web dev', 'html', 'css', 'python'],
  referrer: 'origin-when-cross-origin',
  creator: 'Dave Gray',
  publisher: 'Dave Gray',
  metadataBase: new URL('https://www.davegray.codes/'),
}
Enter fullscreen mode Exit fullscreen mode

Now when generating the pages for my blog posts, I need to add the canonical link. Note that is a property of alternates in Next.js metadata:

export async function generateMetadata({ params: { postId } }: Props) {

    const post = await getPostByName(`${postId}.mdx`) //deduped!

    if (!post) {
        return {
            title: 'Post Not Found'
        }
    }

    const { meta } = post

    return {
        title: meta.title,
        description: meta.description,
        keywords: [...meta.tags],
        alternates: {
            canonical: `/posts/${meta.id}`,
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

Also worth noting: Next.js will take the trailing slash from your base URL and a leading slash from your canonical path and merge them so you get one / and not //.

Now when I npm run dev, I can open devtools and see code like the following in the <head> of my blog post pages:

<link rel="canonical" href="https://www.davegray.codes/posts/nextjs-favicon-svg-icon-apple-chrome">
Enter fullscreen mode Exit fullscreen mode

Let's Connect!

Hi, I'm Dave. I work as a full-time developer, instructor and creator.

If you enjoyed this article, you might enjoy my other content, too.

My Stuff: Courses, Cheat Sheets, Roadmaps

My Blog: davegray.codes

YouTube: @davegrayteachescode

X: @yesdavidgray

GitHub: gitdagray

LinkedIn: /in/davidagray

Buy Me A Coffee: You will have my sincere gratitude

Thank you for joining me on this journey.

Dave

Top comments (0)