How to set up a canonical URL in Eleventy

Cross-posting can be a great way to expose your content to new, larger audiences.

Nonetheless, it's important to consider the implications it can have on page ranking and SEO.

When you syndicate an article for publication on different domains, setting up a canonical URL will let search engines know which page should be considered the original, and which ones duplication.

To do this, we need to include in all the duplicate versions a <link> tag pointing to the canonical URL.

Implementing this in Eleventy is pretty straight-forward.

Edit your default layout (probably _includes/layouts/base.njk), adding the following inside the <head> tag:


{% if canonical %}
  <link rel="canonical" href="{{ canonical }}" />
{% endif %}

Basically, we're conditionally adding the <link> tag, depending on whether a key canonical exists in the front matter of the content page.

If you're not using Nunjucks, check out the documentation of your template language to find out how to conditionally render HTML.

Then, in the front matter's content file, simply add a canonical key pointing to the original URL, like so:

canonical: "https://dev.to/you/your-awesome-article"

Build your static site again and confirm that the <link> tag is present.

Done!