Elias, Branding Studio, webflow partner

Guide: How to migrate your blog to Webflow

Your brand, our focus
Your brand, our focus
Your brand, our focus
Your brand, our focus
Webflow
resources
/
Webflow
/
Guide: How to migrate your blog to Webflow
February 2024
6
Min

Vous voulez prendre le blog de votre ancien site et le déposer sur votre nouveau ? Il n'y a pas de magie là-dedans : cela s'appelle la migration 🤩

Dans cet article, je vous explique comment migrer le contenu de votre blog sur votre nouveau site Webflow 👇

Exporter le contenu du blog

Organiser la migration vers Webflow et limiter les erreurs

Avant de faire le moindre geste, vous devez vous organiser 😉 En effet, la migration d'un site demande de la rigueur et une mauvaise organisation peut vite générer des erreurs. Pour éviter de perdre du temps par la suite, je vous encourage à ne pas tout réaliser en même temps et à bien vous organiser en amont.

Pour cela, vous pouvez :

  • Lister toutes les pages et URLs de votre blog. Ici, nous voulons être sûrs de ne rien oublier ! Pour faciliter cette tâche, vous pouvez utiliser un sitemap. Et au lieu d'utiliser un bloc note papier et un stylo, pourquoi ne pas utiliser un fichier Excel ou d'autres outils no code pour plus de praticité (Notion par exemple 😍) ?
  • Analyser tous les backlinks de votre blog. Nous allons les lister dans le même fichier Excel (ou autre) pour ne perdre aucun d'entre eux, en particulier les bons. Ici, on cherche à s'assurer que la migration aura peu d'impact sur le trafic du site à long terme, de fait garder les backlinks de qualité est crucial ! Google Search Console et Google Analytics seront nos meilleurs alliés pour cette étape.
  • Catégoriser les différentes pages et URLs de blog. Ce tri peut être intéressant par la suite car vous pourrez identifier les pages à conserver, à supprimer et à modifier.

Exporter les données de son site Wordpress

Un plug-in pour exporter le contenu de blog

Il existe un moyen très facile pour exporter les données de votre site WordPress sans avoir à tout reconstruire un par un sur Webflow ! Ce moyen est un plug-in nommé WP CSV.

Il permet d'exporter le contenu de votre blog en .csv, un format adapté à son importation dans Webflow.

Pour utiliser WP CSV, vous n'avez qu'à le télécharger ici 🙌

Il vous faudra ensuite l'activer sur WordPress et exportez les données de votre blog.

Importer le contenu dans Webflow

C'est maintenant que la magie opère ! Vous allez voir apparaitre le contenu de votre blog sur votre nouveau site Webflow.

Pour cela, il vous suffit d'ouvrir votre collection Webflow CMS, puis de cliquer sur "Importer" en haut à droit pour enfin sélectionner votre fichier .cvs !

Et voilà, c'est fait ! Le contenu de votre blog est désormais disponible sur votre tout nouveau site web créé avec Webflow.

Cependant, il y a deux points importants à garder à l'esprit :

Tout d'abord, il est crucial de ne pas dépasser la limite de 10 000 items dans le CMS Webflow. Soyez donc vigilant pour ne pas dépasser cette limite, au risque de voir votre site ralentir ou même planter.

Ensuite, assurez-vous de faire correspondre correctement les champs de votre fichier CSV avec les champs de votre système de gestion de contenu (CMS) sur Webflow. Cela permettra de s'assurer que votre contenu est correctement importé et bien organisé sur votre nouveau site.

Vérifier les URLs et configurer les redirections 301 sur Webflow

Vérifier que les URLs est une étape très importante pour assurer la migration de votre site 🤓

Les redirections 301 : qu'est-ce que c'est ?

Les redirections 301 sont un type de redirection de page web qui permet de rediriger le trafic d'une URL à une autre. Cette redirection est considérée comme permanente, car elle indique aux navigateurs web et aux moteurs de recherche que l'URL d'origine a été déplacée de façon permanente vers une autre adresse.

Lorsqu'un utilisateur accède à une URL qui a été redirigée via une redirection 301, il est automatiquement redirigé vers la nouvelle URL cible, sans même s'en rendre compte. Les redirections 301 sont donc très utiles pour éviter que les visiteurs du site arrivent sur une page d'erreur 404 ou autre page non pertinente ...

De plus, les redirections 301 sont très utiles pour le référencement naturel car elles permettent de transférer la valeur des backlinks de l'ancienne URL vers la nouvelle URL, ce qui contribue à maintenir le classement de la page dans les résultats de recherche. Donc, si vous souhaitez éviter les erreurs et conserver le référencement naturel de votre site, vérifiez bien vos URLs et si besoin configurez des redirections 301 ! 🤞

Configurer les redirections 301 avec Webflow

Astuce : dans la mesure du possible, veillez à garder les même URLs que votre ancien site web. Ce sera plus simple !

Néanmoins, il est tout à fait normal qu'il y ait quelques changements dans un projet de migration de site web.

Pour effectuer cette configuration, vous aurez besoin de la liste des URLs que vous avez établie en phase 1 (si vous avez suivi mon conseil d'organisation 😉). Pour configurer cette redirection, vous devree disposer du "hosting plan" dans Webflow. Une vidéo expliquant en détail les étapes à suivre est accessible juste ici sur le site de Webflow !

Vérifier l'optimisation du référencement technique sur Webflow

Vérifiez les balises titre de vos articles de blog

Si vous souhaitez que votre nouveau site web soit facilement trouvable sur les moteurs de recherche, il est important d'ajouter les bonnes balises à vos articles de blog. Les balises de titre sont particulièrement importantes, car ce sont les premiers éléments que les utilisateurs voient lorsqu'ils recherchent votre site web. Assurez-vous que toutes vos pages ont des balises de titre. Vous pouvez facilement ajouter des balises personnalisées en utilisant les champs dynamiques dans Webflow.

Vérifiez les méta-descriptions de vos articles de blog sur Webflow

De même, les métadescriptions sont essentielles pour décrire brièvement le contenu de votre page dans les résultats de recherche. Ajoutez des métadescriptions personnalisées à  vos articles de blog directement depuis Webflow ✌🏼

Pensez aux images OG de vos articles de blog sur Webflow

Si vous partagez votre site web sur les réseaux sociaux, n'oubliez pas d'ajouter des images OG personnalisées pour chaque page. Vous pouvez ajouter des champs d'images personnalisés à votre collection CMS sur Webflow et les utiliser comme champs dynamiques dans les paramètres de la page.

Pensez à la Favicon de vos articles de blog sur Webflow

N'oubliez pas non plus la favicon, il s'agit de la petite image qui apparaît à côté de l'onglet de votre site web dans les navigateurs web. Assurez-vous qu'elle est bien visible et reconnaissable.

Vérifiez les titres de vos articles de blog sur Webflow

En ce qui concerne les titres, assurez-vous que chaque page n'a qu'un seul H1 et que les autres titres suivent un ordre logique de h2 > h3, h3 > h4, etc. Cela aidera à organiser votre contenu et à le rendre plus facilement compréhensible pour les utilisateurs et les moteurs de recherche.

Vérifiez les balises Alt de vos articles de blog sur Webflow

Et n'oubliez pas d'ajouter des attributs alt à vos images, afin que les utilisateurs et les moteurs de recherche puissent comprendre leur contenu, même s'ils ne peuvent pas les voir 🧐

Bonus :  TOP 10 des outils no code pour votre site Webflow

As you will have understood, the migration of your site to Webflow is easy but it requires rigor and a lot of checks! 🤓

You now have a Webflow site and I can only be delighted 🎉 If you want to take your site even further, I advise you to read this article on 10 no-code tools for your Webflow site !

Elias, Branding Studio, webflow partner

Brand Strategy
Brand Identity
Brand Experience
Naming
Copywriting
Brand Idea
Logo
Photography
Illustration
3D & Motion
SEO
Website
Webflow
Custom Animation
Maintenance
Webdesgin

We are brand creators. We transform projects into a strong, online brand.

Related articles

Your site with Webflow, the No. 1 no-code tool

Brand Strategy
Brand Identity
Brand Experience
Brand Strategy
Brand Identity
Brand Experience