18 Apr 2020

[Hugo] Redirections 301

Problématique

Faire des redirections

Pour faire une redirection il est possible d’ajouter dans les metadata de nos articles l’option aliases ¹

---
title: "HUGO Redirections 301"
date: 2020:04:15T13:26:21Z
aliases: ["/url/d/origine/"]

Ainsi un appel à la page /url/d/origine/ nous servira une page de redirection.

$ curl localhost:1313/url/d/origine/
...
< HTTP/1.1 200 OK
< Accept-Ranges: bytes
< Content-Length: 430
< Content-Type: text/html; charset=utf-8
< Last-Modified: Wed, 15 Apr 2020 13:29:02 GMT
< Date: Wed, 15 Apr 2020 13:29:36 GMT

<!DOCTYPE html>
<html>
  <head>
    <title>http://localhost:1313/posts/2014/04/hugo-redirections-301/</title>
    <link rel="canonical" href="http://localhost:1313/posts/2014/hugo-redirections-301/"/>
    <meta name="robots" content="noindex">
    <meta charset="utf-8" />
    <meta http-equiv="refresh" content="0; url=http://localhost:1313/posts/2014/04/hugo-redirections-301/" />
  </head>
</html>

L’option aliases étant un tableau il est possible d’ajouter plusieurs URL

D’un point de vue `SEO`

Si cette méthode est fonctionnelle, d’un point de vue SEO elle n’est pas optimale. En effet notre page de redirection nous sert un contenu HTML avec un code de retour 200. Ce qui signifie d’un point que la page a été correctement chargée. Ceci n’est pas tout à fait vrai.

Il existe plusieurs codes de retour HTTP pour les redirections qui sont classées dans le groupe 3XX². Google, Bing et consort donne de meilleurs notes aux sites qui appliquent des redirections de type 3XX quand une ressource n’est plus disponible.

Comme Hugo se contente de générer des pages web et n’est pas responsable du service de celle-ci (la commande hugo serve n'étant utile qu'à des fins de tests) il va être nécessaire de configurer un vrai serveur HTTP. Nous utiliserons ici le serveur Nginx.

Contrairement à ce que j’ai pu croire ³ hugo est capable de générer n’importe quel type de fichier, y compris des fichiers de configuration. Pour réaliser ceci il est nécessaire de déclarer un nouveau format de génération de fichier (ici se sera conf/nginx) et de créer un template ⁴. Commençons par éditer notre fichier config.toml pour déclarer notre nous format.

[outputs]
  home = [ "HTML", "RSS", "REDIR"]

[mediaTypes]
[mediaTypes."conf/nginx"]

[outputFormats]
[outputFormats.REDIR]
  mediatype = "conf/nginx"
  path = "nginx-config"
  baseName = "redirections.conf"
  isPlainText = true
  notAlternative = true

La première partie du fichier nous permet de définir la liste des formats de fichier que doit générer Hugo pour la page d’accueil. Ici nous générons cette page en HTML standard, comme flux RSS mais aussi avec le format REDIR que nous créons actuellement.

Ensuite vient la définition d’un nouveau type de fichier. Nous créons simplement un mediaType nommé conf/nginx et enfin la définition qui nous intéresse: le format de sortie.

Nous définissons ici que ce format sera de sortie sera utilisé pour le type de fichier conf/nginx. Le fichier résultant (redirections.conf) sera stocké dans le répertoire nginx-config au format texte brute (donc sans modification des parsers HTML de Hugo). Enfin la dernière option notAlternative permet de dire à Hugo que ce format ne doit pas être proposé comme format de consultation standard (contrairement au HTML par exemple).

Il nous reste maintenant à créer le template. Créer le fichier layout/index.redir dans votre thème ou dans votre projet avec ce contenu.

# Nginx redirect
{{  range $p := .Site.Pages -}}
{{ range .Aliases }}
rewrite ^{{  . }}$ {{ $p.RelPermalink }} permanent;
{{ end -}}
{{- end -}}

Ce thème va itérer sur l’ensemble des aliases des pages et ajouter une ligne de configuration nginx traitant la redirection. Vous pourrez ensuite inclure de fichier dans votre configuration nginx via un simple include.

server {
    listen       80;

    ...

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        include /path/to/nginx-config/redirections.conf;
    }

Si vous recharger nginx vos redirections seront maintenant prisent en comptes.

Sécuriser l’accès au fichier redirection.conf

Il subsiste néanmoins un problème : le fichier redirection.conf est accessible directement dans un navigateur. Si vous vous rendez sur l’URL http://monsite.tld/nginx-config/redirection.conf vous pouvez le constater.

Nous allons ajouter ces quelques lignes au début de notre fichier de configuration nginx pour éviter de divulguer trop d’informations sur notre site.

location /nginx-config/ {
  deny all;
}

Ainsi le fichier de configuration généré demandera à nginx d’interdire l’accès à tous les fichiers dans le dossier /nginx-config/.

Conclusion

Nos redirections 301 sont maintenant plus propre, nos spécialistes SEO en seront que plus content!

Hugo
SEO

Lerm-IT