+33 (0)6 71 55 67 10 david@djibouteam.fr

[MAJ]J’ai enfin trouvé une utilité à l’IPAD en SEO

[MAJ]J’ai enfin trouvé une utilité à l’IPAD en SEO

Bon, je suis un grand amoureux des nouvelles technologies, dès qu’il y a un nouveau machin Hi-tech sorti des cerveaux tordus, je suis souvent en train d’y baver devant. Et pour ceux qui me connaissent, j’ai une aversion toute particulière aux objets estampillés de la pomme, pourtant c’est pas faute d’avoir essayé, j’ai consommé de l’Ipod, de l’Iphone, première et deuxième génération, mais pour autant, j’ai fuis cette prison dorée qu’ils ont conçu autour de iThunes…. et puis mes parents m’ont refourgué un Ipad qu’ils avaient gagnés, à moi… et puis pas n’importe lequel, le 3G 32Go….

Mise à jour : la pluspart des Bookmarks ne passent plus sur l’IPAD depuis un peu plus d’un mois, le seul que j’arrive encore à faire tourner reste le Bookmark Firebug. Les Bookmarks se lancent tous dans un nouvel onglet automatiquement….

utilite-ipadMais voilà, moi j’avais déjà acheté un an avant ça l’une des premières tablettes Android, en faisant la promotion à la liberté, liberté de faire quoi ? ben pas grand chose non plus …. les tablettes, je trouve ça inutile au possible, pourquoi ? parce que je suis un SEO et un Dev, je peux pas m’en empécher, quand je vais sur un site WEB, c’est plus fort que moi, il y a toujours un « Ctrl + U » qui se produit, ou un petit copier-coller sur Magestic, je suis comme ça, la curiosité de voir les arrières boutiques et les moteurs, ça me brule les doigts… alors la frustration avec une tablette, vous commencez surement à la comprendre.

Mais ça c’était jusqu’au jour où, pendant la conf d’un mec que j’adore, au Tekn’SEO à Dijon, m’a fait tilté à 5 ou 6 reprises (ce qu’il faut comprendre par tilter, c’est : »pouk, une idée, pouk pouk, une autre idée, puis une autre, et ça quand ça me prend, il faut que je la note, de suite, d’où le fait que je me trimballe toujours un carnet avec moi)….

Alors, le mec en question, c’est Jérémy Allard, le boss de Code Seo : ce gars, à chaque fois qu’on discute ensemble, il a le don de réveiller ma curiosité et ma machine à idées, pourquoi, je sais pas, il y a plusieurs personnes dans la communauté SEO avec qui je partage et avec qui les idées fusent, c’est comme ça , j’y peux rien. J’y reviendrais en fin d’article ;)

Bon, Djibou, ta vie, on s’en cogne un peu, tu feras des bises plus tard à qui tu veux

Alors, en fait, lors de sa conf qui parlait de comment developper ses propres addon pour Chrome m’a fait penser « Ha tiens, c’est clair que c’est pas con du tout, je ppourrais aussi en faire pour ma poire sur FireFox, en plus, ça tourne souvent en JS, c’est bon ça »

Et de JS, je repense à un dev de 512Banque, Oscaar, sur une manière de l’améliorer pour des besoins persos, et je repense au fait qu’Oscaar crée des bookmarks, et là pas, tout arrive comme un torrent d’infos en continu dans la tête, j’arrive plus à me concentrer. La conf se termine, je sors mon carnet, je couche le tout par écrit et hop, les jours passent.

Et puis, un soir, en naviguant de droite à gauche, je retombe sur un article de RaphSEO sur les bookmarks pour le SEO, mais ce soir là, j’étais surement bourré, j’y étais mais avec l’IPAD, et du coup, je me dit merde, ça passe pas, j’ai rien pour les mettre en Bookmarks sur l’IPAD, ça pourrait être utile. Du coup, la flème d’écrire sur ce blog m’ayant passé (et surtout j’arrive enfin à faire le deuil de Born2Bille, enfin, ça c’est une autre histoire, donc voilà, je couche ce soir les bookmarks en mode texte, pour que vous petits surfeurs sur tablette, vous puissiez les utiliser aussi, même si vous n’êtes pas devant votre PC ;)

Les bookmarkes SEO pour IPAD, et pour les autres aussi

Donc go, je vais reprendre quelques uns des bookmarks de Raph, plus quelques uns surprises que vous allez kiffer aussi :
PS : pour les IPADeux et IPADeuses, il vous suffit de recopier les codes et de créer un bookmark, vous remplacez alors l’URL par le code, et voilà ;)

Commande « site:ndd.tld » :
javascript:location=(« http://www.google.fr/search?&q=site: »%20+%20escape(location.hostname)%20).replace(/%20/g,%20″+ »);%20void%200

Sa variante qui fera un site: de la page courante « site:ndd.tld/page.html » :
javascript:location=(« http://www.google.fr/search?&q=site: »%20+%20escape(location.href)%20).replace(/%20/g,%20″+ »);%20void%200

Commande « info:ndd.tld » :
javascript:location=(« http://www.google.fr/search?&q=info: »%20+%20escape(location.hostname)%20).replace(/%20/g,%20″+ »);%20void%200

Commande « Cache:ndd.tld/page.html » :
javascript:location=(« http://www.google.fr/search?&q=cache: »%20+%20escape(location.href)%20).replace(/%20/g,%20″+ »);%20void%200

Commande pour voir si le « title » de la page est dupliqué :
javascript:location=(« http://www.google.com/search?num=100&q=site: »%20+%20escape(location.hostname)%20+%20″%20\ » »%20+%20escape(document.title.replace(/\ »/g, » »))%20+%20″\ » »).replace(/%20/g,%20″+ »);%20void%200

Ping d’une page sur le service pingomatic :
javascript:location.href=’http://pingomatic.com/ping/?%20title=’+encodeURIComponent(document.title)%20+’&blogurl=’+encodeURIComponent(location.href)%20+’&chk_weblogscom=on&chk_blogs=on&chk_technorati=on&chk_feedburner%20=on&chk_syndic8=on&chk_newsgator=on&chk_myyahoo=on&chk_pubsubco%20m=on&chk_blogdigger=on&chk_blogrolling=on&chk_blogstreet=on&chk_mo%20reover=on&chk_weblogalot=on&chk_icerocket=on&chk_newsisfree=on&chk_%20topicexchange=on&chk_google=on&chk_tailrank=on&chk_bloglines=on&chk%20_aiderss=on&chk_skygrid=on&chk_audioweblogs=on&chk_rubhub=on&chk_%20geourl=on&chk_a2b=on&chk_blogshares=on’

Analyse des liens d’une page :
javascript:(function(){var%20hostname=window.location.hostname;%20hostname=hostname.replace(« www. », » »).toLowerCase();%20this.check%20=%20function(obj){var%20href%20=%20obj.href.toLowerCase();%20return%20(href.indexOf(« http:// »)!=-1%20&&%20href.indexOf(hostname)==-1)%20?%20true%20:%20false;%20};%20strhead= »<link%20href=’http://www.onlinesales.co.uk/seo/bookmarklet/seo.css’%20rel=’stylesheet’%20type=’text/css’>\n »;%20anchors=document.getElementsByTagName(« a »);%20str= »<table> »;%20str+= »<tr><th>#</th><th>HREF</th><th>Anchor</th><th>Rel</th></tr>\n »;%20var%20allExternal=allExternalFollow=allExternalNoFollow=allLinks=allFollow=allFollowLinks=allNoFollow=allNoFollowLinks= » »;%20var%20nflc=flc=xlc=xflc=xnflc=0;%20for(i=0;i<anchors.length;i++){var%20j=i+1;%20var%20anchorText%20=%20anchors[i].textContent;%20var%20anchorRel%20=%20anchors[i].rel;%20if(anchorText%20===%20undefined){anchorText%20=%20anchors[i].innerText;%20}if(j%2==’0′){if(anchorRel.match(/nofollow/i)){str+= »<tr%20style=’background-color:#ddcccc;’> »;%20}}else{str+= »<tr%20style=’background-color:#eeeeee;’> »;%20if(anchorRel.match(/nofollow/i)){str+= »<tr%20style=’background-color:#ccbbbb;’> »;%20}}str+= »<td> »+j+ »</td> »;%20str+= »<td><a%20href= »+anchors[i].href+ »> »+anchors[i].href+ »</a></td> »;%20str+= »<td> »+anchorText+ »</td> »;%20str+= »<td> »+anchorRel+ »</td> »;%20str+= »</tr>\n »;%20allLinks+=anchors[i].href+ »\n »;%20if(anchorRel.match(/^(?!nofollow)/i)){allFollow+=anchors[i].href+ »\n »;%20allFollowLinks+= »<a%20href=\ » »+anchors[i].href+ »\ »> »+anchorText+ »</a>\n »;%20flc=flc+1;%20}else{allNoFollow+=anchors[i].href+ »\n »;%20allNoFollowLinks+= »<a%20href=\ » »+anchors[i].href+ »\ »> »+anchorText+ »</a>\n »;%20nflc=nflc+1;%20}if(check(anchors[i])){allExternal+=anchors[i].href+ »\n »;%20xlc=xlc+1;%20if(anchorRel.match(/^(?!nofollow)/i)){allExternalFollow+=anchors[i].href+ »\n »;%20xflc=xflc+1;%20}else{allExternalNoFollow+=anchors[i].href+ »\n »;%20xnflc=xnflc+1;%20}}}str+= »</table><br/>%20<br/><a%20name=a></a><h2>All%20Links%20(« +j+ »)</h2><textarea%20cols=80%20rows=10> »;%20str+=allLinks;%20str+= »</textarea><br/>%20<br/><a%20name=b></a><h2>Followed%20Links%20(« +flc+ »)</h2><textarea%20cols=80%20rows=10> »;%20str+=allFollow;%20str+= »</textarea><br/>%20<br/><a%20name=c></a><h2>NoFollowed%20Links%20(« +nflc+ »)</h2><textarea%20cols=80%20rows=10> »;%20str+=allNoFollow;%20str+= »</textarea><br/>%20<br/><a%20name=d></a><h2>All%20External%20Links%20(« +xlc+ »)</h2><textarea%20cols=80%20rows=10> »;%20str+=allExternal;%20str+= »</textarea><br/>%20<br/><a%20name=e></a><h2>External%20Follow%20Links%20(« +xflc+ »)</h2><textarea%20cols=80%20rows=10> »;%20str+=allExternalFollow;%20str+= »</textarea><br/>%20<br/><a%20name=f></a><h2>External%20NoFollow%20Links%20(« +xnflc+ »)</h2><textarea%20cols=80%20rows=10> »;%20str+=allExternalNoFollow;%20str+= »</textarea><br/>%20<br/><p%20align=center><a%20href=’http://www.onlinesales.co.uk/’>Bookmarklet%20by%20Liam%20Delahunty%20of%20Online%20Sales</a></p> »;%20strhead+= »<table><tr><td> »+j+ »</td><td><a%20href=’#a’>Links%20on%20page.</a></td></tr><tr><td> »+flc+ »</td><td><a%20href=’#b’>Followed%20links.</a></td></tr><tr><td> »+nflc+ »</td><td><a%20href=’#c’>No%20followed%20links.</a></td></tr><tr><td> »+xlc+ »</td><td><a%20href=’#d’>External%20Links</a></td></tr><tr><td> »+xflc+ »</td><td><a%20href=’#e’>External%20Followed%20Links</a></td></tr><tr><td> »+xnflc+ »</td><td><a%20href=’#f’>External%20Nofollowed%20Links</a></td></tr></table> »;%20doc=strhead+str;%20with(window.open()){document.write(doc);%20document.close();}})()

Voir si les liens sont en doFollow(vert) ou Nofollow (rouge)  (celui là je le tiens de Jérome Lille , Lije Creative, que j’ai remanié pour ajouter les dofollow aussi) :

javascript:var t=document.getElementsByTagName(‘a’);for(i=0;i<t.length;i++){if(t[i].rel.toLowerCase()==’nofollow’){void(t[i].style.color=’red’,t[i].style.backgroundColor=’#ffeede’,t[i].style.border=’dashed red 1px’);}else{void(t[i].style.color=’green’,t[i].style.backgroundColor=’#B5FFD1′,t[i].style.border=’dashed green 1px’);}}

Avoir Firebug partout avec vous :
javascript:(function(F,i,r,e,b,u,g,L,I,T,E){if(F.getElementById(b))return;E=F[i+'NS']&&F.documentElement.namespaceURI;E=E?F[i+'NS'](E,’script’):F[i](‘script’);E[r](‘id’,b);E[r](‘src’,I+g+T);E[r](b,u);(F[e](‘head’)[0]||F[e](‘body’)[0]).appendChild(E);E=new%20Image;E[r](‘src’,I+L);})(document,’createElement’,’setAttribute’,’getElementsByTagName’,’FirebugLite’,’4′,’firebug-lite.js’,’releases/lite/latest/skin/xp/sprite.png’,’https://getfirebug.com/’,’#startOpened’);

Mais comment on fait pour dev ses propres bookmarks SEO ?

Ben, tu te démerdes, ça c’est ce que j’aurais répondu en temps normal, mais j’ai décidé qu’il fallait que je me fasse un peu plus gentil, pourquoi, je sais pas non plus, encore un truc qui va me passer comme la clope, la bière et le reste, alors profitez-en :

Pour commencer, jeune padawan du bookmark, tu dois savoir qu’un bookmark SEO ou bookmarklet, c’est un lien, à part que, à la différence d’appeler une autre page du WEB, on va appeler le moteur javascript. Alors, ça veut dire quoi ce charabia, ben un exemple parlera mieux.

Un lien standard, tu le fais comme ça :
<a href= »http://www.ndd.tld »>mon ancre optimisée, parce que google on l’en…….</a>
Eh bien, lien qui appelle le moteur javascript, se fait comme ça :
<a href= »javascript:mon joli ptit code JS qui va faire des tours de magie »>une ancre sinon, le lien, on le verra pas</a>

Allons un peu plus loin avec des trucs simples : tu veux utiliser un site web externe comme une API, t’as la flème de faire un copier-coller du site que tu veux triturer ?
On va commencer par regarder comment se comporte le site dont on a besoin, ici je vais prendre Google et la commande « site: »
Allez directement sur Google, tapez site: et le ndd de votre choix, vous verrez que dansla barre d’adresse, il y a des paramêtres avec entre autre « q= » qui est le paramêtre rentré en recherche.
GO : l’url qui revient c’est : « http://www.google.fr/search?q=site: »
Donc notre bookmark aura pour lien :
javascript:location= »http://www.google.fr/search?q=site: »
le  paramêtre location= sert à dire au moteur javascript d’interroger le lien qui va suivre juste après, ici notre fameux  « http://www.google.fr/search?q=site: »

A cela, nous devons maintenant lui passer l’URL de ce sur quoi nous allons faire la commande site:
Pour cela, rien de plus simple, soit on interroge le NDD de la page courante via : location.hostname soit la page courante directement via location.href
bon, à celà, on va y ajouter quelques fioritures comme des encodages spécifiques pour que tous les navigateurs comprennent bien ce qu’il se passe, donc dans ce type de lien, pour que ça passe partout, on encode tout ce que n’aiment pas les navigateurs, comme les espaces que l’on remplace par « %20 »

Alors, dans le bookmark que j’ai honteusement pompé directement chez Raph, tu vas me dire, ouais, mais il y a aussi « .replace(/ /g, « + »); void 0 »
Bon, le .replace(/ /g, « + »), honnètement je ne sais pas à quoi il sert dans les bookmarks, moi, je ne le mets jamais dans mes bookmarks personnels, pour ce qui concerne le « void 0″, il s’agit de dire au moteur d’arrêter d’utiliser le moteur Javascript pour cette page, que c’est fini, on n’a plus besoin de lui, pour pas le faire tourner inutilement.

C’est un peu comme le « exit() » en PHP en fin de script quand on fait une redirection, on se barre de la page, on s’en fout, mais derrière, si on ne le fait pas, on continue de faire tourner le process sur le serveur (bon il va s’arrêter tout seul, mais ça ne sert  à rien de le faire tourner si on en a fini avec lui, c’est comme ça, c’est propre, c’est la norme, alors on le fait et un point c’est tout, sinon, tous les DEVs de la terre te maudiront et viendront te crever les pneus de ton vélo, ta voiture, la trottinette de tes enfants et le reste.

Tu vas aussi avoir besoin de passer de morceaux déjà prédéfinis comme « http://www.google.fr/search?q=site: » que tu devras faire cohabiter avec du code, pour par exemple, dans le  location= où tu devras lui donner une URL (ici celle de google) plus une partie « variable » qui sera l’URL du site à  analyser, de là, quand tu passes d’une chaine de caractères cpncaténée à une variable, il faut savoir que la chaine de caractères sera entre doubles quotes  »  » et la concaténation se fait en javascrit avec le signe +, ce qui nous donne :

javascript:location= »http://www.google.fr/search?&q=site: »+(location.hostname)

Certaines URLs ont besoin d’êtres passées aux futures pages déjà encodées ? pas de soucis, tu envoie ton URL avec cette fonction : encodeURIComponent(ce qui doit être encodé en format URL)

Tu as besoin de récupérer un élément précis d’une page, il y a ce qu’il faut en JS pour cibler tout et n’importe quoi, ton machin à un ID ? document.getElementsById(ID de l’élément)
C’est une balise HTML d’un certain type ? document.getElementsByTagName(strong) dans le cas d’une balise <strong>

Tu veux aller plus loin ? c’est aussi la raison pour laquelle j’ai affiché le code des liens des bookmarks en plus de les faire, pour que tu puisse comparer, tester et continuer. Tu veux en savoir plus, là je te conseille de trouver des cours sur le javascript, dis toi que le javascript est fait pour manipuler tout ce que tu vois (et tout ce qui est dans le code source) de la page que tu vois, son moteur, c’est le navigateur, et ses ressources sont directement ton matériel (PC,Tablette,etc.)

Voilà, avant de partir en week end, je tenais à remercier des personnes qui me sont chères dans la communauté, qui m’ont poussé consciemment ou non à me surpasser, à aller plus loin et ont partagé leur savoir : Thomas (SeoF1), Loïc Helias, Philippe Jean (Lemondeavance), Hervé (Infiniclick), Sandrine  (GDTSB) et mon Polonwn (Polo_SEO)

PS 2 : je me rend compte aussi, avec cet article, que putain de merde, j’ai payé ce maudit template 45$ mais que dès que tu écris autre chose que des conneries, c’est super dur à lire, les couleurs ne sont pas du tout adaptées, il est super mal foutu, je crois que tu vas partir au paradis des templates et que tu ne me manqueras pas une seule seconde, voilà, j’ai poussé mon coup de gueule, saloperie.