THE BLOG.

Soucieux du référencement de certains de mes sites, j’ai un jour voulu proposer un contenu différent à Google de mes visiteurs. C’est justement le but du clocking, technique interdite dans les guidelines de Big B. Chaque référenceur y va de son astuce : détection de l’user agent, détection de l’ip du crawler… sauf que chez Google ils sont loin d’êtres bête. Google a des versions de ses crawlers avec un user agent de navigateur traditionnel et surtout depuis des serveurs non-connu. Alors comment faire pour le tromper ? En tant que développeur Web je dois quelquefois, en dernier recours, utiliser des « hacks css » qui permettent d’afficher un élément html seulement sur un type de navigateur, en fonction du hack. Cette possibilité est offerte « grâce » à des bugs au niveau des moteurs d’interprétation du code html. Partant de ce principe, je me suis dit que même si un crawler de Google pouvait émuler un navigateur Web (user agent et plus largement sa signature) ils ne devaient pas pousser le vice jusqu’à utiliser leur moteur d’exécution. C’est ainsi que j’ai testé sur plusieurs sites une technique consistant à afficher un contenu A grâce au hacks css de tous les navigateurs courant et à leur masquer un autre contenu B. Ainsi, la plupart des visiteurs tombant sur mon site verront le contenu A et Google… le contenu B.

Voici le bout de code qui va bien, ça sera plus explicite : <style type= »text/css »> .bseo-a{ display:none; } .bseo-b{ display:block; } /*ie8 & ff3*/ .bseo-a { display:block;\ display:block; } .bseo-b { display:none;\ display:none; } /*end*/ /*old ff & ie7*/ /*\*/ html*.bseo-a { [display:block; ]display:block; } html*.bseo-b { [display:none; ]display:none; }/*end*/ /*ie6*/ /*\*/ * html .bseo-a { display:block; } * html .bseo-b { display:none; }/*end*/ /*safari & chrome*/ @media screen and (-webkit-min-device-pixel-ratio:0) { .bseo-a { display:block; } .bseo-b { display:none; } } /* Opera */ @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { .bseo-a { display:block; } .bseo-b { display:none; } } </style> <div id= »bseo-a »>Contenu vu par les navigateurs</div> <div id= »bseo-b »>Contenu vu par Google</div>