17 bookmarklets utiles pour tester le référencement de votre site web

Par Charles Berthommé dans Référencement 28 avril 2017

17 bookmarklets utiles pour tester le référencement de votre site web

Méconnus de beaucoup, les bookmarklets vous permettent de gagner un temps non négligeable. Si comme moi vos utilisez une quantité importante d’outils en ligne dans le cadre de votre activité, vous allez gagner en productivité avec ce système tout simple.

C’est quoi un bookmarklet ?

C’est un morceau de code JavaScript qui, une fois exécuté par le navigateur (Firefox, Chrome…), va effectuer une action. Ils sont stockés en tant que favoris / marques pages et permettent par exemple de vérifier le contenu d’une page, ouvrir une autre page et lancer une requête…

Plus simplement et dans les exemples que je vais vous donner ci-dessous, il s’agit de raccourcis pour obtenir des informations plus rapidement sur le référencement de votre site Internet.

Les bookmarklets

Pour stocker ces raccourcis, il vous suffit de créer un favori dans votre navigateur préféré et d’y enregistrer la ligne de code que je vais vous fournir. Pour Chrome et Firefox, il faut effectuer un clic droit sur la barre de favoris puis “Ajouter une page” ou “Nouveau marque-page”.

Connaître les pages de mon site indexées par Google

javascript:(function(){%20window.open('https://www.google.fr/search?q=site%3A'+encodeURIComponent(location.host))})();

Afficher les pages de mon site indexées par Google ces 7 derniers jours

javascript:(function(){%20window.open('https://www.google.fr/search?q=site%3A'+encodeURIComponent(location.host)+'&tbs=qdr:d7')})();

Connaître les pages de mon site indexées par Bing

javascript:void(window.open(%27http://www.bing.com/search?q=site:%27+document.domain.replace(%27www.%27,%27%27),%27_blank%27));

Connaître les pages de mon site indexées par Qwant

javascript:(function(){%20window.open('https://www.qwant.com?q=site%3A'+encodeURIComponent(location.host))})();

Ouvrir mon site web dans l’outil Wayback Machine

javascript:(function(){%20window.open('http://web.archive.org/web/*/'+location.host)})();

Pour information la Wayback Machine est un outil qui stocke des screenshots d’un site web sur parfois plusieurs années, ce qui permet de voir comment le site a évolué au fil du temps.

Tester les performances de mon site dans l’outil PageSpeed de Google

javascript:(function(){%20window.open('http://developers.google.com/speed/pagespeed/insights/?url='+encodeURIComponent(location.href))})();

Tester la compatibilité mobile de mon site dans l’outil Mobile Friendly de Google

javascript:(function(){%20window.open('https://search.google.com/search-console/mobile-friendly?url='+encodeURIComponent(location.host))})();

Tester la présence et la validité de données structurés (rich snippets) sur mon site web

javascript:(function(){%20window.open('https://search.google.com/structured-data/testing-tool#url='+encodeURIComponent(location.href))})();

Tester la présence de contenu dupliqué avec l’outil CopyScape

javascript:location.href='http://www.copyscape.com/?q='+document.domain.replace('www.','');

Tester le nom de domaine sur l’outil Majestic SEO (backlinks, popularité…)

javascript:(function(){%20window.open('http://www.majesticseo.com/reports/site-explorer?folder=&q='+encodeURIComponent(location.href))})();

Mettre en exergue les balises de structuration Hxx directement sur la page :

javascript:void((function(){var%20a,b,c,d,e,f;f=new%20Array('pink','orange','yellow','aquamarine','lightskyblue','plum');for(a=1;a<=6;a++){b=document.getElementsByTagName('h'+a);for(c=0;c<b.length;c++){d=b[c];e=d.style;e.backgroundColor=f[a-1];e.border='solid';e.padding='2px';e.color='black';d.innerHTML='H'+a+'%20-%20'+d.innerHTML;}}})())

Voici par exemple le résultat sur notre page d’accueil :

Le bookmarklet permet d’identifier rapidement les balises H1,H2.. présentes sur une page

Contrôler la présence et le contenu de la balise canonical :

javascript:%20(function%20()%20{%20var%20url%20=%20document.location;%20var%20links%20=%20document.getElementsByTagName('link');%20var%20found%20=%20'Not%20Found';%20for%20(var%20i%20=%200,%20l;%20l%20=%20links[i];%20i++)%20{%20if%20(l.getAttribute('rel')%20==%20'canonical')%20{%20found%20=%20'Canonical%20Found\n\nCanonical%20Reference:\n'+l.getAttribute('href')+'\n\nCurrent%20URL:\n'+document.location;if(l.getAttribute('href')==document.location){found=found+'\n\nCanonical%20tag%20matches%20current%20URL.'}else{found=found+'\n\nThe%20Canonical%20reference%20and%20current%20URL%20are%20different.%20Canonical%20fallback%20in%20place.'}%20break;%20}%20}%20alert(found);%20})();

Vérifier la présence et le contenu des attributs ALT de toutes les images d’une page

javascript:(function(){function%20toArray%20(c){var%20a,%20k;a=new%20Array;for%20(k=0;%20k%20<%20c.length;%20++k)a[k]=c[k];return%20a;}var%20images,%20img,%20altText;images=toArray(document.images);for%20(var%20i=0;%20i%20<%20images.length;%20++i){img=images[i];altText=document.createTextNode(img.alt);img.parentNode.replaceChild(altText,%20img)}})();

Identifier les liens No Follow de la page en cours :

javascript:var%20t=document.getElementsByTagName('a');for(i=0;i<t.length;i++){if((t[i].rel.toLowerCase()=='nofollow')%20|%20(t[i].rel.toLowerCase()=='external%20nofollow')){void(t[i].style.color='red');void(t[i].style.background='yellow');void(t[i].style.borderStyle='solid%20dotted');void(t[i].style.fontSize='2em');}}

Identifier les liens Do Follow de la page en cours

javascript:var%20t=document.getElementsByTagName('a');for(i=0;i<t.length;i++){if((t[i].rel.toLowerCase()!='nofollow')%20|%20(t[i].rel.toLowerCase()!='external%20nofollow')){void(t[i].style.color='green');void(t[i].style.background='yellow');void(t[i].style.borderStyle='solid%20dotted');void(t[i].style.fontSize='2em');}}

Identifier tous les liens sortants d’une page :

javascript:(function(){var%20url%20=%20document.location;%20var%20links%20=%20document.links;var%20output%20=%20'';var%20isExternal%20=%20function(url)%20{var%20domain%20=%20function(url)%20{return%20url.replace('http://','').replace('https://','').split('/')[0];};return%20domain(location.href)%20!==%20domain(url);};output%20=%20'\n\n#####%20External%20Links%20#####\n\n';for%20(i=0;%20i<links.length;%20i++)%20{var%20link%20=%20new%20String(links[i]);if(links[i].hostname%20!=%20window.location.hostname){var%20pat%20=%20/^https?:\/\//i;if(pat.test(links[i])){output%20+=%20links[i].href+'\n'}}}%20alert(output);})();

Afficher le Whois du nom de domaine (ancienneté, propriétaire…)

javascript:(function(){%20window.open('http://whois.sc/'%20+%20escape(window.location));%20})();

Concevoir ses propres Bookmarklet

Si vous maitrisez JavaScript, il vous est tout à fait possible de créer vos propres bookmarklets. Mais soyez rassurés même sans connaissances vous pouvez en créer facilement.

Dans l’exemple que je vais vous donner ci-dessous, je vais vous montrer comment j’ai créée un raccourci pour tester un site web dans l’outil mobile friendly de Google.

Lorsque l’on lance un test dans l’outil, nous retrouvons une url de ce type :

L’url comporte deux paramètres : le lien de l’outil et l’url du site

Nous allons donc exploiter les deux éléments qui composent cette url pour configurer notre raccourci :

Le lien de l’outil Google : https://search.google.com/search-console/mobile-friendly?url=
L’url du site testé

Voici le code de base de notre bookmarklet que vous pourrez réutiliser par la suite :

javascript:(function(){%20window.open(''+encodeURIComponent(location.host))})();

location.host correspond à l’url du site en cours et encodeURIComponent à une fonction JavaScript chargé d’encoder l’url (Voir la documentation JavaScript).

Il nous suffit donc de rajouter à ce code l’url de l’outil de Google en respectant sa syntaxe, ici le ?url=

javascript:(function(){%20window.open('https://search.google.com/search-console/mobile-friendly?url='+encodeURIComponent(location.host))})();

Et voila, un bookmarklet conçu en 1 minute chrono.

Conclusion

Vous l’aurez compris, ces “raccourcis” ont été conçus pour gagner en productivité en évitant les recopiages d’url dans de multiples outils, l’ouverture du code source…

Vous utilisez déjà ce système ou vous avez créé un bookmarklet suite à cette article ? N’hésitez pas à le partager en commentaire.

Charles Berthommé

@c_bertho

A propos

Développeur & Intégrateur au sein de l'agence web API Studio dont je suis également le gérant. Formateur auprès de l'université de Strasbourg.

Au fil des tweets

Sorry, no Tweets were found.