Aujourd’hui nous allons faire un petit tutoriel Webflow X SEO. Dans cet article, vous allez découvrir comment optimiser le SEO d’une page Webflow. Après avoir suivi ce tutoriel Webflow, vous pourrez transformer un lien de partage classique par un lien avec une photo, un titre et une description.
Etape n°1 : Rendez-vous dans les “Pages Settings”
La première étape consiste tout simplement à ouvrir Webflow et à ouvrir votre projet. Une fois dans le Designer de celui-ci, vous allez pouvoir ouvrir l’onglet page sur le côté gauche. Cliquez sur le bouton paramètres de la page que vous souhaitez optimiser pour le SEO (survolez la page et cliquez sur la petite icône d’engrenage). Vous êtes maintenant arrivé dans la partie “Edit Page Settings”.
Etape n°2 : Renseignez un Title Tag - SEO Webflow
Pour optimiser le référencement naturel de votre page, il va d’abord falloir commencer par lui rajouter un Title. Pour ce faire, dans l’éditeur de paramètre de page, scrollez jusqu’à la section “SEO settings”. Dans cette section, vous allez avoir un champ intitulé “Title Tag”. C’est un champ très important puisque c’est le titre que vous donnez à votre page qui va être vu par les internautes sur les moteurs de recherche. Il est très important de l’optimiser avec des mots-clés en rapport avec la page en question. La balise Title doit comprendre entre 45 et 55 caractères.
PS : Vous avez même un aperçu du rendu de votre page sur une SERP (Search Engine Result Page = Page de résultats des moteurs de recherche).
Etape n°3 : Renseignez une Meta Description - SEO Webflow
Juste en dessous du champ “Title Tag”, nous avons le champ “Meta Description”. C’est le second champ le plus important dans l’optimisation d’une page pour le SEO. En effet, c’est ici que vous allez pouvoir donner plus d’indications sur le contenu de celle-ci. En 160 caractères maximum, vous allez pouvoir décrire aux internautes ce qu’ils vont trouver sur votre page. C’est un élément important car il va déterminer ou non si les internautes vont cliquer sur votre site ou sur celui d’un autre. C’est un critère de différenciation. Bien évidemment dans cette courte description, vous allez pouvoir ajouter des mots-clés pour pouvoir vous positionner sur vos requêtes clés.
Comme pour le Title, dans Webflow nous pouvons voir l’aperçu de la Meta Description dans une SERP. N’oubliez pas de sauvegarder vos modifications pour éviter de tout perdre.
Etape n°4 : Ajoutez une Open Graph Image URL - SEO Webflow
Dans cette étape, nous allons vous montrer comment personnaliser encore plus vos liens en leur ajoutant une image lorsqu’ils seront partagés. La première chose à faire est de scroller jusqu’à la section “Open Graph Settings” (en dessous de “SEO Settings”).
Etape n°4.1 : Redimensionnez votre image
La première étape intermédiaire consiste à choisir votre image et la redimensionnez. Le format de votre image doit être de 1200*630 pixels. C’est un format recommandé car il est universel et s’adapte à tout type d’écrans et de device (responsive).
Pour gagner en productivité, nous vous conseillons d’utiliser l’outil no-code Figma. Vous allez pouvoir créer un nouveau fichier de design. Créer un template Figma avec les dimensions précise de l’open Graph (1200*630 pixels) et insérez votre image et designez-la. Sinon vous pouvez aussi directement insérer votre image et la redimensionner grâce à l’onglet Design de droite. N’oubliez pas de renommer votre image (avec des mots-clés) avant de l’exporter (tout en bas de l’onglet Design).
Etape n°4.2 : Compressez votre image
Seconde étape intermédiaire, mais une des plus importantes. Il va falloir compresser votre image open graph. En fait, c’est une bonne pratique SEO. En effet, compresser une image permet de la rendre plus légère ce qui permet un chargement plus rapide de vos pages web et donc des meilleures performances et une meilleure expérience utilisateur (UX). Découvrez comment accélérer le temps de chargement des pages de votre site internet.
Pour compresser vos images, nous vous recommandons l’utilisation de l’outil en ligne IlovIMG. Rien de plus simple avec cet outil, sélectionnez votre image, déposez la dans l’outil et il va vous la compresser. La compression est vraiment optimale.
Etape n°4.3 : Importez votre fichier média dans Webflow
Maintenant que votre image pour l’open graph est redimensionnée, renommée et compressée, vous allez pouvoir l’importer dans Webflow. Dans le Designer de Webflow, cliquez sur l’onglet Assets. Vous pourrez alors upload un nouveau fichier média en cliquant sur l’icône en forme de nuage.
Une fois votre image upload, survolez l’image et cliquez sur le bouton paramètres (icône engrenage) en haut à droite de celle-ci. Vous arrivez alors dans les “Assets settings” de l’image. Premièrement, vous allez pouvoir rentrer une description de votre image (balise Alt Text). C’est une bonne pratique pour le SEO et pour l’accessibilité web. Ensuite, vous allez cliquez sur l’icône de maillage pour copier le lien de l’image (copy asset link).
Etape n°4.4 : Retournez dans les paramètres de votre page
L’avant-dernière étape consiste à retourner dans les paramètres de votre page. Scrollez jusqu’à la section “Open Graph Settings”. Dans le champ “Open Graph Image URL” collez le lien. Pour être sûr de ne pas vous être trompé, vous pouvez prévisualiser votre lien. dans “Open Graph Preview”.
Etape n°4.5 : Sauvegardez les modifications
N’oubliez pas de sauvegarder les modifications grâce au bouton “Save” en haut à droite de l’onglet.
Etape n°5 : Testez votre lien
Vous pouvez maintenant tester votre lien, en le copiant collant sur LinkedIn par exemple. Vous aurez alors un aperçu du partage de votre lien.
Voilà vous avez optimisé le SEO de votre page Webflow facilement (Découvrir d'autres axes pour améliorer votre SEO). Toutes ces étapes vont vous permettre d’augmenter votre taux de clic. De plus vous serez mieux référencé sur les moteurs de recherche et votre visibilité en ligne sera meilleure. Pour générer encore plus de trafic, maintenant, il vous faudra mettre en place une stratégie de référencement naturel.
Pour vos besoins SEO Webflow, faîtes confiance à notre agence no-code.
Prêt(e) à avoir un site qui convertit ?
Améliorer votre visibilité en ligne grâce à l’experience, l’excellence et la réactivité de Digidop !
.jpg)
.webp)
