Ajouter une URL canonique à chaque article avec Hugo

J’utilise le thème Hugo réalisé par Jimmy Cai.

Il inclut déjà dans le modèle d’en-tête le code pour ajouter un lien canonique.

Mais, à un moment donné, j’ai dû publier un article que j’avais déjà publié sur une plateforme en ligne.

Je ne pouvais donc pas laisser le thème générer un lien canonique automatiquement.

L’objectif

Je voulais conserver l’automatisation pour les articles publiés initialement sur mon blog.

Ensuite, dans certains cas, je voulais republier un article sur mon blog alors qu’il était déjà disponible sur Internet.

Pourquoi

En matière de référencement, les bonnes pratiques sont les suivantes :

• Chaque page web doit avoir un lien canonique.
• Une page web unique avec le même contenu doit être publiée une et une seule fois sur Internet.

Si vous ne respectez pas ces deux règles, les robots n’indexeront pas vos pages et vous perdrez du trafic.

Solution utilisant le thème Hugo

Tout d’abord, j’ai dû trouver où le lien canonique était généré. Je l’ai trouvé dans layouts/partials/head/head.html :

1

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

Maintenant, comment pouvais-je spécifier dans la frontmatter d’un article donné que je voulais que le lien canonique soit un lien spécifique ?

En cherchant un peu, j’ai trouvé ce fil de discussion sur le forum Hugo.

Les données de la frontmatter sont accessibles via .Params qui contient des paires clé/valeur.

La clé est le nom de la propriété frontmatter.

Dans mon cas, j’ai nommé la propriété canonique relcanonical et la valeur doit être une chaîne de caractères.

Cela donne ce qui suit :

1
2
3

---
relcanonical: https://jeremielitzler.fr
---

La ligne head.html ci-dessus doit être remplacée par ce qui suit :

1
2
3
4
5

{{ with .Params.relcanonical }}
<link rel="canonical" href="{{ . | relLangURL }}" itemprop="url" />
{{ else -}}
<link rel="canonical" href="{{ .Permalink }}" itemprop="url" />
{{ end -}}

Dans le code ci-dessus,

• Lorsque le paramètre relcanonical est défini dans la frontmatter ({{ with .Params.relcanonical }})
• On utilise sa valeur, qui est le . dans {{ . }}.

J’espère que vous avez trouvé cela utile.

N’hésitez pas à partager !

Crédit : Photo de Steve Johnson sur Unsplash.