Canonical URLs with Jekyll

gistfile1.mustache

<link rel="canonical" href="http://yourdomain.com{{ page.url | replace:'index.html','' }}" />

In case you set the baseurl on _config.yml

<link rel="canonical" href="{{ site.url }}{{ site.baseurl }}{{ page.url | replace:'index.html',''}}">

If you want to allow links to other domains, you can use following in head.html:

    {% if page.canonical_url != nil %}
    <link rel="canonical" href="{{ page.canonical_url }}"/>
    {% else %}
    <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
    {% endif %}

<link rel="canonical" href="{{ page.url | absolute_url }}" />

<link rel="canonical" href="{{ page.url | absolute_url }}" />

When on the 'homepage' the URL generated will be /, which is not valid.

I use a variation of this.

{% if page.url =='/' %}{{site.url}}{% else %}{{page.url | absolute_url}}{% endif %}

This prevents an error with Google SEO report on Lighthouse

Document does not have a valid rel=canonicalRelative URL (/)
Canonical links suggest which URL to show in search results.
– https://web.dev/canonical/

A caveat though. With jekyll serve {{site.url}} is set to localhost:4000, when you do a jekyll build {{site.url}} is replaced by whatever domain name you set in the _config.yml

<link rel="canonical" href="{{ page.url | absolute_url }}" />

When on the 'homepage' the URL generated will be /, which is not valid.

I use a variation of this.

{% if page.url =='/' %}{{site.url}}{% else %}{{page.url | absolute_url}}{% endif %}

This prevents an error with Google SEO report on Lighthouse

Document does not have a valid rel=canonicalRelative URL (/)
Canonical links suggest which URL to show in search results.
– https://web.dev/canonical/

A caveat though. With jekyll serve {{site.url}} is set to localhost:4000, when you do a jekyll build {{site.url}} is replaced by whatever domain name you set in the _config.yml

Please where do I place this code in my Jekyll website?

Please where do I place this code in my Jekyll website?