Webflow est-il optimisé pour le SEO technique ?
Le choix d'un website builder prend toute son importance quand on souhaite bénéficier de fonctionnalités qui contribuent à la création des sites web professionnels performants. Webflow propose des nombreux outils SEO dont de nombreuses options pour gérer le SEO technique.
Qu'est-ce que le SEO technique ?
Le SEO technique regroupe toutes les actions pour améliorer la structure de votre site web et optimiser le temps de chargement de vos pages.
Le but est double :
- de faciliter l'analyse par les robots des moteurs de recherche et d'améliorer globalement l’expérience utilisateur.
- Réduire au maximum le temps de chargement de la page Si l’internaute doit patienter trop longtemps pour le chargement de vos pages alors les risques qu’il le quitte sont grands.
Si votre référencement technique n’est pas parfait alors vos efforts en SEO rédactionnels ne produiront pas de résultat. Le SEO technique est donc absolument essentiel pour garantir l'optimisation de votre site web. C’est un aspect du SEO moins connu voire négligé qui demande des compétences techniques : si vous avez une questions ou si vous rencontrer des difficultés pour configurer le SEO technique de votre site contactez-moi.
Que comprend le référencement technique ?
Les éléments les plus importants du référencement technique comprennent l’exploration, l’indexation, le rendu et l’architecture de votre site Internet.
Une fois correctement configuré, vous n’avez plus besoin de vous en préoccuper et pouvez alors vous concentrer sur le SEO “On page” et “Off page”.
Quels sont les principaux points de contrôle sur SEO technique ?
Une optimisation de la structure de votre site
Avec Webflow vous pouvez définir les zones de votre site web : certaines composantes standards comme l'« en‑tête », le « menu de navigation », le « contenu principal », etc.).
Ce code HTML va structurer le contenu de votre page. Dans le mode designer, sélectionner une div et dans les settings, attribuer le tag adapté à la div :
- Div
- Header
- Footer
- Nav
- Main
- Section
- Article
- Aside
- Figure
- Adress
Au delà de ces balises html sémantiques, on peut attribuer aux balises <div> et <span> des classes pour les étiqueter et ainsi pouvoir les cibler plus facilement.
Plus la structure de votre page est détaillée plus la lecture sera facile pour les robots et vous augmenterez le trafic de votre site web.
Les technologies d'assistance comme les lecteurs d'écran pourront reconnaître ces éléments est votre site gagnera aussi en accessibilité.
L'optimisation de la structure de votre site repose aussi sur :
- Une arborescence logique
- Une organisation rigoureuse des dossiers de page
- Un menu clair, simple pour faciliter la navigation
- Un maillage interne dense et logique
Avec l'extension Chrome sneaps.io vous pouvez vérifier certains paramètres de SEO technique avant la mise ne ligne. Découvrir l'extension.
Réduire au maximum les lignes de codes
Penser à n'appeler que les seules ressources nécessaires. Grâce à Webflow, vous pouvez ajouter du custom code et ne l'utiliser que sur la page qui en a besoin. Ajouter un custom code sur la page dédiée plutôt que sur la racine du site, évitera de charger ces lignes de code inutiles sur les autres pages.
Optimiser vos scripts avec les mentions "async" ou "defer" et gagner du temps pour cibler et hiérarchiser les éléments à charger.
L'adaptation du site à tous les écrans
Le mobile représente 60 % du trafic web. En 2022, 5,34 milliards de mobinautes dans le monde, soit 66,9 % de la population mondiale. Concevoir un site pour la version mobile est donc un impératif car les moteurs de recherche évaluent si un site est responsive ou non. Un site responsive apparaitra devant un site qui ne l'est pas dans les résultats de recherche. Un site non responsive sera pénalisé.
L’approche “Mobile first” consiste à concevoir d’abord pour les appareils mobiles. Webflow propose par défaut quatre breakpoints : desktop, tablet, mobile landscape et mobile. On passe d'un écran à l'autre facilement pour tester et ajuster les maquettes. La conception du webdesign sur FIGMA peut partir de la version mobile :
- on se focalise sur l'essentiel
- la taille des boutons et champs est adaptée au mobile
- on maximise les éléments qui fonctionnent sur mobile et desktop
Mais dans la phase de développement sur Webflow, on part du desktop pour définir les styles qui se répercutent d'un breakpoint à l'autre en cascade pour arriver jusqu'au au mobile. La logique de développement est différente mais à ce stade la phase de conception est déjà validée.
Des images optimisées
L'objectif est de réduire au maximum le poids des ressources. Les images représentent jusqu'à 60 % du poids d’une page : votre priorité est donc de diminuer le poids et de standardiser les visuels.
Webflow propose plusieurs options pour configurer et optimiser vos images :
• Compresser vos images au format WebP : webflow a mis en place une option pour convertir vos image en .webp ou .avif
• Choisir le mode Lazy Load pour les images de vos sections (sauf dans les header si vous voulez que vos images apparaissent directement)
Vous devez aussi importer des images dont les dimensions sont adaptées aux écrans : garder en tête la largeur de votre container maximum.
Des fichiers webfont optimisés
Quelles sont les bonnes pratiques à mettre en œuvre pour configurer la typographie dans Webflow ?
Réduire le nombre de font (deux familles de polices), n'utiliser que les graisses nécessaires et choisir le format optimisé.
Supprimer rapidement tous les éléments inutiles
Webflow permet de nettoyer tous les éléments inutiles et d'alléger le code de votre site.
Supprimer tous les paramètres CSS non utilisés (nettoyer régulièrement les classes CSS)
Supprimer toutes les animations non utilisées.
Activer “Minify CSS” et “Minify JS” dans les paramètres de publishing.
Faciliter l’indexation du site
Génération du sitemap et du robot.txt
Webflow génère automatiquement un fichier sitemap.xml à la racine du site web, dont l'adresse sera votresite.com/sitemap.xml.
Après, ce sitemap pourra être ajouté dans Google Search Console directement pour initier le scan de votre site et son indexation.
Balise canonique
Choisissez votre nom de domaine canonique pour éviter des problèmes d’indexation, de contenu dupliqué… afin de ne pas nuire à votre SERP (Search Engine Results Page ou page de résultats d'un moteur de recherche). Le contenu dupliqué est le cauchemar du SEO ! Google sanctionne tout simplement les pages au contenu identique et n’en indexera qu’une.
Alors choisissez entre : www.mon-site.fr ou https://www.mon-site.fr. Dans les paramètres de votre site vous pouvez définir votre Global canonical url tag.
NB : inutile d'ajouter un custom code pour cette option.
Des performances technologiques
Webflow comprend un hébergement web haute performance. Grâce à leur infrastructure serveur mondiale (AWS servers), votre site se charge rapidement, ce qui participe directement à la bonne expérience utilisateur et au bon référencement SEO.
Augmenter la visibilité de votre site et bénéficier d'un site rapide et performant en choisissant Webflow !
