Pages AMP Google : ce qu'il faut savoir, code, analytics | Facem Web

Passer à l’AMP, mesurer les performances, prendre le temps de comprendre

HTTPS, mobile, version responsive, version mobile… AMP. Google n’a de cesse de nous imposer ses nouvelles normes en matière de Web. Certaines se justifient amplement du fait du multi-device, d’autres sont là pour nous rendre plus dépendants encore de la politique de la société titanesque de Mountain View. Et bien sûr, les référenceurs suivent. D’abord parce que c’est un enjeu économique crucial, ensuite parce que c’est dans notre nature de suivre ces évolutions, même à reculons, même en cherchant à les contourner… Dans tous les cas, on se situe par rapport à ces évolutions imposées. AMP, c’est le nouveau joujou qui est en mesure donc de révolutionner la consommation d’information web (si si les mots sont pesés). Explications.

  1. Définition et explications sur l’AMP de Google
  2. Quels codes pour l’AMP ?
  3. Configurer analytitcs pour ‘AMP
  4. Conclusion

AMP (Accelerated Mobile Page), c’est quoi ?

En février 2016, Google a lancé ce format requérant un code HTML spécifique. Après le Schema.org, une autre manière de décoincer l’usage traditionnel et W3C du codage de site Web, passons. Le format AMP vise à accélérer l’affichage des contenus de pages Web sur mobile (source : official blog Google) afin de donner officiellement une meilleure expérience utilisateur  Cela concerne jusqu’à présent les articles de blog :

affichage amp sur mobile

Et toute l’année, Google nous a incité à se passage à AMP, parlant de… puis appliquant le bon vieux principe : « Vous gagnez en positionnement ». Ajoutons donc une couche supplémentaire au code :

Quels codes pour l’AMP ?

En la matière, pas mal de changements que vous pourrez voir sur l’inénarrable github. Basé sur la vitesse d’affichage augmentée, AMP reste par principe sur le serveur de l’éditeur Web. C’est d’ailleurs la grande différence avec Instant Facebook, qui n’est pas un code ouvert par ailleurs. Google donne, c’est bien connu, et là encore cela nous rend plus dépendant. Un excellent article récapitulatif est produit chez WebRank Info.

Sur le fond, c’est du code html étendu avec les propriété AMP comme dans cet exemple :

Exemple basique tiré d'AMP
<!doctype html>
<html ⚡>
 <head>
   <meta charset="utf-8">
   <link rel="canonical" href="mapageweb.com/">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <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>Mon contenu de page Web</body>
</html>

Notez l’indication <style amp-boilerplate>.

Évidemment, contrôlez la qualité de vos pages AMP avec la Google Search Console, un rapport dédié y est disponible. Vous pouvez aussi configurer votre analytics pour AMP

Comment configurer analytics sur les pages AMP

Le Blog de Google vient de nous proposer un tutoriel (à lire) pour configurer un autre produit Google, analytics. Très simple, le fonctionnement des trackers fonctionne similairement à ceux que vous connaissez et placez dans votre <head> ; il s’agit d’une solution appelée ampli-pixel qui se comporte comme un pixel de suivi simple. Ampl-pixel utilise une URL unique qui permet la substitution de variables.

Il faut ainsi ajouter dans le <head> :

AMP Analytics
<script async custom-element="amp-analytics"

src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

Allons-y ensuite pour placer un code avec l’identifiant sur les pages concernées :

Code à placer sur les pages
<amp-analytics type="googleanalytics">

<script type="application/json">
{
  "vars": {
    "account": "UA-YYYY-Y" 
  },
  "triggers": {
    "defaultPageview": {
      "on": "visible",
      "request": "pageview",
      "vars": {
        "title": "Name of the Article"
      }
    }
  }
}
</script>
</amp-analytics>

 

Pour conclure, AMP est-il une une révolution ?

Une révolution peut-être pas comme on l’entend, un saut d’humeur d’un moteur archi-dominant, certainement. Une nouvelle façon de consommer l’information, à n’en pas douter, en concurrence directe avec Facebook précédemment cité mais surtout… En favorisant AMP, Google met de côté les applications de fait. On passe ainsi d’une mise en avant de ces dernières dans les SERPs à la récupération à profit du contenu pour Google. Chers développeurs, à vos marques pour travailler encore plus pour Google, que ne ferait-on pas pour des raisons de SEO. Cela dit, l’expérience utilisateur est bien réelle, surtout lorsque vous ne récupérez pas la 4G sur votre mobile. Il faut savoir que vous perdez facilement la moitié des utilisateurs au bout de quelques secondes.

[Total : 2    Moyenne : 4.5/5]

A propos de l'auteur(e)

Centre de préférences de confidentialité

Google Analytics

Google Analytics est un outil Google d'analyse d'audience Internet permettant aux propriétaires de sites Web et d'applications de mieux comprendre le comportement de leurs utilisateurs. Cet outil peut utiliser des cookies pour collecter des informations et générer des rapports sur les statistiques d'utilisation d'un site Web sans que les utilisateurs individuels soient identifiés personnellement par Google. Le cookie "__ga" est celui qui est le plus utilisé par Google Analytics.
En plus d’établir des rapports statistiques d’utilisation des sites web, Google Analytics peut également être utilisé, conjointement avec certains des cookies publicitaires décrits précédemment, pour proposer des publicités plus pertinentes sur les services Google (comme Google Search), sur l’ensemble d’Internet et pour mesurer votre interaction avec les publicités que nous affichons.

Google Analytics
_ga, _gid, _gat

Publicité Google

Google AdSense est un programme de monétisation proposé par Google aux éditeurs de sites web pour générer des revenus publicitaires à la performance. Un éditeur de site web peut adhérer gratuitement au programme et bénéficier d’affichages publicitaires sur son site en y plaçant des tags publicitaires correspondant aux formats de son choix par simple copier / coller d’un code fourni par le programme.
Google utilise des cookies pour rendre la publicité plus attractive pour les utilisateurs et plus rentable pour les éditeurs et les annonceurs. Les cookies servent ainsi également à sélectionner les publicités en fonction de leur pertinence pour l'utilisateur, à améliorer les rapports sur les performances des campagnes et à éviter la diffusion d'annonces que l'utilisateur a déjà vues.

Google AdSense
NID,SID,DSID, FLC, AID, TAID