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ì:
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ì:
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:
- AMP HTML
- AMP JavaScript
- 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:
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]enoscript > 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ì:
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".
Quindi, vai alla scheda "Statistiche" nella tua dashboard e vedrai una riga con la dicitura "Link AMP".
Così:
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
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:
- Se stai ottimizzando per Google, segui le sue linee guida per le pagine AMP
- Collega le tue pagine AMP ai loro canonici (versione non AMP o la pagina AMP stessa).
- Usa lo stesso markup di dati strutturati nelle pagine AMP e canoniche
- Verifica che i dati della struttura funzionino utilizzando il test Rich Results.
- Verifica che il tuo file robots.txt non blocchi la tua pagina AMP
- Segui le linee guida SEO hreflang internazionali
E quando sei pronto per la revisione, usa lo strumento di test AMP per assicurarti che la tua pagina soddisfi tutti i requisiti.
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.
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.
Poi clicca su "Avvia AMP Page Builder".
Puoi scegliere di utilizzare i layout precostituiti o di costruirne di tuoi usando elementi drag-and-drop.
Poi clicca sull'icona dell'ingranaggio per modificare gli elementi della tua pagina.
E salva ogni modulo man mano che procedi.
Una volta pubblicata la pagina, potrai vedere la versione AMP della pagina aggiungendo "amp" alla fine dell'URL della 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.
Una volta effettuato il crawling del sito, vai alla scheda "Statistiche". Vedrai i problemi nella riga denominata "Link AMP".
Lo strumento controlla oltre 40 degli errori più comuni relativi alle pagine AMP. E ti spiega come risolverli.
Risolvi qualsiasi problema il prima possibile. Possono influenzare il modo in cui i motori di ricerca propongono i tuoi contenuti agli utenti.