Aller au contenu

Ce bookmarklet va te permettre de récupérer les balises meta de n'importe quelle page en un clic

Antoine Brisset
Antoine Brisset
Temps de lecture : 3 min
Ce bookmarklet va te permettre de récupérer les balises meta de n'importe quelle page en un clic
Photo by Markus Winkler / Unsplash

Aujourd'hui, je vais te partager un bookmarklet que j'utilise énormément au quotidien.

C'est quoi un bookmarklet ?

Un bookmarklet est un petit bout de code JavaScript qui peut être glissé dans les favoris de ton navigateur et qui te permet d'ajouter des fonctions aux pages web que tu visites.

Quand on fait du SEO et qu'on passe littéralement sa vie à sauter d'onglet en onglet, les avantages des bookmarklets sont nombreux :

  • ils sont légers : à l'inverse de certains plugins, ils ne vont pas ralentir ton navigateur, ni fausser les résultats de ton analyse Lightouse, car ils ne s'activent qu'à la demande
  • ils sont disponibles en un clic : il suffit de les glisser dans la barre des favoris pour les avoir toujours sous la main
  • ils sont entièrement personnalisables : la seule limite est ton imagination (et ton degré d'aisance avec Javascript)

Pourquoi ce bookmarklet ?

Revenons-en au sujet du jour : l'extraction des balises meta d'une page à l'aide d'un bookmarklet.

Tu te dis peut-être qu'on peut faire ce travail de plein d'autres façons.

C'est vrai.

Alors pourquoi ai-je voulu créer un bookmarklet ?

Pour les 3 raisons suivantes :

  1. je perdais trop de temps à utiliser la console Chrome pour copier/coller les balises title et meta description
  2. je voulais avoir une vue d'ensemble des optimisations SEO de base d'une page sans quitter mon navigateur
  3. j'avais besoin de pouvoir exporter l'ensemble des données récupérées en un clic, afin de les utiliser dans un autre environnement de travail ou de les envoyer facilement par mail

Comment il marche ce bookmarklet ?

Le code se présente ainsi :

var meta={},_t = document.title;var title = (_t==null || _t==undefined) ? " " : _t;meta.Title = _t;var _d = document.querySelector('meta[name="description"]');var description = (_d==null || _d==undefined) ? " " : _d.content;meta.metaDescription = description;var _r = document.querySelector('meta[name="robots"]');var robots = (_r==null || _r==undefined) ? " " : _r.content;meta.metaRobots = robots;var _c = document.querySelector('link[rel="canonical"]'); var canonical = (_c==null || _c==undefined) ? " " : _c.href;meta.linkCanonical = canonical;var result='<h1>Meta tags for '+document.location+'</h1><ul>';for (var k in meta){result+=('<li class="tag">'+'<b>'+k+'</b>'+' : ' + meta[k] +'</li>')};result+=('</ul><button id="copy">Copier</button><script type="text/javascript">var tags = document.getElementsByClassName("tag");var text="";l = tags.length;for (i = 0; i < l; i++){text+=(tags[i].innerText+String.fromCharCode(13))};document.getElementById("copy").onclick = function() {navigator.clipboard.writeText(text)}</script>');var newWindow = window.open();newWindow.document.write(result);newWindow.document.close();

Voici le mode opératoire :

  • je récupère le contenu des balises title, meta description, meta robots et canonical de la page (si la balise n'est pas présente ou vide, j'affiche une chaîne vide)
  • je stocke le tout dans un array JavaScript
  • j'ouvre un nouvel onglet du navigateur et j'injecte dans la page les valeurs récupérées, dans une liste ul>li
  • j'ajoute un bouton qui me permet de copier les informations pour les réutiliser librement ailleurs
Démo du bookmarklet

Pour ajouter ce bookmarklet, glisse le lien ci-dessous dans ta barre de favoris. Tu peux aussi copier/coller le code donné plus haut dans un nouveau favori.

Edit du 22/03/2022

Petit cadeau pour les abonnés : voici une version améliorée du bookmarklet ↓


Articles Similaires

Membres Public

Éditer un post WordPress en un clic

Si tu te souviens bien, il y a quelques semaines, je t'avais partagé une astuce pour ouvrir l'admin de plusieurs posts WordPress simultanément. Aujourd'hui, je te montre comment faire pour te connecter en un clic à l'admin d'un post WordPress, mais cette fois-ci sans installer de plugin au préalable. Avec

Éditer un post WordPress en un clic
Membres Public

3 techniques pour ouvrir plusieurs URLs en même temps

Il y a quelques semaines, je t'ai partagé une technique pour ouvrir l'admin WordPress de plusieurs articles en même temps. Aujourd'hui, je vais aller un peu plus loin en te proposant 3 techniques pour ouvrir plusieurs URLs en un clic. Je ne sais pas pour toi, mais de mon côté

3 techniques pour ouvrir plusieurs URLs en même temps
Membres Public

3 techniques pour filtrer les données Search Console sans quitter la page

Avant d'entrer dans le vif du sujet, je tenais à te signaler la sortie de mon outil gratuit XPATH4SEO. C'est une base de données d'expressions XPath classées par catégorie : contenu, liens, microdonnées, balises meta, etc. L'objectif : te faire gagner du temps dans l'extraction de données SEO en n'ayant plus qu'à

3 techniques pour filtrer les données Search Console sans quitter la page