Nous utilisons juste ce dont on a besoin pour le fonctionnement du site. Pour plus d'infos lire notre politique de confidentialité.
icon-cookie

Tuto SEO Webflow - Optimiser le référencement des pages

Thibaut Legrand
Thibaut Legrand
January 21, 2022
Ordinateur avec capture d'écran des pages settings dans Webflow

Tables des matières

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”.

Edit Page Settings : Designer Webflow

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).

Champ Title Tag, SEO Settings, paramètres de page Webflow

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.

Champ Meta Description, SEO Settings, paramètres de page Webflow

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).

Redimension d'un open graph image sur Figma par 1200*630 pixels

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.

Compression d'un open graph image sur IloveIMG par 73%

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).

Copy asset link to clipboard d'une image sur Webflow

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”.

Open Graph Preview dans les paramètres de page Webflow

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.

Test d'un open graph grâce à un post de lien sur LinkedIn

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.

Vous méritez un site Webflow qui fait l'effet " Wahouu " !

Prenez contact avec nous aujourd'hui. L'équipe fantastique de Digidop est prête pour vous aider à construire un site web qui répond à vos besoins 🚀

Site digidop.fr sur un écran d'ordinateur avec un badge de recommandations et des réactions