App Web progressive (PWA) e ottimizzazione per i motori di ricerca (SEO)

Progressive Web App (PWA) è un software applicativo distribuito tramite il web. È costruito utilizzando tecnologie Web standard come HTML, CSS, JavaScript, ecc. Le PWA sono comunemente utilizzate per aumentare il tasso di conversione e il traffico del sito Web. Dal 2021, le PWA sono supportate (totalmente o parzialmente) da Google Chrome, Apple Safari, Firefox per Android e Microsoft Edge.

Essendo uno sviluppo relativamente nuovo, l'ottimizzazione PWA porta ancora a risultati positivi nella maggior parte dei casi e ha statistiche sorprendenti. PWA Stats segnala costantemente i vantaggi ottenuti dai servizi che hanno implementato PWA.

Le PWA sono un grande aiuto quando si tratta di marketing online. Ecco perché sono popolari tra la folla SEO. Tuttavia, proprio come React e SEO, la combinazione PWA SEO ha le sue difficoltà. In questo articolo, faremo luce su come funzionano le PWA con la SEO.

Esempi e principali vantaggi di PWA

Qualsiasi servizio Web può essere una PWA. Ci sono tre requisiti principali per questo:

1. Funziona con HTTPS.
2. Include un manifesto dell'app Web.
3. Implementa un lavoratore di servizio.

Lo scopo principale di PWA è fornire funzionalità superiori per ogni utente. Ecco l'elenco dei principali vantaggi offerti dalle PWA:

1. PWA offre nuove opportunità e crescita letteralmente a qualsiasi azienda. Combina il meglio delle qualità di app e web, essendo reattivo e in grado di funzionare su qualsiasi dispositivo e non richiede necessariamente una rete veloce.
2. La sicurezza del livello di trasporto lo rende sicuro.
3. Service worker (uno script speciale eseguito dal browser in background) consente alle PWA di funzionare in modalità offline.

Diamo un'occhiata ad alcuni dei più grandi esempi di adozione di PWA:

Consigliato per te: Framework più popolari per la creazione di app Web progressive (PWA).

1. Starbucks

Il PWA del sistema di ordinazione di Starbucks è semplice e intuitivo. Sembra proprio come la loro app nativa, ma ha la possibilità di essere eseguita offline quando un utente sfoglia il menu e aggiunge articoli al carrello. Il miglior vantaggio di una tale soluzione è il fatto che la PWA è quasi due volte più piccola dell'app standard di Starbucks. Per questo motivo, l'azienda ha notevolmente aumentato il numero di utenti web.

2. Pinterest

Dopo che è stato scoperto che solo l'1% degli utenti mobili di Pinterest scarica un'app e accede a causa delle sue scarse prestazioni, l'app mobile è stata ricostruita sulla base della tecnologia PWA. Grazie a ciò, indicatori come il tempo trascorso, le entrate pubblicitarie e gli impegni principali sono aumentati fino al 40% - 60%.

3. Uber

L'app web Uber è stata ricostruita come PWA con l'obiettivo di fornire un servizio veloce su reti a bassa velocità e su vecchi smartphone non compatibili con l'app Uber nativa. Grazie a ciò, un'app core superleggera si carica in circa 3 secondi su reti 2G.

L'importanza della SEO

La SEO si basa sull'ottimizzazione del tuo sito Web per i motori di ricerca (SE). Il suo scopo principale è migliorare il posizionamento del sito Web nei risultati di ricerca e coinvolgere i visitatori. Si basa su algoritmi SE e utilizza parole chiave per aiutare i motori di ricerca a mostrare contenuti pertinenti e attirare un pubblico mirato sui siti Web. Questo è il modo in cui la SEO può portare traffico organico al tuo sito Web, il migliore nel suo genere. A differenza del traffico diretto e a pagamento, è in grado di trasformare la maggior parte dei tuoi visitatori in clienti e clienti.

SEO per app Web progressive: qual è il problema?

Nonostante tutti i vantaggi offerti da PWA, molti proprietari di siti Web esitano ancora a implementare la tecnologia. Ci sono due ragioni principali per questo:

1. La paura di cambiare il sistema esistente che già funziona bene.
2. Scarsa comprensione di come funziona PWA con SEO.

Molte PWA sono costruite utilizzando framework JS che non sono noti per la loro natura SEO-friendly.

Pertanto, a differenza dei tradizionali siti Web basati su HTML, le PWA dipendenti da JavaScript rappresentano una sfida per la SEO. Ecco perché non offrono alcun vantaggio in termini di ricercabilità. Tuttavia, contrariamente alla credenza popolare, ciò non significa che le app web progressive non possano essere indicizzate dai motori di ricerca. Devi solo usare tecniche diverse per questo.

Rendering lato server e Rendering lato client

La maggior parte dei siti Web utilizza il rendering lato server (SSR). È l'approccio più semplice in cui la pagina viene visualizzata sul lato server invece di essere visualizzata nel browser. Tuttavia, l'intero HTML viene caricato ogni volta che un utente richiede la pagina, il che potrebbe essere problematico quando la connessione Internet non è stabile o abbastanza veloce.

Le PWA basate su JavaScript utilizzano il rendering lato client (CSR), in cui il contenuto viene visualizzato nel browser del client. Non invia un'intera pagina HTML ogni volta che un utente richiede la pagina. Il file JavaScript mostra solo la parte necessaria delle informazioni dalla pagina nel browser del client. Ecco perché la pagina si carica più velocemente anche con una connessione Internet scadente.

Tuttavia, perché molti proprietari di siti Web si rifiutano ancora di utilizzare la CSR? Il problema è il bot di Google. Può leggere il contenuto del sito web nel codice che è completamente visibile nel documento HTML. La CSR, nel suo caso, si basa completamente sulla capacità di un motore di ricerca di elaborare JavaScript. Ecco perché si ritiene che le app CSR non possano essere indicizzate. Tuttavia, infatti, tra tutti i motori di ricerca, Google è il migliore nell'elaborazione di JavaScript.

Tuttavia, questo non significa ancora che il problema con JavaScript e SEO sia risolto: Google ammette che l'elaborazione di JS non è perfetta. Vale a dire, il processo di scansione di una pagina basata su JavaScript richiede più tempo di quello di una pagina HTML. In effetti, questo significa che dovrai aspettare più tempo prima che il contenuto JavaScript appaia nelle pagine dei risultati del motore di ricerca.

Tutto ciò rende difficile per i proprietari di siti Web sia migliorare l'esperienza utente dei loro visitatori sia rendere i loro contenuti ottimizzati per i motori di ricerca.

Come implementare PWA senza perdere l'ottimizzazione dei motori di ricerca?

Potrebbe piacerti: Magento PWA Studio: lo strumento per l'app Web progressiva per Magento!

1. Applicare il rendering dinamico

Il rendering dinamico mostra diverse versioni di contenuto a diverse fonti. Il visitatore ottiene una versione CSR e il crawler ottiene una versione con rendering lato server. Ciò consente di migliorare l'indicizzazione delle pagine basate su JavaScript da parte del bot di Google. In questo modo, fornirai l'esperienza utente più conveniente per i tuoi clienti senza rischiare la SEO del sito web.

2. Combina SSR e CSR

Assicurati che il crawler veda le parti più importanti del contenuto (che devono assolutamente essere passate ai motori di ricerca) utilizzando il rendering lato server. Queste informazioni verranno raccolte dal crawler non appena scopre la pagina. Le informazioni rimanenti verranno elaborate automaticamente tramite il rendering lato client durante la seconda fase del processo.

3. Costruisci la tua PWA utilizzando un framework JavaScript SEO friendly

La nostra grande raccomandazione è GatsbyJS. È abbastanza facile creare un sito Web PWA utilizzando questo framework (oltre a trasformare il sito Web Gatsby esistente in un PWA). Pre-renderizza il tuo sito Web in una fase di costruzione per prestazioni brillanti e senza ritardi, anche se la connessione Internet è lenta. Grazie a ciò, i tuoi visitatori ottengono un'esperienza di navigazione simile a un'app.

4. Ricorrere a soluzioni PWA pronte all'uso

Oggi, le PWA sono più convenienti che mai. Quindi, se non vuoi sprecare molto tempo e risorse nello sviluppo di PWA, puoi utilizzare alcune soluzioni PWA pronte per l'uso realizzate secondo i principi SEO e accuratamente testate, così puoi essere sicuro della qualità del codice.

5. Studio PWA

PWA Studio è stato rilasciato nel 2019 come standard di tecnologia web progettato per fornire un'esperienza simile a un'app. In effetti, non è esattamente una soluzione pronta all'uso: è piuttosto una raccolta di strumenti e funzionalità per lo sviluppo di PWA. Questa soluzione è piuttosto complessa e impressionante, ma richiede ulteriori aggiustamenti.

6. ScandiPWA

ScandiPWA è una soluzione open source, basata su React e Redux. È progettato con l'obiettivo di migliorare i siti Web con velocità e capacità di lavorare offline. Inoltre si aggiorna costantemente, così avrai sempre nuove funzioni.

7. Vetrina Vue

Questa è una delle prime soluzioni PWA disponibili sul mercato. In realtà, Vue Storefront è una soluzione all-in-one universale, ma richiede risorse di manutenzione aggiuntive.

Come evitare errori relativi alla SEO durante l'implementazione di PWA?

Per sviluppare una PWA ben congegnata che ti aiuterà a vincere in SEO fornendo una migliore esperienza utente, dovresti:

1. Esegui audit SEO. Questo aiuterà a individuare e risolvere tutti i problemi relativi alla SEO.
2. Consulta gli specialisti SEO. Quando crei la tua PWA utilizzando React (ad esempio), i tuoi specialisti SEO dovrebbero sapere esattamente come combinare React e SEO. In questo modo eviterai la maggior parte dei possibili problemi che possono verificarsi dopo l'implementazione.
3. Attenersi ai principi SEO fondamentali durante lo sviluppo di PWA. Nell'articolo relativo a Progressive Web Apps SEO, pubblicato da Google, l'azienda fornisce suggerimenti su come costruire PWA indicizzabili. Alcuni di loro sono tali:
   • Ogni pagina dovrebbe essere disponibile tramite un URL specifico. Grazie a ciò, ogni pagina verrà scansionata in modo indipendente.
   • Il sito web dovrebbe avere un design reattivo ed essere ottimizzato per i dispositivi mobili.
   • Usa il miglioramento progressivo. Grazie a questa strategia, le PWA funzionano bene anche sui vecchi browser.
   • Controlla regolarmente come Google esegue il rendering della tua pagina utilizzando Google Search Console. Pertanto, saprai sempre quando è il momento di aggiornare o modificare qualcosa.
   • Tieni d'occhio il tempo di caricamento della pagina. Google misura la velocità di caricamento di ogni pagina e se la velocità di caricamento della tua pagina rallenta, Google la abbasserà in classifica.

Potrebbe piacerti anche: React Native vs Flutter vs PWA: Battle of Trending Mobile App Frameworks.

La linea di fondo

L'ottimizzazione PWA offre molte opportunità per il marketing online e porta crescita alla stragrande maggioranza delle aziende. In effetti, la migliore pratica SEO tipicamente applicata da PWA è l'interfaccia user-friendly: è reattiva, strutturata e rende veloce. Tuttavia, le PWA non danno ancora un vantaggio diretto alla SEO e i problemi relativi alla SEO sono ciò che impedisce a molti commercianti di implementare PWA sui loro siti web. Ecco perché è importante prestare attenzione e utilizzare diverse tecniche come il rendering dinamico, la combinazione di SSR e CSR o soluzioni PWA pronte all'uso. Dovresti anche coinvolgere specialisti SEO nel processo fin dall'inizio.

Come puoi vedere, puoi utilizzare sia SEO che PWA combinandoli con successo. Va inoltre notato che la PWA è un tipo di software giovane e innovativo, quindi sono prevedibili miglioramenti.

Questo articolo è stato scritto da Ivan Jones. Ivan è uno specialista SEO di Clockwise.Software con oltre 5 anni di esperienza nel settore. Conosce le sfumature che lo hanno aiutato a mantenere i siti Web in cima ai risultati di ricerca di Google per anni. Essendo uno studente appassionato, è desideroso di testare nuovi approcci che possono avvantaggiare i risultati SEO.