Optimiser son SEO
avec Google Tag Manager
Que du web 2017 – Madeline Pinthon
Qui suis-je ?
Madeline Pinthon
Consultante SEO chez iProspect
Formation
2005 - 2010 / Audencia Nantes / Diplôme Grande Ecole
2009 / Udem (Universidad de Monterrey, Mexique)
6 ans d’expérience
2015 à ce jour : consultante SEO chez iProspect
2012-2015 : responsable seo technique chez MB Line
2011-2012 : chef de projet SEO chez MB Line (Agriaffaires)
Vous pouvez me retrouver sur :
www.canyouseome.com
https://www.iprospect.com/fr/fr/le-blog/
http://twitter.com/razbithume
Quelques mots sur iProspect
Présentation de
Google Tag
Manager
Plusieurs tags par page
Universal Analytics
Adsense
<head>
<body>
</head>
</body>
Universal Analytics
Conversion Adwords
Adsense
<head>
<body>
</head>
</body>
Page d’accueil Page Merci
Page d’accueil Page Merci
Un tag sur toutes les pages
GoogleTag Manager
<head>
<body>
</head>
</body>
<head>
<body>
</head>
</body>
GoogleTag Manager
Dans votre container
Universal Analytics
Conversion Adwords
Adsense
Les 3 briques de Google Tag Manager
• Balises (tags) : un code (html, script) qui permet d’envoyer des données à un tiers
• Déclencheurs (triggers, ex règles) : règle, ou condition, indiquant si une balise doit se
déclencher
• Variables (variables, ex macro) : un élément, une valeur
Le DataLayer (ou couche de données) : un objet JavaScript permettant d’envoyer des données dans
Google Tag Manager (une passerelle entre le serveur et l’affichage).
Focus sur les balises
Il existe tout un ensemble de balises pré-configurées :
Et il existe la balise HTML personnalisé.
Focus sur les déclencheurs
Pré configurés… ou à personnaliser.
Focus sur les variables
Pré configurées… ou à personnaliser
Disclaimer
On ne parlera pas de web analytics…
place au SEO.
Petit rappel :
Google et le JS
Octobre 2015
GTMV2
LANCEMENT DE NOUVEAUX OUTILS
Mai 2014
“we decided to try to
understand pages by executing
JavaScript.”
UNDERSTANDINGWEB
PAGES BETTER
Mars 2014
Le JSON peut alimenter le
knowledge graph
WEBMASTER
Avril 2014
Question : how doesGoogle
handle content loaded via
Javascript ?
VIDEO DE MATT CUTTS
Janvier 2015
La nouvelle version comprend le
JSON-LD
NOUVEL OUTIL DETEST DES
RICH SNIPPETS
https://www.iprospect.com/fr/fr/le-blog/indexation-javascript/
En résumé…
Le DOM fait foi
(sauf s’il est vraiment long à charger)
En résumé…
Si Google lit le JavaScript…
Si Google Tag Manager permet de
manipuler le DOM….
Google Tag Manager devient votre ami
en SEO !
Implémenter du
SEO avec Tag
Manager
Disclaimer 1
Plusieurs solutions sont possibles.
Disclaimer 2
Ce n’est pas parce que ça marche qu’il faut le
faire.
Ce n’est pas la méthode recommandée pour
mettre en place les recommandations SEO.
Mais ca peut etre pratique pour tester…
Comment modifier les
balises title ?
Comment modifier ses balises title ?
Les éléments à créer obligatoirement :
- Une variable JavaScript Variable (SEO – JSv – title)
- Une variable : lookup table (SEO – lookup – New title)
- Un tag custom html (SEO – HTML – Rewrite Title)
Les éléments à utiliser :
- Le déclencheur toutes les pages
- La variable {{Page URL}}
Réécriture des titles : JavaScript Variable
Nous allons récupérer la balise title à l’aide d’une variable en JavaScript
Réécriture des titles : lookup table
Cette variable permet d’associer les urls et leur nouveau titre
URL 1
URL 2
URL 3
Nouveau titre 1
Nouveau titre 2
Nouveau titre 3
Si l’URL n’est pas dans le
tableau, par défaut, on
utilisera le title actuel
Réécriture des titles
Le tips de lunametrics pour uploader un tableau rapidement :
https://docs.google.com/spreadsheets/d/1-
iZ9GxVgAUoaEDl2wlBDrGG0c9NIKUAKjrte_msI2H0/edit#gid=0
Réécriture des titles : le tag
Enfin, on crée une balise qui contient le script permettant de réécrire les title !
Réécriture des title : le test
http://www.canyouseome.com/gtm-reecriture-title/
Comment modifier les
meta descriptions ?
Comment modifier des meta description ?
Exactement la même recette mais un peu plus complexe.
Les éléments à créer :
- Une variable Custom JavaScript (SEO – cJS – metadesc)
- Une variable : lookup table (SEO – lookup – New metadesc)
- Un tag custom html (SEO – HTML – Rewrite meta description)
Les éléments à utiliser :
- Le déclencheur toutes les pages
- La variable {{Page URL}}
Récupérer la meta description
Type de variable : javascript personnalisé
Réécriture des meta description : lookup table
Cette variable permet d’associer les urls et leur nouvelle meta description.
URL 1
URL 2
URL 3
Nouvelle meta descrition 1
Nouvelle meta descrition 2
Nouvelle meta descrition 3
Si l’URL n’est pas dans le
tableau, par défaut, on utilisera
la meta description actuelle
Réécriture des meta description : le tag
A déclencher sur toutes les pages
On teste !
Ajouter une meta description
Comment ajouter une
balise canonical ?
Car pour la modifier, c’est le même principe qu’avant
Comment ajouter des canonical ?
Les éléments à créer :
- Une variable Custom JavaScript (SEO – cJS – canonical)
- Une variables URL : Page protocol
- Une variable constante : canonical sans paramètres
- Un tag custom html (SEO – HTML – add canonical)
- Un déclencheur : s’il n’y a pas de balise canonical
Les éléments optionnels :
- Une variable : lookup table (SEO – lookup – New canonical)
Les déjà existantes :
- Variable URL : page hostname
- Variable URL : page path
Identifier la canonical – custom JavaScript
Type de variable : javascript personnalisé
Définir les urls canoniques
S’il suffit juste de créer une règle générique (exemple : retirer tous les paramètres d’urls), on peut
créer des variables pour reconstruire les urls.
Page protocol
Reformer l’URL canonique (sans paramètre)
Rappel sur la structure d’une url :
http://www.monsite.com/chemin?cle=valeur#fragment
http://www.canyouseome.com/structures-durls-urls-relatifs-et-urls-absolus/
Il aurait été possible de forcer les www, ou de forcer leur suppression, de forcer le https, etc.
Canonical sans parametre
Créer des exceptions ?
S’il y a besoin de faire des exceptions, il est possible de créer un lookup table, en mettant l’url de la
page et l’url canonique spécifique.
URL 1
URL 2
URL 3
Nouvelle url canonique
Nouvelle url canonique
Nouvelle url canonique
{{Canonical sans parametre}}
Le tag pour ajouter la canonical
Si pas d’exception, il faut mettre
directement la variable : {{canonical sans
parametre }}
Le déclencheur : l’absence de canonical
Si la balise canonical n’est pas définie, alors on ajoute une canonical.
Comment ajouter des
données structurées ?
Ajouter des données structurées
Il faut :
- une seule balise html personnalisée
On copie/colle le JSON-LD dedans.
On déclenche sur une page.
Tag des données structurées
On teste :
Ajouter dynamiquement des données
structurées
Il est plus simple d’utiliser un dataLayer pour récupérer rapidement les données.
Il faudra donc :
- Créer autant de variables que d’informations remontées dans le dataLayer
- Recréer la data au bon format
- Créer tag html personnalisé
Des données structurées dynamiques
Utiliser le dataLayer
https://fr.wordpress.org/plugins/duracelltomi-google-tag-manager/
Créer les variables DataLayer
Créer toutes les variables de couche de
données
Créer la date de publication au bon format
Une variable constante, concatenant les éléments année, mois, jour
Créer le tag pour ajouter les données
Le tag contient les variables pour actualiser automatiquement les données !
Déclencher pour les articles
On teste
On teste un autre article
Les autres
possibilités
Que peut-on faire d’autre avec GTM ?
On peut :
- Ajouter des balises (meta robots,…)
- Ajouter du contenu
- Faire du cloaking
- ….
Sky technique is the limit
Des questions ?
Merci !
Madeline Pinthon
Madeline.pinthon@iprospect.com
Avril 2017

Optimiser son SEO avec Google Tag Manager

  • 1.
    Optimiser son SEO avecGoogle Tag Manager Que du web 2017 – Madeline Pinthon
  • 2.
    Qui suis-je ? MadelinePinthon Consultante SEO chez iProspect Formation 2005 - 2010 / Audencia Nantes / Diplôme Grande Ecole 2009 / Udem (Universidad de Monterrey, Mexique) 6 ans d’expérience 2015 à ce jour : consultante SEO chez iProspect 2012-2015 : responsable seo technique chez MB Line 2011-2012 : chef de projet SEO chez MB Line (Agriaffaires) Vous pouvez me retrouver sur : www.canyouseome.com https://www.iprospect.com/fr/fr/le-blog/ http://twitter.com/razbithume
  • 3.
  • 4.
  • 5.
    Plusieurs tags parpage Universal Analytics Adsense <head> <body> </head> </body> Universal Analytics Conversion Adwords Adsense <head> <body> </head> </body> Page d’accueil Page Merci
  • 6.
    Page d’accueil PageMerci Un tag sur toutes les pages GoogleTag Manager <head> <body> </head> </body> <head> <body> </head> </body> GoogleTag Manager
  • 7.
    Dans votre container UniversalAnalytics Conversion Adwords Adsense
  • 8.
    Les 3 briquesde Google Tag Manager • Balises (tags) : un code (html, script) qui permet d’envoyer des données à un tiers • Déclencheurs (triggers, ex règles) : règle, ou condition, indiquant si une balise doit se déclencher • Variables (variables, ex macro) : un élément, une valeur Le DataLayer (ou couche de données) : un objet JavaScript permettant d’envoyer des données dans Google Tag Manager (une passerelle entre le serveur et l’affichage).
  • 9.
    Focus sur lesbalises Il existe tout un ensemble de balises pré-configurées : Et il existe la balise HTML personnalisé.
  • 10.
    Focus sur lesdéclencheurs Pré configurés… ou à personnaliser.
  • 11.
    Focus sur lesvariables Pré configurées… ou à personnaliser
  • 12.
    Disclaimer On ne parlerapas de web analytics… place au SEO.
  • 13.
  • 14.
    Octobre 2015 GTMV2 LANCEMENT DENOUVEAUX OUTILS Mai 2014 “we decided to try to understand pages by executing JavaScript.” UNDERSTANDINGWEB PAGES BETTER Mars 2014 Le JSON peut alimenter le knowledge graph WEBMASTER Avril 2014 Question : how doesGoogle handle content loaded via Javascript ? VIDEO DE MATT CUTTS Janvier 2015 La nouvelle version comprend le JSON-LD NOUVEL OUTIL DETEST DES RICH SNIPPETS https://www.iprospect.com/fr/fr/le-blog/indexation-javascript/
  • 15.
    En résumé… Le DOMfait foi (sauf s’il est vraiment long à charger)
  • 16.
    En résumé… Si Googlelit le JavaScript… Si Google Tag Manager permet de manipuler le DOM…. Google Tag Manager devient votre ami en SEO !
  • 17.
  • 18.
  • 19.
    Disclaimer 2 Ce n’estpas parce que ça marche qu’il faut le faire. Ce n’est pas la méthode recommandée pour mettre en place les recommandations SEO. Mais ca peut etre pratique pour tester…
  • 20.
  • 21.
    Comment modifier sesbalises title ? Les éléments à créer obligatoirement : - Une variable JavaScript Variable (SEO – JSv – title) - Une variable : lookup table (SEO – lookup – New title) - Un tag custom html (SEO – HTML – Rewrite Title) Les éléments à utiliser : - Le déclencheur toutes les pages - La variable {{Page URL}}
  • 22.
    Réécriture des titles: JavaScript Variable Nous allons récupérer la balise title à l’aide d’une variable en JavaScript
  • 23.
    Réécriture des titles: lookup table Cette variable permet d’associer les urls et leur nouveau titre URL 1 URL 2 URL 3 Nouveau titre 1 Nouveau titre 2 Nouveau titre 3 Si l’URL n’est pas dans le tableau, par défaut, on utilisera le title actuel
  • 24.
    Réécriture des titles Letips de lunametrics pour uploader un tableau rapidement : https://docs.google.com/spreadsheets/d/1- iZ9GxVgAUoaEDl2wlBDrGG0c9NIKUAKjrte_msI2H0/edit#gid=0
  • 25.
    Réécriture des titles: le tag Enfin, on crée une balise qui contient le script permettant de réécrire les title !
  • 26.
    Réécriture des title: le test http://www.canyouseome.com/gtm-reecriture-title/
  • 27.
  • 28.
    Comment modifier desmeta description ? Exactement la même recette mais un peu plus complexe. Les éléments à créer : - Une variable Custom JavaScript (SEO – cJS – metadesc) - Une variable : lookup table (SEO – lookup – New metadesc) - Un tag custom html (SEO – HTML – Rewrite meta description) Les éléments à utiliser : - Le déclencheur toutes les pages - La variable {{Page URL}}
  • 29.
    Récupérer la metadescription Type de variable : javascript personnalisé
  • 30.
    Réécriture des metadescription : lookup table Cette variable permet d’associer les urls et leur nouvelle meta description. URL 1 URL 2 URL 3 Nouvelle meta descrition 1 Nouvelle meta descrition 2 Nouvelle meta descrition 3 Si l’URL n’est pas dans le tableau, par défaut, on utilisera la meta description actuelle
  • 31.
    Réécriture des metadescription : le tag A déclencher sur toutes les pages
  • 32.
  • 33.
    Ajouter une metadescription
  • 34.
    Comment ajouter une balisecanonical ? Car pour la modifier, c’est le même principe qu’avant
  • 35.
    Comment ajouter descanonical ? Les éléments à créer : - Une variable Custom JavaScript (SEO – cJS – canonical) - Une variables URL : Page protocol - Une variable constante : canonical sans paramètres - Un tag custom html (SEO – HTML – add canonical) - Un déclencheur : s’il n’y a pas de balise canonical Les éléments optionnels : - Une variable : lookup table (SEO – lookup – New canonical) Les déjà existantes : - Variable URL : page hostname - Variable URL : page path
  • 36.
    Identifier la canonical– custom JavaScript Type de variable : javascript personnalisé
  • 37.
    Définir les urlscanoniques S’il suffit juste de créer une règle générique (exemple : retirer tous les paramètres d’urls), on peut créer des variables pour reconstruire les urls. Page protocol
  • 38.
    Reformer l’URL canonique(sans paramètre) Rappel sur la structure d’une url : http://www.monsite.com/chemin?cle=valeur#fragment http://www.canyouseome.com/structures-durls-urls-relatifs-et-urls-absolus/ Il aurait été possible de forcer les www, ou de forcer leur suppression, de forcer le https, etc. Canonical sans parametre
  • 39.
    Créer des exceptions? S’il y a besoin de faire des exceptions, il est possible de créer un lookup table, en mettant l’url de la page et l’url canonique spécifique. URL 1 URL 2 URL 3 Nouvelle url canonique Nouvelle url canonique Nouvelle url canonique {{Canonical sans parametre}}
  • 40.
    Le tag pourajouter la canonical Si pas d’exception, il faut mettre directement la variable : {{canonical sans parametre }}
  • 41.
    Le déclencheur :l’absence de canonical Si la balise canonical n’est pas définie, alors on ajoute une canonical.
  • 42.
  • 43.
    Ajouter des donnéesstructurées Il faut : - une seule balise html personnalisée On copie/colle le JSON-LD dedans. On déclenche sur une page.
  • 44.
    Tag des donnéesstructurées
  • 45.
  • 46.
    Ajouter dynamiquement desdonnées structurées Il est plus simple d’utiliser un dataLayer pour récupérer rapidement les données. Il faudra donc : - Créer autant de variables que d’informations remontées dans le dataLayer - Recréer la data au bon format - Créer tag html personnalisé
  • 47.
    Des données structuréesdynamiques Utiliser le dataLayer https://fr.wordpress.org/plugins/duracelltomi-google-tag-manager/
  • 48.
  • 49.
    Créer toutes lesvariables de couche de données
  • 50.
    Créer la datede publication au bon format Une variable constante, concatenant les éléments année, mois, jour
  • 51.
    Créer le tagpour ajouter les données Le tag contient les variables pour actualiser automatiquement les données !
  • 52.
  • 53.
  • 54.
    On teste unautre article
  • 55.
  • 56.
    Que peut-on faired’autre avec GTM ? On peut : - Ajouter des balises (meta robots,…) - Ajouter du contenu - Faire du cloaking - …. Sky technique is the limit
  • 57.
  • 58.