Comment avoir une page AMP-Friendly ? #SEO

par asvdteam

Bonjour tout le monde,

Si vous faites un peu de veille informationnelle sur le référencement naturel, vous auriez dû voir que le sujet à la mode … c’est le projet open source de Google, AMP (Accelerated Mobile Pages). L’objectif de ce projet est de rendre le web plus rapide, plus épuré et plus léger en code. Certains balisages seront prédéfinis et pré-chargés par Google.

Cependant, pour qu’une page soit Google AMP-Friendly, il faut respecter certains critères et ajouter certaines nouvelles balises <amp> dans le code source de votre site (voire complètement le changer !)

En effet, si on cite les éléments obligatoires trouvés sur le site de l’AMP, nous constatons que les documents AMP HTML doivent :

  • Commencer par le type du document <!doctype html>
  • Contenir une balise <html :zap:> 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 https://cdn.ampproject.org/v0.js 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>

Sans ces éléments, vos pages ne pourront pas être considérées comme AMP-friendly. Voici la page de test SEO d’AUTOVEILLE pour analyser cette nouvelle technologie.

screenshot1

Si vous voulez en savoir plus sur le SEO Google, le SEO Bing, etc. écrivez-nous à team.asvd@gmail.com

Bon courage à tous,

Véronique Duong & Alexandre S.