Google a mis à jour sa page d’aide sur le support du Javascript, en ajoutant une section pour expliquer comment injecter des balises Canonical à l’aide de ce langage.
La nouvelle section apparait ici (consultez la page en anglais pour la trouver) :
Voici un exemple de code fourni par Google
fetch('/api/cats/' + id)
.then(function (response) { return response.json(); })
.then(function (cat) {
// creates a canonical link tag and dynamically builds the URL
// e.g. https://example.com/cats/simba
const linkTag = document.createElement('link');
linkTag.setAttribute('rel', 'canonical');
linkTag.href = 'https://example.com/cats/' + cat.urlFriendlyName;
document.head.appendChild(linkTag);
});
Attention : ce code n’est qu’un exemple, qu’il faut adapter pour votre site et vos différents types de page.
Néanmoins, cette pratique n’est pas recommandée
Même si Google évoque cette possibilité, il faut absolument garder en tête que la meilleure méthode pour ajouter une balise canonical c’est de l’ajouter dans le code HTML en SSR (Server Side Rendering).
En l’ajoutant en Javascript, on prend plusieurs risques :
- si le moteur de recherche n’arrive pas à rendre correctement la page (parce qu’elle est trop lente à se générer, en raison d’erreurs de code Js, ou parce que vos scripts consomment trop de ressources), la balise « link rel=’canonical' » risque fort d’être ignorée
- si vous générez plusieurs balises, le résultat sera imprévisible. Même chose si vous changez en Js la valeur de la canonical présente dans le HTML de la page (version SSR).
Donc, la solution évoquée ici par Google n’est à utiliser qu’en dernier recours !