Skip to content

Cos’è AMP – Accelerated Mobile Pages Project

AMP è l’acronimo di Accelerated Mobile Pages Project (AMP). AMP è un progetto open source attualmente guidato da Google con la finalità di rendere veloci le pagine web mobile. In pratica con AMP si crea una versione molto semplificata di ciascuna pagina del sito web, in modo che il caricamento risultati quasi istantaneo.

AMP è utile alla SEO?

Per ora AMP sembra una tecnologia dedicata a siti di notizie, ma in futuro potrebbe aprirsi anche ad altri tipi di risultati. Come avrete già avuto modo di notare, da Febbraio 2016 cercando una notizia in SERP appare un nuovo carosello.

Carosello AMP nei risultati di ricerca
Carosello AMP nei risultati di ricerca

E’ abbastanza evidente l’impatto di AMP sulla SEO, per le ricerche di news il carosello è la sezione above the fold, il resto è below.

L’esperienza utente su pagine AMP è obiettivamente appagante per questo genere di risultati, le pagine si aprono istantaneamente e sicuramente l’utente inizia ad apprezzare questa rapidità (e quindi cliccherà ancora un carosello AMP).

Google Discovery – indica a Google le tue pagine AMP

Come dicevo AMP è un sistema per generare copie semplificate delle pagine web del sito. Come possiamo dire a Google che abbiamo implementato AMP e che ci sono nuove pagine da scansionare ed indicizzare?

Per indicare a Google le versioni AMP delle pagine si usa una specifica tag link da inserire nell’head dell’HTML.

Nella pagina canonica si indica la pagina AMP con il link rel=”amphtml”, mentre dalla pagina AMP si linka la pagina canonica con il link rel=”canonical”. Semplice no? E’ lo stesso funzionamento del hreflang per la gestione delle lingue oppure il rel=”alternate” per la gestione dei siti mobile.

<!-- Tag Link per la pagina desktop canonica: -->
<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">

<!-- Tag Link per la pagina mobile AMP: -->
<link rel="canonical" href="https://www.example.com/url/to/full/document.html">

Dato che il rel=amphtml definisce dove si trova la pagina web in versione AMP, deve essere inserito nella pagina non-AMP, o la versione standard/canonica della pagina. La funzione principale del link rel=amphtml è per indicare a Google che stiamo utilizzando il progetto AMP e che quindi deve indicizzare nuove pagine.

Quando Googlebot incontra un rel=amphtml lo seguirà ed eventualmente indicizzerà la pagina AMP. Se la pagina AMP è valida verrà inserita nella CDN di Google (content delivery network) di Google per essere caricata rapidamente negli iframe in SERP (il carosello AMP è alla fine un iframe). In futuro quando un utente da mobile cercherà la tua pagina, Google mostrerà la copia dalla sua CDN.

Don’t Worry Publisher: potrai sempre monetizzare i tuoi contenuti anche con AMP e la CDN, perché gli annunci verranno mostrati se rispetterai le regole AMP (continua a leggere).

Implementare AMP impatta sul Crawl Budget?

Cos’è il Crawl Budget? Leggi qui. Anyway – no, AMP non impatta sulle statistiche di scansione. Google assegna Crawl Budget dedicato alla scoperta ed indicizzazione delle pagine AMP. Il sito desktop continuerà a ricevere scansioni regolari da Googlebot.

Ottimizzare AMP per la SEO

La maggior parte di queste ottimizzazioni possono (dovrebbero) essere seguite anche se non hai intenzione di implementare AMP, consideriamole infatti parte della normale ottimizzazione del tempo di caricamento delle pagine web.

Se hai intenzione di implementare AMP, questa guida potrebbe aiutarti a capire i principi su cui ruota AMP in modo che tu possa massimizzare i risultati.

Usa solo script asincroni

Questa indicazione si riferisce a tutti i file JavaScript richiamati dal tuo file HTML. I file JavaScript non differiti o non asincroni vengono definiti render blocking javascript e sono uno dei più diffusi problemi che impattano la velocità di caricamento delle pagine web.

Cos’è un JavaScript asincrono?

Quando un file JavaScript viene richiamato in modo asincrono, viene detto al browser che l’esecuzione di questo file JavaScript non è importante per disegnare la pagina (rendering). In questo modo il browser scaricherà il file JS solo al termine del rendering della pagina. Mentre la pagina viene caricata, il file JavaScript potrebbe iniziare ad essere scaricato, ma non bloccherà il rendering della pagina.

Per garantire che non ci siano JavaScript a bloccare il rendering, AMP ammette soltanto JavaScript richiamati in modo asincrono. Anche se non vuoi implementare AMP, questa ottimizzazione è molto interessante.

Come richiamare JavaScript in modo asincrono?

Solitamente un file JavaScript viene richiamato in questo modo:

<script src="https://example.com/javascript.js"></script>

Per rendere la chiamata asincrona al file JavaScript esterno è sufficiente aggiungere “async“:

<script src="https://example.com/javascript.js" async></script>

Attenzione: non è tutto oro quel che luccica… Sfortunatamente molte funzionalità della pagina web potrebbero non funzionare correttamente quando un JavaScript è chiamato in modo asincrono. Ad esempio richiamando la libreria jQuery in modo asincrono potrebbero apparire elementi rotti o non mostrati correttamente fino a che il browser non abbia caricato tutto.

Dichiara le dimensioni delle risorse esterne

La documentazione di AMP descrive così questa ottimizzazione:

“External resources such as images, ads or iframes must state their size in the HTML so that AMP can determine each element’s size and position before resources are downloaded. AMP loads the layout of the page without waiting for any resources to download.”

Questa affermazione potrebbe far pensare che un’immagine debba per forza dichiarare una dimensione esplicita come width=900 height=400 o qualcosa del genere. La verità è che non è esattamente così.

Come funzionano le dimensioni in AMP?

In Amp ci sono casi particolare usati per gli annunci pubblicitari, immagini, video e iframe (tutte cose che possono rovinare la formattazione del sito). Nella maggior parte dei casi ci sono dimensioni esplicite dichiarate per questi elementi, ma queste dimensioni vengono usate per ridimensionare in modo responsive gli elementi mantenendo quindi il rapporto altezza e larghezza (aspect ratio).

Quando una pagina viene disegnata dal browser, ci sono spesso molti ricalcoli di stile coinvolti. Questo vuol dire che gran parte del lavoro fatto non sarebbe necessario se il browser capisse la dimensione degli elementi prima di iniziare a scaricarli.

Quando un’immagine viene richiamata da una pagina HTML senza attributi altezza e larghezza, il browser deve scaricare l’immagine prima di poter conoscere le sue dimensioni. Una volta che l’immagine viene scaricata, il browser deve aggiustare il layout della pagina per mostrarla.

Il processo può essere riassunto così:

  • il browser disegna la pagina
  • l’immagine viene richiamata senza dimensioni dichiarare le dimensioni
  • l’immagine viene scaricata
  • il browser conosce le dimensioni reali dell’immagine
  • il browser ricalcola tutti gli elementi della pagina per poter inserire l’immagine

se il browser conoscesse le dimensioni dell’immagine, il processo si ridurrebbe a:

  • il browser disegna la pagina
  • l’immagine viene scaricata e mostrata correttamente senza necessità di ricalcoli

Accorciando il processo si riduce anche il tempo di caricamento della pagina in modo esponenziale al numero di annunci ed immagini inseriti in pagina.

Come dichiarare le dimensioni in AMP?

Le immagini si inseriscono utilizzando il tag specifico <amp-img>. Il tag comunica al browser di utilizzare le dimensioni dichiarate non come valore assoluto ma come rapporto tra altezza e larghezza, il così detto aspect-ratio.

Come dichiarare le dimensioni senza AMP?

Per implementare questa soluzione basta un design responsive. Sempre maggiori browser supportano srcsetmaggiori informazioni.

Nota: tranne casi particolari si segue la regola che se l’immagine è inferiore a 50×50 pixel, allora è corretto dichiarare semplicemente le dimensioni con gli attributi width e height.

Nota: non dimenticare le altre ottimizzazioni per le immagini utili alla SEO!

Non usare plugin/estensioni che bloccano il rendering

Di quali plugin ed estensioni sto parlando? Nella documentazione AMP si fa riferimento ad elementi come lightbox, instagram embed e tweet. Questo tipo di estensioni usano una porzione di layout della pagina per mostrare cose che non gestiamo noi e che richiedono ulteriori chiamate HTTP. Come abbiamo visto per le immagini, anche queste estensioni possono diventare elementi di blocco del rendering. Idealmente le richieste HTTP necessarie a trovare e disegnare questi elementi non dovrebbero bloccare il rendering della pagina. In altre parole, la pagina dovrebbe completare il rendering prima di iniziare a popolare i layout delle estensioni. Nello stesso modo funziona per gli ADS, prima si deve caricare la pagina, e poi si caricano gli ADS.

Come gestire questa ottimizzazione in AMP?

In AMP questo problema viene risolto inserendo l’elemento in un tag specifico. Se una pagina web contiene un iframe, allora lo script nel tag <amp-iframe> viene richiamato nell’head dell’HTML e comunicherà le dimensioni e layout dell’elemento prima ancora che venga scaricato.

<amp-iframe width=300 height=300
    sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
    layout="responsive"
    frameborder="0"
    src="https://www.google.com/maps/embed/v1/place?key=AIzaSyDG9YXIhKBhqclZizcSzJ0ROiE0qgVfwzI&q=Alameda,%20CA">
</amp-iframe>

Esiste un elenco di componenti aggiuntivi per inserire elementi esterni nelle pagine AMP, come Analytics, Facebook e molto altro. L’elenco completo con informazioni dettagliate lo trovi qui.

Come gestire questa ottimizzazione senza AMP?

Con la funzione defer per javascript, immagini e video. Differire elementi significa aspettare l’evento onload prima di iniziare a scaricarli. Leggi le tre guide linkate per imparare a differire i vari elementi.

Tieni i JavaScript di terze parti fuori dal percorso di rendering

Ancora una volta, un’ottimizzazione al percorso di rendering, che è in realtà il concetto più importante che ruota intorno all’ottimizzazione della velocità di caricamento, può valere molto in termini di risultati.

I file JavaScript di terze parti sono comunemente il risultato di soluzioni di copia e incolla per cose come i pulsanti sociali, i tracciamenti web analytics, strumenti SEO, strumenti di marketing, annunci, e così via. I JavaScript di terze parti tendono a non essere molto ottimizzati per il caricamento delle pagine.

Bloccando tutti i JavaScript di terze parti, AMP libera la pagina web da elementi di blocco, in modo da essere renderizzata senza aspettare altro se non ciò che è assolutamente necessario per visualizzare la parte visibile della pagina.

E’ molto importante conoscere i file JavaScript di terze parti che usiamo nel sito perché non abbiamo il controllo di ciò che lo script sta facendo. Spesso questi script usano chiamate sincrone o document.write, che bloccano il rendering in modo significativo.

La documentazione AMP descrive un esempio semplice:

“…If you have five ads, and each does three sync loads, with a 1 second latency connection, you’re in 18 seconds of load time just for JS loading.”

Per questo i JavaScript di terze parti devono essere controllati.

JavaScript di terze parti possono essere utilizzati in AMP?

Sì. JavasScript personalizzati e/o di terze parti possono essere eseguiti, ma soltanto in modalità sandboxed iframemaggiori informazioni. AMP vuole limitare l’uso di questo tipo di JavaScript perchè spesso generano rallentamenti nel caricamento delle pagine.

Fai un inventario delle chiamate a JavaScript esterni e prova a differirli e vedere se la pagina funziona ancora correttamente. Se scopri che questi metodi non funzionano è probabile che sia necessario sostituirli con un prodotto simile ma ottimizzato per le prestazioni web.

Tutte le regole CSS devono essere inline e occupare massimo 50k

Dato che tutti i CSS sono elementi di blocco, il progetto AMP esclude l’utilizzo di CSS esterni. Come avrai avuto modo di notare, i temi di bassa qualità per i CMS usano CSS spesso molto grossi, in alcuni casi perfino in gran parte inutili. Se vuoi implementare AMP devi cambiare il metodo con cui vengono gestite le regole CSS: il codice CSS non deve superare i 50k e deve essere in-line, ovvero inserito dentro il file HTML (no dipendenze CSS esterne).

Qualsiasi pagina web con più di 50k di CSS in-line non passerà la verifica di Google e non verrà mostrata nel carosello AMP.

Nel caso tu non voglia implementare AMP, sappi che ridurre il numero di file CSS e la loro dimensione è una forte ottimizzazione per migliorare i tempi di caricamento delle pagine. Ci sono CMS e framework dove il CSS usato per disegnare le pagine del sito rappresenta circa l’8% di tutte le regole CSS inserite nel file. Non è uno spreco?

Ricordati:

  • conosci le regole CSS che stai usando sulle varie pagine
  • verifica quali regole vengono realmente usate e quali no
  • elimina le regole non necessarie
  • unisci i CSS in un file unico
  • verifica di nuovo la velocità di caricamento
Hai presente quei temi dove puoi cambiare il colore primario? Guarda il CSS, non mi stupirei di trovare blocchi di CSS moltiplicati per ogni variante di colore. Una volta deciso il colore del sito, le altre regole devono essere eliminate!

Richiama i Font in modo efficiente

Usi Font customizzati? Leggi qui! In una tipica pagina HTML, diversi JavaScript e CSS vengono caricati prima dei Font. Dato che il file dei Font è spesso un file abbastanza grande rispetto ad un JavaScript o CSS, è corretto richiamarlo per primo.

La situazione ideale sarebbe iniziare il download del Font prima degli altri file in modo che la risorsa venga scaricata con meno ritardo possibile. Tuttavia non è facile ottenere questo risultato a meno di non inserire il contenuto del file Font in-line nell’HTML (conosci il sito Varvy.com? Lui fa così) ma non è la soluzione migliore per tutti i siti.

Inserire il Font file in-line
Inserire il Font file in-line

Sviluppando una pagina AMP si dovrebbe assicurare che la prima richiesta HTTP che parte è la richiesta al Font.

Riduci i ricalcoli di stile

Cos’è un ricalcolo di stile? Quando cambia qualcosa nella pagina web che colpisce il layout, l’intera pagina deve essere ricalcolata, e questo avviene anche per piccole modifiche. Abbiamo parlato qualche paragrafo prima di questo aspetto, utilizzando le immagini come un esempio, vediamo con un altro esempio come ridurre i ricalcoli di stile.

Se un’immagine non ha dimensione dichiarate, il browser deve scaricarla solo per scoprire quanto è grande. Diciamo che una pagina ha un’altezza 300px con un’immagine di dimensioni sconosciute. Quando l’immagine viene caricata, il browser scopre che l’immagine è alta 400px. A questo punto serve un ricalcolo stile. Quando il browser deve eseguire questi ricalcoli il tempo di caricamento della pagina si allunga.

Non sono soltanto le immagini a causare questo problema, anche i div possono avere uno stile CSS dedicato che viene sfruttato solo in piccola parte.

L’obiettivo di AMP è eliminare il ricalcolo di stile ed utilizzando le ottimizzazioni appena mostrate potrai verificare che gran parte dei ricalcoli di stile verranno eliminati.

  • In AMP le dimensioni devono essere dichiarate e questo rimuove i ricalcoli di stile
  • In AMP il codice CSS deve occupare meno di 50k e questo riduce i costi del ricalcolo di stile

AMP assicura inoltre che la lettura del DOM avvenga prima delle operazioni di scrittura. Questo significa che non c’è bisogno di avere più ricalcoli per ogni frame, infatti AMP impone al massimo un solo ricalcolo per frame.

Se non sei interessato ad implementare AMP, il modo migliore per ridurre al minimo i ricalcoli stile è quello di seguire le ottimizzazioni viste in questo articolo. Come accennato in precedenza, queste ottimizzazioni sono essenzialmente ottenute rimuovendo elementi di blocco nel processo di rendering.

Dire “ridurre al minimo i ricalcoli stile” è più o meno la stessa cosa che dire “pianificare bene la pagina web”. Quando una pagina è studiata come una pagina, piuttosto che come un sito web, queste cose tendono a risolversi da sole durante lo sviluppo. Quello che voglio dire con questo è che, proprio come i CSS dovrebbero essere fatti per la pagina e non per il sito web, in modo opportuno dovrebbe funzionare così anche tutto il resto. Se un elemento non è richiesto in pagina, non caricarlo.

Tutte queste considerazioni potrebbero sembrare banali e di senso comune, ma non lo sono. Praticamente ogni tema WordPress fa l’opposto di quanto consigliato in questa guida.

Per ridurre al minimo i ricalcoli stile devi sapere che cosa accade in ogni pagina, per sapere quali elementi JS e CSS sono necessari e quali non lo sono. Non importa cosa ha bisogno il tuo sito, importa cosa ha bisogno la pagina. Le persone non guardano i siti, guardano le pagine.

Utilizza solo animazioni accelerate dalla GPU (Graphics Processing Unit – Processore grafico)

L’uso di animazioni dentro pagine web sta diventando sempre più popolare. Quando dico animazioni potresti pensare alle grandi immagini in movimento. La verità è che le animazioni sono utilizzate in tante piccole funzionalità, come riconoscimenti di interfaccia utente e altre cose del genere. Se si acquista un tema WordPress costruito di recente, è probabile che utilizzi.

Al fine di assicurarsi che le animazioni siano AMP-friendly, dobbiamo fare in modo che le animazioni siano gestita dalla GPU. Cos’è una GPU? GPU è l’acronimo di Graphics Processing Unit. A differenza della CPU (Central Processing Unit, il processore centrale di un computer), la GPU è dedicata ai calcoli grafici (gestione animazioni, modelli 2D e 3D, …). A causa della sua natura specifica, la GPU è molto efficiente a gestire animazioni grafiche rispetto alla CPU. Questo beneficio diventa ancora più grande perché dal momento che la GPU si dedica alla grafica, la CPU può dedicare tutte le sue risorse al rendering della pagina. Per farla breve, usando assieme CPU e GPU si possono rendere le animazioni più veloci rispetto a quando si utilizza la sola CPU.

Come gestire le animazioni in AMP?

Purtroppo non esiste un semplice comando che dice solo “utilizzare la GPU per le animazioni”. Quello che puoi fare, sia che tu utilizzi AMP oppure no, è quello di limitare la tipologia di animazioni a due soli metodi:

  • Transform
  • Opacity

AMP limita le animazioni a questi due metodi, che possono essere utilizzati per rendere la maggior parte animazioni, e promuove l’elemento da animare.

Come gestire le animazioni senza AMP?

Nello stesso modo visto per AMP: limita le animazioni a transform e opacity e promuovi l’elemento da animare. La pagina degli sviluppatori di Google che spiega il metodo offre una buona panoramica del processo.

Assegna priorità al caricamento delle risorse

Le risorse usate da una pagina web possono essere immagini, annunci, video, elementi inseriti in embed, etc. In una pagina web tipica queste risorse sono spesso caricate random – in modo tale che si battono per la stessa larghezza di banda e non vi sia alcun modo per sapere quali risorse verranno caricate prima.

Come fa AMP a superare questo problema?

Traduco dalla documentazione ufficiale: “AMP controlla i download di tutte le risorse: AMP assegna priorità al caricamento delle risorse, caricando solo quello che serve, ed utilizzando il prefetch sulle risorse lazy-load.”

Il modo in cui vengono caricate le risorse è la chiave per velocizzare il caricamento della pagina. La stessa pagina web, con lo stesso contenuto, utilizzando le stesse immagini, file CSS, file js e lo stesso font, caricherà a velocità diverse a seconda dell’ordine in cui vengono caricate le risorse. AMP carica in modo intelligente le risorse.

Una pagina che carica CSS prima di JavaScript è in genere più veloce di una pagina che carica JavaScript prima di CSS. Se tale pagina rinvia anche il caricamento delle immagini below the fold, ritarda il caricamento dei file JavaScript che non sono necessari above the fold è facile ridurre di alcuni secondi il tempo di caricamento della pagina.

AMP costringe essenzialmente alcune best practice. AMP cerca anche di andare oltre, con il prefetching rdelle risorse lazy-load. Questo potrebbe sembrare strano in un primo momento, perché dovrebbe precaricare una risorsa che era esplicitamente in lazy load (ovvero caricata in un secondo momento)?

Ci sono tre cose che può fare un browser:

  • ottiene risorse – meno sono più veloce sarà il processo
  • calcola – meno calcoli esegue più veloce è il pricesso
  • è a riposo – è il momento giusto per eseguire compiti secondari che saranno presto necessari

Il problema con la maggior parte delle pagine web di oggi è che tutto è richiamato insieme in una volta. Tutto è chiamato allo stesso tempo, la fase “ottiene risorse” è intasata e quando il browser sarà alla fase “calcola” dovrà calcolare tutto assieme, intasando di nuovo il processo. Perché non assegnare priorità e ordine agli elementi da scaricare e processare? Alternando elementi e fasi è possibile ridurre drasticamente i tempi di caricamento di siti web complessi.

AMP utilizza semplicemente queste finestre di tempo “a riposo” in un modo che permette il caricamento della pagina in modo efficiente.

Come faccio a fare questo senza AMP?

La verità è che non hai bisogno di AMP o qualsiasi altra cosa per dare la priorità alle risorse da caricare. C’è un processo logico che è possibile seguire e che aiuterà le tue pagine a caricare più velocemente con le stesse risorse.

  • Comprendere il percorso di rendering – rendering path
  • Ottimizzare il caricamento di CSS e caricare prima le regole CSS
  • Fare una lista di tutte le risorse caricate da una pagina web
  • Dividere tali risorse in due gruppi: un gruppo è “below the fold” e l’altro è “above the fold”
  • Rimanda il caricamento degli elementi “below the fold”
  • Considera se hai realmente bisogno di tutte le dipendenze che stai usando per quella pagina specifica. In caso contrario, rimuovi il superfluo

La verità è che, come riconosce Google, una pagina web ottimizzata a mano può essere perfino più veloce di una pagina AMP.

Carica le pagine in un istante

AMP utilizza Preconnect:

Il tipo di collegamento relazione preconnect è usato per indicare un’origine che verrà utilizzata per recuperare le risorse necessarie. Avvio di una connessione iniziale, che comprende la ricerca DNS, TCP handshake, e la negoziazione TLS opzionale, consente al programma utente di mascherare gli alti costi di latenza di stabilire una connessione. “

Preconnect è un modo per dire browser: “Ciao, ho solo pensato che dovresti sapere che c’è la probabilità che l’utente richieda questa risorsa a breve, quindi perché non vai avanti e inizi a collegarti ad essa?”

In questo modo i browser possono decidere quando è più ottimale iniziare a scaricare la risorsa consigliata. Questo permetterà alla risorsa di essere pronta appena è necessario perché tutti i dettagli della connessione sono già stati fatti (DNS/handshake/SSL)

Preconnect, Prefetch, Prerender, e altri suggerimenti al browser come DNS-prefetch hanno tutti un problema comune: sono spesso abusati inserendo di tutto ed intasando di nuovo la macchina.

Come si gestisce in AMP?

AMP utilizza prefetching e pre-rendering in modo più intelligente. Piuttosto che eseguire il pre-rendering di tutto, verrà precalcolata solo l’area “below the fold”.

Con le pagine AMP possiamo fare oltre , rifiutando il PreRender per elementi con cicli di CPU troppo lunghi, oppure elementi che possono utilizzare troppa CPU come iframe di terze parti.

Come raggiungere questo obiettivo senza AMP?

L’uso di preconnect, dns-prefetch, e pre-rendering può essere fatto senza AMP. Comunque ricorda che se le pagine web si basano su una grande quantità di risorse, ridurre o ottimizzare il modo in cui queste risorse vengono caricate è una strategia migliore rispetto all’utilizzo di prefetching.

Plugin e Risorse

Autore

Commenti |14

Lascia un commento Lascia un commento
  1. giu852 1 commento

    Ciao Giovanni,

    grazie per l’articolo molto dettagliato. Avrei 2 domande per te. La 1 domanda: dovendo realizzare un nuovo sito internet bisogna creare prima le pagine “standard” e poi creare le copie AMP o è possibile creare subito tutto il sito in AMP. La 2 domanda: è possibile definire come Landing-Page di una campagna una pagina AMP. In altre parole, che l’annuncio XY punti come destinazione all’URL AMP di una pagina? Grazie in anticipo!

    1. Giovanni Sacheli 754 risposte

      Ciao Giu, grazie per il commento.

      AMP rappresenta una versione “alternativa” della pagina canonica, infatti si deve fare riferimento all’URL AMP con un link relativo come hai letto nell’articolo. Creare un sito solo AMP non ha senso se è quello che chiedi ed inoltre avresti molte limitazioni nello sviluppo. Quindi in risposta alla prima domanda: si, prima crei le pagine standard e poi crei la loro versione AMP.

      La domanda 2: assolutamente si, ma solo per campagne che hanno come target solo dispositivi mobile. AMP permette di avere caricamenti molto rapidi e questo impatta positivamente sull’esperienza utente (anche di campagne PPC).

      A presto e buon lavoro.

  2. Michele 2 commenti

    Ciao Giovanni,
    un cliente ha un sito su cui sono attivate le AMP, alcune delle quali hanno anche ottenuto buoni posizionamenti su Google.

    Adesso il cliente ha acquistato un rifacimento completo del sito, nel nuovo progetto però non sono previste le AMP.

    Volevo chiedere una tua gentile opinione su come comportarmi con le AMP del vecchio sito (soprattutto con quelle posizionate): è possibile fare redirect a pagine normali del nuovo sito? Quali sono le best practice in questi casi? Qual è il miglior modo per mantenere il posizionamento di queste pagine?
    Grazie mille in anticipo per la tua opinione!

    1. Giovanni Sacheli 754 risposte

      Ciao Michele, grazie della bella domanda.

      È un peccato perdere il traffico AMP dato che, come dici, qualche soddisfazione alla fine l’ha portata al cliente.
      Potresti implementare dei redirect 301 da AMP-URL verso i canonical URL ma, comunque, i posizionamenti nei caroselli AMP andranno persi (quindi in pratica i redirect non sono poi così utili).

      Se il cliente fosse mio ed il sito fosse un WP, gli installerei il plugin AMP (for free), per pietà diciamo. Almeno eviterei di dovergli mostrare report in calo in futuro.

      Se togli AMP e basta aspettati quindi un calo di traffico quantificabile nel traffico AMP attuale.

      A presto e buon weekend!

  3. Davide 1 commento

    Ciao Giovanni,
    ho implementato AMP sul mio sito. Dopo alcuni giorni Google ha iniziato a puntare alla pagine AMP che hanno però perso alcune posizioni nelle SERP rispetto alle vecchie pagine canoniche portando quindi meno accessi al sito. Questo è normale?
    Grazie mille

    1. Giovanni Sacheli 754 risposte

      Ciao Davide, no non è normale ma c’è anche da dire che AMP non è la soluzione ai problemi di tutti.

      A volte AMP è un vantaggio, a volte uno svantaggio. Assicurati che le pagine AMP abbiano gli stessi contenuti delle pagine classiche, magari AMP usa un versione troppo semplice di layout che tralascia alcuni dettagli. Diamo per scontato che l’implementazione sia corretta :)

  4. Gianluca 3 commenti

    Ciao,

    Ottimo articolo davvero.
    Ti volevo segnalare però che quando parli di elementi esterni aggiuntivi come Analytics o Facebook, il link https://www.ampproject.org/it/docs/reference/extended.html che hai indicato viene bloccato perchè ritenuto pericoloso.
    Hai altri link da fornire?

    Il mio problema è che non riesco a far funzionare su pag amp il pixel di FB. Questo perchè ho usato il plugin “AddFunc Head & Footer Code” che mi consente di inserire eventi personalizzati differenti da pagina a pagina, in modo da tenere più facilmente sotto controllo le visite a determinate pagine e poi fare un retargeting più preciso.

    Grazie per il tuo aiuto

    1. Giovanni Sacheli 754 risposte

      Ciao Gianluca, per inserire il pixel di Facebook in pagine AMP devi usare delle versioni modificate, come ad esempio

      <amp-pixel src="https://www.facebook.com/tr?id=YOUR_ID&ev=PageView&noscript=1" layout="nodisplay"></amp-pixel>

      PS: devi cambiare “YOUR_ID”

      Riferimento: https://amp.dev/documentation/components/amp-pixel/

      1. Gianluca Corsini 3 commenti

        Ciao, Grazie per l’aiuto.

        Ok, ma per inserire gli eventi Facebook personalizzati su pagine AMP?

        Fin’ora non ci sono mai riuscito
        Grazie

        1. Giovanni Sacheli 754 risposte

          Ciao Gianluca, in teoria una volta inserito il pixel di facebook, gli eventi dovresti gestirli dalla console manager di Facebook:
          https://stackoverflow.com/questions/59155029/amp-analytics-to-track-facebook-pixel-lead-events

          1. Gianluca Corsini 3 commenti

            Ciao Giovanni,
            in realtà non è cosi.
            Se dalla console di Facebook inserisco un link di una pagina AMP per configurare rapidamente gli eventi non lo trova mai e non fa configurare alcun evento, anche se OLTRE ALLO SCRIPT PER PIXEL AMP, è inserito anche il pixel classico…
            Anzi da questo messaggio di errore:
            “Non abbiamo trovato pixel di Facebook su questo sito web. Se questo è l’URL corretto, assicurati che il tuo pixel sia stato configurato. Se hai un’altra tab attiva con lo stesso pixel e un dominio diverso, potrebbe provocare problemi con la connessione al tuo sito.”

            E io ho provato, sia con lo script:

            {
            “vars”: {
            “pixelId”: “123456789……..”
            },
            “triggers”: {
            “trackPageview”: {
            “on”: “visible”,
            “request”: “NEW-TEST-AMP”,
            },
            “trackViewContent”: {
            “on”: “visible”,
            “request”: “NEW-TEST-AMP”,
            }
            }
            }


            nel tag body (come diceva l’articolo), sia net tag head, sia con questo script nel tag body e nello stesso tempo il pixel classico nell’ head.

            Niente da fare, non traccia MAI NIENTE….

            1. Giovanni Sacheli 754 risposte

              Ciao Gianluca, hai ragione sulle pagine AMP non si possono tracciare gli eventi nello stesso modo con cui si tracciano su una normale pagina. Con Analytics + GTM ad esempio i trigger di eventi che useresti per le pagine “normali” non funzionano sulle pagine AMP. Non ho esperienza diretta con AMP + pixel facebook, ma pensavo fosse più semplice.

              Le variabili che usa GTM non esistono nelle pagine AMP (es: click URL). Deduco che anche le variabili usate dal pixel di Facebook non siano disponibili nelle pagine AMP. Come si dice serve un walkaround. Ho trovato alcune soluzioni in questo articolo, magari può aiutarti.

  5. Daniele 1 commento

    Ciao Giovanni, la pagina originale AMP esempio: “miosito.it/amp/pagina.html” ha solo cookie tecnici quindi solo informativa privacy.
    La pagina nella ricerca di Google e quindi nella cache di Google: “www.google/amp/www.miosito/amp/pagina.html” non ha più solo cookie tecnici ma ha cookie che tracciano e profilano, quindi domanda: solo informativa sulla privacy?? o banner per bloccare i cookie e dati che non sono a tua disposizione ma a disposizione di Google??

    Grazie eventualmente per la risposta.
    Daniele

    1. Giovanni Sacheli 754 risposte

      Ciao Daniele, se i cookie di tracciamenti NON li metti tu e sono solo nelle pagine ospitate sui server di Google, io non mi preoccuperei.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Ultimi articoli aggiornati

Richiedi un preventivo SEO e Google Ads

Porta il tuo sito web al livello successivo con l’expertise di EVE Milano. La nostra agenzia di Search Marketing ha ricevuto oltre 1123 richieste di preventivo, un segnale chiaro della fiducia che imprenditori e manager, come te, ripongono nella nostra specializzazione tecnica e verticale nella SEO e PPC. Se la tua organizzazione cerca competenze specifiche per emergere nei risultati di Google, noi siamo pronti a fornire quel valore aggiunto. Affidati alla nostra esperienza per fare la differenza.
Richiedi un preventivo

Non perderti altre guide, iscriviti per ricevere un avviso mensile con gli aggiornamenti del blog!

Iscriviti alla newsletter!

Informativa sui cookies

Noi e terze parti selezionate utilizziamo cookie o tecnologie simili per finalità tecniche e, con il tuo consenso, anche per le finalità di esperienza e misurazione come specificato nella cookie policy. Puoi liberamente prestare, rifiutare o revocare il tuo consenso, in qualsiasi momento, accedendo al pannello delle preferenze. Il rifiuto del consenso può rendere non disponibili le relative funzioni. Usa il pulsante “Accetta” per acconsentire. Usa il pulsante “Rifiuta” per continuare senza accettare.