in référencement thymeleaf seo brouillage de liens ~ temps de lecture.

Brouillage de liens avec Thymeleaf

C'est quoi brouiller un lien ?

C'est une technique pour optimiser le référencement de vos pages web.

Elle a pour but de dissimuler certains de vos liens en les rendant illisibles par les robots d'indexation : en effet, les moteurs de recherches préconisent d'avoir un nombre limité de liens au sein d'une même page, afin qu'ils puissent voir clairement les relations entre les pages.

Brouiller un lien revient donc à transformer "à la source" un lien en autre chose, voici un exemple :

lien en clair  
<a href="http://monsite/mapage.html" class="button red">mon lien</a>

lien brouillé (avec chiffrement)  
<span class="button red" data-js="scramble-link" data-href="TTFFOOCCVVSSTTSSDDWWTT">mon lien</span>

lien brouillé (simplement)  
<span class="button red" data-js="scramble-link" data-href="@@http:||||monsite||mapage.html@@">mon lien</span>  

Les balises "a" sont devenues des balises "span".

Brouiller vos liens avec Thymeleaf

Les liens sont principalement des zones de texte cliquables (voir ci-dessus), mais dans la réalité d'un site web grand public, les liens sont un peu plus complexes :

  • lien autour d'images
  • lien autour d'élément entier de carrousel
  • lien autour d'une combinaison texte + image
  • lien autour d'un quelconque contenu HTML

C'est pourquoi la génération de liens brouillés doit prendre en compte toutes les façons possible de faire, la création d'une fonction est de toute évidence la bienvenue afin de centraliser les rouages de cette technique.

Voici un exemple de fonction Thymeleaf permettant de générer des liens brouillés ou non, simples ou complexes :

<!--/*  
 Brouillage de liens
 -------------------
 Liste des propriétés pouvant être envoyer en paramètre de la méthode :

 content : contenu html à insérer dans le lien
 bool : true/false pour activer ou non le brouillage du lien
 href : url du lien
 target : cible du lien (_blank, _self)
 clazz : ensemble des classes css sur le lien
 tagid : id du lien
*/-->

<div th:fragment="scramble">  
    <th:block th:if="${bool}">
        <span data-js="scramble-link" th:attr="data-href=${@htmlUtil.scrambleLink(href)}, data-target=${target}, data-id=${tagid}" th:classappend="${clazz}">
            <th:block th:include="${content}" th:remove="tag">Un contenu de lien</th:block>
        </span>
    </th:block>
    <th:block th:unless="${bool}">
        <a href="#" th:id="${tagid}" th:href="${href}" th:target="${target} th:class="${clazz}">
            <th:block th:include="${content}" th:remove="tag">Un contenu de lien</th:block>
        </a>
    </th:block>
</div>  

Voici un exemple de la fonction Java appelée ci-dessus qui va permettre de masquer l'url cible du lien :

@Component
public class HtmlUtil {

    private static final Pattern SLASH_PATTERN = Pattern.compile("/");

    public String scrambleLink(String url) {
        if (url == null || url.isEmpty()) {
            return "";
        }
        return "@@" + SLASH_PATTERN.matcher(url).replaceAll("||") + "@@;
    }
}

Cas d'utilisation :

 <th:block th:include="functions :: scramble (content=~{::section}, bool=true, href='/aaa/bbb/ccc.html', clazz='category')">
    <section>
        <span>Mon lien</span>
        <img src="http://cdn.myserver.com/image.png">Mon image</img>
    </section>
 </th:block>

cela va générer comme source-code :

<span data-js="scramble-link" data-href="@@||aaa||bbb||ccc.html@@" class="category">  
    <span>Mon lien</span>
    <img src="http://cdn.myserver.com/image.png">Mon image</img>
</span>  

Débrouiller vos liens avec JavaScript

Vous l'avez maintenant bien compris, l'idée du brouillage de liens est de masquer la destination de ceux-ci tout en conservant le mécanisme d'origine du lien de façon transparente pour l'internaute, à savoir :

  • au survol sur le lien le curseur de la souris doit changer
  • au clic il doit être redirigé vers la page cible

Et pour cela nous avons besoin de transformer nos "span" en "a" après chargement de la page, avec l'aide de JavaScript.

Voici un exemple de fonction pour le cas du brouillage "simple" présenté ci-dessus :

var removeScramble = function() {  
    var outer = this.outerHTML;

    // Replace opening and closing tag
    var newTag = '<' + outer.replace(/(^<\w+|\w+>$)/g, 'a') + '>';

    // Replace obfuscation || from url to /
    newTag = newTag.replace(new RegExp('\\|\\|', 'g'), '/');

    // Replace obfuscation @@ from url to void
    newTag = newTag.replace(new RegExp('\\@\\@', 'g'), '');

    // Replace data-href attribute
    newTag = newTag.replace('data-href=', 'href=');

    $(this).replaceWith(newTag);
};

$(document).find('[data-js="scramble-link"]').each(removeScramble);

Bonus

Afin de mettre toutes les chances de votre côté et d'éviter d'attirer l'attention des crawlers sur cette technique mise en place (qui est un peu un détournement il faut bien l'avouer), je vous conseille d'inclure la fonction JavaScript dans un fichier à part (scramble.js) et de spécifier son emplacement exacte dans le fichier robots.txt en indiquant aux robots d'ignorer la lecture de celui-ci :

Disallow:/path/to/scramble.js  

A noter

Si Thymeleaf vous est inconnu, je vous invite à lire mon billet précédent qui vous explique les avantages de ce moteur de template Java.

Les exemples de code contenus dans ce billet utilisent Thymeleaf 3 et jQuery.

Liens intéressants :

comments powered by Disqus