SEO per CMS senza testa: cose a cui prestare attenzione
Pubblicato: 2020-11-30Sommario
Fondamentalmente, la SEO per un CMS headless segue ancora le stesse regole di un CMS tradizionale. Quindi crawlability, velocità e qualità dei contenuti rimangono gli obiettivi quando vuoi entrarci. Ma sebbene abbiamo obiettivi simili da raggiungere, i mezzi per raggiungerli sono diversi in un CMS headless.
In che modo la SEO è diversa in un CMS headless
In un CMS headless, la maggior parte del lavoro SEO deve essere eseguito manualmente, poiché in genere non ci sono plug-in o componenti aggiuntivi per semplificare l'intero processo e questo significa più lavoro per te e più cose da imparare nel processo invece di affidandosi a strumenti di terze parti. Inoltre, poiché la maggior parte dei CMS headless e dei framework frontend in questo momento sono basati su JavaScript, la SEO per tali ambienti può complicarsi a causa della natura dei crawler che non sono in grado di eseguire facilmente il rendering di JavaScript.
Anche se Googlebot può eseguire il rendering di JavaScript, non vogliamo fare affidamento su questo.
Martin Splitt, sull'implementazione del rendering dinamico
Letture consigliate: CMS Headless vs CMS tradizionale
Cose a cui prestare attenzione in un CMS senza testa
Testi alternativi
I testi alternativi aiutano a rendere il contenuto dell'immagine leggibile dai robot di Google. Simile ai metadati personalizzati, il testo alternativo per le immagini non è una funzionalità pronta all'uso nella maggior parte dei CMS senza testa e questo significa che dovrà essere implementato dal tuo provider CMS.
Per un CMS headless che non ha una funzione di testo alternativo incorporata, possiamo aggiungere manualmente il testo alternativo per immagine senza troppi sforzi, poiché devi solo aggiungere un attributo <alt> alle tue immagini.
<img src="image.png" alt="il nostro testo alternativo">
Metadati
I tag di metadati sono tag speciali che la Ricerca Google comprende. Questi tag descrivono il contenuto del tuo sito e aiutano a controllare come vengono visualizzate le tue pagine nella Ricerca Google. E contrariamente a un CMS tradizionale, un CMS headless di solito non ha la possibilità di modificare i tag dei metadati al volo, il che significa che il titolo, le descrizioni e altri meta tag della tua pagina devono essere aggiunti manualmente ai tuoi modelli di contenuto.
Ad esempio, per un sito Web senza testa che ha un frontend basato su React ma senza supporto per metadati personalizzati, utilizziamo react-helmet per aggiungere comodamente metadati nel nostro <head> .
Per un CMS headless che supporti i metadati personalizzati, in genere dovrai aggiungere campi contenenti tag di metadati personalizzati nel tuo modello di contenuto o creare un modello SEO personalizzato in cui contenga tutti i meta tag necessari. Il modello SEO creato deve essere configurato per avere relazioni con tutte le pagine che ne hanno bisogno.
Snippet di dati strutturati
Gli snippet di dati strutturati aiutano la Ricerca Google a comprendere meglio la tua pagina e tutti i contenuti al suo interno. Fornendo frammenti di dati strutturati validi, il tuo sito è idoneo per i risultati multimediali.
Per creare uno snippet di dati strutturati, utilizziamo un array JSON-LD che è memorizzato nella <head> del tuo sito. E a differenza del CMS tradizionale in cui l'intero processo è automatizzato con un plug -in (es. Yoast SEO), in un CMS headless dovrai:
- Scegli i tipi di dati strutturati corretti per le tue pagine
- Aggiungi codice JavaScript personalizzato che aiuta a generare tutti i dati strutturati necessari o aggiungere più informazioni ai dati strutturati renderizzati lato server
fetch('https://api.example.com/recipes/123')
.then(risposta => response.text())
.then(structuredDataText => {
const script = document.createElement('script');
script.setAttribute('tipo', 'applicazione/ld+json');
script.textContent = StructureDataText;
document.head.appendChild(script);
});- Verifica la tua implementazione utilizzando il test dei risultati multimediali
Problemi di monitoraggio delle visualizzazioni di pagina
Se hai mai provato a implementare Google Analytics su un sito Web senza testa, probabilmente avresti notato che viene tracciata solo la prima visualizzazione di pagina del tuo sito Web. Ciò è in gran parte dovuto al fatto che il frontend di un CMS headless è di natura un'applicazione a pagina singola, il che significa che la pagina viene caricata solo una volta e viene attivato un solo evento pageView per sessione. Per aggirare questo problema, implementiamo l'API della cronologia per abilitare le visualizzazioni di pagina virtuali che possono quindi essere monitorate utilizzando l'attivatore di modifica della cronologia in Google Tag Manager.
L'attivazione della modifica della cronologia tiene traccia delle modifiche nel frammento di URL o nell'oggetto dello stato della cronologia. Quando si verifica un cambiamento tra questi due, abbiamo le seguenti variabili:
- Frammento URL precedente della cronologia: come era il frammento URL.
- Cronologia nuovo frammento URL: cos'è il frammento URL ora.
- Stato precedente della cronologia: l'oggetto dello stato della cronologia precedente, controllato dalle chiamate del sito a pushState.
- History new state: il nuovo oggetto dello stato della cronologia, controllato dalle chiamate del sito a pushState.
Per creare un attivatore di modifica della cronologia, vai su Google Tag Manager e:
- Scegli Trigger > Nuovo
- Scegli Configurazione trigger > Cronologia modifiche
Successivamente, dovremo creare un nuovo tag di configurazione di Google Analytics per attivare l'attivatore di modifica della cronologia che abbiamo appena creato, in questo modo:
E questo è tutto. Ora dovresti essere in grado di monitorare le visualizzazioni di pagina nel tuo sito Web senza testa.
Problemi di audit SEO
Poiché il tuo sito Web senza testa è composto principalmente da JavaScript lato client, l'audit SEO potrebbe rappresentare un problema poiché i crawler utilizzati nella maggior parte degli strumenti di auditing SEO gratuiti non hanno la possibilità di eseguire il rendering di JavaScript.
Questo problema può, prevedibilmente, essere risolto pagando di più, poiché puoi eseguire l'aggiornamento al prossimo piano premium per abilitare il supporto per questa funzione. Dovresti anche notare che il rendering JavaScript non è abilitato per impostazione predefinita nella maggior parte degli strumenti di audit SEO, il che significa che dovrai abilitarlo manualmente per eseguire la scansione del tuo sito Web senza testa.
Separazione del codice
Poiché un tipico CMS headless è fortemente basato su JavaScript, la quantità di codice JavaScript utilizzato nel tuo sito Web, specialmente quando utilizzi un gran numero di librerie di terze parti, può arrivare al punto di essere schiacciante.
E come tutti sappiamo, la velocità della pagina influisce sulla SEO, quindi non possiamo fare in modo che il nostro codice JavaScript rimanga in questo modo, motivo per cui la suddivisione del codice è stata creata per aggirare questo problema. Con la suddivisione del codice, puoi dividere il tuo codice JS in bundle più piccoli che possono quindi essere caricati dinamicamente in fase di esecuzione. Questa funzionalità è attualmente supportata da bundler come Webpack e Browserify tramite factor-bundle.
import React, {Suspense, lazy } da 'react';
import { BrowserRouter as Router, Route, Switch } da 'react-router-dom';
const Home = pigro(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));
const App = () => (
<Router>
<Suspense fallback={<div>Caricamento in corso...</div>}>
<Cambia>
<Percorso esatto percorso="/" componente={Home}/>
<Route path="/about" component={About}/>
</Cambia>
</Suspense>
</Router>
);Rendering dinamico
Poiché la maggior parte dei siti Web senza testa sono di natura JavaScript, devono affrontare la stessa grande sfida SEO che è il rendering JavaScript.
[…], è difficile elaborare JavaScript e non tutti i crawler dei motori di ricerca sono in grado di elaborarlo correttamente o immediatamente.
Implementazione del rendering dinamico, Google
I crawler non possono eseguire il rendering di JavaScript in modo efficace, quindi nel frattempo Google stesso suggerisce il rendering dinamico come soluzione alternativa . Introdotto in Google I/O '18, il rendering dinamico è una soluzione ideale per i siti Web basati su JavaScript che desiderano un modo semplice per risolvere le sfide SEO pur mantenendo tutti i vantaggi che derivano dal rendering lato client. Con questo nuovo metodo di rendering, il tuo server web invia agli utenti contenuto normale, renderizzato lato client, mentre i crawler dei motori di ricerca ottengono contenuto HTML statico completamente visualizzato dal server.
Tutto ciò significa che ottieni il meglio da entrambi i mondi con il rendering dinamico: la facilità di scansione del rendering lato server e il successivo rendering rapido del rendering lato client.
Per implementare il rendering dinamico, dovremo fare affidamento su renderer dinamici come Rendertron o Puppeteer per abbreviare l'intero processo. Questi rendering convertiranno il contenuto del tuo sito in HTML statico comprensibile dai crawler.
Dopo aver terminato l'installazione e la configurazione del renderer dinamico, segui i passaggi aggiuntivi nel documento ufficiale di Google per configurare i comportamenti degli user agent.
Conclusione
La SEO per un CMS headless non è il modo più semplice e richiederà un po' di lavoro da parte dei tuoi sviluppatori per fare tutto bene. Ma una volta presa la mano, un CMS headless può essere efficace quanto un CMS tradizionale quando si tratta di SEO. Inoltre, ottieni molta più libertà e flessibilità per creare contenuti nel modo desiderato.