Veuillez patienter...

AMP - les Pages Mobile Accélérées

Bonjour,

Que sont les pages mobile accélérées (ou AMP - Accelerated mobile pages) ?

Les pages mobile accélérées permettent d’optimiser l'accès aux résultats Google (SERP - search engine result page) des utilisateurs de smartphones qui utilisent leur navigateur web.

En augmentant à la fois la vitesse de chargement de la page, et ajoutant une méthodologie standard de formatage des données, elle permettent notamment à Google de mieux référencer le contenu de nos pages.

Couplées avec des outils du web-semantique, tel que les (données structurées) schema.org,

Voici comment créer un fil d'ariane (JSON-d) sur une page AMP :

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [{
    "@type": "ListItem",
    "position": 1,
    "name": "Books",
    "item": "https://example.com/books"
  },{
    "@type": "ListItem",
    "position": 2,
    "name": "Authors",
    "item": "https://example.com/books/authors"
  },{
    "@type": "ListItem",
    "position": 3,
    "name": "Ann Leckie",
    "item": "https://example.com/books/authors/annleckie"
  },{
    "@type": "ListItem",
    "position": 4,
    "name": "Ancillary Justice",
    "item": "https://example.com/books/authors/ancillaryjustice"
  }]
}

Et voici par exemple, comment coder un fil d'ariane, sur une page HTML classique :

<ol itemscope itemtype="https://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope
      itemtype="https://schema.org/ListItem">
    <a itemtype="https://schema.org/Thing"
       itemprop="item" href="https://example.com/books">
        <span itemprop="name">Books</span></a>
    <meta itemprop="position" content="1" />
  </li>
  ›
  <li itemprop="itemListElement" itemscope
      itemtype="https://schema.org/ListItem">
    <a itemtype="https://schema.org/Thing"
       itemprop="item" href="https://example.com/books/sciencefiction">
      <span itemprop="name">Science Fiction</span></a>
    <meta itemprop="position" content="2" />
  </li>
  ›
  <li itemprop="itemListElement" itemscope
      itemtype="https://schema.org/ListItem">
    <a itemtype="https://schema.org/Thing"
       itemprop="item" href="https://example.com/books/sciencefiction/ancillaryjustice">
      <span itemprop="name">Ancillary Justice</span></a>
    <meta itemprop="position" content="3" />
  </li>
</ol>

En savoir plus

De plus, Google met à disposition plusieurs outils de test, qui permettent aux développeurs d'intégrer judicieusement les pages AMP.

A très bientôt,

Mathieu