Le projet AMP (Accelerated Mobile Pages) de google a été lancé en 2016 afin d’améliorer l’expérience utilisateur en rendant le chargement des pages plus rapide sur les mobiles. C’est une initiative qui va dans la direction Mobile First en rendant les pages plus rapides grâce à des systèmes de cache et en limitant le chargement de fichiers externes et en réduisant la taille du fichier HTML. Dans ce but, ils ont étrangement décidé de ne pas autoriser le chargement du feuille de style externe.
Si votre site est bien conçu et si vous avez des notions de PHP, la mise en place est assez rapide pour les pages classiques. Le problème principal est pour les sites utilisant du javascript.
Entête des fichiers AMP
Pour la mise en place, il suffit déjà de créer vos pages en changeant la balise HTML et les balises header de la sorte selon les exemples présent sur le site du projet amp.
<!doctype html>
<html amp lang="fr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<title>.....</title>
<meta name="description" content="......."/>
<link rel="icon" type="image/x-icon" href="/img/favicon.ico" />
<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>Validation des fichiers AMP
Google fournit avec son navigateur chrome un excellant moyen de contrôler la validitél du code HTML de vos pages HTML AMP. Pour afficher les erreurs il suffit d’ouvrir l’outil pour développeur en cliquant F12, et ajouter development=1 à la fin de votre url. Vous pourrez donc ainsi avoir en temps réel la validation de votre code.
Pour valider le code de votre page AMP, Cliquer F12 pour ouvrir la console du mode développeur, aller dans l’onglet console et ouvrir la page amp en ajouter #development=1 à la fin de votre url
Css dans les pages amp
Parmi les nombreuses balises spécifiques, une des premières que vous aurez besoin est celle qui permet d’inclure un css personnalisé, je vous met ci-dessous la façon de faire et je vous laisse allez voir le site officiel pour la suite:
<head>
...
<style amp-custom>
.fright{float:right}
</style>
</head>Comment signaler la présence de la page AMP
Une fois la version Accelerated Mobile Pages de votre page crée, il faudra tout de suite la signalée à Google afin qu’il puisse l’indexer dans son moteur. Pour ce faire, vous devez utiliser la balise de la façon suivante:
Balise dans la page AMP
Sur votre page AMP définissez dans la section head l’adresse de la version standard à l’aide de la balise canonical de la façon suivante:
<link rel="canonical" href="http://www.crabcake.ch/blog/seo-amp-page" />Balise dans la version standard de la page
Dans votre page traditionnelle, vous devez signaler la présence d’une version mobile de votre page afin que les moteurs la trouvent plus facilement. Pour ce faire, définissez dans la section head l’adresse de la version amp à l’aide de la balise canonical de la façon suivante:
<link rel="amphtml" href="http://www.crabcake.ch/blog/seo-amp-page.amp" />Suivit du référencement de vos pages amps
Google fournit dans la search console la liste des pages accélérées qu’il a détecté. En plus du nombre cette page permet de voir s’il y a des erreurs. Comme souvent, il faut quelque jours avant qu’un résultat soit visible.
Je parle dans un prochain post de l’intégration de formulaires dans les pages amp. Pour voir la marche à suivre allez le lire: Formulaire dans une page amp