Étude de cas Comptoir de Bricozor : un thème Wordpress sur mesure optimisé pour le SEO

Les premières réunions de travail nous ont permis de définir les objectifs de notre mission :

1. Installer un nouveau site WordPress avec un thème sur mesure et notre outil de saisie de contenu ;
2. Intégrer une nouvelle charte graphique fournie par une graphiste indépendante ;
3. Conserver les URL de l’ancien site.

Rappelons les 3 piliers du référencement naturel :

1. Le socle technique ;
2. Le contenu éditorial ;
3. L’acquisition de liens venant d’autres sites ou backlinks.

Le choix de WordPress nous paraît évident pour ses nombreuses qualités, mais plus encore pour les fonctionnalités nécessaires au SEO : affichage rapide, back-office parfaitement adaptée aux rédacteurs web, des plugins pour le SEO et l’optimisation des performances, etc.

La vitesse de chargement des pages est un critère de plus en plus important aux yeux des moteurs de recherche, en particulier de Google. C’est pourquoi nous concentrons nos efforts sur deux points critiques impactant les performances :

• Mise en place des meilleures pratiques de développement pour notre thème sur mesure, responsable de l’affichage des pages :
  • Tailles d’images conditionnelles en fonction de la largeur d’écran, au bon format et suffisamment compressées ;
  • Framework CSS moderne et performant : TailwindCSS ;
  • Utilisation modérée du code Javascript, concaténation et compression de plusieurs scripts en un seul pour un chargement plus rapide ;
  • Limitation des effets de recalcul de rendu (article en anglais), très gourmands en ressources pour le navigateur.
• Hébergement sur notre serveur dédié chez Alwaysdata pour ses performances et la maîtrise sur la stack technique.

L’équipe de Bricozor a commencé par lister tous les articles existants, plusieurs centaines, et a sélectionné ceux qui allaient être repris dans le nouveau site, avec la plupart du temps une mise à jour des informations. Les autres articles ont été soit intégrés dans d’autres au sujet plus large, ou bien complètement abandonnés. Elle a ensuite classé tous ces articles dans une nouvelle arborescence plus intuitive.

Ce travail de rédaction et d’organisation ne serait cependant pas exploité au maximum de son potentiel SEO sans une interface de saisie adaptée.

Dans WordPress, la saisie de contenu se fait par défaut dans Gutenberg, outil permettant d’assembler différents blocs (titre, texte, image, etc.). Il existe aussi des plugins de composition de page ou page builders, avec des blocs personnalisables à glisser-déposer, qui sont très populaires. Ces outils ont pourtant un écueil de taille : ils mélangent le fond et la forme, dans l’interface de saisie mais aussi dans la manière de stocker les blocs dans la base de données.

Le fait de mélanger le fond et la forme interdit l’exploitation sémantique du contenu, et complique tout changement dans la charte graphique, même partiel.

Notre approche de la saisie de contenu, similaire en apparence, est en réalité bien différente. Notre outil, le Flexible Content, propose lui aussi des blocs à assembler dans l’ordre voulu, mais ces blocs doivent être choisis en fonction de la signification qu’ils véhiculent, non pas de leur apparence visuelle. Nous proposons donc des blocs inhabituels, comme « Définition(s) » ou « Tutoriel », qui dans un autre outil seraient construits avec des blocs standards comme Titre, Texte, Image.

Les avantages sont nombreux. Tout d’abord, le rédacteur se concentre sur la valeur sémantique de ce qu’il est en train de saisir. Il doit se poser la question : ce que je suis en train d’écrire, est-ce un simple titre ? Est-ce une définition ? Ou une étape de tutoriel ?

Ensuite, il ne s’occupe jamais de l’apparence de ce qu’il écrit, car elle est figée, pour plusieurs raisons :

• Respecter la charte graphique ;
• Prendre en compte les contraintes liées à l’affichage sur différentes tailles d’écran (affichage responsive).

Enfin, lorsque nous codons le thème qui affiche les articles, nous ajoutons des structures de données spéciales, cachées, en fonction de la sémantique de certains bloc. Il peut s’agir de balises HTML dédiées, comme <dl>, <dt>, <dd> pour des définitions, ou bien des schémas spéciaux comme un tutoriel, des questions fréquentes, une vidéo, etc.

Ces structures cachées sont lues par les moteurs de recherche comme Google, Bing et d’autres. Elles les aident à mieux « comprendre » le contenu qu’ils indexent, afin de répondre avec toujours plus de pertinence aux utilisateurs.

Le résultat, combiné à d’autres facteurs (autorité du domaine, des liens entrants sur la page, etc.) est l’obtention de la position zéro sur la page de résultat (la SERP pour Search Engine Results Page), c’est-à-dire la plus haute possible, même avant les annonces payantes, position qui offre le taux de clic maximum.

Dernier outil d’aide à la saisie, le plugin gratuit Yoast SEO qui permet de saisir le titre d’un article et la description qui sera affichée dans les moteurs de recherche, avec plusieurs assistants visuels permettant d’en optimiser la longueur, le contenu en mots clés, etc.

Un facteur positif pour l’expérience utilisateur (et donc pour l’optimisation du référencement naturel) est la densité du maillage interne, c’est-à-dire les liens pertinents entre les pages du site. Cela permet au visiteur et au moteur de recherche d’explorer le site par un autre chemin que celui imposé par le menu principal, en proposant des articles à la thématique proche de celle de l’article en train d’être lu.

Là encore, nous proposons un bloc pour créer des liens internes, « Articles liés », qui permet au rédacteur de choisir le ou les articles à proposer en cours ou en fin de lecture.

Le maillage est aussi assuré de manière automatique grâce à plusieurs éléments :

• Le fil d’Ariane, qui permet de remonter à la catégorie de l’article, afin d’en découvrir de nouveaux sur le même sujet. Ce fil d’Ariane est lui aussi balisé avec des données structurées cachées pour que les moteurs sachent l’identifier ;
• Des listes d’articles pertinents, par exemple les plus récents de la même catégorie.

Grâce à la parfaite connaissance des problèmes de leur public et la mobilisation de plusieurs rédacteurs spécialistes de leur thématique, Bricozor a su produire des articles nombreux (au rythme de 8 par mois en moyenne), étoffés (entre 500 et 1000 mots) et de qualité. Ainsi, de nombreux autres sites (blogs, forums, etc.) font un lien vers un article du site, c’est ce qu’on appelle un lien entrant ou backlink.

Les moteurs de recherche fonctionnent en analysant le contenu de chaque page du web. Grâce à divers critères, ils identifient le sujet traité. Cette phase d’indexation terminée, comment classer toutes les pages trouvées sur différents sites traitant du même sujet ? Les moteurs de recherche se servent pour cela d’un indice naturel de popularité : le nombre et l’autorité des liens pointants vers chaque page candidate à ce classement. Pour simplifier à l’extrême, disons que le premier résultat naturel sera la page qui compte le plus de liens entrants et qui ont la plus grande autorité.

L’autorité d’un domaine vient de plusieurs facteurs : sa notoriété, son ancienneté, le nombre de pages elles-mêmes bien classées, la fréquence de mise à jour, le respect des bonnes pratiques du référencement, etc. Exemple : les sites de grands journaux, les sites gouvernementaux, etc.

Certains sites sont tellement vastes et couvrent des sujets tellement différents qu’un seul lien de leur part vers une page quelconque fausserait complètement les calculs des moteurs. Ces sites sont donc exclus du calcul : Facebook et les réseaux sociaux en général, Wikipedia, etc.

La nouvelle charte nous a été fournie par Justine Tzvetkovski, qui est habituée à travailler avec Bricozor. Cette collaboration fût un vrai plaisir pour nos intégrateurs, car Justine connaît les contraintes du web et nous a fourni les maquettes et les instructions pour plusieurs tailles d’écran : mobile, tablette et ordinateur de bureau.

Un des critères importants en SEO est la stabilité des URL. En effet, une URL d’une page qui ne change pas (mais dont le contenu peut être mis à jour, enrichi) est un signal de sérieux et de résilience pour les moteurs de recherche.

Après avoir cartographié toutes les pages de l’ancien site, Bricozor nous a fourni une liste d’URL :

• reconduites à l’identique ;
• redirigées vers une autre URL (redirection 301) ;
• abandonnées,  renvoyant une erreur 404 « Page introuvable ».

Le blog avait été créé avec un format d’URL différent du format par défaut de WordPress. Heureusement, WordPress offre un mécanisme permettant de faire des modifications à chaque étape de l’exécution de son code, et nous avons pu modifier de manière générale le format d’URL pour conserver l’ancien.

Pour mesurer l’évolution du référencement d’un site, on peut regarder le nombre et la position moyenne d’apparitions d’une page du site dans les résultats de recherche. Nous utilisons pour cela Ahrefs, un outil qui recherche en permanence sur Google des millions de mots clés et enregistre les pages de résultats. Il peut donc dire sur combien de pages de résultats et à quelle position une page du site apparait en moyenne.

Nous voyons ici le nombre de mots clés dont les résultats contiennent le blog Bricozor en page 1 (il y a 10 emplacements de résultats naturels sur une SERP de Google).

La courbe foncée (« 1-3 ») représente les 3 premières places de la page 1 de résultats, ceux qui sont les plus cliqués en général. La courbe claire (« 4-10 ») montre les autres places de la page 1, qui sont bien sûr importantes mais apportent déjà beaucoup moins de clics.

Nous pouvons constater que la progression dans les résultats de recherche se traduit bien par une augmentation de la fréquentation dans les statistiques fournies par Google Analytics :