Les lecteurs qui suivent ce blog ont déjà dû lire certains de mes articles à propos du cloaking en référencement, c'est-à-dire des méthodes pour duper un moteur de recherche en trompant sa vigilance. Il existe moult méthodes pour faire du cloaking mais je vous en présente une ici qui permet de modifier dynamiquement n'importe quel type de balises HTML en liens hypertextes.
Les référenceurs les plus aguerris peuvent comprendre que cette méthode permet de masquer des liens pour les moteurs de recherche, mais les montrer pour les utilisateurs. Ainsi, tout le jus de liens ainsi que le PageRank transmis au travers des pages, dépendant du nombre de liens visibles, vont être modifiés. Prenons un exemple simple et concret : si vous avez 10 liens dans une page, leur "jus" et leur valeur vont être divisés par 10 pour les pages cibles (chaque page de destination n'obtient donc que 1/10e du poids de la page source). Si vous arrivez à en masquer la moitié grâce à du cloaking, ce sera donc 1/5e de la note qui sera transmis au page de destination. Cela est forcément intéressant à bien des égards. Attention toutefois aux sanctions, Google peut être vigilant !
J'ai créé deux premières versions de ce code appelé JqueryRank, présentés en conférence jadis puis dans les éditions du livre Technique de référencement web : audit et suivi SEO que j'ai coécrit avec Alexandra Martin (Miss SEO Girl). Seulement voilà, jQuery a évolué et rend ces codes caducs à partir de la version 1.9, il a donc fallu que je le mette à jour pour les quelques utilisateurs du code. Cette nouvelle version, jQueryRank 3.0, est donc compatible avec les dernières versions de jQuery.
Pourquoi une incompatibilité ?
jQuery a supprimé la méthode .live() depuis la version 1.9. Comme par hasard, j'utilisais cette méthode qui était très pratique pour effectuer des modifications simples et rapides d'un seul tenant, à l'image de la méthode .toggle() très connue en jQuery. Il a donc fallu réécrire une bonne partie du code avec la méthode .on() (cela fonctionne aussi avec son équivalent .delegate() si nécessaire). Le code est un peu plus court et fonctionne à 100% à l'identique que la version 2.0
Pour rappel, la version 2.0 ajoutait des méthodes de cryptage des URL, afin de les masquer idéalement aux moteurs de recherche (car Google est capable de suivre n'importe quelle URL, même si elle est contenue dans un attribut par exemple). J'ai donc conservé ce postulat de base. La seule nouvelle contrainte de la version 3.0 est l'usage obligatoire d'une classe comme sélecteur (on pouvait utiliser des ID avant si désiré), qui implique une modification de la variable globale "source". Avant, vous pouviez écrire ".linktoggle" alors que maintenant, il faudra écrire "linktoggle" (la classe étant obligatoire, je gère le point par moi-même en dur).
Je vous invite à suivre le code écrit dans la démonstration ci-dessous, ou présente dans le code à télécharger.
Télécharger “jQueryRank (Element-to-A) 3.0”jQueryRank-3.0.zip – Téléchargé 1143 fois – 39,11 Ko
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <!-- Scripts utilisés pour changer les éléments en <a> --> <script src="../jquery-1.12.4.min.js"></script> <script src="../ElementToA-3.0.min.js"></script> </head> <body> <h2>Le texte suivant contient des balises variées (span, sup, strong et a) portant la class "linktoggle" lançant le script</h2> <p id="texte"> <a href="http://www.monlien.fr" class="linktoggle">Eodem tempore</a> etiam Hymetii praeclarae indolis viri negotium est actitatum, <span title="http://www.monlien.fr" class="linktoggle bluevelvet gris" rel="external">cuius hunc novimus</span> esse textum. cum Africam <sup title="http://www.monlien.fr" class="linktoggle rouge">pro consule</sup> regeret Carthaginiensibus victus inopia iam lassatis, ex <strong title="http://www.monlien.fr" class="linktoggle">horreis Romano</strong> populo destinatis frumentum dedit, pauloque postea cum provenisset segetum copia, integre sine ulla restituit mora.<br/><br/> Martinus agens illas provincias <span title="http://www.monlien.eu" class="linktoggle">pro praefectis</span> aerumnas innocentium graviter gemens saepeque obsecrans, ut ab omni culpa inmunibus parceretur, cum non inpetraret, minabatur se discessurum: ut saltem id metuens perquisitor malivolus tandem desineret quieti coalitos homines in aperta pericula proiectare.<br/><br/> Nihil morati post haec militares avidi saepe <span title="http://www.monlien.com" class="linktoggle">turbarum adorti</span> sunt Montium primum, qui divertebat in proximo, levi corpore senem atque morbosum, et hirsutis resticulis cruribus eius innexis divaricaturn sine spiramento ullo ad usque praetorium traxere praefecti. </p> </body> </html>
Rien de très compliqué, vous devez juste intégrer jQuery et le code ElementToA en version 3.0 (jQueryRank). Observez-bien les balises HTML qui portent la classe "linktoggle" et des attributs "title" avec une URL à l'intérieur. Au démarrage du script, tous les attributs "title" sont cryptés puis les événéments "hover" (ou autre) entraînent le décryptage/cryptage à chaque survol.
Comme je suis gentil (si, si ! ^^), j'en ai profité pour mettre à jour également le plugin WordPress correspondant, que j'avais appelé Tag-to-Link. Vous pouvez le télécharger directement dans le répertoire des plugins WordPress ou avec ce code :
Télécharger “Tag-to-Link 3.0”Tag-to-Link-3.0.zip – Téléchargé 20331 fois – 404,65 Ko