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">
...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/'),
}
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}`,
}
}
}
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">