GTM tips #3 – Javascript SEO friendly avec Google Tag Manager : le cas « Résultats du Bac »

Ce n’est pas nouveau que GoogleBot s’est pris d’affection pour le Javascript. Néanmoins dans notre quotidien on sous-estime encore trop souvent l’impact que cela peut avoir en pratique. Pour les résultats du baccalauréat, digiSchool produit un site entièrement statique, de plusieurs centaines de milliers de pages, hébergées sur Amazon S3… L’occasion de faire quelques tests d’inclusion JS, le but étant d’avoir un squelette HTML le plus basique possible (génération automatique), tout en restant performant en SEO.

bac

1. Inclusion du contenu en JavaScript

Un « clic doit/afficher la source » sur les pages du site résultats du bac suffira à vous convaincre qu’elles sont pauvres en contenu. La plupart d’entre elles ne contiennent que l’arborescence nécessaire à ce que la totalité du site soit crawlé. Le texte présent sur la page /bac/ est en fait appelé en javascript depuis un autre fichier HTML. Cela ne gène aucunement Google, qui en référence toutes les mises à jour de contenu (ex : http://www.google.fr/search?q= »Heures+différentes+selon+les+académies »).

Sceptiques initialement vis-à-vis de cette nouvelle manière de procéder (encore inimaginable il y a quelques mois), il faut bien avouer que cela change considérablement la donne pour le SEO. Des outils comme prismic.io peuvent voir le jour, permettant d’externaliser à 100% de le backoffice d’un site… Jusqu’à la gestion des balises Meta.

Voici deux exemples pour vous en convaincre :

2. Inclusion du contenu via Google Tag Manager

De la même manière que Google prend en compte le texte ajouté dynamiquement en Javascript via un fichier tierce, l’ajout de contenu via Google Tag Manager ne pose aucun problème. Ainsi, bien que cela ne présente pas d’intérêt réel, GTM pourrait presque servir de backoffice à un petit site statique (idée geek). :)

Exemple : sur la page de l’académie de Saint-Pierre-et-Miquelon, la balise H3 est changée dynamiquement via GTM. Le moteur de recherche prend bien en compte cette nouvelle balise comme si de rien n’était.

Pour se faire, on active la balise HTML personnalisée suivante uniquement sur la page visée :

Capture2

3. Modification des meta via Google Tag Manager

L’ensemble des balises meta (title, description, etc) peuvent aussi être modifiées en Javascript, et cela ne vous surprendra plus : Google les prend en compte aussi. :)

Imaginez-vous malheureux responsable SEO d’une grande entreprise, ouvrant des tickets pour faire modifier les balises title de pages hébergées on ne sait où. Au lieu d’attendre des mois, vous ouvrez Google Tag Manager précédemment déployé, et « pouf » vous remplacez l’immondice par la phrase de votre choix. Merveilleux non ? Alors certes, GTM n’est pas vraiment calibré pour ça, mais un outil dédié arrivera immanquablement !

Exemple : la meta title de la page Saint-Pierre-et-Miquelon a subit un petit lifting en passant de « Résultats BAC 2015 Académie de ST PIERRE ET MIQUELON » à « Saint-Pierre-et-Miquelon : Résultats du bac 2015 » via une ligne de JS insérée via Google Tag Manager (document.title= » »). Sans surprise, au bout de quelques jours, les SERP nous livrent la version modifiée.

Bref, une petite révolution s’amorce pour les CMS en SaaS, et les nouveaux outils comme Prismic.io, Osmek.com, Siteleaf.com ne vont plus tarder à se multiplier !

3 Responses

  1. Ce rédacteur est bien inspiré ! j’aime ses écrits

  2. Bonjour et merci de ce partage d’expérience qui m’a incité à pousser plus loin que la première intuition. Je n’ai pas eu le temps de fournir quelques exemples de codes sur le très modeste http://www.extraits-enrichis.fr, mais je m’en occuperai dans la semaine pour ceux que ça intéresse. Bonne journée

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *