SEO for Devs: Own your work with canonical tags

Canonically Speaking: Own Your Work

You've gone through the trouble of planning, outlining, and writing an article - the product of hours (or sometimes days) of work. After publishing your work on your own site, you take the time to cross-post it on Hashnode, Medium, Dev.to, and Reddit, to get more eyes on it.

Great news: your work is a success! You're racking up likes and upvotes, and people are leaving thoughtful comments.

Some time later, you open up an incognito window, and do a Google search for your article, and it pops up!

...but wait, why is the top result Medium, and not yourgreatwebsite.com?

It sounds like it's time you learned about the canonical tag, its value for SEO, and why it matters if you're trying to build a brand for yourself, or for a product you're working on.

What is a Canonical Tag?

The canonical tag is a specially formatted <link /> tag in HTML which lets you specify the "canonical" or original version of the content on a given page. The Google crawler and other search engines use these in combination with a few other signals to determine which domain "owns" the content being shown.

In other words: canonical tags tell search engines which URL should be considered the official home of whatever is on that page.

Syntax for the Canonical tag

Canonical tags go in the <head> section of an html page, and they look like this:

1<head>
2  <!--
3    you'll probably have a bunch of other stuff here,
4    like title, stylesheet, and meta tags.
5  -->
6  <link rel="canonical" href="https://www.yoursite.com/some-article" />
7</head>

Important: Your page should have only one canonical tag. Adding more than one can have negative or unintended effects on your search rankings!

Some great reasons to use Canonical Tags

When your work is posted in multiple places online, canonical tags tells search crawlers which version should be considered the authoritative source.

If you cross post and don't use a canonical tag, it can lead to your poor search rankings everywhere for your work. This means that even if you get a boost initially from sharing on Hashnode, Medium, or Dev.to, it can actually hurt your chances to rank well in the long run.

In theory, this means that the signals search crawlers use to rank your articles (like backlinks and traffic statistics) should be attributed to the original source on your site. That's great news, because more backlinks and clicks through to your work should increase visibility on search engine results pages (SERPs).

Another benefit: Protection Against Content Theft

Eventually, your high-traffic articles will copied and republished without your permission by spammy content aggregator sites looking to build traffic for themselves.

By having a canonical tag on your site from the start, and having it indexed by search engines, you ensure that these spam sites don't win by stealing your content. The canonical tag helps search engines recognize your original work and prioritize it in search results.

Implementing Canonical Tags on your site

Thankfully, it's not particularly complicated to add canonical tags to your site. The long and short of it is that you need to add a <link> tag to the <head> section of your HTML pages, specifying the canonical URL of the content.

As an example here's a simple, step-by-step guide to implementing canonical tags in a Next.js site using the pages router:

Create a New Next.js project

If you haven't already, you can create a new Next.js project by running the following commands in your terminal:

1npx create-next-app@latest my-nextjs-site
2cd my-nextjs-site

Install the Next.js Head Component

Next.js provides a built-in <Head /> component to help you manage the <head> section of your HTML. You don't need to install anything additional for this; it's already included with Next.js.

A word of caution: Using a <Head /> tag on any page in your site gives you a way to add content to the <head /> section rendered on the final page. This is super convenient, but that also makes it easy to unintentionally include more than one of these puppies per page -- and you don't want to do that.

Add the Canonical Tag to Your Pages

Adding the tag to a single page is straightforward - toss it between <Head> tags, and make sure the href attribute has the exact same URL as this page will. If your site pages have a trailing slash example.com/hello/, make sure to include it!

1import Head from 'next/head';
2
3export default function Home() {
4  return (
5    <div>
6      <Head>
7        <title>My Next.js Site</title>
8        <link rel="canonical" href="https://www.yoursite.com/" />
9      </Head>
10      <h1>Welcome to My Next.js Site</h1>
11    </div>
12  );
13}

You can add the canonical tag to other pages in the same way - just make sure to replace the href value with the correct, specifc URL for each page.

Set the Canonical URL for article pages

For more complex sites, especially those with pages generated from Markdown or a CMS, you'll likely want to set the canonical URL dynamically. Here's a simplified example of how you might accomplish this using next/navigation:

1import Head from 'next/head';
2import { useRouter } from 'next/navigation';
3
4export default function BlogPost() {
5  const router = useRouter();
6
7  // ƒor https://example.com/articles/my-good-article,
8  // this will contain something like "/articles/my-good-article"
9  const path = router.asPath;
10
11  /*
12    Dynamically set the canonical URL - this needs to be an absolute URL
13    so make sure to include the domain
14    For example, if your site is https://www.yoursite.com
15    and the path is /blog/my-post, the canonical URL would be
16    https://www.yoursite.com/blog/my-post
17  */
18  const canonicalUrl = `https://www.yoursite.com${path}`;
19
20  return (
21    <div>
22      <Head>
23        <title>Blog Post Title</title>
24        <link rel="canonical" href={canonicalUrl} />
25      </Head>
26      <h1>Blog Post Content</h1>
27    </div>
28  );
29}

Verify the Implementation

After adding canonical tags, it's essential to verify their implementation. You can use tools like Google's URL Inspection Tool in Search Console to check if your pages are being indexed correctly with the canonical tag.

Google Search Console showing the URL Inspection Tool — Use Google's URL Inspection Tool to verify that your pages are being indexed correctly with the canonical tag

By following these steps, you'll ensure that search engines recognize your original content, helping you build your personal brand and protect your work from content theft.

Bonus points: set canonical URLs in places where you crosspost

Many community blogging platforms contain tools that will let you set a canonical URL on your posts. This is a step you should absolutely take when it is available - it's a way to explicitly tell crawlers that if they're crawling your article on some other site, they should consider your original site the owner.

In other words, when you post on Dev.to, you should add metadata to your post there to indicate that it was originally posted on yoursite.com.

A recent post of mine on Dev.to showing that it is a crosspost — If you do it right, dev.to will point right back to your original article

FWIW: Adding canonical tags with Next.js App router

If your Next.js app is built using the App Router, implementation is slightly different, but also pretty straightforward. Next provides an API called Dynamic Metadata on each page, which slurps up the output of a function called generateMetadata on your pages, and sticks the result in nicely formatted tags in the <head /> of your document.

To add a canonical tag with this method, you'll do something like this:

1import type { Metadata, ResolvingMetadata } from 'next'
2
3type Props = {
4  params: { id: string }
5  searchParams: { [key: string]: string | string[] | undefined }
6}
7
8export async function generateMetadata(
9  { params, searchParams }: Props,
10  parent: ResolvingMetadata
11): Promise<Metadata> {
12  // read route params
13  const slug = params.slug
14
15  return {
16    metadataBase: new Url('https://yoursite.com'), // Next will use this to make complete URLs from relative paths
17    alternates: {
18      canonical: `/articles/${slug}`,
19    },
20  }
21}
22
23export default function Page({ params, searchParams }: Props) {
24  /* etc */
25}
26

Setting a canonical URL on Dev.to

To set the canonical URL of a post on Dev.to, add canonical_url to the frontmatter of your post:

1---
2title: Hello this is a post
3canonical_url: https://yoursite.com/article/some-article`
4---

Setting a canonical URL on Medium

To set the canonical URL of a post on Medium, you'll use the three dot button ... on your post and select "This story was originally published elsewhere" from the menu

Setting a canonical URL on Hashnode

In the Hashnode editor, there's a helpful menu under Draft Settings for "Are you republishing?", where you can specify your post's canonical URL.

Setting a canonical URL on LinkedIn

LinkedIn desperately wants you to use their "write an article" feature to share long form content on their site. In my opinion, this is a bad idea - LinkedIn articles do not support canonical tags -- and IMO, this means they're trying to take credit for your work.

Instead, just share a link to your article in a regular post - it may not do as well in their feed algorithm, but at least there they'll honor your canonicals.

Protect your work and boost your SEO with canonical tags

All told, this is a tiny amount of work to protect your IP, send search traffic your way, and build your brand. It's one of those things that many devs overlook. Building SEO traffic for your site has compounding value over time - and learning the fundamentals goes a long way.

Now get out there and add <link rel="canonical"> to your articles, before I claim them as my own 😘