Sommaire
- Looker Studio : gérer les dates et la granularité dans les graphs - 14 mars 2023
- Optimiser les pages avec les bons mots clés (DataStudio + Google Search Console) - 29 novembre 2020
- Seocamp 2020, les slides ? - 9 octobre 2020
A Que du Web 2017, j’ai pu présenter un usage détourner de Google Tag Manager : utiliser google Tag Manager pour mettre en place des optimisations SEO.
Les slides sont ici :
Mais il n’est pas facile de voir tout le code sur les slides, donc les voici ici, avec quelques bonus.
Attention, je le redis ici, il s’agit de détourner l’usage d’un outil. On se transforme un peu en Mac Gyver. Si les idées de Mac Gyver ont beau fonctionner (en théorie), en pratique, ce n’est pas recommandé de le faire.
Mais c’est parti.
Réécrire les balises title
Variable pour récupérer la balise title (Variable Javascript)
On sélectionne le titre du document (de la page).
document.title
Il vous faut également la table de conversion SEO – lookup- New Title, qui contiendra vos titres
Le tag pour réécrire les balise title
Le titre du document va être pioché dans le tableau de conversion.
<script> document.title = {{SEO - lookup - New Title}} </script>
Réécrire les meta descriptions
Variable pour récupérer la meta description (JavaScript personnalisé)
On cherche la présence d’une meta ayant un attribut name=’description’ et on retourne le contenu.
function () { var links = document.getElementsByTagName("meta"); for (var i = 0; i < links.length; i ++) { if (links[i].getAttribute("name") === "description") { return links[i].content} } }
Tag permettant la réécriture de la meta dscription
Il s’agit du même principe que pour la balise title mais le tag est un peu plus long. Si on utilisait du jQquery, le code serait bien plus court mais j’ai préféré ne pas faire appel à de librairie supplémentaire.
Il faut également la variable « tableau de conversion » qui contient les nouvelles meta description.
Pour chaque meta, on surcharge l’attribut « content » avec le contenu du tableau de conversion.
<script> var meta = document.getElementsByTagName("meta"); for (var i = 0; i < meta.length; i ++) { if (meta[i].getAttribute("name") === "description") { meta[i].setAttribute("content",{{SEO - lookup - edit metadesc}}); break; } } </script>
Ajouter une meta description
C’est exactement le même principe qu’au dessus. On fait appel à une variable loookup table (tableau de conversion) qui contient les meta descroptions à ajouter ({{SEO – lookup – new metadesc}}).
Puis la balise qui permet d’ajouter un élément dans le head. Cet élément est une meta, dont le nom est description, et le contenu est pioché dans la variable.
Balise pour ajouter une meta description
<script> if({{SEO - lookup - new metadesc}}) { var d = document.createElement('meta'); d.name = 'description'; d.content = {{SEO - lookup - new metadesc}}; document.head.appendChild(d); } </script>
Ajouter une canonical
Variable permettant de récupérer le contenu de la balise canonical.
function () { var links = document.getElementsByTagName("link"); for (var i = 0; i < links.length; i ++) { if (links[i].getAttribute("rel") === "canonical") { return links[i].href} } }
Il est nécessaire d’avoir créé la balise permettant d’indiquer l’url canonique (ici : SEO – canonical sans parametre).
Si ensuite la balise canonical est « undefined », on peut utiliser le tag permettant d’ajouter la balise rel.
Balise pour ajouter un tag link rel canonical
On crée une balise link, on lui ajouter un attribut ‘rel=canonical’, et le href va être pioché dans notre tableau de conversion.
<script> var tlink = document.createElement('link'); tlink.rel = 'canonical' ; tlink.href = {{SEO - canonical sans parametre}}; document.head.appendChild(tlink); </script>
Réécrire une balise canonical
Une fois le contenu de la balise récupéré (ou si celui-ci est undefined), voici le tag permettantde modifier la canonical.
C’est toujours le même principe.
<script> var links = document.getElementsByTagName("link"); for (var i = 0; i < links.length; i ++) { if (links[i].getAttribute("rel") === "canonical") { links[i].setAttribute("href",{{SEO - lookup - Canonical corrigée}}); break; } } </script>
Ajouter une balise meta robot no index
Lors des tests réalisés pour la présentation au SEO campus 2016, JavaScript et indexation, où en est-on ?, en injectant une balise meta robot no index, la page avait bien disparu des SERPs.
Voici le tag qui permet d’ajouter une balise meta robot no index.
<script> var parenthead = document.head; var newMeta = document.createElement('meta'); newMeta.name = 'robots'; newMeta.content = 'noindex'; parenthead.appendChild(newMeta) ; </script>
Supprimer une meta robot no index
Par contre, le test inverse n’avait pas fonctionné. Supprimer en JavaScript une balise no index n’avait pas permis la réindexation de la page. Il semblait donc que la directive No Index prime si Google en trouve une.
Donc ce tag ne sert à rien mais le voici :
<script> var parenthead = document.head; var metarobots = document.getElementsByName('robots'); if (metarobots .length) { parenthead.removeChild(metarobots [0]);} </script>
Voilà, amusez-vous bien.
C’est de la dynamite ce post ! J’avais lu le post de Moz la semaine dernière à ce sujet qui était très sympa mais le tient est beaucoup plus simple à mettre en place.
Je ne sais pas si tu en avais pris connaissance ? https://moz.com/blog/seo-changes-using-google-tag-manager
Merci 🙂
J’avais vu l’article sur Moz et je m’étais dit qu’il fallait que je poste rapidement mon article.
Là il s’agit vraiment du code. La démarche complète est dans les slides 🙂
LunaMetrics avait également publié un article sur le sujet (on peut télécharger le container) :
http://www.lunametrics.com/labs/recipes/seo-complete-pack/
Super cet article, je viens de tester pour la canonical et ça fonctionne bien 🙂
Bonjour Madeline, Bonjour Steeve,
Merci beaucoup pour cet article, nous avons également utilisé GTM pour gérer les canoniques, mais lorsqu’on regarde le code de la page dans la Console de Google (explorer comme Google), la balise n’apparaît pas. Elle apparaît uniquement lorsqu’on utilise la console du navigateur (F12). Par conséquent, nous nous demandons si les balises générées avec GTM sont bien pris en compte par Google Bot ou pas. Si elles ne sont pas prises en compte par Google Bot quel serait l’intérêt pour le SEO ?
Merci beaucoup pour votre réponse.
Maud
Bonjour,
Oui Google search console ne montre que le HTML brut (avant exécution du JavaScript). Pour le rendu, il n’y a que l’image.
Lorsqu’on regarde avec la console (f12), on voit le code après exécution du JS. Comme le code est injecté en JS, on ne peut le voir qu’av c la console (ou d’autres outils).
En faisant info:(url), vous pourrez voir si l’url canonique est bien prise en compte.
(Après, il ne faut pas oublier non plus que la canonical n’est qu’une indication, pas une instruction).
Bonjour Madeline,
Merci beaucoup pour cet article, nous avons également utilisé GTM pour gérer les canoniques, mais lorsqu’on regarde le code de la page dans la Console de Google (explorer comme Google), la balise n’apparaît pas. Elle apparaît uniquement lorsqu’on utilise la console du navigateur (F12). Par conséquent, nous nous demandons si les balises générées avec GTM sont bien pris en compte par Google Bot ou pas. Si elles ne sont pas prises en compte par Google Bot quel serait l’intérêt pour le SEO ?
Merci beaucoup pour votre réponse.
Maud
Bonjour Madeline,
Excellent article (et conférence !) qui montre les possibilités offertes par Google Tag Manager !
Google semble cependant avoir récemment confirmé (11 mai 2018) que pour les balises rel canonicals, c’est le HTML brut (avant rendu javascript) qui est pris en compte.
(Sources : https://www.seroundtable.com/google-rel-canonicals-initial-fetch-25720.html ; https://twitter.com/JohnMu/status/994713207913639939)
avant, ca fonctionnait.
Je n’ai pas testé si le comportement avait changé depuis les annonces ou si c’est pour ne pas inciter les gens à le faire.
Apparemment, ca fonctionne encore 🙂