L’extension pour navigateurs Web developer, un outil simple et indispensable pour réaliser des diagnostics SEO rapides des pages web.

Pour un consultant SEO ou pour le propriétaire d’un site internet, les utilisations de l’extension Web Developer sont nombreuses : contrôler la structure des titres Hn d’une page, vérifier les attributs Alt des images et bien plus encore ! Pour benchmarker un site web concurrent bien référencé ou encore obtenir une idée rapide mais fiable des critères de référencement “in page”, cette petite – mais costaude – extension gratuite est irremplaçable. Explications.

Disponible pour les navigateurs chrome Firefox et Opera, l’extension Web Developer réalisée par Chris Pederick se présente sous la forme d’un bouton, en forme de roue dentée, disponible sur la barre d’outil de votre navigateur. Au départ développée pour… les développeurs web comme son nom l’indique, l’extension est aussi au service des web designers. L’intérêt pour nous est qu’elle peut être détournée très efficacement pour des usages webmarketing et notamment SEO. 

Voyons cela en détail !

Un menu à onglets très accessible avec 11 catégories de fonctions.

Au clic sur le petit bouton crénelé, une fenêtre s’ouvre au niveau de la toolbar et propose un menu complet de services, très pratique parce qu’il ne cache pas le contenu de la page et qu’il est disposé en 11 onglets. Chaque onglet présente de 4 à 24 fonctions cliquables classées en colonnes. Simple et efficace.

  • Désactiver
  • Cookie
  • CSS
  • Formulaires
  • Images
  • Informations
  • Miscellanées
  • Outline
  • Redimensionner
  • Outils
  • Options

On peut s’arrêter tout de suite sur les deux onglets les plus importants pour le SEO, les onglets images et Informations.

    Onglet Images.

    Onglet très pratique pour l’optimisation SEO de la page et des images à destination de Google images.

    D’un clic, on apprécie l’affichage de l’optimisation de toutes les images de la page (“Informations sur les images”); sur une liste image par image, apparaissent dans un tableau :

    • la source des fichiers (path) avec leur noms,
    • les noms des fichiers, les attributs
    • les dimensions (hauteur, largeur),
    • l’attribut alt.

    Une autre fonction “Afficher les attributs Alt” surligne très visiblement les tags et permet de passer en revue toutes les images et leurs tags pris en compte par les moteurs de recherches pour le référencement naturel.

    Pour se faire une idée rapide et exacte du travail de référencement, réalisé ou à faire, cet ensemble de fonctions “image” est très utile.

    Onglet Informations

    Il délivre des enseignements sur la structure de la page, avec notamment des informations sur la structure HTML de la page, les conteneurs Div, etc.

    En termes de SEO, l’apport de cet onglet est très intéressant car il permet de mettre en exergue :

    • tous les liens hypertextes, ainsi que sur les ancres de liens dans la page, ce qui offre un coup d’oeil exhaustif sur le netlinking interne.
    • tous les titres “title” présents dans les images.
    • et surtout la structure de la hiérarchie des titres H1 – H6 de la page (quelle que soit la typographie, bien sûr). Ceci est très instructif et immédiatement opérationnel quand on sait qu’à la lecture de la structure Hn on doit comprendre de quoi traite la page, ce qui permet d’optimiser sa titraille SEO. Sans compter que pour un benchmark de la concurrence, les mots-clés des titres utilisés apparaissent en un coup d’oeil : on peut balayer l’analyse du rédactionnel sémantique sans faire appel à des logiciels.

    Onglet Désactiver.

    Désactive certains scripts et fonctions actives sur la page, comme le javascript, les popups, notifications, plug-in, etc. À chaque désactivation, une information non invasive apparaît, qui confirme la désactivation. Permet de tester vos scripts (n’oublions pas son nom, web developer).

    Onglet Cookie.  

    Les informations sur tous les cookies sont complètes. Une liste les cookies sur la page et permet de les désactiver, et de les rétablir ensuite. On peut aussi aller plus loin et supprimer les sessions, les chemins (paths) et les domaines des cookies. Mais aussi d’en ajouter de nouveaux !

    Onglet CSS.

    Comme avec les outils de développement proposés par les navigateurs, avec la commande “Edit CSS” l’écran est splité et on peut désactiver les scripts CSS, intervenir dans les fichiers pour changer en direct certains paramètres de design et de présentation. D’autres commandes présentent les fichiers CSS, coupent les liens avec les feuilles de style, ou encore désactivent tous les styles.

    Onglet Formulaires.

    Ici aussi, l’extension offre toutes les informations sur les formulaires (identifiants, noms, types, …). Les fonctions sont nombreuses et permettent par exemple de cocher en un clic tous les checkboxes, les boutons radio, de nettoyer les champs de leur contenu texte ou au contraire de les remplir (exemple : example@example.com dans le champ e-mail, mais on pourra aussi choisir, dans les options configurables, une adresse email personnalisée ), de convertir un champ GETs en POSTs et inversement, etc.

    Onglet Miscellanées

    Comme son nom l’indique, c’est un onglet “fourre tout” qui permet de nettoyer le cache du navigateur et l’historique (mieux vaut le faire sur un navigateur de test…) et parmi les fonctions, un petit gadget bien sympa : un color picker qui donne la couleur hexadécimale lors du survol du pointeur en forme de croix, pour la copier et s’en servir.

    Onglet Outline

    Donne les principales propriétés outline des CSS (Blocks, positions fixes, float, frames …) 

    Onglet Redimensionner

    Informe sur la dimension de l’écran, offre la possibilité de le redimensionner, affiche les layouts responsive (les dispositions de la mise en page en format smartphone, tablette, desktop, …).

    Onglet Outils

    Affiche une série de liens vers les sites de validation de l’accessibilité, du HTML, CSS, …

    Onglet Options

    Toutes les options de configuration de l’extension (couleurs, icônes, aide, …)

    Conclusion sur l’extension Web Developer.

    Extension très intelligente parce que optimisée, c’est à dire à la fois efficiente et très simple d’utilisation, bien qu’en anglais exclusivement à cette date, mais c’est sans conséquence si on se focalise sur quelques fonctions.

    Je m’en sers tous les jours pour les fonctions SEO des images et de la structure de page. Les réponses sont immédiates, ce qui est agréable, et pour le SEO, l’extension Web Developer permet de se faire une idée assez juste de l’effort SEO consenti sur une page. Bien sûr il n’est pas question d’en tirer des conclusions hâtives, car un bon positionnement sur les moteurs de recherches dépend de très nombreux critères, et pas seulement des critères “in page”.

    Par ailleurs, en tant que content manager, j’ai à intégrer des contenus web et parfois à livrer des design qui respectent des chartes graphiques de mes clients. Pour le webdesign, Web Developer est une extension à tout faire. Pour les non designers, le plus est que l’extension apporte une culture sur la construction de la page (HTML et CSS au moins) et donne à voir et à comprendre son fonctionnement.

    En fonction de ses préférences et de ses objectifs professionnels, on utilisera certaines fonctions plus que d’autres, mais pour un consultant SEO ou un webmarketeur, les fonctions Images et Informations cette extension me sont devenues indispensables.