Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Optimiser son SEO avec Google Tag Manager

2 086 vues

Publié le

Découvrez comment utiliser Google Tag Manager pour votre référencement naturel.
Ce document a été réalisé par Madeline Pinthon, consultante SEO, chez iProspect et a été présente lors de l'événement Que Du Web 2017.

Publié dans : Marketing

Optimiser son SEO avec Google Tag Manager

  1. 1. Optimiser son SEO avec Google Tag Manager Que du web 2017 – Madeline Pinthon
  2. 2. 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
  3. 3. Quelques mots sur iProspect
  4. 4. Présentation de Google Tag Manager
  5. 5. 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
  6. 6. Page d’accueil Page Merci Un tag sur toutes les pages GoogleTag Manager <head> <body> </head> </body> <head> <body> </head> </body> GoogleTag Manager
  7. 7. Dans votre container Universal Analytics Conversion Adwords Adsense
  8. 8. 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).
  9. 9. Focus sur les balises Il existe tout un ensemble de balises pré-configurées : Et il existe la balise HTML personnalisé.
  10. 10. Focus sur les déclencheurs Pré configurés… ou à personnaliser.
  11. 11. Focus sur les variables Pré configurées… ou à personnaliser
  12. 12. Disclaimer On ne parlera pas de web analytics… place au SEO.
  13. 13. Petit rappel : Google et le JS
  14. 14. 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/
  15. 15. En résumé… Le DOM fait foi (sauf s’il est vraiment long à charger)
  16. 16. 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 !
  17. 17. Implémenter du SEO avec Tag Manager
  18. 18. Disclaimer 1 Plusieurs solutions sont possibles.
  19. 19. 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…
  20. 20. Comment modifier les balises title ?
  21. 21. 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}}
  22. 22. Réécriture des titles : JavaScript Variable Nous allons récupérer la balise title à l’aide d’une variable en JavaScript
  23. 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. 24. 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
  25. 25. Réécriture des titles : le tag Enfin, on crée une balise qui contient le script permettant de réécrire les title !
  26. 26. Réécriture des title : le test http://www.canyouseome.com/gtm-reecriture-title/
  27. 27. Comment modifier les meta descriptions ?
  28. 28. 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}}
  29. 29. Récupérer la meta description Type de variable : javascript personnalisé
  30. 30. 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
  31. 31. Réécriture des meta description : le tag A déclencher sur toutes les pages
  32. 32. On teste !
  33. 33. Ajouter une meta description
  34. 34. Comment ajouter une balise canonical ? Car pour la modifier, c’est le même principe qu’avant
  35. 35. 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
  36. 36. Identifier la canonical – custom JavaScript Type de variable : javascript personnalisé
  37. 37. 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
  38. 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. 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. 40. Le tag pour ajouter la canonical Si pas d’exception, il faut mettre directement la variable : {{canonical sans parametre }}
  41. 41. Le déclencheur : l’absence de canonical Si la balise canonical n’est pas définie, alors on ajoute une canonical.
  42. 42. Comment ajouter des données structurées ?
  43. 43. 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.
  44. 44. Tag des données structurées
  45. 45. On teste :
  46. 46. 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é
  47. 47. Des données structurées dynamiques Utiliser le dataLayer https://fr.wordpress.org/plugins/duracelltomi-google-tag-manager/
  48. 48. Créer les variables DataLayer
  49. 49. Créer toutes les variables de couche de données
  50. 50. Créer la date de publication au bon format Une variable constante, concatenant les éléments année, mois, jour
  51. 51. Créer le tag pour ajouter les données Le tag contient les variables pour actualiser automatiquement les données !
  52. 52. Déclencher pour les articles
  53. 53. On teste
  54. 54. On teste un autre article
  55. 55. Les autres possibilités
  56. 56. 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
  57. 57. Des questions ?
  58. 58. Merci ! Madeline Pinthon Madeline.pinthon@iprospect.com Avril 2017

×