You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today.
Faîtes exploser votre référencement avec une page AMP

Accueil > le Blog

Les pages AMP sont similaires aux pages HTML et se chargent dans n’importe quel navigateur.

Pourquoi développer des pages AMP ?

  • Gain de 15% à 85% sur le temps de chargement des pages sur mobile. Par conséquent, taux de rebond en baisse et conversion en hausse.
  • Meilleure visibilité dans les résultats de Google et donc plus de trafic.
  • Présence dans le carrousel News (concerne majoritairement les articles des sites présents dans Google News)
  • Label AMP (concerne tous les contenus)
  • Etre à l’avant-garde d’une adoption massive de ce format pour le web mobile. Google redouble d’efforts pour promouvoir et améliorer AMP, de plus il s’agit d’un projet open source soutenu pas une communauté importante de développeurs.

Les fichiers AMP HTML DOIVENT :

  • Commencer par le type du document <!doctype html>.
  • Contenir une balise <html ⚡> de niveau supérieur (<html amp> est également accepté).
  • Contenir les balises <head> et <body> (facultatives dans HTML).
  • Contenir une balise <link rel="canonical" href="$SOME_URL"> dans l’en-tête qui pointe vers la version HTML standard du document AMP HTML ou vers le document lui-même si aucune version HTML n’existe.
  • Contenir une balise <meta charset="utf-8"> comme premier enfant de la balise head.
  • Contenir une balise <meta name="viewport" content="width=device-width,minimum-scale=1"> dans la balise head. Il est également recommandé d’inclure initial-scale=1.
  • Contenir une balise <script async src="https://cdn.ampproject.org/v0.js"></script> comme dernier élément de l’en-tête (inclut et charge la bibliothèque AMP JS).
  • Contenir ce qui suit dans la balise <head> :

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

Exemple de structure :


<!doctype html>
<html amp lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Bonjour, Codez en AMPs</title>
    <link rel="canonical" href="http://www.culturemediatic.fr/article.html">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2018-01-20T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </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>Bienvenue dans le monde du mobile !</h1>
  </body>
</html>

La plupart des balises HTML peuvent être utilisées directement dans AMP HTML, mais certaines, comme la balise <img>, sont remplacées par des balises équivalentes ou des balises AMP HTML personnalisées légèrement améliorées.


<amp-img src="bienvenue.jpg" alt="Bienvenue" height="400" width="800"></amp-img>

Les pages AMP sont des pages Web ; toute application de style sur la page et sur ses éléments est réalisée à l’aide de propriétés CSS communes. Vous pouvez appliquer un style aux éléments à l’aide de sélecteurs de classe ou d’élément dans une feuille de style en ligne au sein de l’en-tête (<head>), appelée <style amp-custom> :


<style amp-custom>
  /* Tous vos styles ici */
  body {
    background-color: white;
  }
  amp-img {
    background-color: gray;
    border: 1px solid black;
  }
</style>

Bref, tout est là : https://www.ampproject.org/docs/guides/responsive_amp

Templates AMP

Faire supporter AMP par Wordpress : https://www.websitehostingrating.com/best-wordpress-amp-themes/

Consignes relatives à l’AMP dans la recherche Google

Astuce pour rediriger vos visiteurs "Mobile" sur la page AMP :
<link rel="alternate" media="only screen and (max-width: 640px)" href="https://www.liendevotrepage/pageversionamp/">

Pas convaincus après vos tests et vos urls AMP sont référencées ?
Tout va bien se passer, suivez ce Tuto pour retirer le URL amp des résultat de recherche Google

Hic !

  • Google va pénaliser les utilisations abusives dès 2018 !
  • Google a toujours indiqué que les pages AMP devaient être identiques aux pages d’origine au niveau du contenu + d’infos
  • Google exige que le contenu AMP soit identique au contenu original : Ainsi, à compter du 1er février 2018, il va exiger que le contenu de la page AMP soit comparable au contenu de la page canonique, c’est à dire au contenu Web original qui sert à créer le contenu AMP. + d’infos

Bonne pratique

La version non-AMP de la version de l’URL, https://www.exemple.fr/untruc/, a une référence vers la version AMP de l’URL :

<link rel="amphtml" href="https://www.culturemediatic.fr/untruc/amp/" />

Sur la version AMP il y a une référence en retour vers la version non-AMP :

<link rel="canonical" href=https://www.culturemediatic.fr/untruc/" />

+ d’infos sur les bonnes pratiques

Google Analytics

Une balise Analytics distincte est fournie spécifiquement pour les pages AMP, car vous ne pouvez pas utiliser analytics.js.

il est primordial de respecter les spécifications et de valider vos pages AMP avant de les publier

Solutions adaptées
Vos envies et vos idées sont notre priorité en répondant à toutes vos demandes pour vous orienter vers les meilleurs outils.
votre Interlocuteur privilégié
Toutes vos idées sont réalisables grace à un réseau de compétences efficaces.
Solution clé en main
Avec ou sans formation, de manière autonome ou en sous-traitance, il y aura tojours une solution pour ne pas faire de vos outils une contrainte.
Tarifs sur mesure
Quel que soit votre projet, vos idées, les tarifs sont clairs et adaptés à vos ambitions, envies et budgets.