Optimisez les nuages de tags avec WordPress

Nuage de tags optimisé avec WordPress

Les nuages de tags, ou tag clouds, permettent de créer automatiquement des liens vers les pages de tags pour améliorer le référencement interne.

Mais, s’ils sont insérés tels quels, ils peuvent aussi perturber le maillage interne en associant dans la même zone tous les mots-clefs importants pour le site, sans distinction.

Voyons comment résoudre ce problème en n’affichant que les mots-clefs en rapport dans une sorte de nuage ‘fait maison’, et peut-être gagner encore un peu sur le SEO.

Nuage de tags ?

Pour rappel, un nuage de mots-clefs ressemble à ceci :

Nuage de tags optimisé avec WordPress : le nuage de mots-clefs par défaut
Le nuage de mots-clefs par défaut
Comme je l’expliquais en introduction, ce bloc permet de créer des liens internes vers les pages de mots-clefs sans trop de peine.

Par contre, ce n’est pas très joli, et franchement pas fonctionnel : lequel de vos visiteurs s’attarde sur ce bloc pour trouver un lien qui l’intéresse ? Je dirais bien aucun…

Nuage de tags optimisé

Alors est-ce vraiment utile ? Les avantages sont-ils réels ? C’est la question que j’ai posé aux experts SEO de Mitambo dans le cadre de la béta du plugin WordPress dédié à leur service d’analyse de contenu et de maillage interne.

Leur réponse est simple : les nuages offrent des liens vers les pages de tags, ce qui est une bonne chose.

En revanche, ils sont un pollueur sémantique : ils donnent une importance à un groupe de mots qui n’ont pas forcément de rapport. Par exemple, sur ce blog : le tag WordPress a un rapport avec le tag Blog, mais pas forcément avec le tag ImageMagick.

Supprimer complètement le nuage retirerait l’avantage des liens internes, ce n’est pas une bonne solution à mon goût.

Par contre, toujours selon les conseils de François Lamotte de Mitambo, une solution pourrait être de n’afficher les mots-clefs que s’ils ont un rapport entre eux, et sur certaines pages seulement.

Principe de la solution

Ainsi, avec ces conseils en tête, j’ai commencé à mettre en place un nuage de mots-clefs, sélectif et contextuel, c’est-à-dire qui n’affiche que les tags qui ont un rapport avec la page en cours, et qui ne s’affiche que sur certaines pages.

Plus question d’utiliser le nuage de tags livré avec WordPress. En tout cas, pas en l’état.

Le principe :

  1. plutôt que de l’afficher sur toutes les pages du site, le nuage n’est affiché que sur les pages de tags et de catégories seulement. Au moins sur ces pages, par leur concept même, le thème est connu.
  2. les tags affichés sont ceux des articles qui sont dans la catégorie en cours, ou qui contiennent le mot-clef en cours.

Par exemple, sur ce blog, les articles qui traitent de WordPress, traitent aussi de Twitter Bootstrap, de SEO et d’HTTPS.

Nuage de tags optimisé avec WordPress : le tags cloud pour le tag WordPress
Les tags des articles qui contiennent le tag WordPress
En revanche, les articles qui traitent d’HTTPS ne traitent pas de Twitter Bootstrap, ni de SEO.

Nuage de tags optimisé avec WordPress : le tags cloud pour le tag HTTPS
Pareil, pour le tag HTTPS
Bien sûr, cette solution n’est valable que si les tags des articles sont assez cloisonnés.

Pour voir le résultat, vous pouvez cliquer sur un tag en haut de cet article, ou sur un nom de catégorie dans le menu.

Mise en place

PHP

La première chose à faire est de créer une fonction qui fait le tri entre les tags selon le type de la page en cours pour afficher le nouveau tag cloud. Cette fonction doit être ajoutée dans le fichier functions.php du thème enfant.

/**
* Afficher le nuage de tags lié à la catégorie ou au tag en cours
*/
function relatedTags() {
  // Création de la requête, selon le type de page en cours (catégorie ou tag)
  $criterias = array("posts_per_page" => 1000);
  $object = get_queried_object();
  if (is_category()) {
    $criterias["cat"] = $object->term_id;
  } elseif (is_tag()) {
    $criterias["tag_id"] = $object->term_id;
  } else {
    return;
  }
 
  // On boucle sur le résultat de la requête
  $tags = array();
  $query = new WP_Query($criterias);
  if ($query->have_posts()) {
    while ($query->have_posts()) {
      $query->the_post();
      $currentTags = get_the_tags($query->post->ID);
      if ($currentTags)
        foreach ($currentTags as $id => $tag)
          $tags[$id] = $tag;
    }
  }
  wp_reset_postdata();
 
  // Dans le cas de la page de tag, le tag en cours est exclu
  if (is_tag()) unset($tags[$object->term_id]);
 
  // Création du tag cloud à partir de la liste des tags récupérée
  if ($tags) {
    $include = implode(array_keys($tags), ",");
    wp_tag_cloud(
      array(
        "include" => $include,
        "format" => "list",
        "smallest" => 1,
        "largest" => 2,
        "unit" => "em"
      )
    );
  }
}

La fonction wp_tag_cloud est incluse dans WordPress. Elle permet de créer ‘manuellement’ des nuages de tags.

Ici, le principe est simple : après avoir récupéré la liste des tags des articles de la catégorie ou du tag en cours, on affiche ce nuage en ne sélectionnant que les mots-clefs de cette liste.

Les mots-clefs sont affichés dans une liste <li> grâce au format list, qu’il ne reste plus qu’à décorer.

Une autre option intéressante : le tag qui a le moins de sujets a une taille de 1em, celui qui en a le plus a une taille de 2em.

HTML

Une fois la fonction PHP qui permet l’affichage créée, il ne reste plus qu’à l’utiliser.

Comme je voudrais n’afficher les nuages de tags que sur les pages de catégorie et de tag, tout se passe dans tag.php et category.php.

Avec le thème Twenty Thirteen, je trouve judicieux d’afficher le nuage de mots-clefs optimisé juste après la barre de navigation :

[Barre de navigation]
<footer class="related-tags">
  <h1>Les autres th&egrave;mes parlant de <?php single_tag_title(); ?></h1>
  <?php relatedTags(); ?>
</footer>

Bien sûr, selon le thème que vous utilisez, libre à vous de le placer où bon vous semble.

Notez également que le titre est dans une balise <h1> qui est définie dans le footer, et prend une valeur moindre que les autre titres du même type. Ainsi, selon la logique de votre site, mettez le niveau de titre qui vous arrange (merci Thierry pour cette précision).

CSS

Enfin, décorer un peu les mots-clefs ne fera pas de mal, dans le fichier style.css :

/* Related tags */
.related-tags {
  padding: 16px 0;
  padding: 1em 0;
}
.related-tags h1 {
  font-size: 20px;
  font-size: 1.2rem;
  margin: 0;
  padding-top: 8px;
  padding-left: 16px;
}
.related-tags ul {
  list-style: none;
  column-count: 3;
  -moz-column-count: 3;
  -webkit-column-count: 3;
}

Ici, le plus remarquable est l’affichage des mots-clefs sur trois colonnes grâce à la propriété CSS column-count.

Vous pouvez remarquer que j’ai profité de ce relooking pour désenchevêtrer les tags et les faire apparaître sous forme de liste, pour ressembler un peu plus à la partie traitant des articles sur le même thème en bas de chaque article.

Le mot de la fin

En plus d’améliorer l’ergonomie du blog, avec une liste de tags plus lisible, ce nouveau nuage de mots-clefs améliore son maillage interne, pour peut-être gagner quelques places sur les pages de résultat des moteurs de recherche. C’est une affaire à suivre.

Cet article vous a été utile ? Partage it !

8 réflexions au sujet de « Optimisez les nuages de tags avec WordPress »

  1. Bonsoir David,
    Bravo pour votre site et merci pour cette idée d’optimisation que je vais tester ASAP.
    Par contre, vu que vous cherchez à optimiser votre référencement (déjà plutôt bon!) et en accord avec le bon vieil adage « dans le doute googlien, abstiens-toi », j’éviterais à votre place de multiplier les H1 à outrance (3 dans cette seule page).
    J’ai réagi en fait en voyant vos exemples html et css qui montrent l’utilisation de cette balise, ce qui risque d’inciter vos lecteurs à en faire de même.
    Si l’on se réfère aux « bonnes pratiques », un H1 unique par page qui doit-être « focus » sur le sujet principal.
    Cordialement,
    Thierry

    1. Bonsoir Thierry,
      Merci pour votre commentaire.
      En fait, j’invite bien mes lecteurs à en faire de même 🙂
      Pour enfoncer un peu le clou : les pages d’accueil, de catégories et de tags comportent douze h1 chacune !

      Pour argumenter ma position :
      – les trois h1 de cette page et les douzes des pages précitées viennent du thème Twenty Thirteen (livré avec WordPress), qui est à mon avis plutôt bien fait côté référencement
      – ces titres h1 sont insérés dans des sections HTML5 différentes : dans la balise header, dans des balises article et dans la balise footer de la page. Ainsi ces différents h1 ont des valeurs différentes.
      J’explique ce principe sur cette page sur la structure d’une page en HTML5.

      Ce principe est également défendu par Raphaël Goetter d’une part, et d’autre part Daniel Roch qui explique avec test à l’appui que plusieurs H1 peuvent se côtoyer et être efficaces.

      A partir du moment où la page a une structure correcte, il ne devrait pas y avoir de problème.
      C’est l’inverse qui peut poser problème. Par exemple : changer les titres h2 d’une page d’article en h1 serait illogique, et serait certainement vu comme une désorganisation du contenu par les robots des moteurs de recherche. Et peut-être même comme une sur-optimisation.

      Je ne suis absolument pas un expert en SEO, j’ai peut-être tort sur ce point, mais cette bonne pratique est discutable et discutée.
      Pour le moment j’ai choisi mon camp, ces h1 répétés sur la même page existent depuis longtemps sur ce blog, et cette pratique semble porter ses fruits.
      Après, chacun est libre de faire comme il l’entend, mais une chose est sûre, comme vous le dîtes : il ne faut jamais abuser en SEO.

      David

      1. Merci de cette réponse détaillée et argumentée.
        Pour tout dire, je me doutais que vous le faisiez « en toute connaissance de cause ».
        Ma remarque tiens surtout au fait que votre exemple, repris comme tel, peut être utilisé sur des sites nettement moins bien hiérarchisés et « html5isés » que le vôtre.

        Quant aux analyses et tests de nos excellents confrères (nettement plus compétents que moi), je ne les remets pas en cause mais je ferais deux remarques :
        – Dans l’article cité, Raphaël Goetter a une conclusion prudente, ce qui l’honore mais laisse planer le doute.
        – Les résultats des tests de l’expérimenté Daniel Roch ne sauraient être mis en doute… mais peut-être les conditions de ces tests sont-elles à la fois « mauvaises » et « trop bonnes » ? Car les pages utilisées sont différentes (forcément !) et hébergées sur un site dont la qualité de référencement et la réputation n’est plus à faire (ce n’est pas le sous-domaine « labo » qui y change quelque chose). Quel serait le résultat sur un site tout juste mis en ligne ? Et sur deux pages identiques ? (ça c’est le test impossible…)

        Je suis clairement à mes limites de compétence mais, de ce fait, j’ai tendance à expliquer à mes clients qu’il vaut mieux « faire simple ». Et le plus simple est de structurer ses contenus en respectant une hiérarchie « affirmée ».
        Par contre, n’étant ni un intégriste du SEO, ni le défenseur d’une chapelle ou d’une (vieille) école, cette prudence affichée ne m’empêchera pas de faire un jour, pourquoi pas, le test pour mon propre compte.

        Pour le reste, nous sommes en effet dans les limites de l’interprétation : pour ma part, je constate volontiers que vos « H1 bien structurés » semblent ne pas nuire à votre référencement; pas qu’ils l’améliorent forcément… Je pense que la qualité de votre contenu et l’identité de votre blog sont les principaux facteurs de vos excellents résultats (sisi !).

        Au plaisir d’échanger à nouveau avec vous,
        Amicalement,
        Thierry

        1. Bonjour Thierry,
          Merci pour votre réponse tout aussi argumentée 🙂
          J’ajoute une note l’article pour indiquer que l’ajout du H1 est réfléchi et suis une logique, pour n’induire personne en erreur.
          Encore merci 🙂
          David

  2. C’est pas bête du tout. Ca pourrait faire l’objet d’un petit plugin WP.

    Pour ma part je désactive les pages de tags/catégories, mais si on pouvait choisir que les tags s’affichent sur les ‘articles’ en insérant les tags relatifs à la ‘catégorie’ de cet article ça serait top !

    1. Bonjour JC,
      Facile, il suffit dans ce cas d’ajouter cette condition avec les autres :
      elseif (is_single()) {
      $criterias[« cat »] = $object->term_id;
      }
      Et d’ajouter le code HTML dans content.php.
      David

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Si vous le souhaitez, renseignez le champ 'Nom' de cette façon : 'VotreNom@VotreMotClef' pour obtenir une ancre optimisée pour les moteurs de recherche.