Guillaume Duverger - Développement & Graphisme - Blog

Le format AMP
Vous êtes ici : Accueil Blog > Articles > HTML
Sommaire de l'article
  1. AMP c'est quoi ?
  2. Mise en pratique
  3. Possibilités
  4. Validez votre page
  5. Aller plus loin

Dernière mise à jour : avril 2021

Télécharger l'article

AMP c'est quoi ? :

AMP pour Accelerated Mobile Pages est un format open source lancé en 2016, entre autres, par Google. Il vise avant tout à charger les pages mobiles le plus rapidement possible mais aussi à améliorer l'expérience utilisateur. Exit le superflux, place à l'essentiel.

En effet, pour contruire votre première page dans ce format, il vous faudra respecter certaines conditions. Reposant sur le langage AMP-HTML, avec des balises particulières, cela risque de perturber fortement votre créativité.

Cependant, il est possible d'inclure des images, des vidéos, de la musique, des frames, des contenus provenant des réseaux sociaux, un suivi d'audience, de la publicité... Rendez-vous sur cette page pour voir tous les composants qui peuvent être intégrés.

Pour ou contre l'utilisation de ce standard, là n'est pas le sujet de l'article.

Mise en pratique :

Avant de commencer à créer votre première page AMP, sachez que ce format ne fait pas partie des recommandations W3C. Ce n'est pas pénalisant, loin de là, mais il faut le prendre en compte.

Ceci étant dit, nous allons passer à la pratique.

  1. On créé une simple page au format .html
  2. On déclare le doctype HTML5
  3. Dans la balise <html>, on indique qu'il s'agit du format AMP de deux manières :
    1. Soit en renseignant amp dans la balise
    2. Soit en utilisant le symbole ⚡ dans la balise
  4. On déclare l'encodage des caractères directement après la balise <head>
  5. On indique via la balise <link> et l'attribut rel la valeur canonique de l'url du document (très important pour éviter la duplication du contenu). Si votre document est uniquement au format AMP-HTML et qu'il n'existe pas de version HTML, il faudra renseigner la même adresse.
  6. Il faut indiquer via la balise <meta> que le document est compatible mobile.
  7. On incorpore un script au format JSON-LD dans lequel on renseigne notamment le type du document, une description... Il s'agit de données structurées
  8. On ajoute le style CSS propre au format AMP ainsi qu'un autre style CSS dans une balise <noscript> au cas où le JavaScript soit absent.
  9. Enfin, on ajoute le script du projet AMP.

Votre document de base doit ressembler à ceci :

Code :


<!doctype html>
<html ⚡ lang="fr">
<head>
<meta charset="utf-8">
<title>Votre première page en AMP</title>
<link rel="canonical" href="https://www.votre_site.com/votre_page.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "BlogPosting",
        "headline": "Description du contenu",
        "datePublished": "année-mois-jour"
      }
</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>Titre de votre page</h1>
<div class=contenu>
</div>

Possibilités

Vous venez de créer votre première page AMP. Mais, pour l'instant, votre document est assez vide.

Bien entendu, vous pouvez exprimer votre créativité en ajoutant votre CSS. Là, au moins il n'y a pas de restrictions, si ce n'est qu'il faut que celui-ci se trouve dans l'entête du document et non pas sur un fichier externe et encore moins en ligne. Par contre, il faut oublier tout ce qui concerne JavaScript ainsi que les bibliothèques externes, le format AMP fournissant ses propres scripts.

Le format AMP repose essentiellement sur des composents web. Il s'agit de fonctionnalités prêt à l'emploi que l'on peut plus ou moins personnaliser avec CSS.

Par exemple, pour le menu en haut à gauche de la page, il a fallu que j'utilise le composant amp-sidebar en lieu et place de l'élément HTML5 details qui n'est pas pris en charge par le format AMP.

On notera également de nouvelles balises dont voici quelques exemples :

Chacune de ces balises ayant leur propre spécificité .

Validez votre page

Le plus difficile lorsque vous créez une page AMP reste de valider votre document. Mais, c'est un passage obligé, sans quoi Google ne prendre pas en compte votre page.

Pour obtenir la bénédiction tant attendue, deux options s'offrent à vous :

-Soit en utilisant le navigateur Chrome, via l'outil de développement (F12). Il vous faudra ajouter dans la barre adresse à la fin de votre url : #development=1.

-Soit vous passez par l'outil de validation en ligne .

Et voici cette même page au format amp validée :

Version article AMP ⚡️

Source, inspiration, ressources :

Projet AMP sur Github .

Renseignements sur le format JSON-LD .

Générateur JSON-LD.

Vous rencontrez un problème avec cet article ?

Vous avez remarqué une faute, un oubli, un lien mort ? Vous ne comprenez pas un point précis de l'article ? Vous pouvez me contacter par mail (contact@guyom-design.com) et je vous aiderai si je le peux. Je ne réponds qu'aux messages respectueux.

haut page