Google Amp: pagine web super veloci

//Google Amp: pagine web super veloci

Google Amp: pagine web super veloci

Con Google AMP  stia cercando di migliorare l’esperienza d’uso degli utenti è un dato di fatto: responsive e amp sono solo alcune delle novità che il motore di ricerca Google ha studiato in questi ultimi tempi. Con il nuovo progetto Google Amp, si vuole rendere più veloce le pagine web, in modo che gli accessi alle pagine web fatti da smartphone e tablet siano sempre più veloci. Ricordiamoci che ormai, le visite fatte da dispositivi mobili sono maggiori di quelle fatte dai computer desktop. Per la realizzazione di un sito web, oggi è sempre più importante renderlo fruibile da dispositivi mobili.

Tecnicamente come si fanno le pagine Google AMP?

Per generare delle pagine AMP, sarà necessario seguire le linee guida indicate da Google:

  • E’ necessario inserire nella pagina madre, l’indicazione dell’url della pagina amp <link rel=”amphtml” href=”https://www.example.com/url/to/amp-version.html” />
  • Viceversa, nella pagina Amp è necessario inserire il rel canonical verso la pagina madre <link rel=”canonical” href=”https://www.example.com/url/to/regular-html-version.html” />
  • Se la pagina AMP fosse autonoma, è necessario inserire il rel caononical <link rel=”canonical” href=”https://www.example.com/url/to/amp-document.html” />

 

Esempio pagine Amp

 

Questo è un esempio di pagine AMP del sito LA STAMPA.

Sul motore di ricerca le pagine vengono viste sopra gli altri risultati, come se fossero una sorta di Google News.

 

 

 


 

Pagine AMP: come è il codice?

Nella pagina AMP non è consentito l’utilizzo di tutti i tag HTML e da questa pagina è possibile avere tutte le caratteristiche.

Questo è un esempio di codice da inserire nella Pagina AMP:

<!doctype html>
<html >
<head>
<meta charset="utf-8">
<title>Sample document</title>
<link rel="canonical" href="./regular-html-version.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-custom>
h1 {color: red}
</style>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Article headline",
"image": 
[ "thumbnail1.jpg" ], "datePublished": "2015-02-05T08:00:00+08:00" } </script> <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script> <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> <h1>Sample document</h1> <p> Some text <amp-img src=sample.jpg width=300 height=300></amp-img> </p> <amp-ad width=300 height=250 type="a9" data-aax_size="300x250" data-aax_pubname="test123" data-aax_src="302"> </amp-ad> </body> </html>

 

 

By | 2017-11-04T18:50:38+00:00 ottobre 4th, 2017|Siti Web|0 Comments

Leave A Comment

nove − 8 =