In questa guida utile di oggi vi propongo una comoda funzione php per convertire img e tag html nei corrispettivi tag per AMP
Che cos’è AMP?
Per chi non lo conoscesse AMP è la denominazione acronimo di Accelerated Mobile Pages. E’ un progetto nato in forza a Google e si pone l’obbiettivo di migliorare l’esperienza di navigazione – in un primo periodo solo prettamente editoriale – in ambito mobile.
Di fatto grazie a una serie di accorgimenti l’utente – passando da google – atterra su una pagina “ad hoc” creata per amp che viene passata direttamente dalla velocissima cache di Google. Tutto questo si va a sommare alla famosa “corsa al mobile” intrapresa ormai da tutti i progetti web editoriali e non.
Problema
Tornando all’articolo in questione, come saprete amp necessita di una struttura tag diversa da quella html per il rendering – ad esempio – delle immagini. Se per esempio in html abbiamo il tag <img> in amp quest’ultimo diventa: <amp-img></amp-img>. Come fare – dato un testo preso da un editor qualsiasi (CKeditor, WordPress, TinyMce etc) a cambiare automaticamente il tag?
Soluzione
Ecco una comoda funzione che di fatto:
- Sostituisce i tag html con le relativi controparti AMP
- Mantiene eventuali classi o id
- Fa lo strip dello stile inline di quasiasi elemento html (lo stile inline invalida amp)
- Permette di personalizzare i tag in whitelist da non filtrare
function TrgAmp($html){
//Custom DEV @Riccardo Mel
//Crea tag di apertura amp-img e sostituisci il corrispondente tag NON AMP
$html = str_ireplace(
['<img','<video','/video>','<audio','/audio>'],
['<amp-img','<amp-video','/amp-video>','<amp-audio','/amp-audio>'],
$html
);
# Crea il tag di chiusura amp-img
$html = preg_replace('/<amp-img(.*?)>/', '<amp-img layout="responsive" width="300" height="250" $1></amp-img>', $html);
# Whitelist tag - filtro iframe, embed script etc
$html = strip_tags($html,'<h1><h2><h3><h4><h5><h6><a><p><ul><ol><li><blockquote><q><cite><ins><del><strong><em><code><pre><svg><table><thead><tbody><tfoot><th><tr><td><dl><dt><dd><article><section><header><footer><aside><figure><time><abbr><div><span><hr><small><br><amp-img><amp-audio><amp-video><amp-ad><amp-anim><amp-carousel><amp-fit-rext><amp-image-lightbox><amp-instagram><amp-lightbox><amp-twitter><amp-youtube>');
//Elimino stile inline a paragrafi, intestazioni e immagini
return preg_replace('/(<[^>]+) style=".*?"/i', '$1', $html);
}//Function
echo TrgAmp($html); // Per richiamare la funzione
Approfondimenti e link utili
- Documentazione ufficiale amp
- Tester online ufficiale per validazione amp
- Documentazione tag amp image
Questo articolo ti è stato utile? Condividilo!
Ciao Riccardo,
sto cercando informazioni su AMP, lo sto studiando e non mi sembra particolarmente complesso, ma ho un dubbio che vorrei porti e sottoporre a tutti quelli che arriveranno su questo articolo ben indicizzato:
e’ preferibile convertire i siti in AMP o creare una seconda versione e veicolare quella quando passa il bot di google?
Sto riscontrando che AMP non ha poche limitazioni, il fatto stesso di non poter inserire codice in linea (che so non essere una best practice) potrebbe diventare compromettente, non tutti i siti possono essere convertiti, anzi più grandi sono e probabilmente più problemi incontreranno.
Hai trovato più informazioni di me al riguardo?
Grazie mille
Un saluto
Ciao Alberto, AMP deve essere una versione “parallela” del sito e assolutamente non devi usare la sintassi di AMP per il sito principale. Di fatto è preferibile usare la versione AMP solo per gli articoli “singoli” e non per categorie e home ad esempio. Ricordati sempre che (per ora) amp viene principalmente usato per siti editoriali e di news, infatti i vantaggi principali dell’implementazione li ottieni proprio per queste tipologie di siti (nel famoso caoursel mobile di google news). Fare la versione AMP di un sito immobiliare – ad esempio – non ha molto senso allo stato attuale. Google ha annunciato che dopo questa prima fase penserà anche alle altre tipologie, ma è tutto un work in progress.
Per quanto concerne le limitazioni, si ne ha. Ma di fatto sono volute. Mi spiego meglio. AMP è nato per creare un web “istantaneo” pertanto google nel crearlo ha predisposto rigide linee guida. Fai conto che uno dei problemi editoriali maggiori in cui mi sono scontrato – ad esempio – sono gli embed di instagram o sociali dentro gli articoli. Girando nel web noterai come molti editori anche di larga scala hanno problemi piu o meno gravi nella gestione degli embed. Soluzioni ce ne sono ma non sono facili da implementare.
Se hai bisogno tuttavia ho una vasta esperienza con siti editoriali e se hai bisogno contattami pure usando il form del sito.