Ces dernières années, les refontes de sites web ont été légion. Refondre son site web ne consiste pas seulement à effectuer une simple retouche cosmétique pour mieux séduire l’internaute, mais bel et bien à mettre en place une stratégie e-marketing afin de répondre de la façon la plus adaptée aux besoins des internautes, en ciblant au mieux leurs intentions, tout en leur permettant de transformer dans les meilleures conditions possibles, quel que soit l’appareil qu’ils utilisent. Et le SEO détient une part prépondérante dans cette stratégie. Cette série d'articles a pour vocation de prendre en compte chacune des étapes d'une migration afin de garder une situation la plus pérenne possible, voire même de l'améliorer.

Par Aymeric Bouillat


Une migration de site web est donc un projet stratégique pour toute entreprise ou activité économique. En parallèle, l’évolution du trafic mobile et les multiples incitations de Google à passer au HTTPS demandent aux éditeurs d’avoir une vraie réflexion sur la capacité de leur site à être « mobile-friendly » et sécurisé, au risque de voir passer la concurrence devant eux dans les pages de résultats (les sites mobiles et HTTPS pouvant bénéficier non seulement d’une prime de ranking à qualité de page égale dans les pages de résultats, mais aussi et avant tout d’une meilleure adhésion des internautes à leur environnement web).

Nous verrons dans cette série d’articles les différents enjeux d’une refonte de site web, ainsi que les étapes d’une refonte, mais voici en premier lieu les principaux points d’attention qu’il faudra avoir, les refontes faisant appel à des compétences multiples. Une refonte, c’est surtout l’occasion de mieux faire sur plusieurs tableaux, et cela demande des compétences variées.

Le SEO, fil conducteur d’une refonte

Qu’il s’agisse de la structure, de la technique, de la sémantique ou encore de l’UX, chacun de ces éléments peut avoir un impact sur la visibilité d’un site dans les pages de résultats. Cela implique que le SEO doit être le fil conducteur d’une refonte. La personne ou l’équipe en charge du référencement naturel doit donc travailler en collaboration avec différents cœurs de métiers : une gestion de projet pointue sera nécessaire pour mener à bien une refonte, tout en en prenant en compte les besoins liés au SEO à chaque étape.

La structure du site : une collaboration nécessaire entre de nombreux interlocuteurs

La structure d’un nouveau site web lors d’une refonte peut provoquer la modification de plusieurs éléments cruciaux pour le SEO dont :

  • Le maquettage structurel (wireframe) : il doit être passé en revue par les référenceurs, afin qu’ils s’assurent de la présence des éléments utiles au SEO composant chaque gabarit de page.Les sections de contenu rétractables pouvant masquer une partie du contenu d’une page réduiront l’importance du texte qu’elles contiennent pour Google. L’algorithme est tout à fait en mesure d’identifier les contenus qui seront présentés aux utilisateurs en provenance des pages de résultats de son moteur, et pourra donner moins de visibilité aux pages présentant des contenus qui ne sont pas directement visibles pour les internautes (bloc rétractables, contenu derrière un onglet), en attendant l'Index Mobile-First qui lui prendra bien en compte les textes en dessous du pli sur Mobile.
    Ces maquettes seront le point de départ des recommandations liées au référencement naturel, impacté par les éléments contenus dans les futures pages du site

    Par ailleurs, les pages comportant trop d’espaces publicitaires pourront être dévalorisées par le moteur, de nombreux sites en ont fait les frais avec la mise à jour de Google nommée « Fred », implémentée cette année, et qui cible également la qualité des pages.

  • La navigation et les liens internes : ils font partie des éléments primordiaux pour le référencement naturel, et doivent être pensés en fonction des besoins SEO, mais aussi des contraintes visuelles des ergonomes et graphistes. L’absence de fil d’Ariane pourra avoir un impact négatif sur le SEO, celui-ci permettant de diffuser la popularité des pages profondes aux pages de niveau supérieur via le maillage interne, sans oublier qu’il facilite également la navigation des internautes qui arriveraient sur une page profonde et souhaiteraient remonter dans l’arborescence.La relation entre les différents gabarits de page via le système de liens décrira le cœur du maillage interne : il est capital de vérifier que chaque type de page soit correctement distribué par les liens : une fiche produit qui ne ferait pas de liens vers la marque du produit représenterait un trou dans la raquette dans la diffusion de la popularité. On veillera également à ce que l’utilisation du Javascript soit faite de façon modérée, pour limiter les problématiques de crawl et d’indexation du contenu des pages.
  • Enfin, la structure des pages et du code HTML : elle devra être analysée avec un regard SEO pour vérifier la bonne implémentation des balises importantes comme les balises headings (h1, h2, h3, etc.), canonical, meta, ou encore les microdonnées qui pourront être testées via l’outil de Google dédié à cet effet : https://search.google.com/structured-data/testing-tool  

 

La technique : sensibiliser les intégrateurs et développeurs

Google étant de plus en plus sensible au temps de chargement, tout comme les internautes en situation de mobilité avec une mauvaise connexion Edge, il est indispensable que ce critère soit pris en compte par les développeurs lors de refontes. Voici les éléments qui peuvent être pensés tout au long du projet pour optimiser des performances de pages web :

  • Ne pas placer de codes JavaScript et CSS qui bloquent l'affichage du contenu au-dessus de la ligne de flottaison. Le chargement asynchrone des fichiers Javascript et le placement des styles CSS liés aux contenus situés au-dessus de la ligne de flottaison directement dans le code HTML permettront d’améliorer ce point. Ces éléments doivent être pensés lors de l’intégration HTML pour éviter des adaptations plus fastidieuses une fois le site en production.

  • Fig. 1. Affichage bloqué au-dessus de la ligne de flottaison par des fichiers Javascript.

  • Réduire la taille des ressources, que cela soit la page HTML les fichiers JS ou CSS. Cela sera possible en utilisant la compression côté serveur (gzip ou deflate), mais aussi en « minifiant » ces éléments, technique qui consiste à supprimer les espaces, retours à la ligne et autres lignes vides pour alléger les fichiers. L’élimination de certains styles redondants entre plusieurs feuilles de styles sera également bénéfique au futur site.Des outils en ligne tel que http://www.minifier.org/ permettent d’effectuer ces optimisations visant à réduire la taille du code. Le gain de poids peut parfois sembler assez faible, mais il aura toute son importance pour les internautes en situation de mobilité.

  • Fig. 2. Exemple de réduction du poids du code d'un fichier CSS.

  • Combiner les Javascript et les feuilles de style CSS permettra également de limiter le nombre de requêtes vers le serveur. Il n’est pas rare de voir plusieurs dizaines de fichiers de ce type augmenter le délai d’affichage d’une page web. Un regroupement est donc à prévoir dès le début des développements du futur site.

  • Fig. 3. Fichiers JS et CSS regroupés.

  • Optimiser les images afin de réduire le poids des pages. En effet, le poids d’une page web est composé en majeure partie d’images : la compression et les dimensions des images ne sont pas toujours adaptées au contexte de l’utilisateur. Ainsi, il conviendra de compresser les images (avec des outils comme https://kraken.io/web-interface ou encore http://resmush.it/ via une API), mais également de prévoir différentes versions de chaque image dans le cas d’un site responsive, afin d’éviter qu’une image de grande dimension soit téléchargée sur un écran avec un affichage réduit.


Fig. 4. Image affichée en 640 x 268 sur mobile, mais qui en réalité est plus grande,
image téléchargée : 1600 x 670 pixels soit 1,12 Mo.

La suite de cet article est réservée aux abonnés.

Aymeric Bouillat
Consultant SEO Senior, SEO Hackers (https://seohackers.fr/)