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é. 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. Chez Agence Alpha, nous abordons la création de site à travers un prisme SEO et graphisme.
Quand le webdesign impacte indirectement le référencement naturel
L’algorithme de classement des sites 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. Que ce soit pour le SEO ou le SEA, les robots de Google ne sont pas en mesure d’évaluer directement la qualité esthétique d’un site. Bien qu’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é.
Pour l’instant Google 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 les mots qui évoquent votre positionnement et/ou l’ambiance que vous souhaitez créer. Une agence de communication est pleinement qualifié pour ce rôle. Vérifier ses références pour bien choisir votre agence. Agence Alpha répondra à vos attentes et vous aidera à identifier les bons axes de communication.
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. Vous devez avoir une idée clair des objectifs de votre site.
Le malentendu sur la question de la ligne de flottaison
On lit parfois sur certains conseils 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. La ligne de flottaison est la partie visible d’une page sans avoir à scroller, c’est-à-dire à descendre la page avec la souris. 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. La pose de balises H a aussi son importance en SEA, ou le SEO sera une aide supplémentaire.
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 les fonctions Développement Web des navigateurs Google Chrome et Mozilla Firefox pour tester votre site en redimensionnant la fenêtre dans toutes les résolutions. Nous sommes « mobile-first », où le design est d’abord pensé pour le mobile.
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…). Puis 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…
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 ou tout autre logiciel de retouche d’image, 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.
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.
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, 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 !
Contactez-nous pour découvrir comment nous créons des sites mobile-first, optimisé SEO, UX et UI.
