ArticleÉtat 03 · Filaire
Conception
Valider le SEO d'une maquette avant le développement : la méthode de Julien Jimenez
Une maquette validée est une promesse faite au développeur : un titre caché dans une image ou un menu sans liens y sera codé tel quel, puis corrigé à grands frais. Voici comment vérifier le SEO d'une maquette avant le développement, page par page, avec une grille de revue à partager avec votre designer.
Par Julien Jimenez
Publié le
12 min de lecture
Comment vérifier le SEO d'une maquette avant le développement ? La question arrive souvent trop tard, quand chaque correction demande un ticket, un développeur et une nouvelle recette. Pourtant, l'essentiel se lit dès l'écran dessiné : la hiérarchie de l'information, la nature des textes, la navigation, le poids des images. Voici la méthode de revue que Julien Jimenez applique, page par page, jusqu'à une grille que le designer peut cocher lui-même.
Pourquoi vérifier le SEO d'une maquette avant le développement
Sur un chantier, on corrige un plan au crayon, pas un mur porteur. Dans l'outil de design, déplacer un bloc ou transformer une image en texte prend quelques minutes. Une fois le gabarit intégré, la même modification mobilise un développeur et une nouvelle passe de tests ; après la mise en ligne, il faut encore attendre que Google revienne explorer la page.
Or la maquette fixe bien plus que l'apparence : quels contenus existent et dans quel ordre, ce qui est texte ou image, comment on navigue, ce qui est masqué, combien de médias il faudra charger. L'intégrateur code ce qui est dessiné. La revue SEO intervient donc là, quand designer et référenceur parlent encore de blocs plutôt que de balises.
La revue SEO d'une maquette ne juge pas l'esthétique. Elle vérifie que chaque choix graphique pourra être traduit en HTML explorable, compréhensible et rapide. Le designer garde la main sur le style, la revue protège la structure.
Préparer la revue : arborescence, requêtes cibles et gabarits
Une maquette de site vitrine dessine des gabarits (accueil, service, réalisation, article, contact) plutôt que toutes les pages. Pour juger un gabarit, il faut savoir ce qu'il devra porter. Rassemblez :
- l'arborescence et les URL figées (voir comment choisir la structure d'URL d'un site vitrine) ;
- la requête principale et les questions des visiteurs pour chaque page clé ;
- une page exemple par gabarit, remplie avec du contenu réel ;
- les maquettes mobile et desktop dans leur dernier état ;
- un moyen d'annoter : commentaires dans l'outil ou captures.
Le faux texte cache les problèmes : un titre de trois mots dans la maquette en compte souvent douze dans la réalité. Cas type : un cabinet d'expertise comptable prévoit une page par mission, mais la maquette ne montre qu'une page de service générique au titre court. La revue vérifie que ce gabarit tient avec le titre le plus long et la vraie FAQ.
Hiérarchie des titres et texte réel : ce que la maquette doit rendre explicite
Une hiérarchie lisible sans la mise en forme
Dans une maquette, un titre est une taille de police ; dans le HTML, c'est un niveau. Une citation en grand, un chiffre surdimensionné ou un slogan ne sont pas forcément des titres. Rédigez donc à part le plan de chaque page : le titre principal, qui dit le sujet avec les mots du visiteur, puis les sections et leurs sous-parties.
Si le texte le plus visible de l'accueil est un slogan (« Votre partenaire au quotidien ») et que le vrai sujet (« Expert-comptable pour la création d'entreprise ») est relégué en petit, discutez-en : le style et le niveau sont indépendants. L'atelier s'en tient à un seul titre principal par page, et demande au designer de nommer ses styles par rôle (« Titre de section ») plutôt que par taille (« Texte 48 »).
Texte réel ou texte en image : repérer les pièges visuels
Le texte intégré à une image n'est lu ni par les moteurs, ni par les lecteurs d'écran, ni par les outils de traduction, et il ne s'adapte pas à l'écran. Les pièges courants :
- le bandeau d'accueil livré en une seule image, slogan et bouton compris ;
- les infographies dont les chiffres n'existent nulle part en texte ;
- les titres décoratifs vectorisés, devenus de simples tracés SVG ;
- les textes révélés au survol, alors que le survol n'existe pas sur un écran tactile.
Tout texte porteur de sens reste du vrai texte, posé si besoin sur l'image par la feuille de style.
Erreur fréquente
Le bandeau d'accueil exporté en une seule image est souvent l'élément le plus lent de la page, celui que mesure le LCP, en plus d'être illisible pour les moteurs. Une photo en fond, un vrai titre et un vrai lien par-dessus règlent le problème.
Navigation, menus et contenus dépliables : ce qui doit rester explorable
Des liens, pas seulement des zones cliquables
Google découvre les pages en suivant les liens HTML : des balises <a> munies d'un attribut href. Sur une maquette, tout ce qui est cliquable se ressemble ; demandez donc pour chaque élément : « où cela mène-t-il ? ». Vers une autre page, c'est un lien avec une adresse de l'arborescence ; pour agir sur la page, c'est un bouton. La planche de composants de l'atelier détaille cette distinction.
Chaque page de l'arborescence doit être atteignable par au moins un lien visible, sinon elle est orpheline. Les intitulés comptent : « Voir nos réalisations en rénovation » renseigne, « En savoir plus » répété six fois ne renseigne personne.
Onglets, accordéons et carrousels : arbitrer sans perdre l'information
Ces composants masquent une partie du contenu. Google peut indexer un contenu replié s'il est présent dans le HTML au chargement, pas un contenu chargé après un clic. Et ce qui répond directement à l'intention de la page doit rester visible sans interaction.
| Composant | Risque | Arbitrage conseillé |
|---|---|---|
| Onglets | Contenu des onglets fermés ignoré, ou chargé seulement au clic | Contenu secondaire uniquement, présent dans le HTML dès le chargement |
| Accordéon | Réponse essentielle repliée | FAQ et détails techniques, avec details et summary |
| Carrousel | Diapositives suivantes rarement vues, souvent en images | Un message fort et des liens, ou une grille complète |
| Bouton « Charger plus » | Éléments suivants sans adresse propre | Pages paginées avec de vraies URL |
Images, ratios et poids : anticiper la performance dès le dessin
La maquette décide du nombre d'images, de leur taille et de leur rôle : une bonne part de la vitesse du site s'y joue. Repérez d'abord l'image principale de chaque gabarit, souvent celle que mesure le LCP. Elle doit être une vraie image dans le HTML, chargée en priorité, ni enfouie dans un carrousel, ni injectée tardivement en arrière-plan.
Fixez ensuite un ratio par composant (16:9 pour un bandeau, 3:2 pour une carte, 1:1 pour un portrait) : l'intégrateur pourra réserver l'espace et éviter les sauts de mise en page mesurés par le CLS. Indiquez enfin la largeur maximale de chaque image, qui détermine les déclinaisons à produire, par exemple 768 et 1 536 pixels. Les seuils visés sont ceux que publie Google : LCP ≤ 2,5 s, INP ≤ 200 ms et CLS ≤ 0,1 au 75e centile des visites.
Listez aussi les polices et leurs graisses, chacune étant un fichier à télécharger, et discutez des vidéos d'ambiance avant de les dessiner en plein écran. Un site éditorial qui vise Google Discover prévoira des visuels d'au moins 1 200 pixels de large.
Conseil d'atelier
Demandez au designer d'indiquer, sur chaque composant image, son ratio et sa largeur maximale, par exemple « 3:2 · 720 px max ». Ces deux valeurs suffisent à l'intégrateur pour produire les bonnes déclinaisons.
La version mobile, première maquette à valider
Google explore et indexe les sites avec un robot qui se présente comme un smartphone : un contenu retiré de la version mobile risque de ne pas être pris en compte. La maquette mobile contient donc les mêmes textes, titres et liens que la version desktop. Relisez-la en premier, sur quatre points :
- L'ordre des blocs : quand les colonnes s'empilent, l'essentiel reste-t-il en haut ?
- Les zones tactiles : au moins 44 pixels de haut, assez espacées pour le pouce.
- Les fenêtres à l'arrivée : aucune ne masque le contenu.
- Les tableaux et le menu : défilement ou réorganisation, bouton qui annonce son état.
Cas type : les trois engagements d'un artisan (devis détaillé, intervention rapide, garantie décennale) disparaissent de la maquette mobile « faute de place ». La revue les réintègre en liste compacte : même contenu, autre présentation.
La grille de revue à partager avec le designer
Chaque ligne de la grille est une question à laquelle on répond par oui ou par non, gabarit par gabarit. Le designer peut la remplir seul avant la séance, ce qui concentre la discussion sur les vrais arbitrages.
- Un seul titre principal par page, avec les mots du visiteur.
- Un plan de titres logique, rédigé à part.
- Aucun texte porteur de sens intégré à une image ou vectorisé.
- Chaque changement de page passe par un lien vers une adresse de l'arborescence.
- Des intitulés de liens explicites, aucun « en savoir plus » isolé.
- Chaque page atteignable par au moins un lien visible.
- L'essentiel visible sans interaction, rien d'important réservé à un carrousel ou à un survol.
- L'image principale identifiée, chaque image avec son ratio et sa largeur maximale.
- Les polices listées, les vidéos justifiées.
- Une version mobile aux contenus et liens identiques, avec des zones tactiles de 44 pixels.
Côté déroulé : envoyez la grille avec les maquettes, tenez une séance par gabarit en commençant par le mobile, annotez avec une étiquette « SEO », laissez le designer trouver la solution graphique, puis joignez la grille validée aux tickets de développement pour la recette.
Questions fréquentes sur la revue de maquette
Faut-il un expert SEO pour relire une maquette ?
Pas forcément pour un site simple : la grille permet à un designer ou à un chef de projet de repérer l'essentiel. Un regard expert sert surtout aux arbitrages : quel contenu mérite sa propre page, comment organiser un menu chargé, que faire d'un composant qui masque de l'information.
À quel moment de la conception faut-il faire la revue SEO ?
Idéalement deux fois. Sur les maquettes filaires d'abord, quand la hiérarchie et les composants se décident : c'est la passe la plus rentable. Sur les maquettes graphiques ensuite, pour vérifier que la mise en forme n'a rien caché ni transformé, comme un texte devenu image ou un bloc supprimé en mobile.
Les accordéons et les onglets sont-ils mauvais pour le SEO ?
Non, si leur contenu est présent dans le HTML dès le chargement : Google peut alors l'indexer. La question est surtout éditoriale. Ce qui répond directement à l'intention de la page doit rester visible sans clic ; l'accordéon convient à une FAQ ou à des détails techniques, pas à la description principale d'un service.
Comment vérifier ensuite que le développement respecte la maquette ?
En réutilisant la grille lors de la recette en préproduction. Chaque ligne devient un test : plan des titres lu dans le code, liens contrôlés, attributs des images vérifiés, essai sur un vrai téléphone et mesure de la vitesse des gabarits. Les écarts se corrigent avant l'ouverture.
Conclusion : corriger au crayon plutôt qu'au marteau
Vérifier le SEO d'une maquette avant le développement ne demande ni outil coûteux ni expertise rare : une arborescence, du contenu réaliste, une grille et une séance par gabarit. Le bénéfice se mesure ensuite : moins d'allers-retours, une recette plus courte et un site qui n'a rien à rattraper. C'est la troisième des six étapes de fabrication d'une page ; la suivante traduit la maquette en gabarit, avec les données structurées à prévoir dès le lancement.
Vous souhaitez une relecture SEO de vos maquettes ? Écrivez à Julien Jimenez en joignant un lien de partage.
