Comment utiliser Chrome DevTools pour vérifier vos recommandations SEO ?

par | 6 Sep 2022 | Guides SEO, SEO

Nous sommes tous passés par là. Vous, en tant que référenceur, avez une recommandation pour votre site mais vous avez besoin d’un développeur pour la mettre en œuvre.

Il s’agit d’un scénario très courant lorsque l’on travaille dans une agence et que l’on traite avec les clients en tant que consultant : nous effectuons rarement les changements nous-mêmes.

À ce stade, vous verrez avec un peu de chance vos recommandations être déployées par l’équipe de développement. Dans d’autres cas, vous devrez simplement attendre dans la file d’attente que ce soit votre tour ! Mais disons que vous faites partie des chanceux dont les recommandations sont déployées rapidement. Une fois que votre développeur dit qu’il a déployé vos recommandations, comment vérifiez-vous que cela a été fait correctement ?

En plus de demander une confirmation verbale que le travail a été effectué, vous pouvez prendre les choses en main et le vérifier vous-même !

La vérification des optimisations standards axées sur le SEO est généralement assez simple. Si le client met à jour le texte de la page, il suffit de regarder la page. S’il met à jour le titre ou la meta description de la page, vous pouvez utiliser l’un des nombreux outils disponibles en ligne qui vous montrent les informations de base de la page pour le SEO.

Mais que faire si vous n’avez pas accès à ces outils ? Ou bien les outils ne fonctionnent pas, ou encore le résultat qu’ils vous donnent ne semble pas correct ? Comment allez-vous vérifier l’état de la page en utilisant simplement un navigateur web ?

C’est ce que l’on va vous détailler dans cet article avec l’outil DevTools de Chrome (aussi appelé l’outil d’inspection).

 

Utiliser votre navigateur web pour vérifier les évolutions SEO

Presque tous les navigateurs web disposent d’une fonctionnalité intégrée qui vous permet d’examiner les entrailles d’une page web.

Dans Google Chrome, il s’agit de « Inspecter » (clique droit sur la page ou l’élément sélectionné, puis « Inspecter »). Cet outil révèle une autre fenêtre du navigateur qui affiche de nombreux éléments liés à la page web que vous consultez, mais le plus important pour nous, c’est qu’il affiche le DOM ou « Document Object Model ».

💡 Pour info : le DOM correspond à une représentation du document HTML d’une page web. En gros, c’est une API qui permet de manipuler les éléments de contenu d’une page ainsi que sa structure et ses styles CSS.

dom exemple

En utilisant cet outil et en visualisant le DOM, nous pouvons voir l’intégralité du HTML de la page, ce qui nous permet de voir ce qui se trouve réellement sur la page et de ne pas nous fier à des outils qui ne sont pas toujours précis à 100%.

Voyons comment visualiser le DOM de notre site agence90.fr

dom hp agence 90

Les étapes suivantes permettent d’afficher le DOM d’une page web :

  1. Ouvrez une page web, faites un clic droit quelque part sur la page et cliquez sur Inspecter.
  2. Une fenêtre s’ouvrira, révélant le DOM de la page, ainsi qu’un tas d’autres onglets qui vous permettront d’inspecter la page que vous visualisez.
  3. En utilisant cette fenêtre, vous pouvez avoir une meilleure idée de ce qu’un robot pourrait voir, en combinaison avec la fonction « viewsource : », vous pouvez obtenir une excellente idée de ce que Google voit.

Ok mais en quoi cela est-il utile ?

Nous avons récemment eu un problème où nous devions mettre à jour les métadonnées d’un site à grande échelle, mais nous n’avions aucun moyen de le faire automatiquement ou à la main. Il aurait fallu que les balises de plus d’un millier de pages soient codées en dur par une personne. C’était une perte de ressources importante pour le client et quelque chose qu’il voulait éviter.

Par conséquent, il a tenté de modifier les balises en utilisant JavaScript dans le navigateur de l’utilisateur, afin d’exploiter le code dont il disposait déjà. En pratique, cela signifie que la page charge le code HTML initial avec un titre, une description et une balise canonique en place, puis qu’un script JavaScript modifie les métadonnées de la page une fois celle-ci lancée.

Lors de l’inspection initiale de la page, en la visualisant dans un navigateur normal, le titre de la page semblait correct car le script JavaScript fonctionne si vite que les éléments nécessaires sont mis à jour très rapidement. Cependant, nous avons remarqué que les différents outils SEO par lesquels nous avons exécuté la page ont rapporté divers résultats, notamment qu’aucun titre de page n’est identifié.

Bien sûr, ce n’est pas idéal pour le référencement. Nous voulons que les métadonnées de la page soient correctes lorsque la page est livrée à l’utilisateur et lorsque les robots l’explorent, ce qui signifie généralement qu’il n’est pas nécessaire d’utiliser du JavaScript supplémentaire pour corriger les choses. Même une ou deux secondes entre le chargement de la page et la correction par JavaScript sont trop longues pour les robots qui explorent le site.

Ce problème n’était pas évident lors de l’inspection initiale. Il s’agit d’un problème assez rare, que vous ne comprendrez qu’après l’avoir rencontré pour la première fois. Les inspections visuelles de la page semblaient correctes, mais les outils ne nous donnaient pas de réponse cohérente. À ce stade, il était temps de ne pas se fier à des outils externes et de se plonger dans le code de la page.

Grâce à l’outil d’inspection, nous avons pu voir exactement ce qui se passait et à quel moment au cours du processus de chargement.

Ce niveau supplémentaire de compréhension nous a permis d’identifier un problème dans la façon dont nos recommandations étaient déployées, d’élaborer un plan et de donner un retour aux développeurs afin qu’ils puissent résoudre le problème. Si nous n’avions pas vérifié ces changements au-delà d’un simple contrôle visuel, nous n’aurions peut-être remarqué que les mauvaises métadonnées étaient explorées que bien plus tard.

 

Conseils pour bien utiliser l’outil d’inspection de Chrome pour le SEO

Voici quelques situations courants où vous pourriez vous plonger dans le code de la page via l’outil d’inspection :

Vérification des métadonnées

  • Ouvrez la page web en question, faites un clic droit sur une zone non cliquable de la page Web et cliquez sur Inspecter. Lorsque la fenêtre s’ouvre, cliquez sur l’onglet Éléments et vous verrez le code HTML de la page.
  • À partir de là, vous pouvez appuyer sur Ctrl + F pour faire apparaître une barre de recherche. Utilisez cette barre pour trouver les éléments méta que vous voulez vérifier.
  • Pour les titres de page, vous pouvez rechercher « <title ». Pour rechercher une description, recherchez « description », et ainsi de suite. Il se peut que vous deviez jouer un peu avec cela en fonction de la méthode d’écriture de code préférée du développeur.
  • Une fois que vous avez trouvé ce que vous cherchez, vérifiez que tout est bien correct.

💡 Vous pouvez inspecter tout élément visuel ou UX d’une page en cliquant avec le bouton droit de la souris sur cet élément et en cliquant sur Inspecter. Les outils de développement de Chrome réapparaîtront avec l’élément sur lequel vous avez cliqué avec le bouton droit de la souris mis en évidence dans le DOM.

dom ex redoute

 

Vérification de la présence de Google Analytics ou de Google Tag Manager

Comme pour les méta, cliquez sur une partie non cliquable de la page pour faire apparaître les dev tools de Chrome.

Faites Ctrl + F pour faire apparaître une barre de recherche et recherchez « analytics.js », « ua-« , « gtm » ou un autre extrait de code lié à votre Analytics qui pourrait se trouver sur la page.

 

En conclusion

Nous n’avons fait qu’effleurer la surface de ce que vous pouvez faire avec l’outil d’inspection la Chrome DevTools. À partir de là, vous pouvez explorer entièrement une page web jusqu’à un niveau très bas.

0 commentaires

Soumettre un commentaire

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

Catégories

Podcasts

A Propos

Nous sommes une agence de Marketing Digital experts SEO, SEA, Amazon et Social Media. Retrouvez au sein de notre notre blog toutes les dernières informations concernant l’univers du marketing digital et nos astuces pour mener votre propre stratégie de Référencement Naturel, et Publicité Amazon, sur Google et les Réseaux Sociaux.

Les incontournables

Obtenir un bon backlink en SEO

Histoire des réseaux sociaux

Comment trouver un sitemap ?

Qu’est-ce que le CPC ?

Stratégie Google Ads

Budget Facebook Ads

Balise titre SEO

Pourquoi mon site n’apparait pas sur Google ?

Audience Google Ads

Tout savoir sur le cache Google

TOP 10 des extensions WordPress pour la vitesse de votre site

Quand poster sur Instagram ?

Badge de protection Google

Tout connaître sur le contenu dupliqué

Qu’est-ce que le SEO ?

ACos Amazon

Choisir son consultant Google Ads

Amazon Brand Registry

Comment créer des campagnes Performance Max ?

5 façons d’optimiser votre temps de chargement

Tout savoir sur le balise canonique

Intention de recherche en SEO

Comment savoir si un compte Instagram a de faux followers ?

Quand publier sur Facebook ?

Amazon Explore

Les mots en gras sont-ils importants pour le SEO ?

Les liens sortants sont-ils importants en SEO ?

Qu’est-ce IndexNow ?

Guide des campagnes Google Ads

Quand publier sur LinkedIn ?

Les choses à surveiller avant d’ajouter un disallow au robots.txt

Comment fonctionne un moteur de recherche ?

Qu’est-ce que AMP ?

Définition du PageRank

Contenu caché et SEO

Les défis du SEO

Google Ads : clics vs. impressions

Que veut dire hashtag ?

Comment devenir un vendeur rentable sur Amazon ?

Qu’est-ce que Google Discover ?

Quand publier sur Twitter ?

Définition de l’E-E-A-T

Yandex n’est pas le moteur de recherche numéro 1 en Russie

Amazon Seller Central vs. Vendor Central

Conseils Google Performance Max

Amazon Vine

Créer une fiche d’établissement Google

Générateur de balises Schema

Expression exacte en Google Ads

Comment calculer un taux de conversion ?

Le negative SEO

Redirection 301 vs. 302

Tout savoir le nofollow

Comment obtenir le badge Instagram ?

Le nombre de mots est-il important en SEO ?

Comment connaître le nombre de pages d’un site ?

Les meilleurs outils SEO

Les facteurs de ranking de Yandex