Live Coding : Créer des pages AMP

22 janvier 2020 - : HTML Tutoriel Live-Coding - : 0 commentaire - Tutoriel Javascript Généralités Youtube Live-Coding html5

Visualisez les fichiers de cette série sur GitHub

Dernière modification le 25 janvier 2020

L'un des outils permettant d'améliorer le confort des utilisateurs lors de la visite de vos pages web est d'utiliser le format mis en place par Google en 2015 appelé AMP (Accelerated Mobile Pages).

Ce format a pour objectif de fluidifier la navigation sur mobile en accélérant significativement le chargement des pages.

L'utilisation d'AMP vous obligera à créer vos pages dans un format spécifique, souvent en "doublon" de pages de navigation traditionnelles.

Page AMP <-> Page Classique quelles différences ?

Les pages AMP vont répondre à un ensemble de normes mises en place par Google pour simplifier au maximum le contenu et de ce fait, réduire la taille des pages.

Une page proposant un "équivalent AMP" apparaîtra différemment dans les résultats de recherche en fonction de l'appareil utilisé.

La recherche ci-dessous est effectuée sur un ordinateur

Et cette même recherche est effectuée sur un appareil mobile

Vous remarquerez que le résultat semble identique, à l'exception de l'éclair après l'adresse du site. Cet éclair est le logo AMP, qui signifie que cette page est accélérée.

Si vous cliquez sur le lien d'une page AMP, vous arriverez sur une page hébergée par Google et non sur le site original. Le chargement de cette page sera très rapide.

AMP, quelles règles ?

Les règles structurelles des pages AMP sont relativement strictes et il est facile de faire des erreurs. Vous devrez souvent vous y reprendre à plusieurs fois avant d'avoir une validation de votre page.

Car oui, votre page devra être valide pour être prise en compte.

Premier principe : chaque page de votre site aura son équivalent AMP

Il est illusoire de vouloir créer une seule page AMP pour votre site. La quasi totalité de vos pages devront être "dédoublées" en une version "classique" et une version AMP.

C'est là qu'interviennent les liens canoniques. Ceux-ci permettront aux moteurs de recherche de savoir que deux pages différentes correspondent au même contenu et de connaître laquelle des deux est la "principale".

Ceci permettra également d'éviter le "Duplicate Content".

Ainsi, nos deux pages contiendront une balise "link" comme ci-dessous, totalement identique

<link rel="canonical" href="lien vers la page classique">

Deuxième principe : des balises obligatoires

Certaines balises devront obligatoirement être présentes dans toutes les pages, sans exception.

Les règles sont les suivantes :

  • Toujours commencer par le type du document <!doctype html>.
  • Toujours 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="une url"> vue dans la partie précédente.
  • 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,initial-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>

Un exemple de page AMP sera donc

<!doctype html>
<html ⚡ lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Page exemple</title>
    <link rel="canonical" href="https://exemple.fr/">
    <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>
    <h1>Bienvenue sur la page</h1>
  </body>
</html>

Troisième principe : des contenus interdits

Tout comme certains contenus sont obligatoires, certains sont interdits.

Voici les principales interdictions :

  • Pas de javascript, à l'exception des composants AMP
  • Pas de CSS externe (balises link) à l'exception des polices de caractères
  • Le CSS entre balises <style amp-custom> est limité à 50 Ko
  • Les sélecteurs CSS suivants sont interdits
    • !important
    • filter
    • Toutes les animations à l'exception de transform et opacity
  • Les balises HTML suivantes :
    • <img> remplacée par <amp-img>
    • <video> remplacée par <amp-video>
    • <audio> remplacée par <amp-audio>
    • <iframe> remplacée par <amp-iframe> 
    • <frame>
    • <frameset>
    • <base>
    • <object>
    • <embed>
    • <applet>
    • Les champs <input> de type file et password

Les outils

Pour créer des pages AMP il est nécessaire de vérifier si le code est valide.

En effet, votre navigateur ne donnera pas forcément le rendu définitif, celui-ci n'étant pas capable, par défaut, d'afficher les pages AMP.

Il existe des outils pour nous aider dans cette tâche

  • AMP Validator permet de vérifier si un code AMP est conforme ou non. En cas d'erreurs, AMP Validator propose des solutions
  • Test AMP, page de Google permet d’analyser la compatibilité AMP en entrant directement une URL
  • Vous pouvez également tester le code AMP en ajoutant #development=1 à vos URLs

Les balises AMP

AMP apporte un certain nombre de balises HTML spécifiques qui complètent ou remplacent les balises HTML5.

Pour insérer des images, par exemple, nous utiliserons la balise "fermante" <amp-img src="image.jpg"></amp-img> en lieu et place de la balise auto-fermante (ou orpheline) <img src="image.jpg">

Mais cette balise a des particularités à prendre en compte. Certains attributs sont obligatoires et d'autres ne fonctionneront pas.

Il est ainsi obligatoire de préciser explicitement les dimensions de l'image par l'intermédiaire des attributs "width" et "height".

En effet, lors du chargement de la page, ces dimensions seront utilisées pour connaître les proportions de l'image avant son chargement, de façon à réserver l'espace nécessaire dans la mise en page.

Ainsi, le code minimal d'une image sera

<amp-img alt="Texte alternatif"
  src="image.jpg"
  width="1000"
  height="680">
</amp-img>

Vous trouverez ci-dessous un résumé de ce qui est autorisé ou interdit

Balise AMP HTML
script Interdit sauf si son type est application/ld+json ou text/plain. La seule exception est la balise obligatoire pour charger le runtime AMP ainsi que les balises servant à charger les composants étendus.
noscript Autorisée partout dans le document
base Interdit
img Remplacée par amp-img.
picture Interdite
video Remplacée par amp-video.
audio Remplacée par amp-audio.
iframe Remplacée par amp-iframe.
frame Interdite
frameset Interdite
object Interdite
param Interdite
applet Interdite
embed Interdite
form Autorisée. Nécessite l'extension amp-form
input elements Autorisée à l'exception de certains types
button Autorisée
style Balise style obligatoire pour amp-boilerplate. Une autre balise style est autorisée avec l'attribut amp-custom.
link Les valeurs rel présentes sur microformats.org sont autorisées
meta L'attribut http-equiv peut être utilisé pour des valeurs spécifiques; Vois les détails sur AMP validator specification
a La valeur de l'attribut href ne doit pas commencer par javascript:. Si déclarée, la valeur de l'attribut target doit être _blank
svg La plupart des éléments SVG sont autorisés

Les extensions

Le javascript étant interdit, de nombreuses extensions AMP sont proposées sur le site officiel.

Grâce à ces extensions, vous pouvez ajouter des composants d'intéractivité, de la monétisation, de l'audio, de la vidéo...

Il serait trop long et inutile de les détailler toutes, je vous invite donc à visiter la page officielle ci-dessus et à regarder leur mise en oeuvre.

Exemple concret

L'exemple ci-dessous montre la différence entre deux version d'une même page, en HTML et en AMP.

La page HTML

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <link rel="canonical" href="index.html">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document HTML</title>
        <link rel="stylesheet" href="css/styles.css">
    </head>
    <body>
        <h1>Titre de la page</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea incidunt dolorum dolores, eos, quis esse natus corporis ipsam quaerat excepturi illum optio eius aut minus. Fuga sit cupiditate mollitia aspernatur? Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque expedita repudiandae ea ad, architecto, enim consectetur non error officiis voluptates quisquam ipsum vero. Natus libero quibusdam voluptas aliquam, ut suscipit. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequuntur modi atque mollitia placeat eum nisi doloremque cupiditate porro quia rem cum, ipsam incidunt nesciunt, architecto tenetur? Asperiores a quo quis!</p>
        <div>
            <img class="img-responsive" src="img/dameuse_qui_dame.jpg" alt="Dameuse qui dame">
        </div>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/GrPHJlfz6gU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </body>
</html>

La page AMP

<!doctype html>
<html ⚡ lang="fr">
    <head>
        <meta charset="UTF-8">
        <link rel="canonical" href="index.html">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document AMP</title>
        <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>
        <style amp-custom>
            .img-responsive{
                width: 100%;
            }
        </style>
        <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
        <script async src="https://cdn.ampproject.org/v0.js"></script>
    </head>
    <body>
        <h1>Titre de la page</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea incidunt dolorum dolores, eos, quis esse natus corporis ipsam quaerat excepturi illum optio eius aut minus. Fuga sit cupiditate mollitia aspernatur? Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque expedita repudiandae ea ad, architecto, enim consectetur non error officiis voluptates quisquam ipsum vero. Natus libero quibusdam voluptas aliquam, ut suscipit. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequuntur modi atque mollitia placeat eum nisi doloremque cupiditate porro quia rem cum, ipsam incidunt nesciunt, architecto tenetur? Asperiores a quo quis!</p>
        <div>
            <amp-img width="960" height="720" layout="responsive"  src="img/dameuse_qui_dame.jpg" alt="Dameuse qui dame"></amp-img>
        </div>
        <amp-youtube width="560" height="315" layout="responsive" data-videoid="GrPHJlfz6gU"></amp-youtube>
    </body>
</html>

Obtenir de l'aide

Pour obtenir de l'aide, vous pouvez accéder aux forums de Nouvelle-Techno.fr ou au serveur Discord pour une entraide par chat

Visualisez les fichiers de cette série sur GitHub

Partager

Partager sur Facebook Partager sur Twitter Partager sur LinkedIn

Commentaires

Ecrire un commentaire

Pas encore de commentaire

Ecrire un commentaire