🧟‍♂️️ Vérifiez vos pages zombies SEO sur votre site !!! 🧟‍♀️️

Elles plombent votre référencement et ne vous rapportent rien...

Je le détaille dans mon tuto Pages Zombies

Présentation technique du Projet AMP (Accelerated Mobile Pages Project)

Qu’est-ce que les pages au format AMP (Accelerated Mobile Pages) ? Comment rendre ses pages compatibles AMP ? Voici des explications pour les développeurs…

Accelerated Mobile Pages Project

AMP, c’est quoi ?

AMP (Accelerated Mobile Pages Project) est un projet distribué sous licence Apache 2 qui a pour but d’accélérer l’affichage des pages web.

Pour y parvenir, AMP permet aux éditeurs de développer et déployer des pages web spécialement écrites pour pouvoir être ensuite optimisées par des serveurs proxys spécialisés, qui peuvent remplacer les images par des versions optimisées, inclure les images visibles au dessus de la ligne de flottaison sou forme « inline » (src=data-uri), déplacer du CSS directement dans l’attribut style des éléments HTML (inline), précharger des composants, minifier les fichiers HTML et CSS

Compatibilité

Comme toujours il faut vérifier si la compatibilité affichée correspond à votre audience et à vos besoins. AMP est annoncé pour supporter les 2 dernières versions des navigateurs les plus populaires, à savoir Chrome, Firefox, Edge, Safari et Opera, sur PC comme sur smartphone et tablette.

La compatibilité Internet Explorer est inexistante : les images ne s’affichent pas sous IE10 et inférieur…

Sous le capot

Un sous ensemble de HTML5

Certains éléments HTML sont interdits dans AMP :

  • <img>, <video>, <audio>, <iframe> sont remplacés par des composants spécifiques
  • <script> car l’utilisation directe de javascript est interdite.
  • <form> ainsi que tous les éléments de type « input » : <input>, <textarea>, <select>, <option>… Seul l’élément <button> est autorisé principalement pour les interactions.
  • <base>, <frame>, <frameset>, <object>, <param>, <applet>, <embed>,

Conséquence : exit donc les menus avec formulaire de recherche, formulaire de connexion, les menus déroulants…

Remarque : les liens doivent être relatifs et  les commentaires conditionnels ne sont pas autorisés.

La notion de composant

AMP interdit l’utilisation directe de javascript dans une page web. Seuls les composants pourront utiliser javascript. On doit définir pour chaque composant la largeur/hauteur et son comportement (taille qui s’adapte au design, …). Un composant peut être composé de plusieurs autres composants : le carrousel amp- est composé de plusieurs composants images amp-img.

Pour le moment peu de composants sont disponibles :

  • [amp-img] permet d’insérer une image avec une politique de mise en cache publique.
  • [amp-audio] permet de lire un fichier audio. Ce composant est basé sur l’élément HTML5 audio. (lazy loading)
  • [amp-anim] permet d’insérer une image animée type GIF. On peut ajouter une image de prévisualisation via un composant [amp-img] placeholder.
  • [amp-ad] permet d’insérer une publicité dans la page. Chaque publicité est chargée dans une iframe.
    Pour le moment les seules régies supportées sont A9, AdReactor, AdSense, AdTech et Doubleclick.
  • [amp-pixel] permet de générer un compteur de vues au travers d’une image invisible. Bien qu’aucune solution officielle n’ait été publiée pour le moment concernant Google Analytics, on peut trouver sur le site The Verge le code suivant:

    https://ssl.google-analytics.com/collect?utmac=xxxx&dt=$TITLE&utmp=$CANONICAL_URL&t=pageview&tid=xxxxxx&dl=$CANONICAL_URL&cid=xxxx&z=xxxx

  • [amp-video] permet d’insérer une vidéo. Ce composant est basé sur l’élément HTML5 video (lazy loading). On peut ajouter une image de prévisualisation via un composant [amp-img] placeholder.
  • [amp-carousel] permet d’afficher un carrousel horizontal d’images.
  • [amp-lightbox] permet d’afficher une lightbox, une popup qui s’ouvre par exemple lors d’un click sur un bouton et recouvre le contenu pour afficher des informations. Les interactions sont gérées via des attributs sur les différents éléments et composants HTML, par exemple on= »tap:ma-lightbox » pour déclencher l’ouverture d’une lightbox.
  • [amp-image-lightbox] permet d’afficher une lightbox contenant une image.
  • [amp-iframe] permet d’afficher une iframe. Beacoup de restrictions pour des raisons de sécurité concernant l’origine, l’emplacement dans la page, le fait que seuls les fichiers https peuvent être chargés.
  • [amp-instagram] permet d’afficher une image Instagram.
  • [amp-twitter] permet d’afficher un tweet.
  • [amp-youtube] permet d’afficher une vidéo Youtube.
  • [amp-fit-text] permet d’afficher du texte avec une taille de police optimisée.

CSS

L’utilisation de CSS via l’attribut style (inline CSS) est interdite. De plus seuls les sélécteurs simples sont autorisés (.classe, #id, tag, media queries…). Pour le moment les transitions, animations et filtres sont interdits, ce qui réduit encore les interactions puisque le javascript est interdit.

Validateur

Projet AMP (Accelerated Mobile Pages Project)

Comment valider qu’une page AMP est bien valide ?

Un validateur AMP est intégré dans la librairie AMP JS library, si bien qu’il est disponible dans n’importe quelle page AMP. Pour valider vos pages AMP :

  1. Ouvrez une page AMP dans votre navigateur
  2. Ajoutez “#development=1” à la fin de l’URL, par exemple http://localhost:8000/released.amp.html#development=1
  3. Ouvrez la console Chrome DevTools et analysez les erreurs de validation qui sont rapportées

Vous aurez un tableau de ce type (pour les détails voyez ici) :

Validateur AMP

Ce tableau liste des exemples d’erreurs de validation de pages au format AMP (Accelerated Mobile Pages)

Si vous êtes développeur web : comment valider le code d’une page AMP

Vidéos

Voici une présentation de 25mn par Malte Ubl, responsable technique du projet AMP :

Une autre présentation par Paul Bakaus :

Quelques exemples de chargement de pages web AMP

Note : les comparaisons ont été réalisées sur les versions hébergées des pages AMP et non les versions optimisées par les proxys de Google.

The Verge

New York Times

Conclusion

Actuellement AMP est adapté à l’optimisation des pages articles uniquement, car il limite beaucoup (trop) le développement de pages web enrichies. On se retrouve généralement avec des pages simplifiées, une sorte de version mobile light des articles. Les exemples fournis par Google ne sont d’ailleurs que des sites de news et des plateformes de blogs.

Le projet est amené à évoluer avec l’ajout de nouveaux composants, d’attributs HTML et de propriétés CSS autorisés. Mais il peut être rapidement adopté si Google annonce un effet bénéfique sur le ranking des pages optimisées AMP

A ce sujet, lisez le tutoriel AMP HTML et SEO !

Rien n’empêche cependant les développeurs de s’inspirer des bonnes pratiques utilisées pour accélérer le chargement de leurs pages : utilisation des iframes pour les composants tiers (publicités/scripts/images/vidéos), optimiser l’affichage au dessus de la ligne de flottaison, réduire l’utilisation de javascript, attribuer une taille pour chaque image…

Sur ce sujet, lisez le dossier décrivant comment diagnostiquer ce qui ralentit le chargement de vos pages.

Cet article vous a-t-il plu ?

Cliquez pour voter !

Laisser un commentaire

Remarques :

  • Si vous souhaitez poser une question ou détailler un problème technique, il ne faut pas utiliser le formulaire ci-dessous qui est réservé aux avis. Posez votre question directement dans le forum Gmail de WebRankInfo. L'inscription est gratuite et immédiate.

  • En postant un avis, vous acceptez les CGU du site WebRankInfo. Si votre avis ne respecte pas ces règles, il pourra être refusé. Si vous indiquez votre adresse email, vous serez informé dès que votre avis aura été validé (ou refusé...) ; votre adresse ne sera pas utilisée pour vous envoyer des mailings et ne sera pas revendue ou cédée à des tiers.

5 commentaires

Pierre Vican

Ce projet AMP va contribuer à développer l’intérêt des visiteurs qui font leurs recherches dans le web à partir de leurs smartphones. Il faut attendre l’évolution de cette technologie intéressante. Dans le courant de 2016, on y verra sans doute plus clair. Nous en parlerons à notre webmaster. Merci pour cette nouvelle.

Répondre
Wiloooo

Bonjour,

J’ai une question, est-il judicieux d’appliquer AMP sur ses pages d’actualités, si on est pas sur Google Actu France ?

Répondre
Olivier Duffez

Pour l’instant non, car Google ne donne pas accès aux pages AMP en dehors du carrousel, mais ça peut changer n’importe quand et mieux vaut être déjà prêt.

Répondre
Greg

Bjr Olivier, le lien vers le validateur est en 404

Répondre
Olivier Duffez

Merci Greg, j’en ai profité pour faire un lien vers ma page qui détaille comment valider une page AMP

Répondre