AMP su WordPress guida facile con plugin [guida per tutti]

Come velocizzare e usare le pagine AMP

AMP sta per Accelerated Mobile Pages ed è uno progetto open source che sta diventando sempre più famoso e diffuso.

I principali siti che supportano questo sito di pagine sono Google e Facebook, le pagine AMP sono distinguibili dalle altre tramite il simbolo del fulmine affianco al link.

google amp

Queste pagine hanno la caratteristica di aprirsi in maniera molto rapida, meno di un secondo, ma solo su smartphone e dispositivi mobili. Queste pagine attirano molto di più l’utente a cliccare sul vostro articolo piuttosto che su quello di un altro che offre lo stesso contenuto ma senza pagina AMP.

Il plugin che dovremmo installare è: Accelerated Mobile Pages e AMP.

Dopo averli installati il tema del vostro dispositivo mobile sarà personalizzabile tramite l’apposito menu laterale nella sezione AMP. Dopo aver personalizzato l’aspetto attiviamo la versione AMP per il nostro in modo da velocizzare da subito il sito internet.

Adesso se condividete una pagina AMP su Facebook e non avrà ancora il simbolo del fulmine e perchè dovrete rispettare prima alcuni parametri (di solito se non avete troppi contenuti su Facebook non avrete problemi).

I parametri per Google invece sono più ristretti ma tramite il plugin quelli che dovrete modificare sono pochi e sono visibili qui:

ESEMPIO PAGINA AMP GOOGLE:

<!doctype html>
<html ⚡>
 <head>
   <meta charset="utf-8">
   <link rel="canonical" href="hello-world.html">
   <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 steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
 </head>
 <body>Hello World!</body>
</html>