En quoi le Web Design influence-t-il sur le référencement de votre site ?

Est-ce que le webdesign entrave le référencement de votre site internet ?

Une question que beaucoup d’internautes se posent.

Le fait de vouloir un très beau site pour votre société augmente la difficulté du développement en front-end, c’est certain.

En plus, tous les intégrateurs ou webdesigner entrepreneurs ne sont pas “SEO Friendly”.

L’expérience utilisateur sur votre site web est sans doute l’un des facteurs clefs pour convertir vos visiteurs.

• Mais comment faire en sorte qu’elle soit optimisée pour le SEO ?
• Quels sont les facteurs clés qui permettent d’améliorer la qualité de vos pages ?

C’est l’échange que j’ai eu avec Kevin Benabdelhak, graphiste indépendant chez K-GRAPHISTE qui vous dévoile ces astuces pour améliorer l’interface graphique et l’expérience utilisateur de votre site internet.

Pourquoi le WebDesign influe-t-il sur votre référencement SEO ?

En Référencement Naturel (SEO), il y a de nombreux facteurs à prendre en compte pour le positionnement d’une page sur le moteur de recherche Google.

Vous vous demandez sans doute si votre balise <title> est bien optimisée, ou si votre page respecte la bonne intention de recherche de votre audience.

Mais avez-vous également pensé à la structure de vos pages ?

Enfin, je ne parle pas de l’architecture du site, mais à la structure de la page Web (sidebar, image mise en avant, commentaires…).

En webdesign, il est également important de bien penser à la mise en page, aux couleurs de votre site, aux polices d’écriture et au décor.

Avec un design frappant, vos lecteurs se sentent plus facilement à l’aise une fois sur votre site web.

Votre site doit être agréable à visiter, d’autant plus qu’il faut très peu de temps à votre internaute pour se faire un avis sur votre marque.

D’un autre côté, le webdesign de votre site web ne doit surtout pas gêner les robots d’exploration de Google.

Alors voici les 4 principes en guise d’introduction :

• Le webdesign est indirectement un facteur de classement. Par exemple, une écriture trop petite, un contenu qui dépasse la largeur de la page… entravent l’expérience. D’autres peuvent occulter certaines parties de votre site. Alors, optimisez vos réglages pour que votre site soit parfaitement accessible, facilement depuis toutes tailles d’écrans ou navigateurs,
• Si votre webdesign n’est pas assez travaillé et que cela influe sur le référencement naturel de votre site, il se peut même que Google n’indexe même plus votre blog.
• Les critères de positionnement sont basés sur un ensemble de spécificité sur votre site, ils sont représentés en grandes parties par 3 piliers : la technique, le contenu et la popularité.
• Le webdesign influe énormément sur votre taux de rebond : un beau site qui apporte un contenu qualitatif éveille bien plus la curiosité.

Comment travailler votre Web Design pour ne pas nuire au référencement ?

Il n’y a pas de règles figées dans le marbre.

Par contre, voici 5 principes à respecter en Web Design pour ne pas entraver le SEO de votre site Internet.

1. Le jeu de couleurs

Un lien blanc sur blanc n’est clairement pas accessible.

D’ailleurs, cette pratique est pénalisée par Google. Votre page pourrait donc bien se retrouver en bas de la SERP…

En modifiant le design de votre page, il se peut que les couleurs ne soient pas optimisées pour une lisibilité maximale, notamment pour assurer une bonne expérience aux personnes voyantes.

J’imagine aussi que vous êtes d’accord avec moi quand je dis que c’est frustrant de ne pas avoir une bonne lisibilité.

Pour régler la couleur d’un élément sur votre page, pensez à ajouter ces propriétés CSS dans la classe de votre élément :

• La couleur d’un texte : color,
• La couleur d’un fond : background-color. Vous devez savoir que le contraste est très particulier en SEO,

D’ailleurs, un outil comme LightHouse permet de réaliser un audit one-page sur votre site internet.

Ainsi, vous découvrez les erreurs en termes d’accessibilité et/ou de lisibilité.

2. La taille de la police d’écriture

La taille de la police d’écriture sur une page web est sous-estimée d’un point de vue SEO.

Pour commencer, il est préconisé de dépasser les 16 px en termes de taille de police.

Cependant, toutes les familles de police ne se valent pas.

En effet, leurs caractères sont différents et par conséquent, leurs tailles aussi.

Il est important que vos textes soient facilement visibles, et cela, sur un téléphone ou sur un écran géant).

D’ailleurs, il est possible d’optimiser vos polices pour qu’elles soient d’une différente taille en fonction de la taille d’écran.

Les experts en Web Design parlent alors de police responsive !

D’ailleurs, beaucoup de thèmes WordPress incorporent cette fonctionnalité.

3. La vitesse de chargement des images

Je suppose que vous n’aimeriez pas que votre site prenne 10 secondes à charger.

Vous n’êtes pas le seul : vos visiteurs détestent ça et s’en iront très rapidement si c’est le cas.

Alors, comment faire pour accélérer la vitesse de chargement de vos images ?

La majorité du temps de chargement est due aux images.

C’est pourquoi avoir trop d’images non optimisées sur son site web le ralentit significativement.

Voici quelques recommandations :

• Insérer vos images au bon format. Le format WebP est de plus en plus utilisé de nos jours. Il permet notamment d’établir une compression plus poussée qu’un fichier .JPG tout en gardant une qualité optimale.
• Insérer vos images au format vectoriel. L’utilisation du format .SVG peut également être une merveilleuse solution pour conserver la qualité quel que soit le support.
• Définir la bonne taille d’image. La taille de votre image influe clairement sur son poids. Plus elle est grande, plus elle détient de pixels à traiter. Et donc, plus elle est lourde. Faites en sorte que la dimension de l’image soit la même à l’export et à l’intégration sur votre site. Pour une image dans un article, je vous conseille d’opter pour 1600 px de largeur.
• Pour une raison ou une autre, si la taille de votre image doit être haute (par exemple 2600px), alors vous pourrez optimiser sa qualité (la faiblir un peu) sur un logiciel de graphisme. Par exemple, Photoshop gère très bien cet outil d’optimisation dans la fenêtre d’export.
• Mettre les images en cache. Il est astucieux d’installer un système de cache sur votre site. Vous pouvez par exemple utiliser WP Rocket pour ça !
• Installer un Lazy Load : ce système permet de faire charger les images au moment où elles deviennent visibles. Cela permet donc de gagner de précieuses millisecondes lorsqu’un utilisateur se rend sur une page en ne chargeant pas les images sous la ligne de flottaison.

4. Mobile first : Le Web Design et l’ergonomie en SEO

Le fait qu’une page ne soit pas adaptée pour mobile est un facteur négatif.

Il vous est donc indispensable de réfléchir à votre site sur mobile. Les meilleurs web designers vous proposeront un site en responsive design.

Mais en 2022, cela ne s’arrête pas là.

Votre site doit être réellement conçu pour le “mobile first”.

Autrement dit, lorsque vous consultez votre site, veillez bien à ce que toutes les informations affichées sur un écran d’ordinateur, sont également présentes et visibles sur votre mobile.

Parfois, certains thèmes WordPress ne respectent pas ce point crucial, notamment sur les mégamenus qui ne s’affichent que sur les PC et très mal sur les téléphones.

Si jamais un problème survient, Google Search Console devrait vous le signaler.

Vous pouvez également faire un test LightHouse depuis votre navigateur Chrome.

Évidemment, toutes les optimisations à faire sur une page web ne sont pas indiquées clairement ni très bien expliquées.

Essayez de rendre votre site design, mais le plus simplement possible (par exemple, évitez les carrousels).

5. Les balises Hn en SEO

L’importance du titre de votre page et de ses différents sous-titres est un des facteurs les plus importants dans votre référencement.

Par ailleurs, ils sont optimisés pour votre stratégie de contenu, votre ligne éditoriale (et un peu pour les robots).

Mais surtout, il est crucial de correctement hiérarchiser vos articles, de façon à ce que chaque partie de l’article corresponde à un “sous-sujet”.

Voyez ça comme un livre :

• La couverture : l’appel de l’article sur la page d’accueil,
• La première page : le titre et l’extrait de votre article (Le premier paragraphe),
• La deuxième page : le sommaire,
• Les péripéties : votre récit au complet. Ces péripéties sont divisées en plusieurs chapitres. Mais ces chapitres ne sont pas reliés par un “Espace-temps”, sauf si votre article parle d’un sujet avec un ordre bien précis (par exemple, l’histoire d’un film),
• La dernière page : Les articles en rapport, l’auteur, les commentaires… Il est également possible d’avoir cette approche non pas uniquement sur votre page, mais sur votre site en entier.

Les balises Hn de vos péripéties sont donc très importantes pour garder une cohérence globale sur votre site.

Venons-en au fait.

Beaucoup de thèmes WordPress ne respectent pas cette hiérarchisation en HTML.

En effet, un thème WordPress se vend par sa beauté, le design qu’il incorpore, les fonctionnalités…

Par contre, très peu de personnes vérifient les balises qu’ils génèrent.

Voici mon retour d’expérience :

• Dans la plupart des cas, des balises <h3> sont répertoriées dans le footer,
• Le <h1> dans le logo est une grossière erreur en termes d’optimisation. C’est une balise HTML puissante et qui doit être utilisée exclusivement sur un titre.
• Et souvent, des contenus du type “produits relatifs”ou bien “avis sur cet article ?” ne sont pas optimisés également.

audrey : merci Kévin pour ces conseils pertinents sur l’influence du design d’un site sur son SEO. Je me permets d’ajouter que dans un souci de cohérence visuelle, il est indispensable de définir, puis de respecter une charte graphique.

FAQ – 3 questions fréquentes sur l’impact du Web Design sur le SEO

Le webdesign est-il un facteur de positionnement ?

Non, mais un ’super beau’ site peut générer des contraintes techniques en termes de référencement. Si vous ne respectez pas certaines règles sur la structure de votre site, l’expérience utilisateur et la lisibilité, cela va influer sur votre positionnement.

Comment savoir si le webdesign de votre site interfère sur son SEO ?

Pour savoir si votre webdesign fait indirectement chuter votre site dans les pages de résultats de Google, auditez votre site en termes de SEO. Servez-vous d’un ou plusieurs de ces outils : LightHouse, GTmetrix, SEMrush, Ahref, Ubersuggest…

Comment ’optimiser’ le webdesign d’un site pour le référencement ?

Partir d’une maquette avant le développement est le plus grand atout d’un web designer. Ensuite, pensez à chaque optimisation technique en HTML et en CSS pour que votre site soit ‘SEO-Friendly’. Utilisez les balises recommandées et adaptées à votre contenu éditorial. Servez-vous d’outils comme WP Rocket pour la gestion du cache et Imagify pour compresser vos images.

Conclusion sur l’impact du webdesign sur votre référencement

La création ou la refonte d’un site web permet de réaliser des choses fabuleuses, comme améliorer l’expérience utilisateur, vos mises en pages ou bien des éléments plus spécifiques comme la taille de votre police d’écriture.

Certaines préconisations doivent tout de même être prises en compte pour que Google comprenne bien votre page et son sens. Il est donc indispensable de respecter les balises HTML fondamentales, ainsi que de ne pas perturber la compréhension de votre site auprès des moteurs de recherches.

Pour conclure cet article, vous devez comprendre qu’il est important que votre webdesign n’interfère pas avec les spécificités techniques que vous mettez en place pour optimiser votre SEO.

Pour poursuivre, voici d’autres bonnes pratiques UX/UI pour améliorer votre site web.

Vous avez d’autres astuces à partager sur l’impact du Web Design sur le SEO de votre site ?