Principes de base du format Accelerated Mobile Pages

1. Présentation

Dans cet atelier de programmation, vous allez apprendre à créer des pages mobiles accélérées (AMP). Pour ce faire, vous allez implémenter une page Web d'article d'actualités simple qui respecte les spécifications AMP tout en intégrant plusieurs fonctionnalités Web typiques couramment utilisées sur les sites d'actualités mobiles.

Points abordés

• Comment les pages AMP améliorent-elles l'expérience utilisateur du Web pour mobile ?
• Quelles sont les bases d'un site AMP ?
• les limites d'AMP.
• Comment les composants Web AMP permettent-ils de résoudre les problèmes fréquents des sites d'actualités ?
• Comment valider votre AMP ?
• Comment préparer vos pages AMP pour la recherche Google ?

Prérequis

• Exemple de code
• Python (de préférence la version 2.7) ou l'extension Chrome 200 OK Web Server
• Chrome (ou un navigateur équivalent permettant d'inspecter la console JavaScript)
• Éditeur de code (par exemple, Atom, Sublime, Notepad++)

2. Obtenir l'exemple de code

Vous pouvez télécharger l'intégralité de l'exemple de code sur votre ordinateur :

Télécharger le fichier ZIP

Vous pouvez également cloner le dépôt GitHub à partir de la ligne de commande :

$ git clone https://github.com/googlecodelabs/accelerated-mobile-pages-foundations.git

Vous allez télécharger un fichier ZIP contenant plusieurs exemples de fichiers de ressources et la page article.html de départ.

Décompressez le dossier et accédez au répertoire via la ligne de commande sur votre ordinateur.

3. Exécuter la page exemple

Pour tester notre exemple de page, nous devons accéder aux fichiers à partir d'un serveur Web. Il existe plusieurs façons de créer un serveur Web local temporaire à des fins de test. Pour cet atelier de programmation, nous vous fournirons des instructions pour trois options disponibles :

• L'application Google Chrome "Web Server for Chrome" : il s'agit de l'approche recommandée, car c'est la solution la plus simple et la plus multiplate-forme disponible. Remarque : Cette approche nécessite l'installation de Google Chrome.
• Firebase Hosting : une autre option si vous souhaitez également découvrir notre nouvelle plate-forme d'hébergement d'éléments statiques "Firebase Hosting". SSL activé par défaut.
• Un serveur HTTP Python local : nécessite d'accéder à la ligne de commande.

Remarque : Nous vous recommandons vivement d'utiliser HTTPS dans les environnements de production. Le protocole HTTPS présente plusieurs avantages au-delà de la sécurité, y compris pour le référencement naturel. Pour en savoir plus, cliquez ici.

Option 1 : Serveur Web pour Chrome

Vous trouverez l'application "Web Server for Chrome" sur le Chrome Web Store en cliquant ici.

Après avoir installé l'application Chrome, vous devez la diriger vers un dossier spécifique à l'aide du bouton "Choose Folder" (Choisir un dossier). Pour cet atelier de programmation, vous devez sélectionner le dossier dans lequel vous avez décompressé les exemples de fichiers de l'atelier.

Vous devez également cocher l'option "Afficher automatiquement index.html" et définir le port sur "8000". Vous devrez redémarrer le serveur Web pour que ces modifications prennent effet.

Accédez à cette URL :

http://localhost:8000/article.html

Si l'URL ci-dessus se charge correctement, vous pouvez passer à l'étape suivante.

Option 2 : Firebase Hosting

Si vous souhaitez découvrir notre nouvel hébergement de sites Web statiques Firebase, vous pouvez suivre les instructions disponibles ici pour déployer votre site AMP sur une URL Firebase Hosting.

Firebase Hosting est un fournisseur d'hébergement statique que vous pouvez utiliser pour déployer et héberger rapidement un site Web statique et ses composants, y compris les fichiers HTML, CSS et JavaScript. Les utilisateurs bénéficient d'une latence réduite, car le contenu statique est mis en cache dans un réseau de diffusion de contenu (CDN) avec des points de présence (PoP) situés dans le monde entier.

Enfin, Firebase Hosting est toujours diffusé via SSL, ce qui est idéal pour AMP et le Web en général. Si vous souhaitez vous concentrer uniquement sur AMP, ignorez cette option.

Option 3 : Serveur HTTP Python

Si vous n'utilisez pas Chrome ou si vous rencontrez des difficultés pour installer l'extension Chrome, vous pouvez également utiliser Python à partir de la ligne de commande pour lancer un serveur Web local.

Pour exécuter le serveur HTTP intégré de Python à partir de la ligne de commande, exécutez simplement la commande suivante :

python -m SimpleHTTPServer

Accédez à cette URL :

http://localhost:8000/article.html

4. Créer une page HTML standard

Dans le fichier ZIP téléchargé, vous trouverez un fichier nommé article.html. Il s'agit de l'article pour lequel nous créons une page AMP équivalente.

Copiez le code de l'exemple article.html et collez-le dans un nouveau fichier. Enregistrez ce fichier sous le nom article.amp.html..

Remarque : Vous n'êtes pas obligé de nommer vos fichiers AMP .amp.html. En fait, les fichiers AMP peuvent avoir l'extension de votre choix. Il est courant de voir des éditeurs différencier les pages AMP de leurs versions canoniques en utilisant des paramètres dans l'URL. Ex. : http://publisher.com/article.html?amp

Votre fichier article.amp.html devrait maintenant se présenter comme suit :

<!doctype html>
<html lang="en">
  <head>

    <title>News Article</title>

    <link href="base.css" rel="stylesheet" />

    <script type="text/javascript" src="base.js"></script>
  </head>
  <body>
    <header>
      News Site
    </header>
    <article>
      <h1>Article Name</h1>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas tortor sapien, non tristique ligula accumsan eu.</p>
    </article>
    <img src="mountains.jpg">
  </body>
</html>

Il s'agit d'une page volontairement simpliste avec des éléments d'article d'actualité statiques courants : CSS, JavaScript et une balise d'image.

Pour le moment, la version AMP de l'article n'est qu'une copie de l'article d'origine. Convertissons-le en AMP. Pour commencer, nous allons ajouter le fichier de bibliothèque JavaScript AMP et voir quelles erreurs s'affichent lorsque le validateur AMP est activé.

Pour inclure la bibliothèque AMP, ajoutez cette ligne en bas de la balise <head> :

<script async src="https://cdn.ampproject.org/v0.js"></script>

Chargeons maintenant la nouvelle page article.amp.html dans notre navigateur via le lien suivant et ouvrons la console pour les développeurs dans Chrome via Menu > More Tools > Developer Tools :

Inspectez maintenant la sortie JavaScript dans la console du développeur. Assurez-vous que l'onglet "Console" est sélectionné :

Le journal suivant devrait s'afficher :

Powered by AMP ⚡ HTML

Pour activer le validateur AMP, ajoutez cet identifiant de fragment à votre URL :

#development=1

Exemple :

http://localhost:8000/article.amp.html#development=1

Vous devrez peut-être actualiser manuellement la page dans votre navigateur. Vous pouvez actualiser manuellement une page dans votre navigateur en cliquant sur ce bouton :

Vous devriez recevoir plusieurs erreurs de validation :

Bien que AMP signifie Accelerated Mobile Pages (pages mobiles accélérées), il peut être utilisé pour créer des pages responsives qui s'affichent correctement sur toutes les tailles d'écran. Pour en savoir plus, consultez la section Responsive Web Design du site Web Google Developers.

Pour simuler l'expérience sur un appareil mobile dans les outils pour les développeurs Chrome. Cliquez sur l'icône de téléphone mobile :

Sélectionnez ensuite un appareil mobile (par exemple, "Pixel 2") dans ce menu :

Une résolution mobile simulée doit s'afficher dans votre navigateur, comme ceci :

Nous sommes maintenant prêts à nous mettre au travail. Examinons les erreurs de validation une par une et voyons comment elles sont liées à AMP.

5. Résoudre les erreurs de validation

Jeu de caractères requis

Nous allons commencer par corriger l'erreur suivante :

The mandatory tag 'meta charset=utf-8' is missing or incorrect.

Pour que le texte s'affiche correctement, AMP exige que le jeu de caractères de la page soit défini. Elle doit également être le premier enfant de la balise "head". Cela permet d'éviter de réinterpréter le contenu ajouté avant la balise meta charset.

Ajoutez le code suivant comme première ligne de la balise "head" :

<meta charset="utf-8" />  

Enregistrez le fichier, actualisez la page et vérifiez que cette erreur ne s'affiche plus.

Les fichiers AMP doivent comporter une balise <link rel=canonical>.​​​

Chaque document AMP doit contenir un lien vers la page canonique. Ajoutons donc le lien vers notre article d'origine.

Ajoutez le code suivant sous la balise <meta charset="utf-8" /> :

<link rel="canonical" href="/article.html">

Important : Il est possible de créer une page AMP autonome, c'est-à-dire une page qui n'a pas de page canonique. Dans ce scénario, le lien canonique est toujours requis, mais il doit pointer vers l'article AMP lui-même :

<link rel="canonical" href="/article.amp.html">

Maintenant, redémarrez votre serveur Web si nécessaire et rechargez la page. Bien qu'il reste encore de nombreuses erreurs à corriger, l'erreur "Les fichiers AMP doivent comporter une balise <link rel=canonical>" n'apparaît plus.

Attribut AMP obligatoire

AMP exige qu'un attribut soit placé sur l'élément HTML racine d'une page pour déclarer la page comme document AMP :

The mandatory attribute '⚡' is missing in tag 'html ⚡ for top-level html'
The mandatory tag 'html ⚡ for top-level html' is missing or incorrect.

Pour résoudre ce problème, il vous suffit d'ajouter l'attribut ⚡ à la balise <html> comme suit :

<!doctype html>
<html ⚡ lang="en">
  <head>
...

Maintenant, actualisez la page et vérifiez que les deux erreurs ont disparu.

Remarque : Bien que l'utilisation de ⚡ soit recommandée, il est également possible d'utiliser l'attribut "amp" à la place de l'attribut ⚡. Le balisage devient donc :

<!doctype html>

<html amp lang="en">

<head>

...

Fenêtre d'affichage requise

Nous allons ensuite aborder l'erreur suivante :

The mandatory tag 'meta name=viewport' is missing or incorrect.

AMP exige la définition d'un width et d'un minimum-scale pour la fenêtre d'affichage. Ces valeurs doivent être définies respectivement sur device-width et 1. La fenêtre d'affichage est une balise courante incluse dans le <head> d'une page HTML.

La meilleure façon de corriger ce problème est d'ajouter l'extrait de code HTML suivant à la balise <head>. Ajoutez la balise meta suivante :

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8" />

    <link rel="canonical" href="/article.html">

    <!-- The following is the meta tag and viewport information we must add to the page: -->
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

...

Ce sont les seules valeurs valides pour width et minimum-scale dans AMP. La définition de initial-scale n'est pas obligatoire, mais elle est souvent incluse dans le développement Web mobile et est recommandée. Pour en savoir plus sur la fenêtre d'affichage et le responsive design, cliquez ici.

Comme précédemment, actualisez la page et vérifiez si l'erreur a disparu.

Feuilles de style externes

L'erreur suivante est liée à notre utilisation des feuilles de style :

The attribute 'href' in tag 'link rel=stylesheet for fonts' is set to the invalid value 'base.css'.

Plus précisément, le problème concerne la balise de lien de feuille de style suivante dans notre balise <head> :

<link href="base.css" rel="stylesheet" />

Le problème est qu'il s'agit d'une référence de feuille de style externe. Dans AMP, les développeurs ne sont pas autorisés à inclure des feuilles de style externes afin de maintenir les temps de chargement des documents aussi rapides que possible. Toutes les règles de feuille de style doivent être incluses en ligne dans le document AMP.

Par conséquent, supprimez le tag de lien dans <head> et remplacez-le par un tag intégré tel que le suivant :

<style amp-custom>

body {
  width: auto;
  margin: 0;
  padding: 0;
}

...

</style>

Le contenu de la balise de style doit être copié directement à partir du fichier base.css dans le répertoire de votre projet. L'attribut amp-custom de la balise de style est obligatoire.

Une fois encore, rechargez la page et vérifiez si l'erreur liée aux feuilles de style a disparu.

Remarque : Le style intégré est obligatoire, et la taille de fichier de toutes les informations de style est limitée à 50 kilo-octets. Nous vous recommandons d'utiliser des préprocesseurs CSS tels que SASS et de réduire la taille de votre CSS avant de l'intégrer à vos pages.

Important : Vous ne pouvez avoir qu'une seule balise de style dans l'ensemble de votre document AMP. Si vos articles font référence à plusieurs feuilles de style externes, vous devrez les regrouper dans un seul ensemble de règles. Consultez cette page de documentation pour en savoir plus sur les règles CSS valides dans les documents AMP.

JavaScript tiers

Bien que les feuilles de style puissent être retravaillées relativement facilement avec AMP via l'intégration, ce n'est pas le cas pour JavaScript.

The tag 'script' is disallowed except in specific forms.

Les scripts générés par les utilisateurs ne sont pas autorisés dans AMP. Les scripts dans AMP ne sont autorisés que s'ils respectent deux exigences principales :

• Tout code JavaScript doit être asynchrone, c'est-à-dire inclure l'attribut async dans la balise de script.
• Seuls la bibliothèque et les composants AMP peuvent être inclus.

Cela exclut effectivement l'utilisation de tout code JavaScript tiers. Il existe une exception : le code JavaScript tiers peut être utilisé dans les iFrames.

Essayez d'ouvrir le fichier base.js externe. Que voyez-vous ? Le fichier ne doit contenir aucun code JavaScript et inclure uniquement un commentaire d'informations tel que celui-ci :

/*

This external JavaScript file is intentionally empty.

Its purpose is merely to demonstrate the AMP validation error related to the use of external JavaScript files.

*/

Étant donné que ce fichier JavaScript externe n'est pas un composant fonctionnel de notre site Web, nous pouvons supprimer la référence en toute sécurité.

Supprimez la référence JavaScript externe suivante de votre document :

<script type="text/javascript" src="base.js"></script>

Maintenant, rechargez la page et vérifiez que l'erreur de script a disparu.

Important : L'inclusion de JavaScript via un iFrame doit être considérée comme une mesure de dernier recours. Dans la mesure du possible, la fonctionnalité JavaScript doit être remplacée par les composants AMP intégrés. Nous allons explorer notre premier composant AMP dans la section suivante.

Remarque : Les seuls scripts générés par les utilisateurs qui font exception sont ceux dont l'attribut de type est application/ld+json ou application/json, qui sont utilisés pour ajouter des métadonnées à la page et configurer les composants AMP. D'autres scripts non exécutables pourront être ajoutés à l'avenir.

Code récurrent CSS AMP

The mandatory tag 'noscript enclosure for boilerplate' is missing or incorrect.
The mandatory tag 'head > style : boilerplate' is missing or incorrect.
The mandatory tag 'noscript > style : boilerplate' is missing or incorrect.

Les erreurs suivantes font référence à deux balises manquantes dans la balise <head>. Chaque document AMP doit inclure les balises suivantes :

<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>

Ajoutez l'extrait de code ci-dessus en bas de la balise <head> de votre document.

Le premier tag rend le contenu de la page invisible jusqu'à ce que la bibliothèque JavaScript AMP mette à jour le tag body pour le rendre à nouveau visible une fois que le contenu de la page est prêt à être affiché. AMP procède ainsi pour éviter que le contenu de la page qui n'a pas encore été mis en forme s'affiche. L'expérience utilisateur est ainsi véritablement instantanée, car le contenu de la page s'affiche en une seule fois et tout ce qui se trouve au-dessus de la ligne de flottaison est affiché ensemble. La deuxième balise rétablit cette logique si JavaScript est désactivé dans le navigateur.

La balise amp-img

The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'?

AMP dispose d'un composant Web spécialement conçu pour remplacer la balise d'image, appelé amp-img :

<amp-img src="mountains.jpg"></amp-img>

Essayez d'inclure la balise amp-img ci-dessus et exécutez à nouveau le validateur. Vous devriez recevoir plusieurs nouvelles erreurs :

AMP-IMG# Layout not supported for: container
The implied layout 'CONTAINER' is not supported by tag 'amp-img'.

Pourquoi amp-img a-t-il déclenché une autre erreur ? Car amp-img ne remplace pas directement la balise HTML traditionnelle img. Des exigences supplémentaires s'appliquent lorsque vous utilisez amp-img.

Système de mise en page

Cette erreur nous indique que amp-img n'est pas compatible avec le type de mise en page "container". L'un des concepts les plus importants de la conception d'AMP est sa volonté de réduire la quantité de reflow DOM nécessaire pour afficher ses pages Web.

Pour réduire le reflow du DOM, AMP inclut un système de mise en page qui permet de s'assurer que la mise en page de la page est aussi rigide que possible, le plus tôt possible dans le cycle de vie du téléchargement et du rendu de la page.

Le système de mise en page permet de positionner et de mettre à l'échelle les éléments d'une page de différentes manières : dimensions fixes, conception responsive, hauteur fixe, etc.

Dans notre cas, le système de mise en page a déduit que le type de mise en page pour amp-img était container. Toutefois, le type de conteneur est destiné aux éléments qui contiennent des éléments enfants et n'est pas compatible avec la balise amp-img, ce qui explique cette erreur.

Pourquoi le type de conteneur a-t-il été déduit ? Parce que nous n'avons pas spécifié d'attribut de hauteur pour la balise amp-img. En HTML, vous pouvez réduire le reflow en spécifiant toujours une largeur et une hauteur fixes pour les éléments d'une page. Dans AMP, il est recommandé de définir la largeur et la hauteur des éléments amp-img, car cela permet à AMP de comprendre les proportions de l'élément.

Définissez la largeur et la hauteur comme suit :

<amp-img src="mountains.jpg" width="266" height="150"></amp-img>

Actualisez la page et vérifiez le validateur. Vous ne devriez plus voir d'erreurs. Toutefois, l'image n'est pas très esthétique, car elle est mal positionnée sur la page. Ce serait formidable si nous pouvions mettre à l'échelle l'image pour qu'elle s'étire et s'adapte de manière responsive à la page, quelle que soit la taille de l'écran.

Étonnamment, la définition de la largeur et de la hauteur ne limite pas l'élément à une taille entièrement fixe. Le système de mise en page AMP peut positionner et mettre à l'échelle l'élément de différentes manières en connaissant son format (le rapport hauteur/largeur). L'attribut de mise en page indique à AMP comment vous souhaitez positionner et mettre à l'échelle l'élément.

Pour ce faire, définissez l'attribut de mise en page sur responsive :

<amp-img src="mountains.jpg" layout="responsive" width="266" height="150"></amp-img>

Simple comme "Bonjour" ! Notre image est au bon format et s'adapte à la largeur de l'écran.

Opération réussie !

Votre document AMP devrait maintenant ressembler à ceci :

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">    

    <link rel="canonical" href="/article.html">
    <link rel="shortcut icon" href="amp_favicon.png">

    <title>News Article</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>
      body {
        width: auto;
        margin: 0;
        padding: 0;
      }

      header {
        background: Tomato;
        color: white;
        font-size: 2em;
        text-align: center;
      }

      h1 {
        margin: 0;
        padding: 0.5em;
        background: white;
        box-shadow: 0px 3px 5px grey;
      }

      p {
        padding: 0.5em;
        margin: 0.5em;
      }
    </style>
    <script async src="https://cdn.ampproject.org/v0.js"></script>  
  </head>
  <body>
    <header>
      News Site
    </header>
    <article>
      <h1>Article Name</h1>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas tortor sapien, non tristique ligula accumsan eu.</p>

      <amp-img src="mountains.jpg" layout="responsive" width="266" height="150"></amp-img>
    </article>
  </body>
</html>

Actualisez la page et examinez la sortie de la console. Le message suivant doit s'afficher :

AMP validation successful.

Questions fréquentes

• Qu'est-ce que l'ajustement de la mise en page du DOM ?
• Que se passe-t-il si l'attribut de mise en page n'est pas défini ?
• Que se passe-t-il si la largeur et la hauteur ne sont pas définies ?

6. URL canoniques, métadonnées et recherche

La nouvelle initiative AMP consiste à mettre en avant les documents AMP valides dans l'interface des résultats de recherche Google, dans une nouvelle interface de carrousel. Cette interface offre une meilleure expérience utilisateur aux personnes qui recherchent des articles sur le Web. Pour que cette expérience soit la meilleure possible, les pages incluses doivent répondre à certains critères au-delà de la validation AMP.

Cette étape présente un aperçu de toutes les exigences.

Associer des pages canoniques et des documents AMP

AMP vise à rendre le Web plus rapide. Bien que le projet ait été davantage axé sur le contenu statique à ses débuts, l'ajout de composants tels que amp-bind le rend adapté à une grande variété de sites, tels que les éditeurs d'actualités, les sites d'e-commerce, les sites de voyage, les blogs et autres.

Toutefois, il est important de comprendre toute l'étendue de la façon dont AMP doit s'intégrer dans la structure d'un site Web. Bien qu'AMP puisse être utilisé pour créer des sites Web entiers, de nombreux éditeurs préfèrent l'utiliser avec l'approche associée, où les documents AMP sont générés en complément des articles HTML classiques qu'un éditeur héberge sur son site Web.

Remarque : Pour en savoir plus sur l'utilisation d'AMP pour créer un site Web complet, également appelé site AMP canonique, consultez l'atelier de programmation Créer des pages AMP attrayantes, interactives et canoniques.

L'association canonique dans les pages HTML standards est une technique courante pour déclarer la page à considérer comme préférée lorsque plusieurs pages incluent le même contenu. Étant donné que les documents AMP peuvent être générés pour être disponibles en parallèle des pages d'articles traditionnelles d'un site Web, nous devons traiter les pages HTML traditionnelles comme les pages "canoniques".

Nous avons déjà fait le premier pas pour y parvenir dans notre document AMP en incluant une balise de lien dans <head> vers la page canonique :

<link rel="canonical" href="/article.html">

L'étape suivante consiste à associer l'article canonique à la page AMP. Pour ce faire, vous devez inclure une balise <link rel="amphtml"> dans la section <head> de l'article canonique.

Ajoutez le code suivant dans la section <head> du fichier article.html :

<link rel="amphtml" href="/article.amp.html">

Le diagramme suivant illustre les directions des balises de lien :

Il est nécessaire de configurer cette association bidirectionnelle pour que le robot d'exploration de la recherche Google comprenne la relation entre notre document HTML canonique standard et notre document AMP. Si aucun lien n'est fourni, le robot d'exploration ne pourra pas déterminer clairement quels articles sont les "versions AMP" des documents HTML standards. En fournissant explicitement ces liens, nous nous assurons qu'il n'y a aucune ambiguïté.

Métadonnées de moteur de recherche Schema.org

Pour que les documents AMP s'affichent dans la nouvelle interface de carrousel, ils doivent également respecter les spécifications de métadonnées pour les moteurs de recherche de Schema.org. Ces métadonnées sont incluses dans la balise <head> de vos documents via une balise de script de type application/ld+json.

Ajoutez le code suivant à la fin de la section <head> de votre document AMP :

<script type="application/ld+json">
{
 "@context": "http://schema.org",
 "@type": "NewsArticle",
 "mainEntityOfPage":{
   "@type":"WebPage",
   "@id":"https://example.com/my-article.html"
 },
 "headline": "My First AMP Article",
 "image": {
   "@type": "ImageObject",
   "url": "https://example.com/article_thumbnail1.jpg",
   "height": 800,
   "width": 800
 },
 "datePublished": "2015-02-05T08:00:00+08:00",
 "dateModified": "2015-02-05T09:20:00+08:00",
 "author": {
   "@type": "Person",
   "name": "John Doe"
 },
 "publisher": {
   "@type": "Organization",
   "name": "⚡ AMP Times",
   "logo": {
     "@type": "ImageObject",
     "url": "https://example.com/amptimes_logo.jpg",
     "width": 600,
     "height": 60
   }
 },
 "description": "My first experience in an AMPlified world"
}
</script>

Actualisez la page dans le navigateur et vérifiez qu'aucune erreur de validation AMP n'a été introduite.

Maintenant, ouvrez l'outil de validation des données structurées dans une nouvelle fenêtre de navigateur, puis cliquez sur "Tester mon balisage". Sélectionnez ensuite l'onglet "Code Snippet" (Extrait de code), copiez le code source complet de votre page AMP et collez-le dans le panneau de l'éditeur de texte de l'outil de validation, puis cliquez sur "Run Test" (Exécuter le test) :

Le résultat devrait se présenter comme suit :

Important : Assurez-vous que le texte vert "Tout va bien" s'affiche. Seules les pages AMP qui réussissent cette validation s'affichent dans le carrousel AMP.

Remarque : Le contenu doit toujours être le même. Pour les articles d'actualités, utilisez le type "NewsArticle". Le titre doit correspondre à celui de votre article. L'image fait référence à l'image héros de l'article.

Voici les principales exigences à respecter pour que vos articles d'actualités optimisés pour AMP s'affichent dans le nouveau carrousel de la recherche Google :

1. Assurez-vous que votre document AMP est validé.
2. Faites référence à votre document AMP depuis votre page HTML traditionnelle à l'aide de la balise <link>, et inversement.
3. Incluez la balise de métadonnées du moteur de recherche ci-dessus.

Pour en savoir plus, consultez Découverte de pages.

7. Félicitations !

Vous avez terminé l'atelier de programmation et exploré de nombreux concepts fondamentaux des documents AMP.

Nous espérons que vous avez non seulement compris comment implémenter ces concepts et fonctionnalités dans un document AMP, mais aussi pourquoi AMP a été conçu de cette manière.

Voici quelques sujets et liens supplémentaires que vous pouvez explorer pour améliorer encore plus vos compétences !

• Tout savoir sur la découverte de pages
• Balises HTML non autorisées
• Règles et animations CSS restreintes
• En savoir plus sur les iFrames
• Le CDN AMP
• Liste des composants AMP disponibles