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.

Dans l’exemple ci-dessus, le poids de l'image redimensionnée en 640 x 268 serait de seulement 106 Ko : cette image se serait affichée dix fois plus vite si des optimisations mobiles avaient été effectuées en amont.

Tous les éléments nécessaires à l’intégration de différentes images en fonction de la taille d’affichage d’un appareil sont disponibles sur https://responsiveimages.org/. Ces éléments doivent être pris en compte lors des développements afin que différentes images soient générées (lors de l’upload par les contributeurs) pour un affichage sur tous les types d’appareils en fonction des points de rupture définis par le Responsive Web Design. Le navigateur n’appellera que le format adéquat, ce qui limitera la quantité de données transitant entre le serveur web et l’utilisateur final.


Fig. 5. Images avec un poids et une résolution adaptée à chaque appareil.

Certains systèmes de gestion de contenu étant moins souples que d’autres, la sensibilisation des développeurs au temps de chargement en début de projet leur permettra de développer le nouveau site web, tout en gardant la vitesse de chargement à l’esprit lors de la création du code qui rendra le site opérationnel, avec l’ensemble des fonctionnalités qu’ils auront développées.

Le graphisme et ses impacts

Le graphisme peut également avoir des impacts sur une stratégie SEO : avec l’importance accordée au mobile, Google se préoccupe de plus en plus des problématiques liées à l’ergonomie et à l’expérience utilisateur. Des facteurs comme la taille des boutons sur smartphone, la taille des caractères ainsi que l’espacement entre ces éléments seront analysés par le moteur, afin que l’expérience utilisateur ne soit pas dégradée dans les sites qu’il propose parmi ces résultats de recherche.

C’est d’ailleurs pour cette raison que Google met en avant ce type de problématiques directement dans la Google Search Console depuis quelques temps (Onglet « Trafic de recherche > Ergonomie mobile ») :

 


Fig. 6. Recommandations liées à l'ergonomie dans Google Search Console.

 

LE SEO, c’est l’affaire de tous

Une refonte de site demande donc l’intervention de plusieurs acteurs, qu’il sera nécessaire de sensibiliser au SEO pour donner toutes ses capacités de positionnement au futur site. Le référenceur aura plusieurs interlocuteurs et devra travailler main dans la main avec les graphistes, ergonomes, développeurs et intégrateurs HTML pour faciliter la visibilité du site refondu, et éviter des adaptations futures.

Des validations de chaque gabarit de page, à la fois lors de la création des maquettes fonctionnelles mais aussi pendant les phases d’intégration, permettront de valider le projet à chaque point clé pouvant impacter le SEO.

Le changement de structure d’URL n’est pas un passage obligé

Une refonte de site web peut parfois déboucher sur une modification partielle ou intégrale de la structure des URL, ce qui demandera la mise en place d’un plan de migration :  la conservation des anciennes URL n’est pas toujours possible pour éviter un plan de redirection.

Un changement de système de gestion de contenu ou une simplification d’un ancien schéma de structure d’URL peut engendrer la mise en place de nouvelles URL, avec des redirections 301 qui seront placées sur le serveur grâce à une table de correspondances.

Dans tous les cas, il est essentiel de faire correspondre des pages similaires entre elles lors des redirections, et d’éviter les redirections massives vers une seule et même page (ex : page d'accueil) : cela pourrait être considéré comme une tentative de manipulation de l’algorithme, et avoir l’effet inverse de celui escompté (tout en augmentant l'apparition de Soft 404 dans la Search Console).

Une refonte est également opportune pour faire le point sur les performances SEO d’un site : types de pages les plus efficaces, catégories les plus génératrices de trafic, articles les plus visibles sont autant de points à examiner. Cela vous permettra de tirer des enseignements sur ce qu’il faut reproduire et/ou modifier lors de la refonte.

Le SEO au cœur du projet de refonte

Une refonte fait donc appel à diverses compétences, qui devront inclure dans leur réflexion la composante « référencement naturel », cette dernière faisant partie intégrante des développements qui peuvent toucher un site lors d’une refonte graphique et/ou fonctionnelle. L’analyse de l’existant qui sera abordée dans le prochain article de la lettre « Recherche et Référencement » le mois prochain vous permettra d’orienter au mieux la stratégie SEO d’un site en prévision d’une refonte.


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

 

Articles similaires :