Charles Berthommé

Je conçois des sites web depuis 2003 et je suis le fondateur de l'agence , que je dirige depuis 2015.

bookmarklet seo
  • Référencement
  • 28 avril 2017
  • 6 minutes

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

[pastacode lang= »javascript » manual= »javascript%3A(function()%7B%2520window.open(‘https%3A%2F%2Fwww.google.fr%2Fsearch%3Fq%3Dsite%253A’%2BencodeURIComponent(location.host))%7D)()%3B » message= » » highlight= » » provider= »manual »/]

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

[pastacode lang= »javascript » manual= »javascript%3A(function()%7B%2520window.open(‘https%3A%2F%2Fwww.google.fr%2Fsearch%3Fq%3Dsite%253A’%2BencodeURIComponent(location.host)%2B’%26tbs%3Dqdr%3Ad7’)%7D)()%3B » message= » » highlight= » » provider= »manual »/]

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

[pastacode lang= »javascript » manual= »javascript%3Avoid(window.open(%2527http%3A%2F%2Fwww.bing.com%2Fsearch%3Fq%3Dsite%3A%2527%2Bdocument.domain.replace(%2527www.%2527%2C%2527%2527)%2C%2527_blank%2527))%3B » message= » » highlight= » » provider= »manual »/]

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

[pastacode lang= »javascript » manual= »javascript%3A(function()%7B%2520window.open(‘https%3A%2F%2Fwww.qwant.com%3Fq%3Dsite%253A’%2BencodeURIComponent(location.host))%7D)()%3B » message= » » highlight= » » provider= »manual »/]

Ouvrir mon site web dans l’outil Wayback Machine

[pastacode lang= »javascript » manual= »javascript%3A(function()%7B%2520window.open(‘http%3A%2F%2Fweb.archive.org%2Fweb%2F*%2F’%2Blocation.host)%7D)()%3B » message= » » highlight= » » provider= »manual »/]

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

[pastacode lang= »javascript » manual= »javascript%3A(function()%7B%2520window.open(‘http%3A%2F%2Fdevelopers.google.com%2Fspeed%2Fpagespeed%2Finsights%2F%3Furl%3D’%2BencodeURIComponent(location.href))%7D)()%3B » message= » » highlight= » » provider= »manual »/]

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

[pastacode lang= »markup » manual= »javascript%3A(function()%7B%2520window.open(‘https%3A%2F%2Fsearch.google.com%2Fsearch-console%2Fmobile-friendly%3Furl%3D’%2BencodeURIComponent(location.host))%7D)()%3B » message= » » highlight= » » provider= »manual »/]

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

[pastacode lang= »javascript » manual= »javascript%3A(function()%7B%2520window.open(‘https%3A%2F%2Fsearch.google.com%2Fstructured-data%2Ftesting-tool%23url%3D’%2BencodeURIComponent(location.href))%7D)()%3B » message= » » highlight= » » provider= »manual »/]

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

[pastacode lang= »javascript » manual= »javascript%3Alocation.href%3D’http%3A%2F%2Fwww.copyscape.com%2F%3Fq%3D’%2Bdocument.domain.replace(‘www.’%2C »)%3B » message= » » highlight= » » provider= »manual »/]

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

[pastacode lang= »javascript » manual= »javascript%3A(function()%7B%2520window.open(‘http%3A%2F%2Fwww.majesticseo.com%2Freports%2Fsite-explorer%3Ffolder%3D%26q%3D’%2BencodeURIComponent(location.href))%7D)()%3B » message= » » highlight= » » provider= »manual »/]

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

[pastacode lang= »javascript » manual= »javascript%3Avoid((function()%7Bvar%2520a%2Cb%2Cc%2Cd%2Ce%2Cf%3Bf%3Dnew%2520Array(‘pink’%2C’orange’%2C’yellow’%2C’aquamarine’%2C’lightskyblue’%2C’plum’)%3Bfor(a%3D1%3Ba%3C%3D6%3Ba%2B%2B)%7Bb%3Ddocument.getElementsByTagName(‘h’%2Ba)%3Bfor(c%3D0%3Bc%3Cb.length%3Bc%2B%2B)%7Bd%3Db%5Bc%5D%3Be%3Dd.style%3Be.backgroundColor%3Df%5Ba-1%5D%3Be.border%3D’solid’%3Be.padding%3D’2px’%3Be.color%3D’black’%3Bd.innerHTML%3D’H’%2Ba%2B’%2520-%2520’%2Bd.innerHTML%3B%7D%7D%7D)()) » message= » » highlight= » » provider= »manual »/]

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

exemple de bookmarklet SEO

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 :

[pastacode lang= »javascript » manual= »javascript%3A%2520(function%2520()%2520%7B%2520var%2520url%2520%3D%2520document.location%3B%2520var%2520links%2520%3D%2520document.getElementsByTagName(‘link’)%3B%2520var%2520found%2520%3D%2520’Not%2520Found’%3B%2520for%2520(var%2520i%2520%3D%25200%2C%2520l%3B%2520l%2520%3D%2520links%5Bi%5D%3B%2520i%2B%2B)%2520%7B%2520if%2520(l.getAttribute(‘rel’)%2520%3D%3D%2520’canonical’)%2520%7B%2520found%2520%3D%2520’Canonical%2520Found%5Cn%5CnCanonical%2520Reference%3A%5Cn’%2Bl.getAttribute(‘href’)%2B’%5Cn%5CnCurrent%2520URL%3A%5Cn’%2Bdocument.location%3Bif(l.getAttribute(‘href’)%3D%3Ddocument.location)%7Bfound%3Dfound%2B’%5Cn%5CnCanonical%2520tag%2520matches%2520current%2520URL.’%7Delse%7Bfound%3Dfound%2B’%5Cn%5CnThe%2520Canonical%2520reference%2520and%2520current%2520URL%2520are%2520different.%2520Canonical%2520fallback%2520in%2520place.’%7D%2520break%3B%2520%7D%2520%7D%2520alert(found)%3B%2520%7D)()%3B » message= » » highlight= » » provider= »manual »/]

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

[pastacode lang= »javascript » manual= »javascript%3A(function()%7Bfunction%2520toArray%2520(c)%7Bvar%2520a%2C%2520k%3Ba%3Dnew%2520Array%3Bfor%2520(k%3D0%3B%2520k%2520%3C%2520c.length%3B%2520%2B%2Bk)a%5Bk%5D%3Dc%5Bk%5D%3Breturn%2520a%3B%7Dvar%2520images%2C%2520img%2C%2520altText%3Bimages%3DtoArray(document.images)%3Bfor%2520(var%2520i%3D0%3B%2520i%2520%3C%2520images.length%3B%2520%2B%2Bi)%7Bimg%3Dimages%5Bi%5D%3BaltText%3Ddocument.createTextNode(img.alt)%3Bimg.parentNode.replaceChild(altText%2C%2520img)%7D%7D)()%3B » message= » » highlight= » » provider= »manual »/]

Identifier les liens No Follow de la page en cours :

[pastacode lang= »javascript » manual= »javascript%3Avar%2520t%3Ddocument.getElementsByTagName(‘a’)%3Bfor(i%3D0%3Bi%3Ct.length%3Bi%2B%2B)%7Bif((t%5Bi%5D.rel.toLowerCase()%3D%3D’nofollow’)%2520%7C%2520(t%5Bi%5D.rel.toLowerCase()%3D%3D’external%2520nofollow’))%7Bvoid(t%5Bi%5D.style.color%3D’red’)%3Bvoid(t%5Bi%5D.style.background%3D’yellow’)%3Bvoid(t%5Bi%5D.style.borderStyle%3D’solid%2520dotted’)%3Bvoid(t%5Bi%5D.style.fontSize%3D’2em’)%3B%7D%7D » message= » » highlight= » » provider= »manual »/]

Identifier les liens Do Follow de la page en cours

[pastacode lang= »javascript » manual= »javascript%3Avar%2520t%3Ddocument.getElementsByTagName(‘a’)%3Bfor(i%3D0%3Bi%3Ct.length%3Bi%2B%2B)%7Bif((t%5Bi%5D.rel.toLowerCase()!%3D’nofollow’)%2520%7C%2520(t%5Bi%5D.rel.toLowerCase()!%3D’external%2520nofollow’))%7Bvoid(t%5Bi%5D.style.color%3D’green’)%3Bvoid(t%5Bi%5D.style.background%3D’yellow’)%3Bvoid(t%5Bi%5D.style.borderStyle%3D’solid%2520dotted’)%3Bvoid(t%5Bi%5D.style.fontSize%3D’2em’)%3B%7D%7D » message= » » highlight= » » provider= »manual »/]

Identifier tous les liens sortants d’une page :

[pastacode lang= »javascript » manual= »javascript%3A(function()%7Bvar%2520url%2520%3D%2520document.location%3B%2520var%2520links%2520%3D%2520document.links%3Bvar%2520output%2520%3D%2520 »%3Bvar%2520isExternal%2520%3D%2520function(url)%2520%7Bvar%2520domain%2520%3D%2520function(url)%2520%7Breturn%2520url.replace(‘http%3A%2F%2F’%2C »).replace(‘https%3A%2F%2F’%2C »).split(‘%2F’)%5B0%5D%3B%7D%3Breturn%2520domain(location.href)%2520!%3D%3D%2520domain(url)%3B%7D%3Boutput%2520%3D%2520’%5Cn%5Cn%23%23%23%23%23%2520External%2520Links%2520%23%23%23%23%23%5Cn%5Cn’%3Bfor%2520(i%3D0%3B%2520i%3Clinks.length%3B%2520i%2B%2B)%2520%7Bvar%2520link%2520%3D%2520new%2520String(links%5Bi%5D)%3Bif(links%5Bi%5D.hostname%2520!%3D%2520window.location.hostname)%7Bvar%2520pat%2520%3D%2520%2F%5Ehttps%3F%3A%5C%2F%5C%2F%2Fi%3Bif(pat.test(links%5Bi%5D))%7Boutput%2520%2B%3D%2520links%5Bi%5D.href%2B’%5Cn’%7D%7D%7D%2520alert(output)%3B%7D)()%3B » message= » » highlight= » » provider= »manual »/]

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

[pastacode lang= »markup » manual= »javascript%3A(function()%7B%2520window.open(‘http%3A%2F%2Fwhois.sc%2F’%2520%2B%2520escape(window.location))%3B%2520%7D)()%3B » message= » » highlight= » » provider= »manual »/]

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 :

bookmarklet seo

L’url comporte deux paramètres

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 :

[pastacode lang= »javascript » manual= »javascript%3A(function()%7B%2520window.open( »%2BencodeURIComponent(location.host))%7D)()%3B » message= » » highlight= » » provider= »manual »/]

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=

[pastacode lang= »markup » manual= »javascript%3A(function()%7B%2520window.open(‘https%3A%2F%2Fsearch.google.com%2Fsearch-console%2Fmobile-friendly%3Furl%3D’%2BencodeURIComponent(location.host))%7D)()%3B » message= » » highlight= » » provider= »manual »/]

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.

  • Partager cet article :