Comment créer un site avec un web design optimisé pour le SEO ?

Trop souvent, les personnes peu sensibilisées sur les questions de SEO ont tendance à croire que l' optimisation pour le référencement est une tâche qui devrait être effectuée une fois que le site est finalisé. Combien de fois entend-on : " Je vais d'abord faire un beau site web et ensuite, je le ferai référencer ! ". Pourtant, un référencement efficace consiste à intégrer tous les paramètres en amont, dès la conception (arborescence, ergonomie, web design...) puis dans la création des pages. A contrario, certaines personnes trop concentrées sur l'optimisation rédactionnelle SEO en oublient parfois de soigner l'apparence. L'objet de ce post est de démontrer en quoi la stratégie de référencement et le web design (au sens large) doivent être travaillés ensemble tout au long du processus de production, grâce à des connaissances dans ces différents domaines.

Cet article n'a pas pour ambition de se présenter comme un tutorial exhaustif de web design (il faudrait des dizaines de pages pour développer le sujet) mais simplement d'évoquer quelques points parmi d'autres. Si vous souhaitez aller plus loin et vous faire accompagner pour un travail optimal, il est pertinent de consulter un webdesigner professionnel ; comme par exemple David HACOT qui propose des prestations pour les sites web en freelance.

Quand le webdesign impacte indirectement le référencement

Aujourd'hui, l'algorithme de Google prend en compte de très nombreux paramètres techniques et rédactionnels, mais également le degré d'intérêt des internautes pour les contenus. Les robots de Google ne sont pas en mesure d'évaluer directement la qualité esthétique d'un site. Encore que... avec le développement de l'intelligence artificielle, on peut imaginer qu'ils pourraient un jour déterminer quelles pages répondent aux " règles d'or " de l'esthétique que certains ont théorisé (nombre d'or dans l'art, règles de proportions...). Mais c'est là un autre débat, car tout cela est très subjectif...

Donc Google, pour l'instant, n'effectue pas son classement sur des critères directement liés à l'apparence en revanche un lien qui donne envie sera plus facilement partagé sur la toile et les internautes en parleront également plus facilement.

Que faire pour créer un webdesign de qualité ?

Quand on souhaite avoir un bon positionnement dans les moteurs de recherche, il est donc primordial de soigner l'aspect visuel général, la mise en page, les réglages typographiques, l'accessibilité, la navigation, les call-to-action ainsi que tous les détails graphiques. L'essentiel est de retenir l'internaute le plus longtemps possible en répondant de manière intéressante à ses besoins et de le pousser à l'action.

Le style général

Il est important de se poser les bonnes questions avant d'opter pour un style de design. Quelle image souhaitez-vous donner et pour quelles raisons ? Quelle(s) cible(s) souhaitez-vous toucher ? N'hésitez pas à chercher le(s) mot(s) qui évoque(nt) votre positionnement et/ou l'ambiance que vous souhaitez créer. Par exemple : chic, fantaisiste, sobre, fun, épuré, zen, dynamique, branché, classique, corporate, grand public... Ce positionnement doit être mis en parallèle avec votre ciblage afin d'avoir ensuite une vision claire pour le choix des typos, des couleurs, le style des photos, de la mise en page... Un bon design n'est pas uniquement un design agréable à l'oeil, c'est également un design cohérent avec le contenu rédactionnel et adapté à sa cible.

Le malentendu sur la question de la ligne de flottaison

On lit parfois sur certains tutoriaux SEO qu'il faut utiliser au maximum la zone qui se situe au-dessus de la ligne de flottaison (les fameux 600 premiers de pixels de hauteur) avec des contenus pour le référencement. Cela ne signifie pas qu'il faut mettre obligatoirement en haut de la page des paragraphes très denses en textes. Gardez à l'esprit que la stratégie de longue traîne (qui consiste à viser une multitude d'expressions longues) n'a pas vocation à être développée sur une seule section ou une seule page ; mais dans une logique de multiples pages dédiées. Chaque page doit cibler en priorité une expression en particulier. Une page relativement épurée dans sa partie haute et qui contient les mots-clés ciblés dans les balises title, H1 puis à plusieurs reprises et de manière naturelle plus bas dans le corps de la page aura toutes ses chances en SEO ; si elle est qualitative, populaire et bien optimisée. Ainsi, si pour des raisons esthétiques, vous préférez épurer le design au dessus de la ligne de flottaison sur votre page d'accueil avec un grand slider plein écran et juste quelques mots ou phrases ; faites-le. Votre SEO ne sera pas pénalisé, du moment que le contenu de la page en dessous de la ligne de la flottaison est ensuite suffisamment riche en contenus qualitatifs (dans la mesure du possible, un texte de plus de 500 mots). Il existe de nombreux exemples de sites bien classés dont la zone au-dessus de la ligne de flottaison sur la page d'accueil est assez minimaliste ; alors ne vous méprenez pas sur ce point. Le plus important, c'est que dans cette zone, il n'y ait aucune ambiguïté sur le thème de la page ; les mots clés ciblés pour cette page devront donc y figurer en priorité.

Le responsive design

Plus de la moitié des visites de sites web se font sur mobile ou tablette, et Google privilégie ceux qui sont parfaitement optimisés au niveau responsive. Par conséquent, tout au long de votre intégration, pensez à vérifier que vos pages s'affichent de la meilleure manière possible sur toutes les tailles d'écrans. Pour cela, utilisez régulièrement la fonction Développement Web > Vue adaptative sur Firefox (avec Web Developper) pour tester votre site en redimensionnant la fenêtre dans toutes les résolutions. La tendance va même vers la suprématie de la logique du " mobile-first " (design pensé en premier lieu pour les mobiles).

Le balisage Hn

Le choix d'appliquer une balise Hn (H1, H2, H3, H4, H5, H6) à une phrase ne doit pas être effectué par rapport à des choix de taille de texte ou de mises en forme. On doit d'abord choisir d'écrire des phrases pertinentes par rapport à leur hiérarchie sémantique (les mots-clés prioritaires doivent être inclus en balise H1, les mots clés secondaires en balise H2, etc...) ; puis ensuite ajuster la mise en forme sur le CSS. Les balises H1 sont un signal très important envoyé à Google, donc ne les négligez pas. Les balises H2 sont également assez puissantes pour positionner les expressions secondaires et viser la longue traîne.

Les choix typographiques

Choisissez vos typos avec soin et de manière cohérente avec votre positionnement. Réfléchissez bien sur la question de mettre les titres en bas de casse (lowercase) ou en capitales (uppercase). Les lettres capitales, quand elles sont utilisées dans des fontes étroites, sans-serif et assez épaisses (comme la Oswald, par exemple) ont le mérite de conférer une certaine autorité aux mots. Elles peuvent en revanche être plus difficiles à lire sur des phrases longues ; il faut donc les utiliser à petite dose. Les bas de casses donnent une dimension plus légère. Les typos manuscrites ( cursives) peuvent humaniser l'ambiance de votre site et créer un rapport de connivence avec l'internaute. Là encore, il faut les utiliser seulement quand c'est justifié et avec parcimonie. La clarté et la lisibilité sont parmi les éléments les plus importants à soigner pour retenir les internautes, et cela passe en grande partie par les bons choix de typos, des interlignages bien gérés, des espaces optimisés entre les titres, les paragraphes, etc... Soignez la mise en forme des headings et le balisage sémantique (balises strong sur les mots importants, etc...)

Les couleurs

Pour rester crédible, ne multipliez pas trop les couleurs. Créez une cohérence avec les teintes de votre logo. Quand vous associez deux ou trois couleurs, faites en sorte de les harmoniser. Vous pourrez trouver sur le web des palettes de teintes qui fonctionnent bien ensemble. Généralement, quand on combine des couleurs, on les choisit avec le même niveau de saturation et luminosité (vous pourrez voir cela sur Photoshop en sélectionnant une teinte avec la pipette et en regardant ses valeurs TSL, et en modifiant uniquement la valeur T). Faites en sorte que les couleurs des textes contrastent toujours suffisamment par rapport au fond : texte clair sur fond sombre, et l'inverse...

Les photos

Pensez à toujours mettre au moins une image (photo ou illustration) sur chaque page, cela incite davantage à la lecture. Choisissez des photos de bonne qualité et de style homogène. Google accorde de plus en plus d'importance à la rapidité de chargement des pages, alors optimisez au maximum leur taille (redimensionnez les sur Photoshop aux dimensions en nombre de pixels auxquelles elles vont être utilisées). Trouvez le bon compromis entre un niveau de compression suffisamment fort pour en réduire le poids sans trop abîmer l'image. Privilégiez le format JPEG pour les photos, et le PNG transparent pour les éléments qui doivent être détourés sur un fond de couleur (par exemple, un logo). Le PNG est plus lourd que le JPEG, alors utilisez ce format uniquement si c'est nécessaire.

Le chemin de navigation et les CTA (call-to-actions)

Le menu de navigation est une des premières choses que l'internaute regarde, alors il doit être vraiment soigné, aussi bien au niveau design qu'au niveau de l'optimisation SEO. L'arborescence doit être claire et logique entre les niveaux parents et enfants. Faites en sorte que l'on trouve très facilement et rapidement les chemins d'accès vers toutes les pages du site. Privilégiez en général les typos simples et lisibles, plutôt du genre Sans-Serif pour une meilleure lisibilité, et plutôt étroites afin de ne pas être trop limité dans la longueur des items de menu.

Réfléchissez bien au parcours de l'utilisateur quand vous construisez votre mise en page et votre chemin de navigation. Faites en sorte que l'internaute soit attiré par les liens où vous souhaitez l'emmener. Soignez les call-to-actions. Privilégiez des boutons efficaces, bien visibles et percutants par rapport au reste du contenu car le maillage interne a beaucoup d'importance en SEO, et parce que le taux de conversion est primordial ! La tendance actuelle est plutôt au flat design et à la simplicité.

Les balises Alt

Pensez à bien attribuer une balise alt sur toutes les images que vous intégrez sur le site. Ne trichez pas en sur-optimisant les mots-clés. Contentez vous de légender les images sur ce qu'elles illustrent réellement. Gardez à l'esprit que ces balises ont été créées dans le but d'améliorer l'accessibilité pour les personnes malvoyantes ; il est donc essentiel de respecter ce principe, sinon Google vous sanctionnera.

Le balisage shema.org

Depuis la version 5 du HTML, les micro-données et micro-formats facilitent l'indexation des pages aux moteurs de recherche. Ces indications permettent aux robots d'identifier de manière plus précise et plus rapide les sujets traités ; d'optimiser aussi le temps de crawl ; ce qui a pour effet de favoriser un meilleur classement. Vous pouvez par exemple par ce biais expliquer à Google que telle balise correspond à un logo, une localisation géographique, un magasin, un produit. Toutes les précisions que vous pourrez apporter dans votre balisage seront autant de points de bonus pour votre SEO.

Conclusion

Pour bien optimiser votre site internet pour le référencement, essayez de faire un site agréable, bien hiérarchisé, avec des balises bien travaillées et cohérentes, un chargement rapide, un affichage irréprochable sur tous les écrans et un maillage interne performant grâce à des beaux CTA. Produisez des contenus de qualités pensés pour l'internaute in fine ; et non uniquement pour plaire à Google. Si vous faites tout cela et que votre site plait à vos visiteurs, vos statistiques seront bonnes, vous obtiendrez plus facilement des backlinks spontanés, et votre site, au final, aura de plus grandes chances de plaire à Google !