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

Progressive Web App (PWA) è un software applicativo distribuito attraverso 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 (in tutto o in parte) 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.

In generale, secondo il rapporto TOP 30 PWA, “il tasso di conversione medio per le app web progressive è stato del 36% superiore a quello delle app mobile native”.

Le PWA sono di 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 le PWA funzionano con la SEO.

Esempi e principali vantaggi della 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 service worker.

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 a livello di trasporto lo rende sicuro.
3. Service worker (uno script speciale che il browser esegue 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 sistema di ordinazione PWA di Starbucks è semplice e intuitivo. Sembra proprio la loro app nativa ma ha la possibilità di funzionare offline quando un utente sfoglia il menu e aggiunge articoli al carrello. Il miglior vantaggio di una tale soluzione è il fatto che 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. Super

L'app Web di Uber è stata ricostruita come PWA con l'obiettivo di fornire un servizio rapido 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 sulle reti 2G.

L'importanza della SEO

La SEO consiste nell'ottimizzare il 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 che è 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 PWA funziona con SEO.

Come affermato da John Mueller (analista di Google), "le PWA attualmente non hanno alcun vantaggio nella Ricerca Google".

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

Quindi, a differenza dei tradizionali siti Web basati su HTML, le PWA dipendenti da JavaScript sono 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 può 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 visualizza 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 RSI? Il problema è il bot di Google. Può leggere il contenuto del sito Web nel codice che è completamente visibile nel documento HTML. 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, in effetti, 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, ciò significa che dovrai attendere 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 migliorare l'esperienza utente dei propri visitatori e rendere i propri contenuti ottimizzati per i motori di ricerca.

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

Potrebbe piacerti: Magento PWA Studio: lo strumento di app Web progressive per Magento!

1. Applicare il rendering dinamico

Il rendering dinamico mostra diverse versioni del 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 di Google bot. In questo modo, fornirai l'esperienza utente più conveniente per i tuoi clienti senza rischiare il 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 il 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 a 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 all'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. Scandi PWA

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, quindi otterrai sempre nuove funzioni.

7. Negozio Vue

Questa è una delle prime soluzioni PWA disponibili sul mercato. In realtà, Vue Storefront è una soluzione universale e all-in-one, 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 aiuti a vincere nella SEO fornendo un'esperienza utente migliorata, dovresti:

1. Eseguire l'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 come 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 responsivo ed essere ottimizzato per i dispositivi mobili.
   • Utilizzare il miglioramento progressivo. Grazie a questa strategia, le PWA funzionano bene anche sui vecchi browser.
   • Controlla regolarmente come Google visualizza la tua pagina utilizzando Google Search Console. Così, saprai sempre quando è il momento di aggiornare o cambiare 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à di rango.

Ti potrebbe piacere 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 fare attenzione e utilizzare diverse tecniche come il rendering dinamico, la combinazione di SSR e CSR o soluzioni PWA pronte all'uso. Dovresti anche coinvolgere gli specialisti SEO nel processo fin dall'inizio.

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

 Questo articolo è stato scritto da Ivan Jones. Ivan è uno specialista SEO presso 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 beneficiare dei risultati SEO.