Le SEO avec Webflow

Monter un site web est important pour développer un business. Mais la création du site ne suffit pas : il est très important d’être vu. Sans cette visibilité, c’est un petit peu comme monter son restaurant au fin fond de l’allée, invisible aux passants. 😅

Pour cela, une piste est le référencement naturel. 💪

‍

Est-ce que Webflow est “SEO-friendly” comme on dit ? 👇

‍

💡 Pour découvrir l’outil Webflow, voici un article sympatoche : Webflow : tout savoir pour débuter.

‍

‍

Alors, c’est quoi le SEO ?

Search Engine Optimisation, c’est l’optimisation pour les moteurs de recherche en français, aussi connu sous le terme “référencement naturel”. Il s’agit d’un ensemble d’actions mises en place pour que ton site puisse être bien classé dans les moteurs de recherche.

‍

Sans aucune surprise, le moteur de recherche le plus important est Google qui, en 2021, en est a ~87% de part de marché (source Statista). Ça frôle la domination totale là 😆

‍

Voyons juste en dessous, des aspects du SEO (technique) que l’on peut configurer dans Webflow !

‍

‍

Faire attention au Responsive

Dans Webflow, il est possible de construire ton site adaptable à plusieurs écrans, et notamment aux écrans portables. Si tu proposes une bonne expérience utilisateur, les visiteurs passeront plus de temps sur ton site web et cela améliorera ton classement dans les moteurs de recherche.

‍

‍

Mettre en place les Meta titres et descriptions

Tu peux créer ton contenu écrit avec des mots-clés spécifiques pour ta cible et les placer où il en faut.

‍

‍

‍

Ajouter un Meta titre et une Meta description sur toutes tes pages

Dans les paramètres d’une Page, tu trouveras la section SEO settings, qui permet d’ajouter et/ou mettre à jour le Meta titre et la Meta description de chaque page de ton site. Ces informations seront les premières affichées quand un utilisateur te trouvera sur Google. ✨

Il faut travailler le contenu texte de ses Metas pour maximiser leur effet SEO ! Voici quelques règles pour te guider :

‍

Meta titre

• Unique : pas 2 pages avec le même Meta titre
• Bonne longueur : 68 caractères espaces compris
• Marque à la fin du titre avec un séparateur : " | NOM_MARQUE" (seule la page d'accueil dispose de la marque au début du titre)
• Pour optimiser : phrase courte et compréhensible avec les mots-clés importants au début

‍

Meta description

• Unique : pas 2 pages avec la même Meta description
• Bonne longueur : 160 caractères minimum et jusqu'à 250 max (la phrase sera tronquée, mais ça peut servir)
• Pour optimiser : expliciter l'objet de la page en apportant des précisions au titre, mais en reprenant les mots-clés stratégiques

‍

‍

‍

‍

💡 Au passage, une extension chrome SEO avec un usage gratuit : Detailed SEO

‍

‍

Le cas particulier d’une collection CMS

Dans la section “CMS Collection pages” (pages violettes dans l’image du dessous), en cliquant sur les paramètres de cette page un peu spéciale tu pourras alors configurer le Meta titre, description et les OpenGraph (que l’on aborde dans la section juste après d’ailleurs).

‍

Dans un Meta titre ou une Meta description, tu pourras alors combiner des éléments dynamiques (n’oublie pas que tu es sur une page d’une collection) avec des éléments statiques.

‍

Par exemple ci-dessous tu as le Meta titre qui est [NAME] | Magazine Superforge où [NAME] sera dynamiquement remplacé par Webflow par le nom de la page de l’article en question. Magique, ou presque 😅🪄

‍

‍

‍

‍

Open Graph settings

Le choix de l’image est essentiel pour rendre tes pages plus attractives !

Très importante pour un blog, la prévisualisation de l’image suscite l’intérêt de l’utilisateur pour le contenu (encore plus importante si tu partages ta page sur les réseaux sociaux).

‍

‍

‍

Indexation et génération du Sitemap

Une autre clé importante dans ta stratégie SEO est le fichier XML Sitemap. En créant un site web sur Webflow, tu peux générer automatiquement un sitemap.xml à la racine de ton site web.

Voici le sitemap de SuperForge comme exemple : https://www.superforge.io/sitemap.xml

Ce Sitemap sert à lister les contenus de ton site, aidant les robots d’indexation de Google à les explorer.

‍

‍

De plus, ce Sitemap pourra être ajouté dans ta Google Search Console directement pour initier le scan de ton site et son indexation !

C’est par ici 👉 Google Search Console

‍

‍

‍

💡 S’il te reste des pages de test ou non utilisées (surtout si tu es parti d’un template), n’oublie pas de les mettre en non publié (ou bien de les supprimer). Pour que ces pages n’apparaissent pas dans ton sitemap et que donc les moteurs de recherche ne l’indexent pas non plus. 😉

‍

‍

Ajout des ALT text sur les images

Au-delà de la facilité d’ajouter les images via drag and drop, il est possible d’ajouter une description à ton image. Cela aide non seulement à l’accessibilité mais aussi à informer les moteurs de recherche du sujet de l’image.

Webflow te permet de labelliser ces images comme “décorative”, signifiant qu’un Alt text n’a pas de sens dans le contexte de l’image.

Il est également intéressant de donner un nom cohérent aux images que tu places sur ton site Webflow. Exemple : projet_plateformev2_bubble.jpg au lieu de Image1.jpg.

De plus, il faut absolument que tu optimises la taille des images que tu places sur ton site. Pour cela, tu as un plusieurs sites par exemple le I💙IMG. Passe chaque image à la moulinette du Resize et du Compress pour minimiser leurs poids.Des images qui chargent vite contribuent à des sites qui chargent vite. 💪

‍

‍

Redirections 301

Rediriger des anciennes pages vers une nouvelle URL est possible, minimisant ainsi l’impact sur la navigabilité et sur ton classement SEO sur Google.

‍

‍

Par exemple ici toutes les URLS commençant par https://superforge.io/blogs/ redirigeront vers https://superforge.io/articles/ en transposant le dernier path de la première URL vers la seconde.

‍

💡 Concrètement,

https://www.superforge.io/blogs/webflow-tout-savoir-pour-debuter‍

Redirige vers

https://www.superforge.io/articles/webflow-tout-savoir-pour-debuter

‍

Simple 💪

‍

‍

Utiliser convenablement les H1, H2, H3

Les Headers permettent aux moteurs de recherche de mieux comprendre le contenu d’une page. Également ici, il convient de bien réfléchir aux textes qui seront utilisés : un titre “catchy” ou intéressant va retenir l’utilisateur sur la page plus long ou lui permettre de passer à une sous-section intéressante lors de sa lecture.

‍

Voici quelques conseils d’utilisation :

‍

Pour le H1

• Jamais plus d'un H1 par page. Il reprend en général une grosse partie du Meta titre.
• Le H1 se place seulement sur du texte (pas des images).
• Pour optimiser : reprendre le Meta titre sans la marque finale (sauf exceptions).

‍

Pour le H2

• Uniquement pour le corps de page et minimum de 2 par page.
• Ne pas essayer d’insérer des mots-clés ici.
• Pour optimiser : décliner plus précisément l'idée présentée dans le Meta titre & le H1.
• Astuce : le H2 peut être seul et directement sous le H1 pour encapsuler un court chapeau de texte, quand on a très peu de contenu à présenter par la suite.

‍

‍

Conclusion

Webflow permet donc une configuration plutôt poussée de la partie technique du SEO.

Mais pour être bien positionné sur les moteurs de recherche, la technique ne suffit pas. Il faut aussi avoir un process de publication de contenus, travailler les mots-clés, créer un maillage interne cohérent, avoir des backlinks de qualité et créer une expérience utilisateur optimale.

‍

En espérant que cet article t’a permis d’y voir plus clair, je te souhaite bonne configuration SEO dans Webflow ! 😉

‍

Si tu as besoin de développer ton site web, on peut peut-être t’aider. Viens réserver un rendez-vous Office Hour pour t’orienter. À bientôt ! 👋

‍

‍