Comment migrer de Squarespace à Webflow ? Guide 2023

Squarespace et Webflow sont des plateformes de création de sites web Nocode qui offrent des fonctionnalités de conception et de développement web. Webflow convient davantage aux utilisateurs qui recherchent la liberté de personnalisation, tandis que Squarespace est utilisé pour sa simplicité.

Cela dit, nous observons que de plus en plus de personnes veulent migrer vers Webflow. C'est pourquoi nous avons trouvé intéressant d'écrire un article sur le sujet.

Pourquoi migrer de Squarespace à Webflow ?

• Performance SEO : Avec uRoot, une agence spécialisée en SEO, nous avons réalisé une étude SEO sur l’ensemble des outils Nocode. Nous avons déduit un score “Web Vitals” de 77/100 en faveur de Webflow et de 49/100 pour Squarespace en ce qui concerne Squarespace.

• Personnalisation des pages : Webflow permet une grande personnalisation – sans avoir à coder – alors que pour Squarespace, un développeur sera nécessaire pour une personnalisation poussée.

• Communauté active : Webflow dispose d'une communauté active incluant une page pour mettre en avant les travaux des utilisateurs, une page de designers pour les freelances et un forum très riche. Squarespace, en revanche, ne propose pas d'espace communautaire de ce poids.

Si vous souhaitez aller plus loin, nous avons écrit un comparatif complet entre ces deux outils.

Exportez votre contenu de Squarespace

Les étapes à suivre

Avant de commencer l’exportation, veuillez sauvegarder votre site web pour pouvoir revenir en arrière en cas de problème.

Pour exporter votre contenu de Squarespace, veuillez suivre ces étapes :

1. Cliquez sur l'icône Paramètres dans le coin inférieur gauche de l'écran.
2. Cliquez sur le bouton Avancé.
3. Cliquez sur Exporter/Importer.
4. Sélectionnez Exporter.
5. Cliquez sur l'icône Wordpress, le fichier sera exporté au format Wordpress mais vous pourrez sans problème l’importer dans Webflow.

6. Choisissez les éléments que vous souhaitez exporter (pages, articles de blog, produits, etc.).
7. Cliquez sur Exporter.

Un fichier XML sera créé avec tous les éléments que vous avez choisis. Ce fichier contiendra toutes les informations de votre site Squarespace, y compris le texte et les images.

Ensuite, convertissez votre fichier XML en fichier .csv grâce à un convertisseur en ligne.

Voici une liste non exhaustive des contenus qui peuvent être exportés ou non.

Contenu qui peut être exporté

Dans la liste ci-dessous, vous pourrez consulter tous les contenus qui pourront être exportés de votre site Squarespace à Webflow.

• Une page de blog, comprenant tous ses articles et jusqu'à 1 000 commentaires par article.
• Des blocs de texte.
• Des blocs d'image.
• Le texte provenant d'autres blocs, comme les blocs Intégrer, Twitter et Instagram, sera exporté avec une structure minimale.
• Des Pages galerie

Contenu qui ne peut pas être exporté

Malheureusement, certains contenus ne seront pas disponibles lors de la migration vers Webflow. Voici la liste ci-dessous :

• Différents types de pages tels qu’Album, Couverture, Index, Informations, Événements, Portfolio et Boutique.
• Contenu des en-têtes, pieds de page et barres latérales propres à chaque page.
• Plusieurs pages de Blog. L’extraction ne peut se faire que sur un blog. Il faudra répéter l’opération deux fois si jamais vous avez deux blogs (ce qui est assez rare).
• Les dossiers.
• Les blocs Audio.
• Les blocs Produit.
• Les blocs Vidéo.
• Les brouillons.
• Les paramètres de style.
• Le CSS personnalisé."

Recommandation : pendant tout le processus de migration, gardez votre abonnement Squarespace actif jusqu'à la mise en ligne de votre nouveau site web sur Webflow !

En ce qui concerne la migration de ces éléments, nous pouvons vous accompagner à les développer dans Webflow. Nous avons travaillé sur plus de 50 projets sur cet outil donc nous saurons rapidement répondre à vos besoins.

Étapes à suivre pour une importation sur Webflow 

Importez votre contenu sur Webflow

Pour importer votre contenu sur Webflow, vous devez d'abord créer ou vous connecter à votre compte Webflow. Une fois connecté, suivez ces étapes :

1. Créez un nouveau projet dans Webflow.
2. Cliquez sur l'onglet CMS dans la barre latérale.
3. Cliquez sur Importer du contenu.
4. Sélectionnez le fichier XML que vous avez exporté de Squarespace.
5. Sélectionnez les éléments que vous souhaitez importer (pages, articles de blog, produits, etc.).
6. Cliquez sur Importer.
7. Webflow va importer tout votre contenu à partir du fichier XML, et vous pourrez commencer à travailler dessus dans Webflow.
8. Créer une nouvelle collection et configurer cette dernière au préalable

Pour conclure cette migration, vous devrez faire correspondre les champs de votre ancienne collection (les champs proviennent de votre fichier .csv) à ceux de votre nouvelle collection dans Webflow.

Créer votre design sur Webflow

Sur Webflow, vous allez créer un nouveau design en utilisant les outils à votre disposition. Utilisez les informations que vous avez recueillies sur votre design Squarespace pour reproduire le même aspect sur Webflow. 

• Personnalisez votre design : Une fois que vous avez créé votre design initial, vous pouvez le personnaliser davantage en ajoutant des effets de transition, en modifiant les couleurs, les typographies et en ajustant les marges et les rembourrages pour obtenir le design souhaité.

• Testez votre design : Veuillez le tester pour vous assurer qu'il est fonctionnel et qu'il est optimisé pour tous les appareils.

À nouveau, si jamais vous avez des doutes ou si vous souhaitez gagner du temps en déléguant, Alegria.solution est à l’écoute pour vous accompagner dans votre projet.

Image

Lors de l'importation d'images dans un CMS comme Webflow, il est important de veiller à ce que les images soient correctement migrées. Il existe deux cas de figure : 

1. Les images sont associées à des champs "image" dans le CMS
2. Les images sont associées au champ "rich text".

Dans le premier cas, le téléchargement se fera automatiquement.

Dans le second cas, les images seront importées à partir de leurs URL d'origine, ce qui peut poser problème si le site d'origine est supprimé. Pour éviter cela, il est conseillé de télécharger manuellement chaque image depuis le champ de texte enrichi et de les importer sur le CMS.

SEO

La sitemap est un élément clé pour améliorer le référencement naturel (SEO) d'un site web. Elle permet à Google d'explorer plus efficacement les pages du site et d'analyser leur contenu. En résumé, la sitemap aide Google à mieux comprendre la structure et le contenu de votre site.

Pour générer une sitemap sur Webflow, suivez ces 7 étapes :

1. Connectez-vous à votre compte Webflow et accédez à votre projet.
2. Cliquez sur l'icône de la planification du site (sitemap) dans le menu principal de gauche.
3. Cliquez sur le bouton "Générer" dans le coin supérieur droit de l'écran.
4. Webflow commencera à générer votre sitemap et cela peut prendre quelques minutes en fonction de la taille de votre site.
5. Une fois que la génération est terminée, vous pouvez prévisualiser votre sitemap et voir tous les liens de votre site Web en cliquant sur "Afficher la planification du site" en haut à droite de l'écran.
6. Vous pouvez télécharger votre sitemap en cliquant sur le bouton "Exporter XML" en haut à droite de l'écran.
7. Copiez le lien de votre sitemap XML et soumettez-le à Google Search Console ou à d'autres outils de référencement.

Redirection

Si vous avez utilisé des URL personnalisées sur votre site Squarespace, il est important de rediriger ces URL vers les nouvelles URL de votre site Webflow. Par exemple, si votre page "À propos" avait l'URL "www.monsite.com/about" sur Squarespace, vous devrez vous assurer que cette page a une nouvelle URL sur Webflow, comme "www.monsite.com/a-propos".

Pour rediriger les anciennes URL vers les nouvelles, vous pouvez utiliser des redirections 301. Une redirection 301 est une instruction qui indique aux navigateurs Web que l'URL a été déplacée de manière permanente vers une nouvelle adresse URL. Les redirections 301 assurent que les visiteurs de votre site qui ont enregistré les anciennes URL puissent toujours accéder à votre contenu sans rencontrer d'erreurs 404.

Vous pouvez créer des redirections 301 dans Webflow en utilisant la fonctionnalité de redirections 301 dans les paramètres du projet.

Cette étape est cruciale si vous ne voulez pas perdre en trafic et en référencement naturel.

Vérifiez votre site avant de le publier

Avant de publier votre site Webflow, vous devez vous assurer que tout est en ordre. Voici une checklist non exhaustive :

‍

• Vérifier que toutes les pages fonctionnent correctement, que les images et les vidéos sont affichées correctement.
• Tester votre site sur différents navigateurs et appareils pour vous assurer qu'il est bien optimisé et responsive pour tous les types de visiteurs. 
• Si vous utilisez des fonctionnalités avancées telles que des formulaires de contact, des intégrations tierces ou des animations complexes, vous devrez également les tester.
• Vous pouvez également utiliser des outils de test de performance comme PageSpeed Insight pour vérifier que votre site se charge rapidement et n'a pas de problèmes de performance. 

‍

Une fois que vous êtes sûr que tout fonctionne correctement, vous pouvez publier votre site Webflow et le rendre accessible au public.

Conclusion

La migration de votre site web Squarespace vers Webflow peut sembler compliquée au début. Mais en suivant les étapes que nous avons décrites, vous pourrez migrer votre site avec succès tout en préservant votre référencement naturel et en profitant des nombreux avantages de la plateforme Webflow.

‍

À noter que la migration est une étape cruciale et il peut être difficile de penser à tous les détails pour s'assurer que tout se passe comme prévu.

‍

Chez Alegria, nous avons de l’expérience en développement de sites avec Webflow, forte de plus de 50 projets menés à bien en moins de 2 ans. Si vous êtes à la recherche d'un prestataire pour discuter de votre projet de création ou de migration de site, n'hésitez pas à nous contacter. Nous sommes là pour vous aider à atteindre vos objectifs.