Please wait...

AMP - Accelerated Mobile Pages

Hello,

What are AMP - accelerated mobile pages ?

The accelerated mobile pages make it possible to optimize the access to the Google results (SERP - search engine result page) of the smartphone users who use their web browser.

By increasing both the loading speed of the page, and adding a standard methodology for formatting data, it allows Google to optimize reference of the content of our pages.

Coupled with web-semantic tools, such as (structured data) schema.org.

Here's how to create a breadcrumb (JSON-d) on an AMP page:

{
  "@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"
  }]
}

And here, for example, how to code a breadcrumb, on a classic HTML page:

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

Read more

In addition, Google provides several test tools, which allow developers to integrate wisely AMP pages.

See you soon,

Mathieu