AMP Accelerated Mobile Page mise en place sur votre site

Un nouveau format vient d'être annoncé en grande pompe hier, il s'agit d'Accelerated Mobile Page.

Cosmopolitan Adapté et accéléré pour le Mobile via un page spécifique Accelerated Mobile Page

En quoi ça consiste L'accelerated Mobile Page ?

On voit pleins d'articles sortir disant que c'est pour concurrencer apple et facebook mais soit j'ai rien compris, soit c'est eux qui confondent la technologie employée avec la finalité.


La technologie, c'est : on créé un consortium pour définir une norme, un protocole. Vous vous rappelez l'opengraph que l'on attribue à tort à facebook ? schema.org découle également de l'interprétation de cette norme voir le site officiel opengraph protocole http://ogp.me pour l'explication.

La finalité c'est : on a un format dimensionné comme il faut, si vous êtes commerçant et vous voulez faire un parrallèle, c'est comme votre flux produit que vous envoyez sur les marketplace ou vers google shopping, si vous êtes blogguer, il s'agit du fil RSS qui servira aux lecteurs de flux rss, ils ne voyent que l'essentiel de votre contenu, et on peut rajouter des ads pour monétiser.
 
Dans notre cas la finalité, c'est que google ou twitter, ou autres service, récupèrera votre contenu et le mettra en cache chez lui, et donc le servira directement. Quoi c'est comme un CDN ? un cloudflare ? Pour schématiser oui, mais il pourra être utilisé par twitter et tous les services qui savent lire ce protocole.

Oui mais mes pages vont être dupliquées ! Oui, mais non, je vous explique pourquoi plus bas.

Mobile first, speed first

Cela fait un petit moment que l'on voit que le mobile first n'est plus une mode mais un besoin. Google avait déja lancé des ultimatums http://www.love-moi.fr/2015/03/ranker-sur-mobile-partir-du-21-avril-en.html

Si on part de l'utilisateur, c'est un des équipements le plus présent dans sa journée si les pages ne mettent pas des plombes à charger il est content.

Coté éditeur, il y a production de contenu, mais pour rendre tout ça plus sexy, il y a beaucoup d'habillage, de la pub donc forcément ça ralenti, et c'est pas bon pour la monétisation, comme les adblocks, je vous laisse ouvrir un onglet pour aller lire le point de vue de @labisse : http://www.clementpessaux.com/ad-blockers-les-nouveaux-racketteurs-du-web.htm.

Donc on va parler de la partie technique de AMP, pas de la consommation par les sites et applications tierces.

Quel est le gain de vitesse d'une accelerated Mobile page ?

J'ai fait un test sur le site de +Virginie Clève qui l'a mis en place et qui a écrit un article également que vous retrouverez en lien en fin d'article

Gtmetrix aime bien AMP, google l'adorera

Comment on met en place Accelerated mobile page sur son site ?

Alors on repart sur la base du html et on décide de faire un nouveau protocol, sur votre site vous pouvez faire ce que vous voulez, mettre pleins de couche de css, de javascript, de pub dans tout les sens, mais vous allez proposer une alternative AMP pour les mobiles.

Les puristes diraient, mais pourquoi on ne passe pas tout simplement le site sous le navigateur lynx et on a notre version mobile page accelerated ? Parcque.

Donc la communication officielle du projet AMP

"AMP HTML est une façon de construire les pages de web pour le contenu statique qui s'affichent avec une performance fiable et rapide. C'est notre tentative de fixer ce que beaucoup perçoivent comme des temps de chargement de page très lent – notamment lors de la lecture de contenu sur le web mobile.

AMP HTML est entièrement construit sur des technologies web existantes. Il réalise des performances fiables en limitant certaines parties du HTML, CSS et JavaScript. Ces restrictions sont appliquées avec un validateur qui est livré avec le HTML de l'AMP. Pour pallier ces limitations AMP HTML définit un ensemble d'éléments personnalisés pour un contenu riche au-delà de HTML de base."

Ok on ne réinvente pas la roue on fait un bootstrap. ok avant ça il existait https://html5boilerplate.com/

Le code d'une page HTML AMP

Voila le minimum vital d'une page, il faut appeller un script asynchrone, qui permettra de valider la page et qui virera tout le contenu superflu. vous remarquerez le super éclair de la mort, que vous pourrez remplacer par AMP parcque franchement je ne trouve pas rapidement de touche pour l'ajouter, mais on ne le fait qu'une fois si on utilise un CMS

T'as vu il suffisait de mettre un Emoji éclair pour booster internet

Donc si on regarde au niveau SEO, on devrait avoir une page structurée normale, et quand au duplicate, ils résolvent le problème par la canonical.

Pour l'histoire de la compatibilité mobile, on retrouve le petit bout de code que j'avais mis dans mon article comment ranker sur mobile.

Donc google devrait être en mesure d'arriver, d'analyser le contenu et la classer (là je fais un clin d'oeil à l'ami christian meline http://www.referencement-naturel-white-hat.fr/la-mort-du-crawl-leveil-des-signes-versionexpliquee/ )

Comment les moteurs de recherche vont pouvoir analyser le contenu de la page ?

Comme d'habitude avec les rich snippet (pour vulgariser), par contre on s'aperçoit que de plus en plus, plutôt qu'un balisage dans le contenu avec des itemprop, ça se fait dans l'en-tête en utilisant le format ld-json. Je ne vais pas dire que c'est la seule analyse qu'ils vont faire sinon on va se retrouver avec la meta keyword.

On remarque qu'il y a des nouvelles balises xhtml qui fait leur apparition préfixées par




Il y a même des tags spécifiques à des services, du coup je me demande où est l'openweb annoncé





Vous aurez remarqué qu'il manque facebook ;-)

il y en a même un spécifique pour les ads



et dans le css on détaille la mise en forme comme d'hab

 
 Donc pour le balisage schema.org pour typer le contenu, les valeur possible actuellement sont :
schema.org/CreativeWork avec un balisage spécifique schema.org/NewsArticle or schema.org/BlogPosting  pour l'instant le balisage product n'est pas pris en compte, ce qui ne veut pas dire que vous ne pouvez pas le prévoir ;-)

Voilà comment ça se présente


Si vous voulez lire un article intéressant plus sur l'aspect des enjeux de ce nouveau format, allez lire l'article chez +Virginie Clève plus accès sur la communication de la consommation de ce format par google : http://www.cafe-referencement.com/actu-seo/google-amp-quels-benefices-quels-risques-pour-les-sites-de-contenu-1576


La doc officielle du projet :

https://github.com/ampproject/amphtml

et pour les intégrateurs, voila les éléments pour styler les pages

https://github.com/ampproject/amphtml/blob/master/spec/amp-html-components.md

AMP markup Sheet cheats

• amp-img
• amp-audio
• amp-anim
• amp-ad
• amp-pixel
• amp-video
• amp-carousel
• amp-lightbox
• amp-iframe
• amp-instagram
• amp-twitter
• amp-youtube

Installer AMP dans wordpress

One more thing pour AMP, l'adresse du plugin wordpress

https://github.com/Automattic/amp-wp

Pour l'installer, copiez le répertoire dans votre répertoire plugins, ensuite allez dans votre backoffice wordpress, extension, vous activez l'extension AMP,

Ensuite vous  allez dans réglages, permalink, et cliquez sur le bouton "sauvegarder" pour regénérer les liens.
maintenant lorsque vous tapez le nom de votre article et que vous ajoutez /amp à la fin, vous serez redirigé vers votre version AMP.

Faut il déclarer un sitemap spécifique pour les liens AMP ?

J'ai posé la question à Zineb de la webspam team pas besoin de faire un sitemap spécifique. Google détecte automatiquement s'il y a une version amp. Donc test immédiat pour savoir si y'a bonus.

@jessyseonoob @Matt_Refeo @Loran750 @SylvainDeaure non pas besoin de sitemap spécial. Ce sera détecté automatiquement. Pas la peine donc

— Zineb Ait (@Missiz_Z) 4 Novembre 2015

@jessyseonoob @Matt_Refeo @Loran750 @SylvainDeaure oui, aussi simple que ça :)

— Zineb Ait (@Missiz_Z) 4 Novembre 2015

Voilà plus qu'a aller voter pour moi au golden blog awards ;-)

http://www.golden-blog-awards.fr/blogs/love-moi-seo-referencement-ecommerce-social-media.html