Design graphique & SEO

Vous souhaitez soigner l’aspect de votre site web tout en optimisant votre référencement naturel sur Google ?

Découvrez l’intérêt du design graphique dans votre stratégie de référencement naturel (SEO) !

Table des matières

Le design en SEO : Un impact indirect sous-estimé

Tout d’abord, il faut comprendre que réussir sa stratégie de référencement naturel n’est pas seulement une question d’acquisition de trafic. Votre site web doit avoir un objectif clair : Vendre vos solutions.

Que vous soyez un formateur, un prestataire de services ou un média, les solutions de votre entreprise doivent être mise en avant.

C’est là que le design graphique intervient.

Prenons un exemple : 

  • Vous êtes sur Google et vous recherchez une agence SEO
  • Vous arrivez sur le site de Paul Vengeons 
  • Vous voyez un gros bouton jaune “Prendre Contact”
gif paul vengeons

Dans cet exemple, la mise en avant du CTA ne fait que renforcer l’atteinte de l’objectif de la page, à savoir, convertir via un formulaire de contact.

Mais il ne faut pas oublier que le design de chaque élément est à prendre en compte pour tous les types de contenus (textes, photos, vidéos, illustrations…). 

Il y a toujours des éléments à passer au “second plan”, en quelque sorte…

Pour communiquer visuellement sur les principaux objectifs de la page : 

  • On utilisera des couleurs chaudes/froides pour mettre en valeur des éléments
  • Des tailles de polices d’écriture différentes pour les contenus marketing et informationnelles
  • Des mises en pages réfléchies et qui met en valeur votre offre

 

Et tout ça, en respectant les codes graphiques de la marque + les préconisations sur l’HTML….

Ainsi, vous aurez un meilleur format de présentation des informations et l’emplacement des boutons d’action sera optimisé pour les conversions.

L’objectif n’est pas forcément de créer un beau site

Le but n’est pas réellement de créer un beau site, mais plutôt de mettre en avant les bénéfices de vos offres.

Les mises en page de votre site web devront être optimisées dans un objectif d’améliorer la conversion et la mise en valeur des avantages offerts à vos utilisateurs. 

(En bref, vous ne devez pas choisir un thème WordPress uniquement parce qu’il est beau.)

3 conseils pour créer un site web optimisé

J’ai souvent entendu que le SEO bloquait la créativité lors de la conception de son site web. 

Je peux vous affirmer que c’est 100% faux.

En effet, cela demandera + d’efforts de votre part de soigner chaque élément de la page, afin que cette dernière soit à la fois bien interprétée par le robot, mais également attirant pour l’utilisateur. 

1) Proposez une navigation intuitive

Vous devez penser le SEO de votre site tout en gardant à l’esprit votre clientèle, votre audience. Mettez-vous à leur place et répondez à leurs besoins

Vos visiteurs doivent pouvoir naviguer vers un contenu qui leur est pertinent.

2) Incluez des sections interactives

Les utilisateurs de votre site auront besoin d’interactivité et d’immersion dans le contenu

Pensez “expérience” plutôt qu’un simple maillage interne avec des ancres sur-optimisés.

Les liens ancrés intelligemment aident davantage vos visiteurs à obtenir plus de détails et d’informations sur ce dont ils ont besoin. 

(Source : https://www.altaura.com/)

3) Utilisez des images vectorielles

Lorsque vous ajoutez des illustrations à votre site web, veillez à privilégier les images vectorielles. Ce type d’image est plus léger, peuvent être redimensionnées sans perte de qualité et peuvent donc parfaire votre référencement en fournissant des images adaptées à la taille des écrans des visiteurs.

Dès que vous le pouvez, utilisez le format SVG pour optimiser la qualité des images et le temps d’affichage 🙂

Balises HTML : Respecter les standards W3C

Le bon usage des balises HTML est un élément clé du design graphique et du SEO. Il est important de respecter les règles et les normes établies par le W3C, qui font référence aux codes HTML et CSS utilisés dans la conception du site web.

Certaines balises HTML sont sémantiques, c’est-à-dire qu’elles portent sens pour le contenu de la page. Cela peut se jouer sur la structure de la page, mais également son contenu. Le but est de définir un type de contenu à chaque élément HTML.

Beaucoup de thèmes WordPress n’intègrent pas correctement les éléments HTML des pages web.

Par exemple, les images qui font office de “fond” sont purement décoratives et ne nécessite pas forcément d’être pris en compte par Google.

Une solution : Elles peuvent être intégrées en CSS grâce à la propriété background-image.

Je vous promets qu’il y a une solution pour tout, mais rassurez-vous : Le but est de toujours trancher en faveur de vos visiteurs !

3 erreurs que l’on retrouve sur (beaucoup) de thèmes WP

1) Les thèmes intègrent un h1 dans le logo du site web.

Cela est une mauvaise pratique en ce qui concerne l’utilisation de la sémantique HTML, car il est destiné à être le titre principal d’une page Web, et ne devrait donc pas être intégré à un logo.  

 

Résultat, c’est le alt qui est pris en compte…

 

Lorsque vous choisissez un thème WordPress, vous devez toujours vérifier le code source. Il y a souvent de mauvaises surprises !

 

D’ailleurs, si vous avez besoin d’un graphiste freelance pour créer une maquette et développer votre thème personnalisé sur WordPress, vous pouvez confier votre projet web à K-Graphiste 😉

2) Utiliser des balises div pour structurer ses sections

Les balises <div> sont utiles pour créer une structure HTML destinée à être modifié en CSS.

Si vous avez besoin d’ajouter un paragraphe et une image juste à côté, alors la div est parfaite.

Mais cette balise n’est pas sémantique ! Elle peut être utilisée, mais ne doit pas être considérée comme une balise importante pour le SEO. 

Aujourd’hui, pleins de thèmes WordPress incluent uniquement des DIV pour séparer les types de contenus, alors qu’il existe d’autres balises bien plus pertinentes (section, aside, main, article..).

3) Charger trop de ressources

Lorsque l’on développe un site web, on pense également au gain de temps probable que pourrait nous fournir un constructeur de page, ou une extension qui affiche un contenu.

Le problème est que certains injecteront Beaucoup trop de code inutile dans la page. 

Certains thèmes WordPress sont livrés, avec de nombreux styles et scripts qui ne sont pas en lien direct avec le contenu de vos pages. De plus, ces ressources sont chargées sur chaque page du site web. 

Un tel problème peut ralentir le temps de chargement et d’accès de vos visiteurs, à votre site web.

La solution : Créer une maquette du site web + L’intégrer dans votre propre thème WordPress.

Évitez les plugins trop “embarrassant” 😁.

Tester son design on-site

Cette méthode ne permet pas de savoir si vos design sont optimisés pour la conversation :/ Mais elle peut vous donner quelques pistes en cas de grossières erreurs ( par exemple, mettre un paragraphe en dessous de 16px )

Vous pouvez utiliser LightHouse pour avoir ce genre d’informations !

LightHouse est un outil d’audit qui vous suggère quelques préconisations à mettre en place sur votre on-site. Il est directement intégré au navigateur Chrome.

Vous pouvez analyser le temps de chargement de votre site, le nombre de requêtes HTTP envoyées ou le codage HTML et CSS. De plus, vous pourrez évaluer la performance et l’ergonomie de votre site web à partir de Google Chrome

Cet outil est très utile pour les sites web dont le contenu est constamment mis à jour, car il facilite le processus d’analyse et de performance

Partagez ce guide !

Facebook
Twitter
LinkedIn

Inscrivez-vous à la newsletter 💌