7 façons d'utiliser l'outil « Inspecter l'élément » pour le référencement

Le Inspecter La fonctionnalité sur Chrome (également appelée « inspecter l'élément ») vous permet de vérifier sous le capot de n'importe quelle page ou site Web. Vous pouvez l'utiliser pour diagnostiquer des problèmes, tester des modifications sur votre site et même espionner vos concurrents.

Faites un clic droit sur n’importe quelle page et faites défiler jusqu’à Inspecter pour voir le code avec lequel le site est construit.

Vous verrez la page dans la fenêtre de gauche et différents onglets à droite avec tout le code du site. Vous pouvez développer et réduire des éléments pour parcourir le code de cette page.

Inspecter la fonctionnalité de l'élément

Du Éléments , vous pouvez voir à quoi ressemblerait la page si vous modifiiez, supprimiez ou ajoutiez des éléments. Vous pouvez également trouver des informations sur la façon dont un site Web est créé. Les onglets Console, Sources, Réseau et autres peuvent également faciliter des audits techniques plus avancés.

Il est utile de connaître les bases du HTML et du CSS, mais vous pouvez répondre à de nombreuses questions de base simplement à partir du Éléments onglet si vous savez quel type de code rechercher.

1. De quelle couleur est-ce ?

Trouvez le code hexadécimal unique pour n'importe quelle couleur sur le Web en utilisant Inspect.

  • Faites un clic droit sur l'élément que vous souhaitez voir.
  • Faites défiler vers le bas pour trouver l’échantillon de couleur et le code hexadécimal.
  • Cliquez sur l'échantillon pour jouer avec différentes couleurs pour cet élément.
Inspecter l'élément - trouver le code hexadécimal 1Inspecter l'élément - trouver le code hexadécimal 1
Inspecter l'élément - trouver le code hexadécimal 2Inspecter l'élément - trouver le code hexadécimal 2

Chaque couleur possède un code hexadécimal unique ou une combinaison de codes universels à 6 chiffres qui représente la couleur. Par exemple, le blanc pur est #FFFFFF, le noir pur est #000000 et le vert menthe est #98FF98.

Si vous ne voyez pas la couleur que vous recherchez, recherchez les paramètres de couleur des éléments parents susceptibles de remplacer les éléments enfants.

C'est pratique pour résoudre des questions telles que :

  • Quelles couleurs les utilisateurs préfèrent-ils ? Puis-je trouver une nouvelle couleur à essayer ?
  • Quelle couleur mon concurrent teste-t-il pour son appel à l'action ?
  • Les couleurs de mon site respectent-elles les directives de la marque ?
  • Cette combinaison de couleurs respecte-t-elle les directives d'utilisation ?

2. De quelle police s’agit-il ?

Les polices Serif sont à la mode en ce moment. Vous pouvez trouver de nouvelles polices sur n'importe quel site en cliquant avec le bouton droit sur l'élément et en recherchant le CSS de la police.

  • Cliquez avec le bouton droit sur la copie.
  • Dans l’onglet Styles en bas, recherchez la même balise.
  • Faites défiler jusqu'aux balises de police.
Inspecter l'élément - trouver le type de policeInspecter l'élément - trouver le type de police

Si vous voyez plusieurs polices répertoriées dans le code, ce sont des polices de sauvegarde. La première police est la police par défaut, qui apparaîtra si le navigateur de l'utilisateur a accès à cette police. Si cette police n'est pas disponible pour une raison quelconque, le navigateur reviendra à la deuxième police répertoriée et ainsi de suite dans la liste.

Vous pouvez également vérifier la taille de la police et la hauteur des lignes.

Inspecter l'élément - trouver la taille de la police et la hauteur de la ligneInspecter l'élément - trouver la taille de la police et la hauteur de la ligne

Le choix d’une bonne taille de police dépend de la police, de la hauteur des lignes et de l’audace. Une bonne règle de base est de viser un minimum de 14 pixels pour le corps du texte et de 20 pixels pour les polices d’en-tête.

  • H1 : 30-34 pixels
  • H2 : 28-30 pixels
  • H3 : 24-26 pixels
  • H4 : 20-22 pixels
  • Corps : 16-18 pixels

3. Ce changement de contenu sera-t-il intéressant ?

Utilisez Inspecter pour voir à quoi ressemblera un changement avant de le mettre en ligne. Ceci est particulièrement utile si vous devez prendre une capture d'écran pour obtenir l'approbation avant ou après la mise en ligne d'une modification de page ou si vous souhaitez d'abord vérifier à quoi ressemblera une modification sur ordinateur et mobile.

  • Inspectez l’élément que vous souhaitez modifier.
  • Double-cliquez sur la copie que vous souhaitez modifier.
  • Modifiez la copie.
  • Cliquez en dehors de l'élément.
  • Faites des ajustements jusqu'à ce que vous en soyez satisfait.
Inspecter l'élément - aperçu du changement de contenu 1Inspecter l'élément - aperçu du changement de contenu 1
Inspecter l'élément - aperçu du changement de contenu 2Inspecter l'élément - aperçu du changement de contenu 2

Si l'élément que vous modifiez contient plusieurs morceaux de code, comme un lien dans un paragraphe, vous pouvez cliquer avec le bouton droit sur la copie et choisir Modifier au format HTML pour modifier l'intégralité de la sélection.

Inspecter l'élément - aperçu du changement de contenu 3Inspecter l'élément - aperçu du changement de contenu 3
Inspecter l'élément - aperçu du changement de contenu 4Inspecter l'élément - aperçu du changement de contenu 4


4. De quelle image s’agit-il ?

Recherchez un lien d’image, une taille et un texte alternatif en cliquant avec le bouton droit pour inspecter n’importe quelle image.

Répondez aux questions techniques de base sur n’importe quelle image :

  • Mon image a-t-elle un bon texte alternatif ?
  • Cette image est-elle un doublon ?
  • La taille de l'image est-elle trop grande ?
  • La taille de l’image pourrait-elle avoir un impact sur la vitesse de la page ?
  • Où est la source originale de l’image ?
  • Quel type d’image mon concurrent utilise-t-il ?
Inspecter les éléments - Vérifier les imagesInspecter les éléments - Vérifier les images

Cela fonctionne pour tout type d’image, y compris les icônes et les images d’arrière-plan. Si vous ne voyez pas l'image souhaitée, recherchez des expressions dans le code telles que image, background, src, img, jpg, png ou carrousel.

Inspecter les éléments - Vérifier les images 1Inspecter les éléments - Vérifier les images 1
Inspecter les éléments - Vérifier les images 2Inspecter les éléments - Vérifier les images 2

Utilisez Inspecter pour vérifier si vos liens sont configurés comme vous le souhaitez sans cliquer sur aucun lien. Testez si les liens sont définis sur nofollow ou follow et s’ils s’ouvrent dans le même onglet ou dans un autre onglet. Ou utilisez Inspect pour trouver une chaîne de redirection ou 301.

Inspecter l'élément - trouver le lienInspecter l'élément - trouver le lien

Vous pouvez également confirmer si vous avez obtenu un nouveau lien back follow ou nofollow sur un autre site. C'est pratique si vous souhaitez simplement vérifier un lien au lieu d'effectuer une vérification dans un outil de backlink comme Ahrefs ou Semrush.

Si vous vérifiez souvent les liens, vous pouvez également utiliser des extensions de navigateur pour mettre automatiquement en évidence différents types de liens en fonction de leurs balises.

6. Quel morceau de code est cassé ?

Résolvez les problèmes liés aux éléments de votre site à l’aide d’Inspect. Une fois que vous avez déterminé quel morceau de code est à l’origine du problème, vous pouvez résoudre le problème.

Si vous devez travailler avec vos développeurs ou votre équipe technique pour résoudre le problème, il est plus facile de pouvoir mettre en évidence exactement ce dont vous avez besoin dans le code.

  • Cliquez avec le bouton droit n’importe où sur l’élément.
  • Dans le Éléments dans la barre latérale, survolez chaque élément HTML pour trouver celui que vous souhaitez.
  • Utilisez les flèches pour développer les sections afin d'afficher les éléments de code enfant.
  • L'élément auquel correspond le code sera mis en avant sur votre site dans la fenêtre de gauche. Continuez à survoler et à développer jusqu'à ce que vous le trouviez.
Inspecter l'élément - Vérification du codeInspecter l'élément - Vérification du code
Inspecter l'élément - Vérification du code 1Inspecter l'élément - Vérification du code 1

7. De quel genre de schéma s’agit-il ?

La plupart des sites vous permettent de vérifier le schéma de leur site en utilisant Validateur de schéma. Cependant, certains sites empêchent le robot Schema Validator d'utiliser directement l'option Récupérer l'URL.

Vous pouvez toujours vérifier le schéma du site de vos concurrents avec cet outil ou directement dans le code.

  • Accédez à la page que vous souhaitez vérifier.
  • Faites un clic droit n'importe où sur la page et cliquez Afficher la source de la page.
  • Sélectionnez tout le code de la page (Ctrl+A et Ctrl+C).
  • Aller à https://validator.schema.org/.
  • Cliquez sur Extrait de code.
  • Collez tout le code (Ctrl+V).
  • Cliquez sur Exécuter le test.
  • Vous verrez tous les éléments de schéma détectés pour cette page.
Validateur de schémaValidateur de schéma
Entités du validateur de schémaEntités du validateur de schéma

Si l'outil de validation semble incorrect ou signale un schéma défectueux, vous pouvez rechercher tout code de type schéma directement dans le balisage. Ceci est utile si vous essayez de dépanner les champs de schéma ou de découvrir pourquoi votre schéma n'apparaît pas dans le SERP.

  • Cliquez avec le bouton droit n’importe où sur la page.
  • Développez les sections dans la balise Elements jusqu'à ce que vous trouviez les balises schema.org. Le schéma est généralement contenu quelque part dans la balise .
  • S'il n'est pas organisé proprement, cliquez avec le bouton droit et modifiez-le au format HTML, puis copiez l'intégralité du bloc dans un programme Bloc-notes.
  • Si vous ne le voyez toujours pas, faites un clic droit sur la page pour Afficher la source de la pagepuis recherchez « schéma » dans le code de la page (Ctrl+F).
Inspecter l'élément - validation du schémaInspecter l'élément - validation du schéma

Les opinions exprimées dans cet article sont celles de l’auteur invité et ne sont pas nécessairement celles de Search Engine Land. Les auteurs du personnel sont répertoriés ici.

Newsletter

Rejoignez notre newsletter pour des astuces chaque semaine