Perché Next.js è la tecnologia giusta per la SEO
La SEO è diventata sempre più importante e rappresenta oggi uno degli aspetti cruciali e sui quali concentrarsi di più quando si costruisce un sito web. Il motivo è dovuto al fatto che la SEO è direttamente coinvolta nell’ottenimento di un buon posizionamento su Google e nel portare quindi più persone al tuo sito web. Negli ultimi anni, React, Gatsby, vue e Angular hanno preso il sopravvento, ma le applicazioni costruite con queste tecnologie sono caratterizzate da una scarsa SEO. Qui è dove entra in gioco Next.js, la tecnologia giusta per la SEO!
Scopriamo quindi cosa devi sapere sulla SEO, come affrontarla in Next.js e perché adottare DatoCMS potrebbe essere l'approccio migliore per te.
La SEO è diventata sempre più importante e rappresenta oggi uno degli aspetti cruciali e sui quali concentrarsi di più quando si costruisce un sito web. Il motivo è dovuto al fatto che la SEO è direttamente coinvolta nell’ottenimento di un buon posizionamento su Google e nel portare quindi più persone al tuo sito web. Negli ultimi anni, React, Gatsby, vue e Angular hanno preso il sopravvento, ma le applicazioni costruite con queste tecnologie sono caratterizzate da una scarsa SEO. Qui è dove entra in gioco Next.js, la tecnologia giusta per la SEO!
Scopriamo quindi cosa devi sapere sulla SEO, come affrontarla in Next.js e perché adottare DatoCMS potrebbe essere l'approccio migliore per te.
Che cos'è la SEO?
SEO è l'acronimo di Search Engine Optimization (ottimizzazione per i motori di ricerca) e comprende tutte le strategie messe in atto per portare più in alto una pagina web nei risultati dei motori di ricerca. In altre parole, migliore è la SEO, più facile sarà per le persone trovare il tuo sito web e cliccare su di esso di conseguenza. Pertanto, la SEO può anche essere definita come la procedura per aumentare la qualità e la quantità di traffico verso un sito web attraverso i click ottenuti tramite ricerca organica. Con ricerca organica si intende quella parte di ricerca dedicata ai risultati per i quali non è possibile acquistare un posizionamento. L’ottimizzazione SEO serve quindi a migliorare il proprio posizionamento organico.
Come puoi facilmente immaginare, la SEO è fondamentale per far sì che il maggior numero possibile di persone visiti il tuo sito web. Quando si usa un motore di ricerca, si tende a cliccare sui primi risultati proposti dal motore di ricerca e più la SEO del tuo sito è elevata, più in alto il tuo sito comparirà. Questo permette di dare risalto ai tuoi prodotti, servizi o contenuti. Inoltre, un maggior numero di visitatori equivale a un maggior numero di vendite e clienti.
Allo stesso tempo, avere a che fare con la SEO non è banale. Questo perché i motori di ricerca più utilizzati sono in continua evoluzione e cambiano molto spesso i loro algoritmi. Quindi, un buon posizionamento SEO non dura per sempre ed è compito tuo quello di mantenere il tuo sito competitivo in termini di posizionamento SEO.
Cerchiamo ora di capire quali sono le tecnologie da adottare per ottenere un ottimo SEO.
Perché Next.js è la tecnologia pensata per la SEO
Next.js è un framework web scritto in JavaScript per la creazione di applicazioni in React generate staticamente e renderizzate dal server. Quando si usa React per costruire delle SPA (Single Page Application), ciò che succede è che viene prodotto un singolo file HTML contenente diversi file JavaScript. Quando si naviga tra le diverse pagine di una SPA, non avviene un vero cambio di pagina, ma è il browser che monta la view richiesta al momento usando JavaScript. La navigazione tra diverse pagine viene quindi simulata lato client e nessuna richiesta è fatta al server.
In altre parole, le pagine che compongono il sito web non esistono prima che il browser le renderizzi. Pertanto, un crawler non ha modo di scoprirle in modo facile, in quanto tecnicamente non esistono. Questo rappresenta un problema enorme in termini di SEO, perchè rende le pagine di una SPA molto difficili da essere indicizzate dai motori di ricerca.
A differenza di quanto accade con le applicazioni renderizzate lato client, le applicazioni renderizzate lato server hanno un file per pagina. Ciò significa che ogni pagina esiste prima di essere renderizzata dal browser. In altri termini, i crawler possono indicizzarle tutte senza sforzo e trattarle in modo diverso in base al loro contenuto, il quale è conosciuto a priori. Next.js permette di ottenere questo risultato mentre si utilizza React come tecnologia frontend. Quindi, offre tutti i vantaggi offerti da React senza però trascurare la SEO. Nel dettaglio, dare agli sviluppatori la possibilità di ottenere eccellenti prestazioni SEO è uno dei pilastri sui quali si fonda Next.js. Non a caso, sul sito ufficiale di Next.js è disponibile un'intera guida sulla SEO. Ecco perchè Next.js è la tecnologia giusta per la SEO.
Impariamo ora come utilizzare Next.js per affrontare correttamente la SEO.
Tutto ciò che devi sapere sul componente Head di Next.js
Il linguaggio HTML non è sufficiente a descrivere in modo significativo il contenuto di una pagina web. Per questa ragione, i motori di ricerca cercano di capirne il contenuto analizzando i metadati memorizzati nei tag HTML <meta>. Come spiegato nella documentazione di Google, questi tag sono fondamentali per la SEO.
I meta tag devono essere collocati nella sezione <head> di una pagina HTML ed è per questo che Next.js è dotato di un componente <Head> integrato. Vediamolo in azione nell'esempio che segue:
Grazie al componente <Head> di Next.js è possibile utilizzare i tag <meta> proprio come se stessi costruendo una pagina in HTML. Nei meta tag è possibile includere titoli, descrizioni, informazioni sulle pagine social correlate al sito web, così come qualsiasi dato per il protocollo Open Graph.
Una volta incapsulati i tag <meta> nel componente <Head>, Next.js rileva i metadati definiti e li posiziona automaticamente nella miglior posizione possibile della pagina HTML durante il rendering lato server.
Il fatto che questi metadati siano presenti nel file HTML generato dal server permette di evitare i problemi di SEO illustrati precedentemente che si presentano con le applicazioni renderizzate lato client sviluppate in React, Gatsby, vue o Angular.
Lo svantaggio principale di Head in Next.js
Quella offerta da Next.js è una soluzione ottima dal punto di vista tecnico e flessibile, ma ciò non toglie che definire correttamente i metadati richieda tempo. Inoltre, questi metadati dovrebbero essere facilmente aggiornabili.
Il problema è che si trovano nel componente <Head> del file JavaScript o TypeScript che rappresenta la pagina web. Ciò significa che per aggiornare i metadati di una pagina è necessario modificare il codice della stessa di conseguenza, buildare l'intera applicazione e deployarla di nuovo sul server.
Questo è indubbiamente un processo macchinoso e che andrebbe evitato il più possibile. Nessuno vorrebbe dedicare del tempo a questa operazione, soprattutto perché la SEO evolve molto rapidamente ed è solitamente gestita da esperti di marketing o del settore che potrebbero non essere in grado di programmare.
Per fortuna esiste DatoCMS!
Perché Cantiere Creativo sceglie DatoCMS
DatoCMS è un headless CMS che ti offre tutto ciò di cui hai bisogno per gestire i tuoi contenuti tramite un’interfaccia web semplice da usare e alla portata di tutti. Nel dettaglio, DatoCMS è un servizio Software-as-a-Service che si differenzia da Wordpress perchè si tratta di una piattaforma backend che espone tutte le sue feature tramite API, chiamabili da qualunque tecnologia frontend. DatoCMS permette quindi di svincolare la gestione dei contenuti dalla loro visualizzazione.
DatoCMS è particolarmente vantaggioso quando si parla di SEO perchè ti permette di definire e modificare i metadati necessari per la SEO nella sua interfaccia web avanzata e utilizzabile da qualunque utente, anche non tecnico. Nello specifico, puoi usufruire del pacchetto `react-datocms` per recuperare i metadati SEO da DatoCMS già codificati nei meta tag HTML corretti e incapsularli nel componente <Head> di Next.js come mostrato nell’esempio che segue estratto da una pagina dalla documentazione ufficiale:
Questo permette di dividere il luogo in cui i metadati SEO sono definiti e memorizzati da quello in cui sono effettivamente utilizzati. Pertanto, è possibile utilizzare DatoCMS per aggiornare la SEO delle pagine senza passare dal codice, come illustrato nel dettaglio qui. In questo modo, non è necessario dover buildare e deployare di nuovo il sito web quando si desidera aggiornare le informazioni SEO, evitando tutti i problemi presentati nel capitolo precedente.
Allo stesso tempo, descrivere il contenuto di una pagina web per il SEO è tanto importante quanto noioso. Fortunatamente, DatoCMS è dotato del plugin YoastSEO. Questo potente strumento consente di generare interessanti metriche SEO e di leggibilità in tempo reale durante la modifica dei contenuti in DatoCMS. Inoltre, il plugin YoastSEO rileva automaticamente i potenziali problemi legati alla SEO e suggerisce interessanti miglioramenti. La SEO diventa così un vero e proprio gioco da ragazzi!
Questo è solo uno dei molteplici motivi per cui adottiamo DatoCMS nei nostri progetti. Esplora tutti i nostri articoli riguardo a DatoCMS qui oppure leggi le nostre guide per iniziare.
Conclusione
In questo articolo abbiamo analizzato cos'è la SEO, perché è così importante, quali opzioni offre Next.js per gestirla. In primo luogo, abbiamo appreso tutto ciò che è necessario per comprendere la SEO. Poi abbiamo analizzato la differenza tra rendering lato client e rendering lato server, capendo perché Next.js è la tecnologia giusta per la SEO.
Infine, abbiamo approfondito il componente <Head> di Next.js e come utilizzarlo per definire i meta tag necessari a far capire ai motori di ricerca il contenuto delle pagine del tuo sito web. Eppure, affrontare la SEO utilizzando solo questo componente potrebbe risultare complesso. Fortunatamente, DatoCMS rende la SEO alla portata di tutti, offrendoti tutto ciò che di cui hai bisogno.
Grazie per aver letto questo articolo! Speriamo che ti sia stato utile. Sentiti libero di contattarci qui per qualsiasi domanda, commento o suggerimento.
