Come migrare un sito WordPress su Gatsby senza perdere la qualità SEO

La migrazione di un sito WordPress a un provider diverso potrebbe sembrare una manciata, ma sempre più blog stanno deragliando da quello che era il più popolare sistema di gestione dei contenuti online. Man mano che la nuova tecnologia inizia a crescere, crescono anche le opzioni e, negli ultimi anni, WordPress ha affrontato la sua giusta quota di concorrenti, il più promettente dei quali è Gatsby.

Pur operando in modo relativamente simile, ci sono vari motivi per cui molti proprietari di siti preferiscono Gatsby a WordPress.

Dalle funzionalità e servizio alla qualità delle prestazioni e dei vantaggi disponibili, ecco uno sguardo più da vicino sia a WordPress che a Gatsby, seguito da una guida dettagliata su come migrare in sicurezza un sito basato su WordPress al framework Gatsby senza perdere la qualità SEO nel processo .

Definizione di WordPress

Per decenni, WordPress ha rappresentato il sistema di gestione dei contenuti numero uno. Come modello open source, WordPress ha continuato a fornire un servizio di qualità per migliaia di blog e siti Web nel corso degli anni, offrendo al contempo una miriade di contenuti gratuiti e strumenti di gestione SEO, come plug-in ed estensioni.

Le statistiche rilevano che circa il 29% dei proprietari di siti utilizza ancora WordPress, il che rende la piattaforma un'ovvia prima scelta. I motivi per cui WordPress è preferito da molti utenti è dovuto al caricamento semplificato dei contenuti e alla precisione nel modificare tutti gli aspetti del contenuto e la sua SEO. WordPress vanta una generosa galleria di plugin, sia gratuiti che a pagamento, ma la maggior parte degli utenti trova quest'ultima un'opzione molto più funzionale.

Detto questo, anche gli aspetti negativi dell'utilizzo di WordPress sono evidenti. Per uno, il sistema è basato su PHP e viene fornito con un codice legacy esteso, che complica il processo di ottimizzazione. A causa dei suoi vari casi d'uso, WordPress rende un sito semplice da configurare ma non veloce e, come sai, più un sito è lento, minore è il traffico che guida. Non solo, ma il principale criterio di ranking di Google, oltre alla qualità dei contenuti, è la velocità di caricamento di un sito web.

Alcuni degli altri motivi per cui gli utenti si sono tenuti alla larga dall'utilizzo di WordPress includono:

Gestore di contenuti problematici

WordPress ha impiegato del tempo per rinnovare il proprio editor di contenuti e, anche così, non sono riusciti a eccellere. Il nuovo gestore dei contenuti (Gutenberg) separa i contenuti in blocchi, cosa che molti utenti hanno trovato impegnativo, poiché l'esperienza utente non è proprio ideale. Beh, non lo so, lo trovo davvero buono, quando ti ci abitui.

La maggior parte degli utenti sta installando il plug-in dell'editor classico per rimanere con ciò che sa.

Scrivere PHP

Per modificare un sito WordPress, le modifiche devono essere scritte in PHP. Sebbene su WordPress esistano modifiche personalizzate, molti utenti le trovano eccessivamente impegnative e dispendiose in termini di tempo. E poiché PHP non è il linguaggio più popolare, ad eccezione dei siti WordPress, affrontarlo sembra ridondante.

Alcuni utenti preferiscono utilizzare i page builder che consentono di personalizzare e modificare facilmente il design di un sito senza l'utilizzo di codice. Tuttavia, con WordPress, non puoi davvero avere TUTTE le funzionalità del mondo o creare un sito da sogno con tutte le funzionalità che desideri. Un sito più complesso probabilmente troverà difficile utilizzare WordPress come front-end.

Definire GatsbyJS

Molti considerano WordPress una tecnologia obsoleta, ma con l'aumento della concorrenza, GatsbyJS è diventata una delle alternative più adatte. La maggior parte dei costruttori di siti e degli utenti ricorrono a siti che utilizzano linguaggi come JavaScript e React.js, che è esattamente ciò che Gatsby porta in tavola. A differenza della natura open source di WordPress, GatsbyJS è un generatore di siti statici, costruito principalmente in React.

Quando gli utenti visitano un sito basato su Gatsby, la piattaforma non esegue il rendering delle pagine. Invece, GatsbyJS genera le pagine durante la compilazione e poi le sposta tutte online. Il sistema non richiede server o manutenzione degli stessi ed è compatibile con file statici come JS, HTML e CSS. Infine, Gatsby non usa affatto PHP, il che è un grande sollievo per gli ex utenti di WordPress.

La piattaforma non è priva di svantaggi, uno dei quali è l'impossibilità di vedere direttamente l'esito di qualsiasi modifica apportata al sito, poiché con Gatsby, tutto deve essere prima compilato. Per risolvere il problema, tuttavia, molti si affidano alle pipeline CI/CD di Gitlab per compilare prima un sito Web e successivamente portarlo online. Gatsby consente agli utenti di creare modelli di post di blog e scrivere tutti i contenuti in markdown.

Ecco altri vantaggi chiave dell'utilizzo di Gatsby:

• Zero ricariche

Come app a pagina singola o SPA, Gatsby non richiede una pagina del sito cliccata per caricare una risorsa nuova di zecca.

• Perfezionamento dell'immagine

Tutte le immagini utilizzate sulla piattaforma vengono automaticamente filtrate dalle tracce esterne, come i metadati, e vengono immediatamente ridimensionate, compresse, ottimizzate e caricate in modo lento.

• Precarica risorse

Gatsby ha la capacità di individuare tutti i collegamenti disponibili su una determinata pagina e caricare i dati nella cache del sito.

• Alternanze di codice

Con Gatsby, il codice utilizzato è semplificato, raggruppato, minimizzato e, purtroppo, servito.

Migrazione dei dati di WordPress su Gatsby Framework

Quando stai pensando di spostare l'intero contenuto da WordPress a Gatsby, l'aspetto più importante da considerare è non perdere il tuo valore SEO esistente.

Per fortuna, Gatsby rende abbastanza facile la ricezione dei contenuti di altre piattaforme.

La prima cosa di cui avrai bisogno per trasferire i tuoi contenuti è un plug-in di origine. Un plug-in di origine aiuterà Gatsby a popolare perfettamente e automaticamente il suo negozio Graphql, garantendoti l'accesso a tutte le informazioni di input. Il plug-in sorgente può essere modificato per soddisfare le tue esigenze e persino rendere la tua piattaforma open source anziché statica.

Graphql rappresenta una soluzione raffinata per l'acquisizione di dati API e differisce in modo significativo dal suo predecessore, l'API REST. Graphql è una risorsa complementare alla piattaforma Gatsby, pensata per essere utilizzata come parte del sistema stesso. Bypassare del tutto Graphql è possibile ma altamente ignorato come opzione, poiché non ti consentirà di accedere a varie funzionalità importanti.

Il prossimo passo da compiere è facilitare il processo di scrittura e spostare tutto su Markdown. I file Markdown, o .md, consentono agli utenti di scrivere testo semplice e semplice che può quindi essere convertito in HTML più facilmente. Inoltre, Markdown consegnerà tutti i file .md insieme al codice Github del sito e renderà controllata la versione del processo. Alcuni utenti potrebbero trovare utile anche Gatsby Advanced Started (GAS), poiché questo progetto consente la creazione di siti Gatsby orientati alla SEO.

Come trasferire i post di WordPress in Markdown

Prima di ogni altra cosa, dovrai esportare tutti gli articoli WordPress validi. Una volta fatto, dovrai convertirli in testo normale o Markdown. C'è uno strumento che lo fa, e si chiama WordPress Export to Markdown. Con questo strumento puoi estrarre tutti i contenuti di WordPress, i suoi tag, le categorie e gli aspetti SEO essenziali. Lo strumento fa un passo in più per convertire non solo il contenuto dell'articolo ma anche le immagini dei post.

Una volta ottenuti, i file sono pronti per essere trasferiti nella cartella del contenuto del progetto. La prossima volta che esegui Gatsby noterai solo un sentore di articoli, ma una volta creato il sito, tutto il contenuto sarà rappresentato come acquisito.

Come creare post e pagine con Gatsby

Le prestazioni di Gatsby sono simili a quelle di PHP utilizzate in WordPress. Tuttavia, poiché Gatsby utilizza React nella sua interezza, inserisce i composti del linguaggio nelle cartelle delle pagine, trasformandoli così automaticamente nelle pagine del sito. Questa funzione è ideale per il contenuto di una pagina unidimensionale, come "Indice" e "Informazioni personali".

In termini di contenuto dinamico, come categorie o post di blog, gli utenti possono fare affidamento sui modelli pronti all'uso di Gatsby per la creazione di pagine specifiche. Coloro che utilizzeranno GAS avranno già a portata di mano i modelli di post, insieme ai loro tag e categorie. Sentiti libero di stimare ancora una volta i tuoi contenuti e rendili più dinamici e quindi più compatibili con Gatsby. Tutte le modifiche che fai verranno mostrate nel tuo browser contemporaneamente, il che rende Gatsby abbastanza amichevole per l'iterazione rapida.

Ricorda, l'essenza di Gatsby risiede nel suo file gatsby-node.js. Qui puoi stimare sia i comportamenti del modello che della pagina, nonché lo slug, gli elementi e i dati aggiuntivi da utilizzare. Il file è anche dannoso da considerare in quanto aiuta a popolare i nodi, o in altre parole, i dati vengono archiviati in GraphQL.

Come modellare un sito Gatsby

In termini di scrittura di stili di sito, Gatsby offre molte opzioni praticabili, come file .css, Sass, CSS-in-JS e altro. Ecco alcuni suggerimenti su come progettare il tuo sito Gatsby:

• Esplora le risorse di progettazione disponibili, come Ant, MaterialUI e Materialise.
• Sii pronto per l'implementazione! I siti statici come Gatsby rendono l'implementazione del sito estremamente semplice e conveniente. Puoi utilizzare una serie di strumenti gratuiti e veloci per farlo, come Netlify, AWS Amplify, Now e Surge.
• Ottimizza, ottimizza, ottimizza! Usare Gatsby significa avere un sito più veloce e puoi sempre usare la piattaforma per renderlo ancora più veloce, ottimizzato per la SEO e accessibile. Uno dei migliori strumenti di ottimizzazione è Lighthouse, poiché esegue tutto automaticamente: auditing, metriche, pratiche web, dati dettagliati e persino collegamenti utili. Puoi eseguire il controllo di Lighthouse tramite Google, Firefox o utilizzare l'opzione CLI di Lighthouse.

Come far funzionare velocemente il tuo sito web Gatsby

Una volta che tutti i contenuti sono stati migrati, puoi rendere più veloce il tuo sito Gatsby:

• Elaborazione di tutti i dati Gatsby tramite GraphQL.
• Evita di utilizzare librerie pesanti, come moment.js, poiché possono rallentare il sito.
• Affidati al tuo server per modificare le date, inviare quei dati alle tue pagine e svolgere altre attività pesanti.
• Gestisci meno dati utilizzando GraphQL. In questo modo, accederai solo ai dati di cui hai bisogno ed eviterai di accumulare quantità eccessive di dati per errore.
• Rendilo accessibile. I tuoi utenti non interagiranno con il tuo sito come fai tu, quindi assicurati che il sito copra tutte le categorie di utenti incorporando una qualità a11y, che può anche comportare un HTML migliorato e punteggi SEO ottimizzati. Per risolvere i problemi di A11y, puoi utilizzare strumenti pertinenti, come Axe.

Come mantenere una SEO di alta qualità

Comprendendo le basi di come Google classifica i siti, sarai in grado di far funzionare il tuo sito Gatsby. Per fare ciò, prestare attenzione ai seguenti aspetti:

• Contenuti stellari e pertinenti
• Maggiore accessibilità agli utenti
• Un sito in esecuzione più veloce
• Creare link o mostrare il tuo sito su altri domini

Una guida semplificata sulla migrazione da WordPress a Gatsby

Per riassumere e facilitare il processo, ecco una guida passo passo per migrare completamente il tuo sito da WordPress a GatsbyJS.

• Scarica l'XML da WordPress, che si trova in Strumenti > Esporta.
• Usa uno strumento per convertire l'XML in Markdown o in testo normale, che a volte farà più della metà del lavoro di conversione dei post del blog.
• Scarica tutte le immagini e il contenuto del server. Estrai le immagini dai caricamenti di WordPress in una cartella di immagini.
• Risolvi elenchi interrotti e indenta blocchi di codice per assimilare allo stile Gatsby.
• Salva le miniature e spostale in una rispettiva cartella per il riutilizzo.
• Connettiti a Netlify per impostare la distribuzione automatica. Se scritto in JavaScript, migralo in dattiloscritto per abilitarlo.
• Modifica le opzioni di stile in modo che possano utilizzare CSS-in-JS. Aggiorna lo stile e il layout.
• Esegui gli aggiornamenti in modo che il contenuto del blog rientri nella categoria '/blog/'.
• Usa reindirizzamento per tutti gli URL.
• Usa l'API React Context come wrapper per creare una modalità notturna.
• Migra i commenti di WordPress su Gatsby utilizzando un importatore manuale o automatizzato.

Una volta che tutti questi passaggi sono stati completati, ti rimane la creazione delle pagine, la padronanza di GraphQL, l'esecuzione di query appropriate e la pulizia di piccoli pasticci dove richiesto.

Quanto tempo richiederà il processo di migrazione?

La migrazione di tutti i contenuti da WordPress a Gatsby dipenderà dal volume di contenuti che hai a disposizione, nonché dai tuoi sforzi personali. Idealmente, dovresti essere in grado di trasferire tutti i contenuti in non più di due settimane. Tuttavia, tieni presente che se non conosci React, avrai bisogno di tempo per adattarti.

Una volta presa la mano, apprezzerai i vantaggi offerti da Gatsby, come meno caos HTML all'interno del tuo database MySQL e file di facile accesso, gestione, modifica, lettura, backup e condivisione con gli altri.

Un'ultima cosa…

Mentre la gestione di Gatsby richiede una serie di competenze e un background in CSS, HTML, JavaScript, Node.js, React, ES6 e GraphQL, solo per citarne alcuni, inizia lentamente e impara ogni tecnologia man mano che arriva.

Anche se il processo rappresenta una sfida, in definitiva, puoi seguire il Gatsby Getting Started Tutorial per una guida ancora più dettagliata sul processo di migrazione.

Prendiamo la codifica, vero?