Accelerated Mobile Page Google, créer votre 1ère page AMP

Mises en place par Google en 2015, les pages mobiles accélérées ont pour but de fluidifier la navigation web sur mobile en accélérant significativement la vitesse de chargement des pages.

Si vous utilisez le navigateur pour surfer sur le web depuis votre appareil mobile, vous avez forcément déjà rencontré ce nouveau format de page web mobile.

1- Créer votre page AMP HTML

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello, AMPs</title>
    <link rel="canonical" href="http://example.ampproject.org/article-metadata.html">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </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>Welcome to the mobile web</h1>
  </body>
</html>

La bonne nouvelle, est que nous avons juste besoin de ça pour créer la page AMP.

Cependant, ce balisage doit être obligatoire, à savoir :

  • Commencer par le type du document <!doctype html>.
  • Contenir une balise <html ⚡> de niveau supérieur (<html amp> est également accepté).
  • Contenir les balises <head> et <body> (facultatives dans HTML).
  • Contenir une balise <link rel="canonical" href="$SOME_URL"> dans l'en-tête qui pointe vers la version HTML standard du document AMP HTML ou vers le document lui-même si aucune version HTML n'existe.
  • Contenir une balise <meta charset="utf-8"> comme premier enfant de la balise head.
  • Contenir une balise <meta name="viewport" content="width=device-width,minimum-scale=1"> dans la balise head. Il est également recommandé d'inclure initial-scale=1.
  • Contenir une balise <script async src="https://cdn.ampproject.org/v0.js"></script> comme dernier élément de l'en-tête (inclut et charge la bibliothèque AMP JS).
  • Contenir ce qui suit dans la balise <head> : <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>

2- Comment inclure une image

Voici le code requis pour intégrer une image dans la page :

<amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"></amp-img>

On peut utiliser les balises HTML directement dans AMP, mais certaines, comme la balise "img", sont remplacées par des balises équivalentes ou des balises AMP HTML personnalisées et améliorées.

Pour des images en responsive, elles doivent avoir une taille et un emplacement précis, en indiquant leur largeur et leur hauteur, en définissant la mise en page comme responsive et en indiquant, au moyen de srcset, quelle ressource d'image utiliser en fonction des différentes tailles d'écran :

<amp-img
    src="/img/narrow.jpg"
    srcset="/img/wide.jpg 640w,
           /img/narrow.jpg 320w"
    width="1698"
    height="2911"
    layout="responsive"
    alt="an image">
</amp-img>

3- Ajouter des styles à une page

Pour les pages AMP, on applique un style aux éléments à l'aide de sélecteurs de classe ou d'éléments dans une feuille de style en ligne au sein de l'en-tête (<head>), appelée <style amp-custom> :

<style amp-custom>
      /* any custom style goes here. */
      body {
        background-color: white;
      }
      amp-img {
        border: 5px solid black;
      }

      amp-img.grey-placeholder {
        background-color: grey;
      }
    </style>

Note :  Chaque page AMP peut intégrer une seule feuille de style uniquement et l'utilisation de certains sélecteurs n'est pas autorisée.

Par ex, aussi, oubliez le !important

AMP applique des règles strictes en matière de disposition des éléments sur la page mais pour des performances optimales, AMP nécessite de définir dès le départ une taille explicite pour tous les éléments.

5 - Ajouter des fonts

A -Avec link

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">

B - Avec @font-face

<style amp-custom>
  @font-face {
    font-family: "Bitstream Vera Serif Bold";
    src: url("https://somedomain.org/VeraSeBd.ttf");
  }

  body {
    font-family: "Bitstream Vera Serif Bold", serif;
  }
</style>

6- Prévisualiser

Aucune étape de création ni aucun prétraitement ne sont requis.

Soit :

  • Ouvrez la page directement dans le navigateur à partir du système de fichiers (certains éléments peuvent ne pas fonctionner en raison de l'échec de XMLHttpRequests). Soit :
  • Utilisez un serveur Web local, tel qu'Apache 2 ou Nginx. (Conseil: Pour un serveur Web rapide, exécutez python -m SimpleHTTPServer.)

Ensuite, vérifiez que votre page AMP est une page AMP valide. Dans le cas contraire, elle ne pourra pas être détectée ni distribuée par des plateforme tierces telles que Google Search. Pour valider :

  1. Ouvrez votre page dans votre navigateur.
  2. Ajoutez « #development=1 » à l'URL, par exemple, http://localhost:8000/released.amp.html#development=1.
  3. Ouvrez la console Chrome DevTools et vérifiez les erreurs de validation.

7- Préparer la page pour détection

Ajoutez ce qui suit sur la page non-AMP :

<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">

Et ce qui suit sur la page AMP

<link rel="canonical" href="https://www.example.com/url/to/full/document.html"

Si vous n'avez qu'une seule page, et que cette page est une page AMP, vous devez tout de même lui ajouter le lien canonique, qui dans ce cas pointe simplement vers elle-même :

<link rel="canonical" href="https://www.example.com/url/to/amp/document.html"

Et voila, votre 1ère page peut être mise en ligne 🙂

Évidement, il y a encore beaucoup de choses à dire ... mais je vous laisse découvrir toute les possibilités de l'AMP.

 

Sources : https://www.ampproject.org/fr/

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.