Comment migrer un site WordPress vers Gatsby sans perdre en qualité SEO

Migrer un site WordPress vers un autre fournisseur peut sembler une poignée, mais de plus en plus de blogs déraillent de ce qui était autrefois le système de gestion de contenu en ligne le plus populaire. Alors que les nouvelles technologies commencent à se développer, les options aussi, et ces dernières années, WordPress a fait face à sa juste part de concurrents, dont le plus prometteur est Gatsby.

Tout en fonctionnant de manière relativement similaire, il existe diverses raisons pour lesquelles de nombreux propriétaires de sites préfèrent Gatsby à WordPress.

De la fonctionnalité et du service à la qualité des performances et des avantages disponibles, voici un examen plus approfondi de WordPress et de Gatsby, suivi d'un guide détaillé sur la façon de migrer en toute sécurité un site basé sur WordPress vers le framework Gatsby sans perdre la qualité du référencement dans le processus .

Définir WordPress

Pendant des décennies, WordPress a représenté le système de gestion de contenu numéro un. En tant que modèle open source, WordPress a continué à fournir un service de qualité pour des milliers de blogs et de sites Web au fil des ans, tout en offrant une pléthore d'outils de gestion de contenu et de référencement gratuits, tels que des plugins et des extensions.

Les statistiques indiquent qu'environ 29 % des propriétaires de sites utilisent encore WordPress, ce qui fait de la plateforme un premier choix évident. Les raisons pour lesquelles WordPress est préféré par de nombreux utilisateurs sont dues à son téléchargement de contenu simplifié et à la précision dans la modification de tous les aspects du contenu et de son référencement. WordPress propose une généreuse galerie de plugins, gratuits et payants, mais la plupart des utilisateurs trouvent cette dernière option beaucoup plus fonctionnelle.

Cela dit, les inconvénients de l'utilisation de WordPress sont également évidents. D'une part, le système est basé sur PHP et est livré avec un code hérité étendu, ce qui complique le processus d'optimisation. En raison de ses différents cas d'utilisation, WordPress fait un site simple à configurer mais pas rapide, et comme vous le savez, plus un site est lent, moins il génère de trafic. Non seulement cela, mais le principal critère de classement de Google, outre la qualité du contenu, est la vitesse de chargement d'un site Web.

Parmi les autres raisons pour lesquelles les utilisateurs ont évité d'utiliser WordPress, citons :

Gestionnaire de contenu problématique

WordPress a mis du temps à réorganiser son éditeur de contenu, et même ainsi, il n'a pas réussi à exceller. Le nouveau gestionnaire de contenu (Gutenberg) sépare le contenu par blocs, ce que de nombreux utilisateurs ont trouvé difficile, car l'expérience utilisateur n'est pas idéale. Eh bien, je ne sais pas- je trouve ça vraiment bien- quand on s'y habitue.

La plupart des utilisateurs installent le plugin de l'éditeur classique pour rester avec ce qu'ils savent.

Écrire PHP

Pour modifier un site WordPress, les modifications doivent être écrites en PHP. Bien que des modifications personnalisées existent sur WordPress, de nombreux utilisateurs les trouvent trop exigeantes et chronophages. Et comme PHP n'est pas le langage le plus populaire, à l'exception des sites WordPress, le traiter semble en quelque sorte redondant.

Certains utilisateurs préfèrent utiliser des constructeurs de pages qui permettent de personnaliser et de modifier facilement la conception d'un site sans utiliser de code. Mais encore, avec WordPress, vous ne pouvez pas vraiment avoir TOUTES les fonctionnalités du monde ou créer un site de rêve avec autant de fonctionnalités que vous le souhaitez. Un site plus complexe aura probablement du mal à utiliser WordPress comme frontal.

Définir GatsbyJS

Beaucoup considèrent WordPress comme une technologie obsolète, mais à mesure que la concurrence augmentait, GatsbyJS est devenu l'une des alternatives les plus appropriées. La plupart des constructeurs de sites et des utilisateurs ont recours à des sites utilisant des langages tels que JavaScript et React.js, ce qui est exactement ce que Gatsby apporte à la table. Contrairement à la nature open-source de WordPress, GatsbyJS est un générateur de site statique, principalement construit en React.

Lorsque les utilisateurs visitent un site basé sur Gatsby, la plateforme n'affiche pas les pages. Au lieu de cela, GatsbyJS génère des pages lors de la compilation, puis les déplace toutes en ligne. Le système ne nécessite aucun serveur ou sa maintenance et est compatible avec les fichiers statiques tels que JS, HTML et CSS. Enfin, Gatsby n'utilise pas du tout PHP, ce qui est un grand soulagement pour les anciens utilisateurs de WordPress.

La plate-forme n'est pas sans inconvénients, dont l'un est l'incapacité de voir directement le résultat de toute modification du site que vous apportez, comme avec Gatsby, tout doit d'abord être compilé. Cependant, pour résoudre le problème, beaucoup comptent sur les pipelines CI / CD de Gitlab pour compiler d'abord un site Web et le mettre ensuite en ligne. Gatsby permet aux utilisateurs de créer des modèles de publication de blog et d'écrire tout le contenu en démarque.

Voici d'autres avantages clés de l'utilisation de Gatsby :

• Zéro recharge

En tant qu'application monopage ou SPA, Gatsby n'a pas besoin d'une page de site cliquée pour charger une toute nouvelle ressource.

• Raffinement de l'image

Toutes les images utilisées sur la plate-forme sont automatiquement filtrées des traces externes, telles que les métadonnées, et sont immédiatement redimensionnées, compressées, optimisées et chargées paresseusement.

• Pré-extraction des ressources

Gatsby a la capacité de repérer tous les liens disponibles sur une certaine page et de charger les données dans le cache du site.

• Alternances de code

Avec Gatsby, le code utilisé est simplifié, groupé, minifié, et hélas, servi.

Migration des données WordPress vers le framework Gatsby

Lorsque vous envisagez de déplacer l'intégralité de votre contenu de WordPress vers Gatsby, l'aspect le plus important à prendre en compte est de ne pas perdre votre valeur SEO existante.

Heureusement, Gatsby facilite la réception du contenu d'autres plateformes.

La première chose dont vous aurez besoin pour transférer votre contenu est un plugin source. Un plugin source aidera Gatsby à remplir automatiquement et de manière transparente son magasin Graphql, tout en vous donnant accès à toutes les informations d'entrée. Le plugin source peut être modifié pour répondre à vos besoins, et même rendre votre plate-forme open source au lieu de statique.

Graphql pose une solution raffinée dans l'acquisition de données API et diffère considérablement de son prédécesseur, l'API REST. Graphql est un atout complémentaire à la plate-forme Gatsby, destiné à être utilisé dans le cadre du système lui-même. Le contournement total de Graphql est possible mais fortement ignoré en tant qu'option, car il ne vous donnera pas accès à diverses fonctionnalités importantes.

La prochaine étape à franchir consiste à faciliter le processus d'écriture et à tout déplacer vers Markdown. Les fichiers Markdown, ou .md, permettent aux utilisateurs d'écrire du texte simple et brut qui peut ensuite être converti plus facilement en HTML. De plus, Markdown fournira tous les fichiers .md avec le code Github du site et contrôlera la version du processus. Certains utilisateurs pourraient également trouver Gatsby Advanced Started (GAS) utile, car ce projet permet la création de sites Gatsby orientés SEO.

Comment transférer des publications WordPress dans Markdown

Avant toute chose, vous devrez exporter tous les articles WordPress viables. Une fois cela fait, vous devrez les convertir en texte brut ou en Markdown. Il existe un outil qui fait cela, et il s'appelle WordPress Export to Markdown. Avec cet outil, vous pouvez extraire tout le contenu WordPress, ses balises, catégories et aspects SEO essentiels. L'outil franchit une étape supplémentaire pour convertir non seulement le contenu de l'article, mais également pour publier des images.

Une fois obtenus, les fichiers sont prêts à atterrir dans le dossier de contenu du projet. La prochaine fois que vous exécuterez Gatsby, vous ne remarquerez qu'un aperçu des articles, mais une fois que vous aurez construit le site, tout le contenu sera représenté comme acquis.

Comment créer des messages et des pages avec Gatsby

Les performances de Gatsby sont similaires à PHP utilisé dans WordPress. Cependant, comme Gatsby utilise React dans son intégralité, il place les composés de langue sous les dossiers des pages, les transformant ainsi automatiquement en pages de site. Cette fonctionnalité est idéale pour le contenu de page unidimensionnel, comme "Index" et "À propos de moi".

En termes de contenu dynamique, comme les catégories ou les articles de blog, les utilisateurs sont invités à s'appuyer sur les modèles prêts à l'emploi de Gatsby pour créer des pages spécifiques. Ceux qui utiliseront GAS auront déjà les modèles de publication à portée de main, ainsi que leurs balises et catégories. N'hésitez pas à estimer encore une fois votre contenu, et à le rendre plus dynamique et donc plus compatible avec Gatsby. Toutes les modifications que vous apportez s'affichent immédiatement dans votre navigateur, ce qui rend Gatsby très convivial pour une itération rapide.

N'oubliez pas que l'essence de Gatsby réside dans son fichier gatsby-node.js. Ici, vous pouvez estimer à la fois les comportements des modèles et des pages, ainsi que le slug et les éléments et données supplémentaires à utiliser. Le fichier est également préjudiciable à considérer car il vous aide à remplir les nœuds, ou en d'autres termes, les données sont stockées dans votre GraphQL.

Comment styliser un site Gatsby

En termes d'écriture de styles de site, Gatsby propose de nombreuses options viables, telles que les fichiers .css, Sass, CSS-in-JS, etc. Voici quelques conseils sur la façon de concevoir votre site Gatsby :

• Explorez les ressources de conception disponibles, telles que Ant, MaterialUI et Materialize.
• Soyez prêt pour le déploiement ! Les sites statiques comme Gatsby rendent le déploiement du site super facile et abordable. Vous êtes invités à utiliser un certain nombre d'outils gratuits et rapides pour ce faire, comme Netlify, AWS Amplify, Now et Surge.
• Optimisez, optimisez, optimisez ! Utiliser Gatsby signifie avoir un site plus rapide, et vous pouvez toujours utiliser la plate-forme pour le rendre encore plus rapide, optimisé pour le référencement et accessible. L'un des meilleurs outils d'optimisation est Lighthouse, car il fait tout automatiquement : audit, métriques, pratiques Web, données détaillées et même des liens utiles. Vous pouvez exécuter votre audit Lighthouse via Google, Firefox ou utiliser l'option Lighthouse CLI.

Comment faire en sorte que votre site Web Gatsby fonctionne rapidement

Une fois que tout le contenu a été migré, vous pouvez rendre votre site Gatsby plus rapide en :

• Traitement de toutes les données Gatsby via GraphQL.
• Évitez d'utiliser des bibliothèques lourdes, comme moment.js, car elles peuvent ralentir le site.
• Faites confiance à votre serveur pour modifier les dates, envoyer ces données à vos pages et effectuer d'autres tâches lourdes.
• Gérez moins de données en utilisant GraphQL. De cette façon, vous n'accéderez qu'aux données dont vous avez besoin et éviterez d'accumuler des quantités excessives de données par erreur.
• Rendez-le accessible. Vos utilisateurs n'interagiront pas avec votre site comme vous le faites, alors assurez-vous que le site couvre toutes les catégories d'utilisateurs en incorporant un a11y de qualité, ce qui peut également entraîner une amélioration du code HTML et des scores de référencement optimisés. Pour résoudre tous les problèmes, vous pouvez utiliser des outils pertinents, comme Axe.

Comment maintenir un référencement de haute qualité

En comprenant les bases de la façon dont Google classe les sites, vous serez en mesure de lancer votre site Gatsby. Pour ce faire, prêtez attention aux aspects suivants :

• Contenu stellaire et pertinent
• Une plus grande accessibilité aux utilisateurs
• Un site plus rapide
• Créer des liens ou présenter votre site sur d'autres domaines

Un guide simplifié sur la migration de WordPress vers Gatsby

Pour résumer et faciliter le processus, voici un guide étape par étape pour migrer complètement votre site de WordPress vers GatsbyJS.

• Téléchargez le XML de WordPress, trouvé dans Outils> Exporter.
• Utilisez un outil pour convertir le XML en Markdown ou en texte brut, ce qui fera parfois plus de la moitié du travail de conversion des articles de blog.
• Téléchargez toutes les images et le contenu du serveur. Extrayez les images des téléchargements WordPress vers un dossier d'images.
• Corrigez les listes brisées et les blocs de code d'indentation pour les assimiler au style Gatsby.
• Enregistrez les vignettes et déplacez-les dans un dossier respectif pour les réutiliser.
• Connectez-vous à Netlify pour configurer le déploiement automatique. S'il est écrit en JavaScript, migrez-le vers Typescript pour l'activer.
• Modifiez les options de style afin qu'ils puissent utiliser CSS-in-JS. Mettez à jour le style et la mise en page.
• Exécutez les mises à jour afin que le contenu du blog tombe dans la catégorie '/blog/'.
• Utilisez la redirection pour toutes les URL.
• Utilisez l'API React Context comme wrapper pour créer un mode nuit.
• Migrez les commentaires WordPress vers Gatsby à l'aide d'un importateur manuel ou automatisé.

Une fois toutes ces étapes couvertes, il ne vous reste plus qu'à créer les pages, à maîtriser GraphQL, à effectuer les requêtes appropriées et à nettoyer les petits dégâts si nécessaire.

Combien de temps le processus de migration prendra-t-il ?

La migration de tout le contenu de WordPress vers Gatsby dépendra du volume de contenu dont vous disposez, ainsi que de vos efforts personnels. Idéalement, vous devriez être en mesure de transférer tout le contenu en moins de deux semaines. Cependant, gardez à l'esprit que si vous débutez avec React, vous aurez besoin de temps pour vous y adapter.

Une fois que vous aurez compris, vous apprécierez les avantages de Gatsby, tels que moins de dégâts HTML dans votre base de données MySQL et des fichiers faciles d'accès, de gestion, de modification, de lecture, de sauvegarde et de partage avec d'autres.

Une dernière chose…

Alors que la gestion de Gatsby nécessite un ensemble de compétences et une expérience en CSS, HTML, JavaScript, Node.js, React, ES6 et GraphQL, pour n'en nommer que quelques-uns, commencez lentement et apprenez chaque technologie au fur et à mesure.

Même si le processus pose un défi, en fin de compte, vous pouvez suivre le didacticiel de démarrage Gatsby pour un guide encore plus détaillé sur le processus de migration.

Passons au codage, d'accord ?