Notions de base sur les pages mobiles accélérées

Dans cet atelier de programmation, vous apprendrez à créer des pages AMP (Accelerated Mobile Pages) plus courts. Pour cela, vous implémenterez une page Web simple d'article d'actualité conforme aux spécifications AMP, tout en intégrant plusieurs fonctionnalités Web courantes couramment utilisées sur les sites d'actualités pour mobile.

Points abordés

• Comment le format AMP améliore l'expérience utilisateur du Web mobile
• Les bases d'un site AMP.
• Limites des pages AMP.
• Comment les composants Web d'AMP répondent aux problèmes courants d'un site d'actualités
• Valider votre page AMP
• Préparer votre page AMP pour la recherche Google

Ce dont vous avez besoin

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

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

Télécharger le fichier ZIP

...ou clonez 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 de votre ordinateur.

Pour tester notre exemple de page, nous devons accéder aux fichiers depuis 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 pour Chrome&brt; Il s'agit de la solution la plus simple et la plus multiplate-forme disponible. Remarque: Cette approche requiert 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 Python HTTP local : nécessite un accès à la ligne de commande.

Remarque : Nous vous recommandons vivement d'utiliser le protocole HTTPS dans les environnements de production. HTTPS présente plusieurs avantages, en plus de la sécurité, y compris du SEO. Pour en savoir plus à ce sujet, cliquez ici.

Option 1: serveur Web pour Chrome

L'application "Web Server pour Chrome" est disponible via ce lien sur le Chrome Web Store.

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

Cochez également la case "Afficher automatiquement l'index.html" et définissez le port sur "8000". Pour que ces modifications soient prises en compte, vous devez redémarrer le serveur Web.

Accédez à cette URL via:

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 explorer notre nouvel hébergement Web Firebase statique, vous pouvez suivre les instructions disponibles ici pour déployer votre site AMP sur une URL d'hébergement Firebase.

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

Enfin, Firebase Hosting est toujours diffusé via SSL. Il convient donc parfaitement aux pages AMP et au Web en général. Si vous souhaitez plutôt vous concentrer sur les pages AMP, ignorez simplement cette option.

Option 3: serveur HTTP HTTP

Si vous n'utilisez pas Chrome ou si vous avez des difficultés à installer l'extension Chrome, vous pouvez utiliser Python à partir de la ligne de commande pour déclencher 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

Et accédez à cette URL:

http://localhost:8000/article.html

Le fichier ZIP téléchargé contient un fichier nommé article.html. Il s'agit de l'article pour lequel nous créons une page équivalente pour AMP.

Copiez le code de l'exemple article.html et collez-le dans un nouveau fichier. Enregistrer ce fichier au format article.amp.html.

Remarque: Il n'est pas nécessaire de nommer vos fichiers AMP comme .amp.html. Les fichiers AMP peuvent en effet choisir n'importe quelle extension. Il arrive souvent que les éditeurs différencient les pages AMP des versions canoniques en utilisant des paramètres dans l'URL. Exemple: http://publisher.com/article.html?amp

Votre fichier article.amp.html devrait 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>

Cette page est intentionnellement simplifiée avec les éléments d'actualité statiques courants: CSS, JavaScript et une balise d'image.

Notre version AMP de l'article n'est qu'une copie de l'article d'origine pour le moment. Transformons-le en AMP. Pour commencer, nous allons ajouter le fichier de bibliothèque AMP AMP et visualiser les erreurs qui se produisent lorsque l'outil de validation 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>

À présent, chargeons la nouvelle page article.amp.html dans notre navigateur via le lien suivant, puis ouvrez la console pour les développeurs dans Chrome via Menu > More Tools > Developer Tools:

À présent, inspectez la sortie JavaScript dans la console de développement. Assurez-vous d'avoir sélectionné l'onglet "Console" :

Ce journal doit s'afficher:

Powered by AMP ⚡ HTML

Pour activer l'outil de validation AMP, ajoutez l'identifiant de fragment suivant à votre URL:

#development=1

Exemple :

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

Vous devrez peut-être actualiser manuellement la page dans votre navigateur. Pour actualiser manuellement une page dans votre navigateur, appuyez sur ce bouton:

Vous devriez recevoir plusieurs erreurs de validation:

Bien que les pages AMP soient considérées comme des pages AMP, elles peuvent être utilisées 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 les appareils mobiles dans les outils pour les développeurs Chrome. Cliquez sur l'icône en forme de téléphone portable ici:

À présent, sélectionnez un appareil mobile (par exemple, un Pixel 2) dans ce menu:

Vous devriez voir une résolution mobile simulée dans votre navigateur, comme suit:

C'est l'heure d'aller au travail ! Examinons une par une les erreurs de validation et étudions leur rapport avec le format AMP.

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 afficher le texte correctement, le format AMP doit être défini sur le jeu de caractères de la page. Il doit également être le premier enfant de la balise "head". Cela permet d'éviter de réinterpréter le contenu qui a été ajouté avant la balise Meta charset.

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

<meta charset="utf-8" />  

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

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

Chaque document AMP doit contenir un lien faisant référence à la page canonique. À présent, ajoutons le lien vers l'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 qui n'a pas d'URL canonique. Dans ce scénario, le lien canonique est toujours obligatoire, mais doit pointer vers l'article AMP:

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

Maintenant, redémarrez votre serveur Web si nécessaire, puis actualisez la page. Même s'il reste de nombreuses erreurs à corriger, les fichiers &AMP doivent disposer d'une balise <link rel=canonical>. L'erreur n'existe plus.

Attribut AMP requis

Les pages AMP nécessitent un attribut au niveau de l'élément HTML racine d'une page pour la déclarer en tant que 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, ajoutez l'attribut ⚡ à la balise <html> comme suit:

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

Maintenant, actualisez la page et vérifiez que les deux erreurs s'affichent.

Remarque : Même si l'approche ⚡ est recommandée, il est également possible d'utiliser l'attribut "amp" à la place de l'attribut "⚡" Ainsi, le balisage devient:

<!doctype html>

<html amp lang="en">

<head>

...

Fenêtre d'affichage requise

Nous aborderons ensuite l'erreur suivante:

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

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

Il est préférable de le corriger avec l'extrait de code HTML suivant, ajouté à 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">

...

Il s'agit des seules valeurs valides pour width et minimum-scale dans AMP. initial-scale n'est pas obligatoire, mais il est recommandé de l'inclure dans le développement Web mobile. 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, il s'agit de la réclamation liée à la balise link suivante dans la balise <head>:

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

Le problème est qu'il s'agit d'une référence à une feuille de style externe. Pour les pages AMP, afin de réduire le temps de chargement des documents, les développeurs ne sont pas autorisés à inclure des feuilles de style externes. Toutes les règles de feuille de style doivent être incluses directement dans le document AMP.

Par conséquent, supprimez la balise link dans <head> et remplacez-la par une balise intégrée comme celle-ci:

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

Actualisez la page et vérifiez si l'erreur des feuilles de style a disparu.

Remarque: Le style intégré est requis, mais la taille des fichiers est limitée à 50 kilo-octets pour toutes les informations de style. Nous vous recommandons d'utiliser des préprocesseurs CSS tels que SASS et de réduire 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 contiennent plusieurs feuilles de style externes, vous devez les regrouper en 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.

Code JavaScript tiers

Il est possible de modifier assez facilement les feuilles de style avec AMP, mais pas pour JavaScript.

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

Les pages AMP ne sont pas autorisées dans les scripts. Les scripts AMP ne sont autorisés que s'ils respectent deux conditions majeures :

• Tout code JavaScript doit être asynchrone. Il doit inclure l'attribut async dans la balise de script.
• Seules la bibliothèque AMP et ses composants peuvent être inclus.

ce qui exclut efficacement l'utilisation de tout code JavaScript tiers. Seule exception : le code JavaScript tiers peut être utilisé dans les cadres iFrame.

Essayez d'ouvrir le fichier externe base.js. Que voyez-vous ? Le fichier doit être vide et ne doit inclure que des commentaires tels que:

/*

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 dans son intégralité en toute sécurité.

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

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

À présent, actualisez la page et vérifiez que l'erreur de script a disparu.

Important : L'inclusion de JavaScript dans un iFrame doit être considérée comme une mesure du dernier recours. Le cas échéant, remplacez la fonctionnalité JavaScript à l'aide des composants AMP intégrés. Nous allons découvrir le premier composant AMP dans la section suivante.

Remarque : La seule exception concerne les scripts générés par l'utilisateur lorsque l'attribut de type est application/ld+json ou application/json. Il permet d'ajouter des métadonnées à la page et de configurer des composants AMP. D'autres scripts non exécutables pourront être ajoutés ultérieurement.

Plafond récurrent 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 nécessite l'inclusion de ces tags:

<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 au bas de la balise <head> de votre document.

La première balise rend le contenu de la page invisible jusqu'à ce que la bibliothèque JavaScript AMP mette à jour la balise "body" pour qu'elle soit de nouveau visible lorsque le contenu de la page est prêt à s'afficher. Cela permet d'empêcher l'affichage du contenu de la page qui n'a pas encore de style. L'expérience utilisateur est ainsi instantanée, car le contenu de la page apparaît en une seule fois et tout ce qui se trouve dans la partie au-dessus de la ligne de flottaison s'affiche en même temps. La seconde inverse cette logique si JavaScript est désactivé dans le navigateur.

Tag amp-img

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

Les pages AMP comportent un composant Web spécialement conçu pour remplacer le tag 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 l'outil de validation. 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 ? Étant donné que amp-img ne remplace pas directement la balise HTML img classique. D'autres conditions sont requises lors de l'utilisation du composant "amp-img".

Système de mise en page

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

Pour réduire la reflow DOM, AMP inclut un système de mise en page qui garantit que la mise en page de la page est aussi rigide que possible dès que possible lors du téléchargement et de l'affichage de la page.

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

Dans le cas présent, le système de mise en page a déduit notre type de mise en page pour amp-img comme type container. Toutefois, le type de conteneur est destiné aux éléments contenant des éléments enfants et n'est pas compatible avec la balise amp-img, qui est à l'origine de cette erreur.

Pourquoi le type de conteneur a-t-il été déduit ? En effet, nous n'avons pas spécifié d'attribut de hauteur pour la balise amp-img. En HTML, vous pouvez réduire la mise en page en spécifiant toujours une largeur et une hauteur fixes pour les éléments d'une page. Nous vous recommandons de définir la largeur et la hauteur dans le format AMP pour les éléments AMP, car cela permet à l'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 l'outil de validation. Aucune erreur ne devrait s'afficher. Toutefois, l'image n'est pas aussi belle qu'elle est positionnée mal à l'aise sur la page. Ce serait formidable si vous pouviez ajuster l'image pour l'agrandir et la répondre, 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. L'attribut de mise en page indique au format AMP comment vous souhaitez positionner et mettre à l'échelle l'élément.

En définissant l'attribut de mise en page sur responsive, nous pouvons procéder comme suit:

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

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

Opération réussie.

Votre document AMP doit maintenant se présenter comme suit:

<!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 observez le résultat de la console. Le message suivant s'affiche:

AMP validation successful.

Questions fréquentes

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

Cette nouvelle initiative consiste à mettre en évidence les documents AMP valides dans l'interface des résultats de recherche Google, dans le cadre d'une nouvelle interface carrousel. Cette interface offrira une meilleure expérience utilisateur aux utilisateurs qui recherchent des articles sur le Web. Pour que cette expérience soit optimale, les pages incluses doivent respecter certains critères au-delà de la validation de l'outil de validation AMP.

Cette étape offre un aperçu complet des exigences.

Associer des pages canoniques et des documents AMP

AMP a pour but d'accélérer le Web et, même si le projet s'est principalement concentré sur le contenu statique à ses débuts, l'ajout de composants tels que le composant amp-bind est idéal pour un grand nombre de sites, tels que les éditeurs d'actualités, l'e-commerce, les sites Web de voyage, les blogs et d'autres sites.

Cependant, il est important de comprendre le champ d'application complet du format AMP dans une structure de site Web. Bien que les pages AMP puissent être utilisées pour créer des sites Web entiers, de nombreux éditeurs préfèrent l'utiliser comme pour l'approche associée : les documents AMP sont générés en complément des articles HTML standards qu'un éditeur héberge sur son site Web.

Remarque : Pour plus d'informations sur l'utilisation d'AMP pour la création de l'ensemble d'un site, également appelé "sites canoniques AMP", consultez l'atelier de programmation AMP attrayant interactif.

L'utilisation de liens canoniques dans les pages HTML standards permet de déclarer la page à privilégier lorsque plusieurs pages comportent le même contenu. Étant donné que les documents AMP peuvent être générés pour être disponibles à côté des pages d'article traditionnelles d'un site Web, nous devons traiter les pages HTML traditionnelles comme les pages "canoniques".

Pour commencer, nous avons déjà effectué cette étape dans notre document AMP en ajoutant une balise link dans <head> de la page canonique:

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

L'étape suivante consiste à lier l'article canonique à la page AMP. Pour ce faire, ajoutez une balise <link rel="amphtml"> à 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 schéma suivant illustre le sens des tags de lien:

Cette étape est nécessaire pour permettre au robot d'exploration Google de comprendre la relation entre notre document canonique HTML standard et notre document AMP. En l'absence de liens, le robot d'exploration ne comprend pas forcément quels articles sont les versions AMP des documents HTML standards. En fournissant explicitement ces liens, nous évitons toute ambiguïté !

Métadonnées schema.org Search Engine

Pour que les documents AMP apparaissent dans la nouvelle interface carrousel, vous devez également respecter la spécification des métadonnées Search Engine 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 au bas 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é détectée.

À présent, 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 Extrait" (Extrait de code), puis copiez le code source complet de votre page AMP, collez-le dans le panneau de l'éditeur de texte de l'outil de validation, puis cliquez sur &Run Test" (Exécuter le test).

Ce type de message devrait s'afficher sur la page:

Important : Assurez-vous que le texte vert "Tous les biens" 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 de presse, utilisez le type "NewsArticle". Le titre doit correspondre au titre de votre article. "Image" fait référence à l'image principale de l'article.

Les principaux critères d'affichage dans le nouveau carrousel de la recherche Google pour les articles d'actualité AMP sont les suivants:

1. Vérifiez que votre document AMP est validé.
2. Référencez votre document AMP à partir de votre page HTML traditionnelle via la balise <link> et inversement.
3. Incluez la balise de métadonnées Search Engine ci-dessus.

En savoir plus sur la détection de pages

Vous avez terminé l'atelier de programmation et exploré avec succès la plupart des concepts fondamentaux des documents AMP.

Nous espérons que vous avez non seulement compris comment ces concepts et fonctionnalités peuvent être mis en œuvre dans un document AMP, mais aussi que vous avez compris pourquoi il a été conçu.

Vous trouverez ci-dessous des sujets et des liens supplémentaires que vous pourriez explorer pour améliorer vos compétences.

• Tout savoir sur Page Discovery
• Balises HTML non autorisées
• Règles et restrictions CSS limitées ; animations
• En savoir plus sur les cadres iFrame
• AMP CDN
• Liste des composants AMP disponibles