Par , le 7 janvier 2019

SEO et Design : un travail d’équipe

Design | SEO | 0

Notre méthode de travail pour allier le SEO et le Design

Chez Silicon Salad, afin d’assurer le bon déroulement d’un projet web et de créer les synergies nécessaires entre les équipes, nous favorisons l’échange et le dialogue entre les différents pôles d’expertises. Notre process, alliant le SEO et le Design, est avant tout un travail d’équipe.

Notre méthode

Une interface web fait le lien entre le client et les utilisateurs. Le design d’interface permet de structurer des informations, de rendre un projet visible et de communiquer sur des valeurs.
Le SEO (Search Engine Optimization) quant à lui rend visible et fonctionnelle l’interface web en lui apportant un meilleur référencement et plus de visibilité sur les moteurs de recherche. Il aide à hiérarchiser convenablement les informations et à construire le parcours utilisateur.

Notre méthode nous permet de gagner en efficacité et en réactivité dans le déroulement de nos projets. Les bons réflexes permettent une plus grande autonomie aux différents membres des équipes et la méthode offre davantage de collaboration inter-équipes.

Les étapes clés

Nous travaillons en binôme dès le début d’un projet, c’est à dire dès la réception/conception du brief client ou lors de l’avant-vente pour estimer le coût du projet.
Selon le brief créatif et les objectifs qui nous seront fixés les problématiques vont se diversifier et orienter l’approche du SEO.
Exemples : Site E-commerce, site one page, site vitrine, corporate…

L’arborescence et la navigation

La conception de l’arborescence structure et maintient le projet, tel un squelette qui va pouvoir grandir et s’articuler selon l’évolution des maquettes. Celle-ci va permettre une bonne anticipation du projet, le but étant de la faire la plus épurée et limpide possible. Cette arborescence va donner naissance à la navigation, qui va permettre d’identifier l’importance des éléments et nous indiquer de quelle manière les mettre en valeur. De plus c’est ici que nous travaillons le maillage interne, afin d’inciter l’utilisateur à naviguer sur les différentes rubriques du site.

Arborescence : trame projet

Les maquettes

Débute ensuite le développement des maquettes. Par une bonne définition des objectifs du client dans un premier temps et par un dialogue constant entre les chargés du SEO et les webdesigner. Nous élaborons ensemble une intention globale fonctionnelle.
Les objectifs varient selon les clients, cependant nous pouvons donner quelques exemples types qui sont récurrents : “générer du contact”, “améliorer ou conserver le référencement naturel actuel du site internet”, une interface “mobile first”,…etc. Pour répondre aux objectifs posés au début du projet et construire une bonne ergonomie du site, nous utilisons des codes de navigation.

Codes de navigation

Tout d’abord le placement des CTA (Call to action) est primordial. Il vient souvent soutenir un contenu au service du SEO et de l’utilisateur. Il incite au contact ou à poursuivre la navigation et permet le maillage entre les pages web.

Poursuivons avec la construction des balises H1, H2, H3. Cette définition “H” vient de l’anglais → “Heading” qui veut dire “en-tête / “Gros titre”. À cela s’ajoutent les chiffres 1,2,3 selon l’importance de l’en-tête. Le H1 est donc le premier titre à se situer sur une page.
Leur but est d’introduire le message plus précisément pour l’utilisateur et pour le moteur de recherche comme par exemple dans une dissertation (grand titre / titres / parties / sous titres / sous parties…)
L’objectif est d’apporter une richesse sémantique à la page en développant les univers lexicaux.
Pour concevoir de bons titres “Hn” il faut trouver les bons mot-clés. Pour les définir nous engageons une analyse de mots-clés par le biais d’outils tels que : “Answer the public”, l’outil de planification de mots clés fournis par Google Ads, “Google Search Console” ou encore “SEObserver”. Soigneusement choisis, ces mots clés vont permettre d’optimiser le référencement sur internet et introduire le sujet d’une page web (une catégorie, une sous catégorie, etc…).

Afin de bien classer les différents éléments graphiques et fonctionnels d’un projet, nous élaborons un “Styleguide”. Nous pouvons ainsi répertorier tous les éléments de la charte graphique, que ce soient les couleurs, la forme des boutons, ou bien les styles de textes (H1,H2,H3,…).

Ce “Styleguide” permet de garder une cohérence sur l’ensemble de l’interface web, en clarifiant le style des éléments. Ces éléments vont devenir des repères pour l’utilisateur au cours de sa navigation, comme par exemple la forme, la taille et la couleur d’un bouton CTA pour l’appel au contact.

Styleguide : Titres Hn

Le fil d’ariane est un élément de navigation qui a aussi toute son importance. Toujours dans le but de guider l’utilisateur au cours de son parcours sur le site web, il fait le lien entre les différentes pages du site, rappelle l’arborescence et apparaît sur la page de résultats Google Search en soutien du titre (balise title) pour le référencement naturel. Notons que le fil d’ariane peut impacter le taux de clics et qu’il prend plus d’importance selon la profondeur du site, comme par exemple sur un site E-commerce.

Fil d'ariane : Site E-commerce Jef chaussures

Concernant le contenu, le Wording n’est pas vraiment une tâche SEO mais le SEO se doit de donner des recommandations sémantiques. Cela permet d’optimiser la rédaction pour améliorer le positionnement du site dans les mots clés cibles. Il nous arrive d’orienter nos clients dans la création de leurs contenus afin de les accompagner dans leur manière de communiquer et de mieux guider l’utilisateur.
Ce qui est intéressant quand on travaille en équipe c’est avant tout la possibilité de débattre et d’avoir des échanges constructifs. Que répondriez-vous à : “Plus le message est concis, plus il est clair et moins il y a de texte, plus il a de chance d’être lu.” ou encore à cela : “Moins il y a de texte, moins il y a de matière pour les moteurs de recherche, et donc moins il y a de chance que le site puisse bien se positionner.”?
Les points de vue entre SEO et Design divergent, mais les deux visions sont essentielles. Toute la réussite du projet web repose sur le juste équilibre entre les deux expertises métiers.

L’intégration

Une fois le design du site validé, arrivent les phases de développements front et back. Nous rappellerons ici que les échanges avec une personne dédiée à la technique dès le début du projet est également indispensable. Il est important de prendre conscience qu’un projet ne doit pas être traité de façon individuelle mais dans sa globalité, en intégrant chaque pôle d’expertise.
Afin de travailler cette vision globale et aller tous dans la même direction, nous utilisons l’outil collaboratif InVision qui permet de publier les maquettes en ligne et prendre des notes sur chaque étape clé.
Pour cette phase de production, les experts SEO ajustent toutes leurs recommandations d’intégration sur les visuels. Balisage : titres / intertitres, techniques avancées pour le PR sculpting, linking interne,…etc.

Notre volonté

Pour résumer, ne sous-estimons pas l’importance de la communication au sein d’un projet entre les différents pôles métiers. Notre volonté de repousser nos limites nous permettent de développer nos champs d’expertises. Le SEO sert le design autant que le design sert le SEO. L’esthétique devient fonctionnelle et le référencement naturel permet d’apporter de la visibilité au site. Toutes les questions sont précieuses et permettent une évolution optimale du projet.

Vous avez des questions sur notre méthode, ou vous souhaitez approfondir votre approche SEO ? N’hésitez pas à nous contacter, nous serons très heureux d’échanger ensemble sur le sujet.

Partager l'article :

Vous souhaitez réagir ?

En soumettant ce commentaire vous donnez à Silicon Salad le droit de citer vos propos ainsi que votre nom/site. Tous commentaires dégradants ou hors-sujet peuvent-être supprimés par décision de l’auteur. Votre e-mail, ne sert qu’à des fins d’authentification, il ne peut-être ni partagé ni diffusé.
Vous pouvez commenter avec la syntaxe Markdown. En savoir plus

Article précédent
WordCamp Lille 2018 - Retour sur la matinée