DEV Community

ramigs
ramigs

Posted on • Originally published at ramigs.dev

2

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!

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay