Découvrez notre guide pratique pour créer et contrôler les pages AMP, étape par étape.
En 2015, Google et d’autres initiateurs, tels que WordPress ou Adobe, ont créé grâce à la technologie Accelerated Mobile Pages (AMP) une nouvelle norme pour le chargement de pages Web sur mobile. La notion d’optimisation pour mobile (mobile friendliness) a pris une importance toujours plus grande ces dernières années. Les AMP en particulier jouent un rôle central. Nous vous présentons ici un guide étape par étape pour configurer et contrôler les pages AMP en un tour de main.
Comme Google le rapporte dans sa dernière annonce sur le Webmaster Central Blog, à partir du 1er février 2018, il sera également nécessaire que le contenu du site de l’AMP coïncide avec le contenu du site canonique original. Il est en effet écrit :
Les pages AMP ont été créées pour améliorer considérablement les performances des sites Web, et offrir une expérience de consultation de contenu rapide et cohérente. Pour atteindre cet objectif, nous mettrons en application l’obligation de similarité du contenu entre les pages canoniques et leurs versions AMP, lorsque les webmasters souhaitent les voir affichées dans les résultats de recherche Google en tant que pages AMP.
L’utilisation de l’Internet sur mobile est maintenant devenue une norme dans beaucoup de domaines. Là où un ordinateur de bureau était autrefois indispensable, un smartphone avec une connexion Internet est aujourd’hui suffisant. Toutefois, la faible bande passante des connexions Internet sur mobile ainsi que le matériel utilisé pour les smartphones et les tablettes font que les pages Web prennent souvent plus de temps à charger.
La vitesse de chargement dans le réseau mobile est un facteur décisif pour qu’un utilisateur puisse profiter du contenu consulté. Si la page charge trop lentement, il change de page.
Cependant, les pages Internet rapides sur mobile ne sont en général obtenues qu’au prix de nombreux efforts techniques. C’est pourquoi de grandes entreprises telles que WordPress, Adobe et surtout Google ont mis sur pied en 2015 le projet Accelerated Mobile Pages. Cela a créé un nouvel écosystème pour mobile avec lequel les éditeurs peuvent avoir recours à des techniques standardisées et créer des pages Web à chargement rapide.
La technique elle-même est basée sur trois composants :
Le plus grand avantage de l’AMP réside dans le fait que les pages Web basées sur cette technologie sont actuellement celles qui sont chargées le plus rapidement. L’expérience utilisateur avec les pages AMP est comme prévu très positive. Dans les études de cas du projet AMP, il y a de nombreux exemples qui montrent des taux de rebond très faibles pour ces pages Web et qui prouvent que les boutiques en ligne peuvent obtenir des conversions plus élevées. Les pages AMP présentent également l’avantage de pouvoir être relativement facilement entretenues, en particulier lorsque des plugins correspondants entrent en jeu.
Toutefois, en raison de la réduction à l’essentiel, les pages Web AMP ne présentent pas, la plupart du temps, toutes les fonctionnalités des pages Web traditionnelles. Cet inconvénient est valable avant tout pour le domaine du e-commerce. On manque néanmoins encore d’expérience pour fournir des données précises.
On obtient cette vitesse élevée grâce au réseau de diffusion de contenu AMP. Dans ce but, les contenus des pages AMP sont enregistrés de façon décentralisée sur plusieurs emplacements de serveur. C’est pourquoi ceux qui souhaitent avoir la gestion des données sur un emplacement local verront les pages Web AMP comme un inconvénient. À cela s’ajoute une dépendance encore plus grande à Google pour ce qui concerne la technologie.
Les pages AMP sont développées à partir de pages Web standards. Cependant, quelques ajustements doivent être réalisés :
Exemple :
<link rel=“canonical“ href=“https://www.mapage.fr/url/vers/version-originale.html“ />
Ici, le pointage est dirigé vers l’URL originale.
<link rel=“canonical“ href=“https://www.mapage.fr/url/vers/page-AMP.html“ />
Ici, la balise canonique renvoie à la page AMP elle-même.
<meta name=“viewport“ content=“width=device-width,minimum-scale=1“>
<script async src=“https://cdn.ampproject.org/v0.js“></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>
Vous pouvez également dôter vos pages AMP de markups. Par exemple, il est possible que des pages d’informations ou de recettes s’affichent parfaitement sur un appareil mobile dans les pages de résultat des moteurs de recherche. Les informations sont par exemple indiquées par un markup correspondant dans le carrousel de Google.
Un article d’informations AMP peut par exemple être présenté comme suit :
{
“@context“: “http://schema.org“,
“@type“: “ArticleInfo“,
“headline“: “Titre“,
“datePublished“: “2017-11-11T11:11:00Z“,
“image“:“logo.jpg“
}
Pour que les images s’affichent correctement sur les pages AMP, vous devez à nouveau adapter le code HTML. Plus précisément, les renvois aux images doivent être adaptés dans le code source. Vous remplacez par
Par exemple :
<amp-img src=“graphique.jpg“ alt=“Un graphique d’actualité“ height=“400“ width= »800″></amp-img>
Vous pouvez ainsi adapter la couleur de fond de vos pages AMP. Les pages AMP sont fondamentalement très simples. SI vous souhaitez modifier la couleur de fond, vous devez adapter les éléments suivants.
<style amp-custom>
/* le style de personnalisation doit être intégré ici */
body {
background-color: white;
}
amp-img {
background-color: gray;
border: 1px solid black;
}
</style>
Notez que, pour gagner du temps, les pages AMP n’ont accès qu’à une feuille de style. Vous trouverez tous les détails sur la conception des styles sur CSS ici.
Vous devriez certainement renvoyer votre page Web standard à votre version AMP. C’est ce à quoi sert l’attribut rel. Il est rajouté dans le domaine
et fait le lien vers la version AMP :<link rel=“amphtml“ href=“https://www.mapage.fr/url/vers/AMP-Version.html“ />
En principe, les mêmes lignes directives sont valables pour les pages AMP que pour les pages Web compatibles avec Google. Pour que votre page apparaisse dans la recherche Google, elle doit respecter toutes les spécifications AMP importantes, votre contenu doit être identique au contenu de la page standard et le schéma d’URL doit être facile à comprendre pour l’utilisateur.
De plus, Google précise que la page doit être fondamentalement compatible avec la technologie AMP. La compatibilité s’applique également pour les données structurées insérées.
L’implémentation de pages AMP grâce à des plugins, maintenant disponibles pour beaucoup de CMS, est une solution rapide. Vous trouverez ci-dessous un tableau détaillé :
| Plugins CMS | Coûts | Remarques |
| WordPress | gratuit | Après l’installation, toutes les pages de votre blog WordPress peuvent être converties en pages AMP. |
| Wix Blog | sans frais | Pendant la conversion, il est possible que le trafic diminue dans Google Analytics car une grande part des visiteurs accède à votre offre via les pages AMP. |
| Typo3 | gratuit | Les développeurs apprécieront la forme des messages d’erreur sur Github. |
| Joomla! 1 Joomla! 2 |
79 $ 69 $ pour un an |
|
| Magento 1 Magento 2 |
149 $ 99 $ |
|
| Shopware | 49 $ | L’offre comprend 12 mois de support technique ainsi que des mises à jour gratuites. |
Quand vous configurez des pages AMP, ces dernières peuvent être facilement contrôlées grâce à Google Search Console. Pour cela, il est préalablement requis que votre site Web soit enregistré dans le Search Console.
Connectez-vous ensuite comme d’habitude et cliquez sur le champs « Apparence de la recherche » sur « Accelerated Mobile Pages ». Le nombre de pages AMP indexées s’affichent. Vous obtenez en plus tous les messages d’erreur importants.
Illustration 1 : Contrôler les pages AMP dans Google Search Console.
Pendant l’évaluation des données, notez que toutes les modifications et les personnalisations ne sont pas toujours affichées immédiatement dans Search Console. C’est ce que John Müller de Google a déjà signalé au début de l’année 2016 dans un post sur Google+.
Si vous souhaitez tester l’implémentation des AMP HTML, vous avez gratuitement à disposition l’outil test AMP de Google : https://search.google.com/test/amp
Illustration 2 : Résultats du test de l’outil test AMP de Google.
Une troisième possibilité est de contrôler les pages AMP avec la console pour développeur de Google Chrome.
Pour cela, vous devez ouvrir votre page AMP dans le navigateur.
Enfin, les pages AMP peuvent toujours être contrôler avec le AMP-Validator du projet AMP. Ici, le code AMP HTML complet est entré. La validateur peut également être utilisé pour contrôler les pubs AMP.
Illustration 3 : AMP Validator du projet AMP
Avec Ryte, vous pouvez également tester et contrôler en quelques clics. Rendez-vous dans les « paramètres du projet » et contrôler les éléments individuels sur le « Champs personnalisés ».
Illustration 4 : Contrôler les AMP avec les champs personnalisés de Ryte.
Il est possible de tester avec Ryte si votre page Web standard renvoie à la page AMP avec l’attribut rel=“amphtml“.
Voici comment procéder :
Veuillez noter qu’un nouveau crawl est nécessaire pour que Ryte puisse suivre toutes vos références AMP.
Tout juste un an après la présentation du projet AMP, il a été souligné que les pages Web avec un chargement rapide peuvent être également utilisées pour l’e-commerce. Sur le blog du projet AMP, il y a aussi des exemples pour des pages de catégories et de produits.
https://ampbyexample.com/samples_templates/product_browse_page/preview/
La plateforme de vente Ebay a déjà introduit en juillet 2016 des pages AMP. Vous trouverez ici un exemple de version AMP :
https://www.ebay.com/b/amp/iPhone-5s-16GB-Smartphones/9355/bn_341667.
Cet article du Ryte Magazine vous informe sur les pièges et les possibilités de l’AMP dans le e-commerce. Des études de cas illustratives sont présentées sur la page du projet des AMP.
Les AMP ont largement été créées pour permettre aux éditeurs de créer des sites Web qui se chargent rapidement de manière standardisée. Elles ont également été conçues pour que les moyens publicitaires correspondants puissent être insérés. Depuis l’été 2016, il est aussi possible de créer des publicités AMP spéciales qui se chargent très vite et qui ne gêne pas la performance du site. Quelques conditions préalables sont cependant nécessaires pour la configuration des publicités. Certaines règles s’appliquent telles que le « Content First » (contenu d’abord). En conséquence, le contenu est toujours chargé en premier. S’ensuit le chargement des publicités. (Sources : https://www.ampproject.org/learn/who-uses-amp/amp-ads/, https://medium.com/@cramforce/but-what-about-the-ads-bfe5025b6606)
En théorie, le contenu dupliqué est possible mais en pratique, cela n’arrive pas si l’implémentation est faite correctement. Lors de la création des AMP, Google recommande de mettre une balise canonique d’une version AMP sur la version standard. S’il n’y a qu’une version AMP, la balise se renverra vers elle-même.
De plus, une page HTML standard renvoie à une page AMP existante grâce à l’attribut rel=“amphtml“. Cela envoie également un signal à Google qu’une autre version est disponible. De plus, le canonical tag dans le code source d’une page AMP garantit que les moteurs de recherche sont renvoyés vers l’original.
En théorie les pages AMP fonctionnent sur tous les terminaux. Il est donc possible de ne créer qu’une version AMP. Elle est affichée sur tous les écrans grâce au responsive web design. Certaines fonctionnalités du e-commerce ne sont toutefois pas encore tout à fait au point. Cela concerne avant tout les scripts qui sont réduit au minimum par la technologie AMP. À part cela, il est naturellement possible de réaliser sans problème une version mobile seulement avec les AMP.
Oui, il est recommandé sur la page du projet AMP d’utiliser schema.org pour marquer les données structurées. Il est cependant conseillé d’utiliser uniquement les propriétés logiques. (Source : https://www.ampproject.org/docs/guides/discovery#use-schema.org-for-most-search-engines)
Les Accelerated Mobile Pages sont une solution intéressante pour rendre un site Web mobile encore plus rapide. La technologie peut être très rapidement mise en place grâce aux plugins. Le bénéfice pour vos groupes cibles peut être très élevé car les pages se chargent très vite même avec une mauvaise connexion Internet sur mobile.
Le projet AMP, bien que lancé en 2015, est toujours dans une phase relativement précoce. Cependant, Google lance au troisième trimestre 2017 une nouvelle initiative avec ses road shows et des informations périphériques relatives aux pages AMP, qui accélèrera considérablement leur développement et propagation. C’est pourquoi il est intéressant de se mettre à la technologie AMP.
| Action | Réussi ? |
| Le type de document <!doctype html> est-il présent au début du code HTML ? | |
| Ai-je utilisé <meta charset=“utf-8“> dans le set de caractères ? | |
| Existe-t-il un <html ↯> ou <html amp> une balise AMP ? | |
| Existe-t-il un <head> et <body>? | |
| L’AMP renvoie-t-il à la page originale avec la balise canonique ? | |
| Une balise viewport est-elle rajoutée ? | |
| Le script est-il rajouté au CDN ? | |
| La balise élargie est-elle utilisée dans la section <head> ? |
Ryte FREE vous aide à commencer avec le suivi de vos pages AMP
Et c’est gratuitÉcrit le 04.12.2017 par Eva Wagner.
Qui a écrit
Eva rassemble beaucoup d'expérience dans le marketing. En 2015, elle devient un super-héros à Ryte. Avec beaucoup de créativité et un sens affiné pour les sujets d'actualité, elle gérait les activités de rédaction de Ryte. Elle organisait aussi la participation de l'entreprise à de grands événements et salons, comme la dmexco de Cologne.
Suivi, analyse et optimisation de vos actifs numériques grâce à notre technologie unique
S’inscrire gratuitement