Che cos'è AMP? Guida per principianti alle pagine AMP e alla SEO

Carlos Silva

mag 13, 20247 min di lettura
Cosa sono le pagine amp
Condividi

INDICE

Che cos'è AMP? 

AMP (precedentemente noto come Accelerated Mobile Pages) è un framework HTML open-source che aiuta a creare pagine web ottimizzate per i dispositivi mobili a caricamento rapido.

Quindi, una pagina AMP è, essenzialmente, una versione ridotta di una normale pagina web.

E può apparire così:

pagina mobile normale vs pagina mobile accelerata infografica

Google ha avviato il progetto open-source per competere con Facebook Instant Articles e Apple News. 

Entrambi hanno permesso agli editori di creare contenuti che si caricassero velocemente e fossero facili da consumare. 

Google ha servito per la prima volta le pagine AMP nei risultati di ricerca mobile nel 2016. E sono stati limitati a una sezione "Top Stories" nella parte superiore delle SERP. 

Così:

Pagine AMP nella ricerca mobile

Originariamente era stato progettato per gli editori di notizie. Ma da allora si è espansa fino a includere tutti i tipi di pagine web.

Come funziona AMP?

Il quadro AMP è costituito da tre componenti fondamentali:

  1. AMP HTML
  2. AMP JavaScript
  3. Cache AMP

AMP HTML

L'HTML AMP è un HTML con alcune restrizioni per garantire un caricamento rapido delle pagine. Rimuove o modifica alcuni elementi e attributi che possono rallentare le pagine web. 

Un semplice file HTML può avere questo aspetto:

un semplice esempio di file HTML

Fondamentalmente, i documenti HTML AMP devono:

  • Inizia con <!doctype html> (per inviare informazioni al browser sul tipo di documento da aspettarsi)
  • Includi un tag di primo livello <html ⚡> o <html amp> (per indicare che si tratta di una pagina AMP HTML)
  • Includi i tag <head> e <body> (per definire il contenuto del documento, cioè titoli, paragrafi, immagini, collegamenti ipertestuali, tabelle, ecc.)
  • Includi un link<rel="canonical" href="URL"> (per indicare la versione HTML regolare della pagina o per collegarsi a se stessa se non esiste una pagina regolare)
  • Includi un tag <meta charset="utf-8"> (per specificare la codifica dei caratteri)
  • Includi un tag <meta name="viewport" content="width=device-width"> (per dare al browser istruzioni su come controllare le dimensioni della pagina)
  • Includere un tag <script async src="https://cdn.ampproject.org/v0.js"><script> (per aggiungere estensioni alla libreria di base)
  • Includi il codice boilerplate AMP(head > style[amp-boilerplate] e noscript > style[amp-boilerplate]) nel tag head

Per maggiori dettagli su tag, attributi e modelli speciali, consulta la documentazione ufficiale di AMP HTML

AMP JavaScript

JavaScript è complicato perché un eccesso di JS può rendere le pagine web lente e poco reattive. 

Tuttavia, la libreria JavaScript di AMP contiene framework e componenti che ti permettono di creare pagine rapidamente senza dover scrivere JS o importare librerie di terze parti. 

Tutti elementi fondamentali per l'esperienza del lettore. 

Cache AMP

La Cache AMP è una rete di distribuzione dei contenuti (CDN) basata su proxy che effettua il pre-fetching e il pre-rendering delle pagine AMP prima che vengano richieste dagli utenti. 

E questo cambia le carte in tavola per la velocità del sito. 

Perché?

Perché permette al tuo sito di caricare più parti da server diversi contemporaneamente. Inoltre, permette ai visitatori di caricare il tuo sito dal server più vicino a loro. 

Ciò significa che il tuo sito web viene caricato molto velocemente da un maggior numero di persone. 

Attualmente esistono due fornitori principali di AMP Cache: 

Queste piattaforme memorizzano nella cache le tue pagine quando utilizzi il formato AMP. 

Ad esempio, i provider di cache possono scoprire la tua pagina AMP tramite il tag <html ⚡> o <html amp> e metterne in cache il contenuto. 

Oppure un editore può aggiungere manualmente la pagina alla Cache AMP (solo per la Cache AMP di Google). 

Altre piattaforme possono accedere alle pagine AMP memorizzate nella cache tramite il loro URL.

Ad esempio, se inserisci /amp alla fine di una notizia su The Guardian, vedrai la versione AMP. 

Così:

Pagina AMP da The Guardian

Suggerimento: Se non sei sicuro che il tuo sito disponga di pagine AMP, puoi verificare con lo strumento Site Audit di Semrush. 

Inizia aggiungendo il tuo nome di dominio e cliccando su "Avvia Audit".

Strumento di verifica del sito

Quindi, vai alla scheda "Statistiche" nella tua dashboard e vedrai una riga con la dicitura "Link AMP". 

Così:

Scheda "Statistiche" nello strumento di verifica del sito

Quali sono i vantaggi e i limiti delle pagine AMP? 

Se da un lato AMP può migliorare le prestazioni e l'esperienza utente della tua pagina, dall'altro presenta alcuni svantaggi. 

Diamo un'occhiata ai pro e ai contro delle pagine AMP:

Vantaggi di AMP

  • Il caricamento della pagina è quasi istantaneo 
  • Le pagine sono facili da costruire 
  • Migliora l'esperienza dell'utente su mobile
  • Permette di realizzare progetti personalizzati 
  • Molteplici piattaforme, tra cui Google e Bing, lo supportano

Limitazioni di AMP

  • Google non visualizza più l'icona del badge AMP per indicare i contenuti AMP 
  • Gli elementi di design sono molto limitati 
  • Le pagine AMP consentono un solo tag pubblicitario per pagina
Vantaggi e limiti delle pagine AMP infografica

Come impostare AMP sul tuo sito web

Puoi creare pagine AMP seguendo il markup HTML o utilizzando un CMS (attraverso un plugin o una funzionalità personalizzata). 

Crea la tua pagina HTML AMP

Codice di base

Per iniziare, ecco il markup di una pagina AMP di base:

<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Hello, AMPs</title>
<link rel="canonical"
href="https://amp.dev/documentation/guides-and-tutorials/start/create/basic_markup/">
<meta name="viewport"
content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s
steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s
steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s passi(1,end) 0s 1 normal both}@-webkit-keyframes
-amp-start{da{visibility:hidden}a{visibility:visible}}@-moz-keyframes
-amp-start{da{visibility:hidden}a{visibility:visible}}@-ms-keyframes
-amp-start{da{visibility:hidden}a{visibility:visible}}@-o-keyframes
-amp-start{da{visibility:hidden}a{visibility:visible}}@keyframes
-amp-start{da{visibility:hidden}a{visibility:visible}}</style><noscript><style
amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-
animation:none;animation:none}</style></noscript>
</head>
<body>
<h1 id="hello">Hello AMPHTML World!</h1>
</body>
</html>

Come puoi vedere, il contenuto del corpo è semplice, ma c'è del codice aggiuntivo nella testa. 

Suggerimento: utilizza lo snippet di AMP per fare pratica con il codice. 

Aggiunta di immagini

Se vuoi aggiungere un'immagine, devi sostituire il normale tag HTML con l'equivalente AMP. 

In questo caso, il tag <amp-img> invece di <img>

Per provarlo, copia e incolla il seguente codice nel corpo della tua pagina <>. 

<amp-img src="https://source.unsplash.com/random/600x400" width="600"
height="400"></amp-img>

Aggiungere stile

Il passo successivo è l'aggiunta dello stile. 

Qualsiasi stile deve essere realizzato utilizzando le proprietà CSS. Ma AMP richiede che tutti i CSS siano inclusi in un tag personalizzato, chiamato <style amp-custom> nell' head<> del documento. 

Ad esempio, prova ad aggiungere il seguente stile alla tua pagina:

<style amp-custom>
h1 {
margin: 1rem;
}
body {
background-color: green;
}
</style>

JavaScript

AMP consente l'utilizzo di JavaScript personalizzati attraverso il componente <amp-script>

Ti permette di scrivere ed eseguire il tuo JS in modo da mantenere le garanzie di performance di AMP. E costruisci pagine velocemente senza dover codificare JavaScript o utilizzare librerie esterne. 

Per informazioni più approfondite, leggi la guida di AMP all'uso di JavaScript personalizzato e segui il tutorial AMP JS per iniziare. 

Revisione e convalida

Una pagina AMP valida significa che segue delle linee guida rigorose che assicurano che sia idonea per la cache e che crei un'ottima esperienza utente. 

Prima di convalidare la tua pagina AMP, assicurati di seguire queste best practice:

E quando sei pronto per la revisione, usa lo strumento di test AMP per assicurarti che la tua pagina soddisfi tutti i requisiti.

Strumento di test AMP

Per una guida più dettagliata, consulta il tutorial ufficiale di AMP per la convalida delle pagine AMP. 

E se sei alle prime armi con lo sviluppo web, usa i corsi di AMP o il codelab sulle fondazioni AMP di Google. 

Crea la tua pagina AMP con un CMS

Se gestisci i tuoi contenuti attraverso un CMS, puoi utilizzare Drupal, Joomla o WordPress

Per esempio, vediamo come si presenta utilizzando AMP per WP.

Plugin AMP per WP

Dopo aver attivato il plugin su WordPress, puoi iniziare a creare le tue Accelerated Mobile Pages.

Inizia aggiungendo una nuova pagina o un nuovo post.

Pagina "Aggiungi nuovo" nel menu

Poi clicca su "Avvia AMP Page Builder".

pulsante "Avvia AMP Page Builder" evidenziato

Puoi scegliere di utilizzare i layout precostituiti o di costruirne di tuoi usando elementi drag-and-drop.

Elementi drag-and-drop per AMP Page Builder

Poi clicca sull'icona dell'ingranaggio per modificare gli elementi della tua pagina.

l'icona dell'ingranaggio evidenziata

E salva ogni modulo man mano che procedi.

"Pulsante "Salva modulo

Una volta pubblicata la pagina, potrai vedere la versione AMP della pagina aggiungendo "amp" alla fine dell'URL della pagina.

Versione AMP dell'esempio di pagina

Controlla e migliora le tue pagine AMP

Uno dei modi migliori per monitorare e migliorare le tue pagine AMP è quello di controllare periodicamente il tuo sito. Ti aiuterà a tenere traccia di qualsiasi problema di HTML, template, stile e layout. 

Inizia con l'analizzare il tuo sito attraverso il nostro strumento di verifica del sito

Suggerimento: Crea un account Semrush gratuito e fai il crawling di un massimo di 100 URL di qualsiasi dominio, sottodominio o sottocartella.

Strumento di verifica del sito

Una volta effettuato il crawling del sito, vai alla scheda "Statistiche". Vedrai i problemi nella riga denominata "Link AMP". 

Scheda "Statistiche" in Site Audit

Lo strumento controlla oltre 40 degli errori più comuni relativi alle pagine AMP. E ti spiega come risolverli. 

Perché e come risolvere i problemi con la sezione delle pagine AMP

Risolvi qualsiasi problema il prima possibile. Possono influenzare il modo in cui i motori di ricerca propongono i tuoi contenuti agli utenti. 

Condividi
Author Photo
Carlos Silva is a content marketer with over 10 years of experience in writing, content strategy, and SEO. At Semrush, he’s involved in research, editing, and writing for the English blog. He also owns Semrush’s Educational Newsletter (4M+ subscribers).