---
title: "Define Canonical URL in a Hugo Theme"
description: "Define link rel canonical in a Hugo Template to make an URL canonical, which may have some optional GET parameters."
url: "https://qameta.com/posts/define-canonical-url-in-a-hugo-theme/"
---

# Define Canonical URL in a Hugo Theme

[Hugo](https://gohugo.io) is a [Static site
generator](https://en.wikipedia.org/wiki/Static_site_generator), but links to
your site may contain optional parameters like `ref=...` which may produce
duplicate content for search engines. You can use canonical URL to define, which
URL should be used by Google and co.

Google has a very detailed description how to [consolidate duplicate
URLs](https://developers.google.com/search/docs/advanced/crawling/consolidate-duplicate-urls).

If you know [Hugo](https://gohugo.io) and want just a copy a paste solution,
just add this in head of your template:

```html
<head>
  ...
  <link rel="canonical" href="{{ .Permalink }}">
  ...
</head>

```

This will result in an URL like:

```html
<head>
  <link rel="canonical" href="https://qameta.com/posts/your-blog-post/">
</head>
```

## Using relative URLs may be wrong

According to [Google documentation for
content](https://developers.google.com/search/docs/advanced/crawling/consolidate-duplicate-urls).
It is important to use absolute URL in your canonical URL definition. Some
online resources say, that you should use relative permalink:

```html
<head>
  <link rel="canonical" href="{{ .RelPermalink }}">
</head>
```

This would result to this output:

```html
<head>
  <link rel="canonical" href="/posts/your-blog-post/">
</head>
```

The missing Domain is considered to be wrong.


## Use absolute URLs

Using absolute URLs is an important part for canonical URLs, as you may cross
post content on your other sites or external media site (like [Medium](https://medium.com/@qameta/)), which may
have the same link structure, but a different domain.

Lookup in your project folder *my-website/themes/* for your Hugo Theme. There
should be a folder *layouts/* where the base structure of your HTML site is
defined. There find the part, where *\<head\>* is defined. For my themes it is
in */layouts/partials/head.html*.

Just a hint, you can grep for it in your themes folder:

```sh
$ grep -R "<head>" .
./themes/your-theme/layouts/partials/head.html:<head>
```

Open the file where your *\<head\>* part of the website is defined and add it:

```html
<head>
  ...
  <link rel="canonical" href="{{ .Permalink }}">
  ...
</head>
```

This will result in an URL like:

```html
<head>
  <link rel="canonical" href="https://qameta.com/posts/your-blog-post/">
</head>
```

## Summary

This is a simple solution to add canonical URLs to every page through Hugo Theme
of your choice. A lot of themes have already this or a similar line included. If
your theme does not have it, you should add it, to reduce the chance of content
marked as duplicate due to URL parameters.

This solution does not handle internationalization. You may also want to define,
where the content is cross posted, what is according to [moz.com: Using the
Cross Domain Rel=Canonical to Maximize the SEO Value of Cross-Posted
Content](https://moz.com/blog/cross-domain-rel-canonical-seo-value-cross-posted-content)
an import part of content distribution.