Le guide du marketeur pour le SEO dans Webflow

C'était en 2017, et je me sentais bloqué, car j'essayais de faire évoluer mon site web tout en essayant simultanément de dépendre de moins d'outils.

J'étais convaincu que Webflow était la réponse, mais j'étais aussi terrifié par une migration, car je me classais pour beaucoup de mots-clés.

À l'époque, mon site venait d'être piraté et j'en avais assez de dépendre de tant de plugins tiers pour m'aider à concevoir (relativement) des landing pages personnalisées sans savoir coder

J'ai donc décidé de tout miser sur Webflow. Ce n'était qu'une question de temps avant de découvrir si c'était la meilleure ou la pire décision SEO que j'avais prise.

Au cours des week-ends suivants, j'ai migré mon site de WordPress vers Webflow. J'ai regardé des vidéos YouTube de Webflow University, Flux, CharlieMarieTV, pixelgeek et Timothy Ricks pour tout comprendre.

En quelques jours après le lancement de mon nouveau site Webflow, j'ai constaté que non seulement j'avais conservé tous mes classements, mais que j'en avais même amélioré certains. Par exemple, avant de migrer vers Webflow, je me classais 8e pour un mot-clé très recherché, et après la migration, j'étais 2e.

Cela m'a lancé dans une véritable enquête pour comprendre pourquoi cela s'était produit et ce qu'était vraiment Webflow. Je savais que c'était un excellent outil pour les designers et développeurs front-end, mais était-il aussi le secret le mieux gardé des marketeurs ? Je ne serais certainement pas le premier marketeur à vous dire que Webflow possède certaines des meilleures fonctionnalités SEO qui existent.

Webflow est un outil sous-estimé pour les marketeurs

En toute transparence, au moment de la rédaction de cet article, je travaille chez Webflow et j'aide à diriger des initiatives SEO. Il est presque impossible d'éviter de sembler partial par moments, car j'utilise Webflow depuis un certain temps déjà, y compris avant de travailler pour l'entreprise. 

Mais même si je ne travaillais pas chez Webflow, je suis convaincu que Webflow resterait mon outil principal pour construire des sites web et gérer du contenu dans un CMS. 

Car, en tant que marketeur, j'ai besoin d'une plateforme qui maximise mes efforts SEO, me permet de créer rapidement des landing pages personnalisées à utiliser dans des campagnes marketing, et me donne la capacité de concevoir des expériences personnalisées sans avoir besoin d'impliquer des ingénieurs.

Et je ne suis pas le seul : les marketeurs qui ont utilisé Webflow ont constaté qu'ils avaient un contrôle total sur le site web de leur entreprise. Il n'est pas nécessaire d'impliquer les équipes de développement quand les équipes marketing doivent modifier le contenu, ajouter des codes de suivi, ou construire de nouvelles pages sur un site.

Cela permet même à un marketeur seul de construire de zéro un site web d'entreprise rapide et adapté au SEO. 

« Webflow me laisse simplement faire ce que je veux faire. Pas besoin de pousser vers un environnement de staging, pas besoin d'appeler un développeur ami pour coder une maquette. Avec Webflow, je peux vraiment tout faire moi-même en toute confiance. »

- John-Henry Scherck 

C'est fascinant de voir comment la migration vers Webflow a amélioré le trafic SEO de nombreuses entreprises. Non seulement leurs sites sont plus rapides et plus légers sur Webflow, mais ils ont aussi une meilleure structure de contenu, ce qui facilite l'exploration et l'indexation des pages par Google. 

Même chez Webflow, nous utilisons le CMS Webflow pour créer des landing pages et articles de blog, tout cela propulsé par Webflow Hosting.

Et au cours de l'année écoulée, nous avons pu utiliser les fonctionnalités SEO de Webflow pour faire croître notre blog, celui que vous lisez actuellement, à plus de 300 000 visiteurs par mois :

Et oui, Webflow.com est entièrement conçu et hébergé sur Webflow, ce qui devrait en dire long sur sa puissance.

Alors, Webflow est-il bon pour le SEO ? Je dirais que c'est l'une des meilleures options disponibles. Même Astawa serait d'accord :

Pour les marketeurs, le SEO est crucial : sans efforts SEO solides, vous aurez du mal à attirer des visiteurs organiques depuis les moteurs de recherche. Malheureusement, si vous cherchez en ligne des guides SEO ou des facteurs de classement, vous trouverez beaucoup de bruit. 

Simplifions les choses. Si vous voulez un site web bien optimisé, voici les questions les plus importantes à vous poser : 

• Mon site a-t-il un design réactif ?
• Est-ce que je limite le nombre de scripts que j'utilise et le code est-il léger ?
• Ai-je un fournisseur d'hébergement sécurisé et rapide ?
• Puis-je créer différents formats de contenu comme blog, pages de catégorie, pages produits, landing pages, etc. ?
• Puis-je facilement ajouter et modifier les meta titres, descriptions et balises alt ?
• Puis-je modifier les paramètres SEO techniques comme les canoniques, sitemaps, fichier robots.txt, reverse proxies et code personnalisé ?
  

Si vous pouvez répondre « oui » aux six questions, vous disposez de tous les contrôles nécessaires pour créer un site web adapté au SEO.

Heureusement, chez Webflow, nous pouvons dire « oui » aux six. Mais vous vous demandez comment maximiser vos efforts SEO dans Webflow ?  Laissez-moi vous expliquer.

Webflow : votre plateforme tout-en-un pour un site optimisé pour le SEO

Vous ne pouvez pas avoir un excellent SEO si votre site est lent ou difficile à indexer et classer pour Google. C'est pourquoi l'équipe Webflow a consacré tant de réflexion et d'efforts à rendre Webflow rapide et léger.

Avec Webflow, vous pouvez vous assurer que tous vos sites utilisent un hébergement de qualité entreprise (construit sur AWS), produisent un code sémantique propre, vous permettent d'ajuster les paramètres SEO sans ajouter de plugins, et vous donnent plus de flexibilité avec les structures de contenu et le design web.

Voici pourquoi Webflow est le meilleur choix SEO pour votre site web.   

Design réactif

Il n'est pas surprenant que Google aime classer les sites qui offrent une bonne expérience utilisateur. Mais comment Google juge-t-il quelque chose d'aussi subjectif ?

L'un des éléments clés que recherche Google est le design web réactif. Cela signifie que les pages d'un site web devraient sembler avoir été conçues spécifiquement pour l'écran sur lequel elles sont consultées, qu'il s'agisse d'un ordinateur de bureau, d'une tablette ou d'un appareil mobile. 

Webflow dispose d'une multitude d'éléments HTML et de mises en page préconçues entièrement réactives. Et si vous prenez un modèle sur la marketplace de templates, ou suivez un tutoriel sur Webflow University, vous pouvez être sûr que tout est réactif.

Balisage schema et code personnalisé

Pouvoir ajouter du code personnalisé à un projet est important. Dans Webflow, si vous souhaitez ajouter du code personnalisé à l'ensemble de votre site (toutes les pages), vous pouvez le faire dans les paramètres de votre projet. 

Si vous souhaitez ajouter du code personnalisé à des pages individuelles (statiques ou dynamiques), vous pouvez l'ajouter dans les paramètres de page dans le Designer.

Le code personnalisé que vous ajoutez à vos paramètres de page peut aller de l'ajout d'une balise canonique (nous y reviendrons bientôt) à du code JavaScript.

Comme il existe tant de types de contenu différents sur le web, il est recommandé de fournir à Google le plus d'informations possible sur votre contenu. Ainsi, Google peut être plus confiant quant à l'objectif de votre contenu et à la façon de le classer de manière appropriée.

Un moyen d'y parvenir est d'ajouter du balisage schema à votre site web. Ce que fait un balisage schema, c'est « améliorer la façon dont les moteurs de recherche lisent et représentent votre page dans une page de résultats (SERP) ». Sur Webflow, vous pouvez ajouter le code personnalisé schema pour un article de blog directement dans la section de code personnalisé des paramètres de votre page modèle CMS. En faisant cela, non seulement vous aurez de meilleures informations représentées dans la recherche, mais vous aurez aussi de meilleures chances de remporter le précieux extrait enrichi de Google. 

Meta titres et descriptions

Webflow vous donne la possibilité de modifier les meta titres et descriptions pour chaque page que vous créez, qu'elle soit statique ou dynamique (CMS). Sur Webflow, vous pouvez aussi voir un aperçu de l'apparence du lien dans les résultats de recherche Google en accédant à la vue montrée ci-dessous. 

Pouvoir les modifier vous aidera non seulement à vous classer pour certains mots-clés et à aider vos utilisateurs à trouver facilement ce qu'ils recherchent, mais vous donnera aussi l'opportunité de tester A/B les titres et descriptions pour améliorer le taux de clics (CTR) de vos pages.

Il est important que toutes vos pages en direct aient des balises title et meta descriptions précises. Vous voulez généralement rester sous les 60 caractères pour les balises title et sous les 155 caractères pour les meta descriptions.

Voici un exemple de ce à quoi cela pourrait ressembler pour une page statique :

Meta titre et description pour les pages de collection CMS

Pour le contenu dynamique, comme les articles de blog ou les landing pages basées sur le CMS, vous voudrez modifier les pages de collection CMS.

Pour cela, vous définirez un modèle que toutes les pages d'une collection utiliseront pour leur balise title et meta description. Ainsi, tous les éléments de la collection récupéreront automatiquement leurs paramètres SEO de chaque collection en fonction du modèle que vous définissez.

Pour définir votre modèle, allez dans les paramètres de votre modèle de collection dans le panneau des pages et ajoutez les champs de collection que vous voulez utiliser pour votre meta titre et description SEO dans la section des paramètres SEO.

Par exemple, vous pourriez ajouter le champ « Nom » de votre article de blog comme balise title. Ainsi, chaque article de blog aura automatiquement le nom défini comme balise title.

Pour la meta description, vous ferez de même. Référencez le « résumé » de votre article de blog. 

Vous pouvez aussi combiner des champs et même saisir du texte personnalisé pour travailler avec ces champs, qui sont comme des variables entre lesquelles vous pouvez basculer pour prévisualiser tous vos éléments de collection.

Gestion robuste des redirections 301

Parfois, les URL changent. Que ce soit à cause d'une migration de plateforme, d'une migration de domaine, ou d'une mise à jour de contenu, il est important de s'assurer que les URL obsolètes redirigent vers les nouvelles. 

Dans les paramètres de votre projet Webflow, vous pouvez facilement configurer des redirections 301.

C'est une fonctionnalité utile si vous migrez depuis une autre plateforme, ou si vous décidez de mettre à jour des URL pour booster le trafic SEO.

Historiquement, nous avons observé des bonds de trafic pour des articles de blog lorsque nous les mettons à jour pour les optimiser autour d'un mot-clé spécifique.

Par exemple, nous avons une fois mis à jour le slug d'un article de blog pour le rendre plus adapté au SEO, et après avoir publié la mise à jour, nous avons mis en place une redirection 301 de l'ancien slug vers le nouveau. Cela a garanti que tout le « jus SEO » de l'ancien lien était transmis au nouveau. Voici comment cela a affecté le trafic vers l'article de blog :

Immédiatement, le trafic a doublé. Et l'avantage, c'est que nous avons pu mettre en place la redirection 301 sans impliquer l'équipe d'ingénierie. Nous avons pu tout configurer directement dans les paramètres de notre projet Webflow et publier le changement en quelques secondes.

Modification simple des balises alt d'image

Les balises alt jouent un rôle important tant dans les efforts SEO que dans l'accessibilité web. Ajouter un texte alternatif descriptif aux images aide Google à comprendre de quoi parle l'image et le contenu associé, ce qui influence le classement du contenu. De plus, ce même texte alternatif garantit que les visiteurs utilisant des lecteurs d'écran obtiennent une description de l'image. 

Inclure des balises alt contribue aussi à votre expérience utilisateur globale : les sites web accessibles à un plus grand nombre de personnes offrent une meilleure expérience que ceux qui ne le sont pas. 

Lorsque vous téléchargez une image dans le Designer, vous pouvez facilement définir une balise alt comme description de l'image.

Contrôles d'indexation et de sitemap

Indiquer à Google quelles pages vous souhaitez qu'il explore ou non est vital pour la santé SEO de votre site. 

Dans Webflow, vous pouvez définir des préférences d'indexation et même créer un fichier robots.txt où vous pouvez définir quelles pages vous ne voulez pas que Google indexe et classe dans les résultats de recherche.

Consultez le guide complet sur la configuration de votre fichier robots.txt sur Webflow University.

S'il est important d'indiquer à Google quelles pages vous ne voulez pas qu'il indexe, il peut aussi être utile de lui indiquer quelles pages vous voulez absolument qu'il indexe. Vous faites cela en créant un sitemap et en le soumettant à Google Search Console.

Dans les paramètres de votre projet Webflow, vous avez la possibilité de générer automatiquement un sitemap ou d'en créer un manuellement vous-même.

Dans la plupart des cas, vous voulez générer automatiquement votre sitemap. Mais pour des sites plus complexes et plus grands, il peut être judicieux de procéder manuellement, car vous pourrez exclure les pages que vous ne voulez pas voir indexées par Google, comme les pages de « connexion » ou de « tableau de bord d'application ».

Une fois votre sitemap publié, vous pouvez le trouver à l'adresse votresite.com/sitemap.xml, c'est aussi l'URL que vous soumettrez dans Search Console pour informer Google des pages les plus importantes de votre site.

Balises canoniques

Bien que l'algorithme de Google ait suffisamment progressé pour souvent identifier lui-même le contenu dupliqué, le meilleur moyen de garder une longueur d'avance sur l'algorithme est de définir des liens canoniques. 

Lorsque vous ajoutez une balise canonique à une page web, cela indique essentiellement à Google que c'est la page originale. C'est un peu comme minter une page, pour tous les fans de NFT.

Ainsi, si vous rencontrez des problèmes de migration de liens ou si quelqu'un copie votre contenu, vous pouvez fournir à Google la source de vérité.

Les canoniques sont si importants que nous les utilisons sur presque toutes nos pages du site Webflow. Il existe deux façons d'ajouter une balise canonique à une page : le code personnalisé ou les paramètres de projet.

La méthode plus manuelle consiste à ajouter cette ligne de code à une page individuelle :

L'image ci-dessus montre comment notre blog est configuré. « Canonique » est un champ de collection personnalisé que nous avons défini ici comme l'URL d'un article de blog.

La configuration pour une page statique ressemblerait à ceci :

Mais tout cela est manuel et un peu dépassé.

Nous avons donc créé une fonctionnalité qui vous permet d'ajouter une balise canonique globale dans les paramètres de votre projet. Cela définit un canonique pour l'ensemble de votre projet.

Vous définissez simplement votre URL une fois dans les paramètres de votre projet, et Webflow créera automatiquement la balise canonique appropriée pour chaque page de votre site, qu'elle soit statique ou dynamique.

Tout ce que vous avez à faire est d'aller dans l'onglet SEO de vos paramètres de projet principaux et de saisir votre domaine principal.

Remarque : le canonique est défini au niveau du projet, ce qu'il faut garder à l'esprit si vous configurez des reverse proxies avec Webflow.

Reverse proxy

Dans des cas d'utilisation plus orientés entreprise, vous pourriez avoir un grand site web avec une grande base de données partiellement hébergée hors de Webflow. Ou vous pourriez avoir plusieurs projets Webflow que vous voulez assembler et héberger comme un seul site web.

Pour avoir une configuration comme celle-ci, vous devrez configurer des reverse proxies ou utiliser le préfixe href dans les paramètres de votre projet.

Avec les reverse proxies, vous devrez impliquer une équipe de développement pour les configurer. Mais vous pouvez avoir la certitude qu'ils n'affectent pas négativement vos classements SEO lorsqu'ils sont correctement mis en place.

Pour plus d'informations sur la configuration des reverse proxies avec Webflow, consultez ces ressources :

• Hébergement partiel de site avec reverse proxy
• Préfixe href — Webflow University

Options de publication avancées

Dans l'onglet hébergement de vos paramètres de projet, si vous faites défiler jusqu'en bas, vous verrez ceci :

Ici, vous pouvez activer (ou désactiver) quelques fonctionnalités qui aideront à accélérer votre site web. C'est une bonne pratique SEO de les activer toutes. Ainsi, vous pouvez garder votre site sécurisé avec un SSL et aider à l'accélérer en minifiant le HTML, CSS et JS.

Un hébergement incroyablement rapide utilisé par de grandes marques

Toutes les fonctionnalités mentionnées ci-dessus sont excellentes et vitales pour optimiser correctement votre site. Mais si votre site ne peut pas atteindre les internautes du monde entier, que ce soit parce que quelqu'un a une connexion internet lente ou qu'il est trop éloigné de votre serveur, aucune de ces optimisations n'a d'importance.

C'est pourquoi l'hébergement web est si important.

Pour maximiser vos efforts SEO avec le SEO on-page et technique, l'hébergement de Webflow a été conçu pour être serverless et extrêmement rapide.

Cela signifie que Webflow a un temps de disponibilité de 99,99 % et qu'il n'y a jamais besoin de mettre à jour quoi que ce soit côté serveur de votre site.

Webflow.com est entièrement hébergé sur Webflow, et nous avons des millions de vues de page chaque mois. Vous pouvez donc être confiant que chaque site Webflow que vous construisez bénéficiera d'un hébergement sécurisé, de qualité entreprise, évolutif.