08/07/2019

Che cos’è Google AMP e come si implementa in un negozio PrestaShop?

Sai se il tuo store PrestaShop rispetta i requisiti delle AMP ed è totalmente compatibile con questa tecnologia?

Se sei un lettore assiduo del nostro blog ricorderai che abbiamo già parlato delle “Accelerated Mobile Pages” o AMP, uno standard finalizzato a rendere più rapido il caricamento delle pagine web.

Pensata inizialmente per i siti informativi e i blog, oggi questa tecnologia è pienamente fruibile anche da parte dei portali commerciali.

Sarai d’accordo con me: per migliorare la velocità dei nostri negozi on-line sui dispositivi mobili, le AMP sono una manna dal cielo!

Oggi passeremo in rassegna alcune delle caratteristiche di questo nuovo paradigma e ti spiegherò come implementarlo nel tuo negozio e-commerce.

Che cosa sono le AMP (Accelerated Mobile Pages) e cosa comportano?

Le AMP introducono un nuovo standard di codifica open source, sviluppato con l’obiettivo di aumentare la velocità di caricamento dei siti su smartphone e iPhone. Il progetto permette ai proprietari di creare versioni più leggere delle pagine lente.

Per funzionare correttamente, le pagine AMP richiedono l’uso di un linguaggio HTML semplificato, invece che della versione completa (e pesante!). Questo formato accelera il caricamento dei siti su dispositivi mobili, come ad esempio gli smartphone.

Alcune caratteristiche della nuova funzionalità:

  • Ottimizzazione del codice CSS e HTML, con dimensioni degli elementi Inline inferiori a 50 kB
  • Caricamento delle immagini differito di tipo “lazy load”, ovvero solo quando vengono visualizzate scorrendo verso il basso
  • Compatibilità totale con Ads e Analytics, come qualunque altra pagina web
  • Uso di JavaScript non necessario

I siti di tipo AMP devono essere convalidati con lo strumento “Accelerated Mobile Pages Validator”, incluso nell’AMP JS Library. Inoltre è necessario caricare i font personalizzati e indicare le dimensioni delle immagini. I formulari non sono ammessi.

Se rispetti tutti i requisiti, le tue pagine super veloci sapranno farti dimenticare le interminabili attese dell’era pre-AMP.

Quali limitazioni implica lo standard AMP per le nostre pagine?

Ti sembra tutto troppo facile e ti chiedi dove sia il trucco? Per poter offrire un caricamento istantaneo, oltre a servirsi della cache di Google, lo standard impone effettivamente alcune restrizioni alle caratteristiche delle nostre pagine.

Effetti come quelli delle finestre a comparsa o dei pop-up non possono essere utilizzati nelle pagine AMP, così come il caricamento di contenuti esterni e, in definitiva, di qualsiasi elemento che possa incidere negativamente sulla velocità.

Ma tranquillo, non c’è niente da modificare a livello di template o di design del sito: le pagine AMP convivono infatti in totale serenità al fianco delle pagine normali. Diciamo che, per uno stesso sito, esisterà una versione tradizionale e una migliorata per dispositivi mobili.

Una buona notizia per i nostri e-commercianti, soprattutto perché al momento non è possibile applicare AMP alle pagine di categoria o di acquisto, tra le altre.

La versione “accelerata” delle nostre pagine sarà visualizzata solo sui dispositivi mobili che vi accedono da link contenuti nei risultati di ricerca o nei principali social network. Se un utente, dal proprio cellulare, accede al tuo sito direttamente, oppure lo fa da PC, vedrà la versione normale.

Come avrai intuito, anche implementando il caricamento accelerato nelle diverse pagine, la velocità di un sito non può dipendere esclusivamente da AMP. Per questo dovrai lavorare anche sul fronte della navigazione tradizionale all’interno del tuo negozio on-line, puntando ad ottimizzarla.

Vale la pena adottare lo standard AMP per le pagine di un negozio on-line?

Pagine AMP di un negozio on-line

Le pagine AMP brillano per la loro velocità ma sono anche, come abbiamo visto, limitate in certi aspetti. Per fortuna però la versione normale e quella accelerata possono convivere senza problemi.

Ma la domanda è: vale la pena implementare AMP con PrestaShop?

Il principale vantaggio delle AMP è senza dubbio la loro velocità di caricamento su cellulare (e i conseguenti miglioramenti sul fronte del SEO). Inoltre le pagine risultano visivamente più chiare e prive di distrazioni, facilitando il processo d’acquisto.

Da questo punto di vista, se ti preoccupa che il sito possa apparire troppo spoglio, ti ricrederai: anche la versione accelerata può infatti ospitare gallerie di immagini, video, pulsanti di condivisione sui social e perfino pubblicità, se necessario.

Ricorda poi che le pagine AMP si servono della cache di Google per fornire i contenuti. Sono quindi molto più veloci della versione normale del nostro store, per quanto ottimizzato.

.Benché teoricamente la nuova indicizzazione non terrà conto della tecnologia impiegata dai siti, utilizzare pagine di prodotto accelerate è senz’altro un punto a tuo favore.

Infine ecco un dato di fatto: i siti più rapidi fanno crescere le conversioni. Più velocemente viene visualizzata una pagina, prima gli utenti si convincono a comprare e meno sono tentati di abbandonare il carrello.

Pertanto, nonostante le AMP impongano alcune restrizioni, si tratta di una tecnologia in grado di migliorare l’esperienza d’uso, il SEO e il tasso di conversione. Riassumendo, vale davvero la pena averle come alleate!

Come si implementa lo standard AMP in un negozio e-commerce?

I siti basati su PrestaShop sono ottimizzati per i dispositivi mobili. In alternativa al template predefinito, hai a disposizione un’ampia scelta di temi responsive all’interno del marketplace.

Tuttavia la tecnologia AMP non viene implementata di default.

Inoltre è importante capire che, per quanto semplici e veloci siano le tue pagine di prodotto, non è possibile utilizzare la stessa struttura per la versione AMP, che prevede un codice HTML leggermente diverso. Dovrai quindi impostare una versione specifica delle pagine.

Se non utilizzi PrestaShop o preferisci implementare le AMP autonomamente, puoi farlo creando manualmente e una ad una le versioni accelerate delle pagine. Chiaramente è importante assicurarsi di rispettare la sintassi e le regole dello standard di Google, e convalidare poi le pagine con l’apposito strumento.

Una volta finito, includi nei metadati della pagina di base un link alla versione AMP per indicarne l’ubicazione ai motori di ricerca e agli strumenti di indicizzazione.

Quali moduli PrestaShop sono indicati per implementare le AMP nel mio negozio e-commerce?

Ammettiamolo, l’idea di applicare lo standard AMP a mano può scoraggiare, ma la fortuna vuole che la community di sviluppatori di PrestaShop si sia data da fare e abbia già incluso nel marketplace vari moduli appositi.

Eccone una selezione:

1. Modulo AMP - Accelerated Mobile Pages

Questo modulo intuitivo permette di configurare a piacimento le pagine AMP con numerose e approfondite opzioni di personalizzazione.

Il modulo AMP consente, tra le altre cose, di scegliere quali pagine duplicare in versione AMP (homepage, pagine di categoria e di prodotto), di impostare un URL leggibile e di modificare i colori delle pagine in base all’identità grafica del proprio marchio.

Un altro punto forte del modulo è la possibilità di integrare gli annunci AdSense e di configurare Google Analytics nelle pagine del sito, amplificando l’effetto positivo dello standard AMP.

Infine, oltre a migliorare l’integrazione della versione AMP del sito nella Search Console di Google, il modulo permette anche di generare una sitemap specifica per le pagine accelerate.

Se vogliamo proprio trovargli una pecca, offre opzioni di grafica piuttosto limitate. Ad esempio il colore dei pulsanti è unico, il che riduce la chiarezza di alcune pagine, come nella seguente immagine:

Modulo AMP - Accelerated Moblie Pages

2. Modulo AMP Expert

Questo modulo offre meno opzioni del precedente, non permettendo ad esempio di creare individualmente le versioni AMP di determinate pagine o di generare una sitemap delle pagine accelerate.

Il modulo AMP Expert offre però la possibilità di personalizzare alcuni aspetti della grafica come il colore dei prezzi del listino, quello del pulsante d’acquisto e molti altri ancora.

Offre inoltre alcune modalità di ordinamento di prodotti delle AMP. Un’altra opzione molto interessante è la possibilità di scegliere il numero di prodotti da mostrare nelle pagine di categoria accelerate.

Pur permettendo di includere facilmente il codice Analytics nella versione migliorata, questo modulo non prevede l’integrazione con Google AdSense per mostrare nelle tue pagine annunci pubblicitari.

Modulo AMP Expert

3. Modulo Accelerated Mobile Pages (AMP) PRO

Questo modulo riunisce le opzioni dei due precedenti per quanto riguarda la grafica, consentendo la creazione selettiva di versioni AMP e la personalizzazione di praticamente tutti gli elementi visuali.

Gli sviluppatori del modulo AMP PRO hanno pensato davvero a tutto: la versione AMP offerta è responsive e si adatta perfettamente alle dimensioni dello schermo del dispositivo in uso.

Modulo Accelerated Mobile Pages (AMP) PRO

Altra funzionalità interessante del modulo è la visualizzazione del link alla versione normale della pagina, in modo che l’utente che lo desideri possa consultarla facilmente.

Il modulo presenta però un grosso limite: non offrendo integrazione con Google Analytics, è necessario ricorrere ad altri strumenti per ricavare le metriche del proprio sito AMP.

È invece presente la funzione di generazione automatica di una sitemap del sito accelerato, da utilizzare nella Search Console di Google.

4. Modulo PROFESSIONAL AMP PAGES - ACCELERATED MOBILE PAGES

Ecco a voi “la crème de la crème” dei moduli per AMP analizzati finora. Non solo riunisce tutte le opzioni di personalizzazione degli altri, ma permette in più di aggiungere del codice CSS personale per modificare le configurazioni eventualmente non ancora abbordate.

Il modulo PROFESSIONAL AMP PAGES permette ad esempio di definire delle categorie specifiche per AMP, in modo da non includere obbligatoriamente tutte quelle del negozio di base, e di selezionare i pulsanti di condivisione e contatto dei social network.

L’unica funzionalità mancante è la visualizzazione di annunci con Google AdSense, ma immagino che questa possibilità non ti interessi comunque, quindi... poco male!

Modulo Professional AMP Pages - Accelerated Mobile Pages

Queste erano le mie raccomandazioni. Sono convinto che tra i 4 moduli che ti ho presentato troverai quello ideale per integrare la tecnologia AMP nella tua strategia commerciale e far prosperare ancora di più il tuo business.

Come si implementano le AMP in un negozio PrestaShop?

Concludo questo articolo spiegandoti passo passo il procedimento per applicare questa tecnologia al tuo store.

1. Installa il modulo AMP

Scegli il tuo modulo AMP preferito tra quelli del marketplace ufficiale PrestaShop.

Puoi vederli elencati al seguente indirizzo:

https://addons.prestashop.com/it/search.php?search_query=amp

Installa il modulo scelto e configuralo in base alle istruzioni dello sviluppatore.

2. Accedi a una delle tue pagine prodotto.

Controlla che i metadati della sezione <head> contengano il link alla pagina AMP.

Per segnalare ai motori di ricerca che esiste una versione accelerata delle tue pagine di prodotto è infatti necessario includere una piccola stringa specifica nel codice sorgente. Eccone un esempio:

<link target="_blank" href="http:// ILMIOSTORE/ID-PRODOTTO/amp" rel="amphtml" />

3. Utilizza gli strumenti di convalida delle AMP.

Ti saranno utili per verificare la correttezza della versione AMP delle tue pagine.

Il progetto Accelerated Mobile Pages offre uno strumento apposito per realizzare questa operazione. Per utilizzarlo apri il seguente URL: https://validator.ampproject.org/. Inserisci poi l’URL della versione accelerata per testarla.

Prendiamo il caso del nostro esempio:

http:// ILMIOSTORE/ID-PRODOTTO/amp

Se tutti i parametri sono corretti, verrà visualizzato lo stato di validazione “PASS”.

AMP Validation

In caso contrario verranno segnalati gli errori da correggere.

Per la correzione degli errori ti consiglio di contattare lo sviluppatore del modulo e di fornirgli tutte le informazioni necessarie affinché possa aiutarti.

Se utilizzi Google Chrome hai anche la possibilità di installare l’estensione AMP Validator, che controlla automaticamente la presenza di una versione AMP delle tue pagine e la correttezza del relativo codice.

Conclusione

Non hai più scuse per non offrire una versione accelerata e migliorata per cellulari delle tue schede prodotto! La possibilità di aumentare il traffico e le conversioni da mobile suona allettante, vero?

Se segui questo tutorial e i miei consigli sui moduli AMP PrestaShop disponibili, rendere totalmente compatibile il tuo negozio e-commerce con i dispositivi mobili sarà una passeggiata!

Immagini (Mobile) di Freepik.

Ogni 2 settimane, la nostra newsletter di e-commerce

Inviando questo modulo, accetti che i dati inseriti vengano utilizzati da PrestaShop S.A per l’invio di newsletter e offerte promozionali. Puoi annullare l’iscrizione in qualsiasi momento utilizzando il link nelle e-mail che ti sono state inviate. Ulteriori informazioni sulla gestione dei tuoi dati e sui tuoi diritti.