Google a une fois de plus partagé son expertise avec les communautés SEO et marketing numérique en publiant un nouvel épisode de sa série de vidéos Lightning Talks sur YouTube. Dans la dernière vidéo, Google Developer Advocate Martin Splitt enseigne aux téléspectateurs comment utiliser Google Chrome DevTools pour effectuer les étapes de dépannage SEO de base. Les connaissances expertes de Splitt et les instructions faciles à suivre font de cette vidéo une recommandation facile pour toute personne ayant une expérience de développeur cherchant à optimiser le classement des moteurs de recherche de son site Web. Voici quelques façons d’utiliser Chrome DevTools pour résoudre les problèmes de référencement courants sur un site intermédiaire avant sa mise en ligne.
Utilisation du test adapté aux mobiles
L’utilisation du test adapté aux mobiles dans Google Search Console est un excellent point de départ. Lorsque vous testez l’URL de votre environnement de staging, il vous indique s’il manque des éléments dans le rendu HTML. Si tel est le cas, ne vous inquiétez pas; vous pouvez regarder de près ce qui se passe en ouvrant le site Web dans votre navigateur et en utilisant Google Chrome DevTools.
Utilisation de l’onglet Éléments dans DevTools
Capture d’écran de : YouTube.com/GoogleSearchCentral, février 2023. L’onglet Éléments de DevTools vous donnera une représentation HTML du modèle d’objet de document (DOM) de la page. Il s’agit d’un outil précieux pour rechercher du contenu sur la page et déterminer s’il est présent dans le DOM. Si le contenu est manquant dans le HTML rendu, il sera également manquant dans le DOM.
Utilisation de l’onglet Réseau
Capture d’écran de : YouTube.com/GoogleSearchCentral, février 2023. L’onglet Réseau de DevTools vous permet de voir ce qui se passe entre le serveur et votre navigateur. Lorsque vous rechargerez la page, vous pourrez voir chaque demande et réponse du serveur. Le diagramme en cascade montrera combien de temps tout prend et où le temps est passé. Vous pouvez également inspecter toutes les requêtes et les en-têtes de réponse, ce qui peut vous aider à rechercher des en-têtes spécifiques, tels que l’en-tête X-Robots. Cela peut aider à déterminer si le contenu manquant est passé du serveur au navigateur. Si le contenu n’apparaît qu’après avoir fait défiler la page, vous pouvez utiliser l’onglet Initiateur pour voir ce qui l’a demandé. Ces informations peuvent ensuite être utilisées pour résoudre le problème.
Définition des conditions du réseau
Capture d’écran de : YouTube.com/GoogleSearchCentral, février 2023. L’onglet Réseau de DevTools comporte d’autres fonctionnalités, telles que la désactivation du cache, la définition de la vitesse de transfert du réseau et la modification de l’agent utilisateur. Cependant, il est important de noter que la définition de l’agent utilisateur sur Googlebot peut ne pas donner les résultats escomptés. Googlebot respecte également le fichier robots.txt, que votre navigateur ignore, et certains sites peuvent effectuer des recherches IP pour voir si la demande provient d’un centre de données Google. En conclusion, les outils de développement du navigateur offrent une puissante suite d’outils de débogage pour le dépannage SEO. Vous pouvez utiliser l’onglet Éléments pour inspecter le DOM, l’onglet Réseau pour inspecter les demandes et les réponses du réseau et définir les conditions du réseau telles que la mise en cache et l’agent utilisateur. Vous pouvez rapidement diagnostiquer et résoudre divers problèmes de référencement en les combinant avec les outils de test de Google Search Console. Image en vedette : Capture d’écran de YouTube.com/GoogleSearchCentral, février 2023.
Source : Youtube