AMP : comment devez-vous vous y prendre pour votre site web ?

Lees in het Nederlands - Read in English

Dans notre article précédent, vous avez pu lire à quel point AMP est important dans le cadre de l’optimisation pour les moteurs de recherche des sites d’actualité, mais aussi des boutiques en ligne. Mais qu’est-ce qu’AMP au juste et par où devez-vous commencer ?

Comment AMP fait-il charger votre site web plus rapidement depuis le carrousel ?

Pour rappel, Google utilise AMP (Accelerated Mobile Pages) pour permettre aux utilisateurs mobiles de surfer plus rapidement sur le Web. Pour chaque recherche effectuée par le biais d’un appareil mobile, il y aura dorénavant, en haut des résultats de la recherche, un carrousel qui comprend uniquement des pages AMP, qui sont optimisées pour un chargement rapide. Il est donc très important que votre boutique en ligne puisse décrocher une place dans ce carrousel.

Dans ce contexte, vous devez toutefois garder à l’esprit qu’AMP n’est pas en soi capable de rendre votre boutique en ligne même, avec tous ses produits, plus rapide. Pour cela, il existe des outils tels que Varnish, que l’on retrouve dans l’Hébergement Performance de Combell. Par contre, AMP veille à ce que votre site web soit plus rapidement sélectionné par Google, via le blog dans lequel vous publiez des actualités concernant vos produits, votre secteur d’activité, etc. En utilisant AMP, votre site web se retrouve dans le nouveau carrousel AMP et est chargé plus rapidement.

AMP est en fait un framework qui permet de créer des pages web mobiles. AMP s’articule autour de trois éléments principaux :

• AMP HTML : un sous-ensemble de HTML, avec ses propres balises et attributs, avec des fonctionnalités supplémentaires et ses propres restrictions. Ceux qui sont déjà habitués au HTML ordinaire n’auront aucune difficulté à se lancer dans l’AMP HTML. Les attributs « width » et « height » doivent p. ex. obligatoirement être complétés pour les images, de façon à ce que la page puisse être chargée, avec des espaces réservés aux images. Découvrez la liste complète avec le balisage obligatoire d’AMP HTML.
• AMP JS : chaque page AMP doit faire référence à un Framework JavaScript (via <script async src="https://cdn.ampproject.org/v0.js"></script>) qui gère le traitement rapide de l’image et le chargement asynchrone. Attention : le code JavaScript de tiers ne sera plus autorisé !
• AMP CDN : si vous le souhaitez, vous pouvez également utiliser le Content Delivery Network d’AMP, qui reprendra vos pages adaptées à AMP dans son système, les mettra en cache, les optimisera automatiquement et les servira plus rapidement.

Ces éléments ont pour but de permettre à tout le contenu situé au-dessus de la ligne de flottaison (« above the fold ») de votre site web d’être chargé immédiatement. Le contenu situé sous la ligne de flottaison (« below the fold », c’est-à-dire ce que l’internaute ne voit pas immédiatement sur le premier écran qui s’affiche sur son appareil) suit plus tard. AMP connaît en outre les dimensions des images et d’autres médias interactifs tels que les carrousels avant qu’ils soient entièrement chargés. L’espace vide est en quelque sorte « réservé » pour être comblé ultérieurement. Fini donc les décalages incessants de la page lorsque celle-ci est en train d’être chargée ; le visiteur peut commencer à lire sans devoir attendre.

Un chargement plus rapide, cela signifie aussi une lecture plus rapide, ce qui fait que le visiteur peut également voir plus de contenu sur votre site web. Il s’agit d’une situation gagnant-gagnant, tant pour l’utilisateur que pour votre boutique en ligne.

Concrètement, que signifie AMP pour le code HTML de votre site d’e-commerce ?

• En principe, vous devriez avoir deux versions différentes d’une même page : la version originale et la version AMP. La version AMP ne permet pas d’utiliser des iFrames et autres scripts JavaScript (bien qu’il existe déjà un hack permettant de tout de même utiliser des iFrames).
• Tout le CSS doit être « inline », et la taille des pages doit être inférieure à 50 Ko. Les polices spéciales, qui nécessitent souvent un temps de chargement plus long, ne pourront être chargées que via une extension amp-font spéciale.
• Remplacez la balise <img> par la balise <amp-img> et utilisez les attributs « width » et « height »
• Pour vos GIF animés, utilisez le composant amp-anim.
• Pour vos vidéos, utilisez la balise amp-video (et pour les vidéos YouTube, utilisez la balise amp-youtube).

AMP prend en charge le SGC Drupal ou WordPress de votre boutique en ligne

Utilisez-vous un système de gestion de contenu tel que Drupal ou WordPress pour votre site web ? Dans ce cas, vous pouvez très facilement tirer profit de ce coup de pouce pour votre page.

• Si vous utilisez un blog hébergé chez WordPress.com, AMP est activé automatiquement lorsque le visiteur arrive sur votre blog via une recherche effectuée depuis son appareil mobile. (à lire aussi : Comment coupler votre nom de domaine (enregistré chez Combell) à votre blog gratuit sur WordPress.com ?)
• Si vous hébergez vous-même votre blog WordPress, installez le plugin AMP
• Si vous utilisez Drupal, utilisez le nouveau module Drupal 8, qui offre une prise en charge d’AMP.

Découvrez l’hébergement WordPress et l'hébergement Drupal

Les publicités sur votre site web fonctionnent-elles aussi avec AMP (Accelerated Mobile Pages) ?

Un des objectifs d’AMP est de trouver le juste milieu entre les publicités, qui sont indispensables pour les annonceurs, et la convivialité – les utilisateurs n’étant en fin de compte jamais très emballés par la pub. Les annonces publicitaires dans les pages AMP seront fournies en collaboration avec divers réseaux d’annonceurs. Google a par contre prévenu que les annonces ne peuvent pas être trop intrusives. Les annonceurs peuvent voir des exemples d’annonces acceptables sur cette page GitHub.

Les éditeurs qui utilisent des paywalls et des abonnements ont quant à eux intérêt à lire ces informations sur l’extension AMP Access.

AMP permet-il également d’avoir accès à des données d’analyse d’audience concernant votre boutique en ligne ?

Oui ! Et ici, les trackers d’analyse d’audience, qui ralentissent si souvent le chargement sur les sites web ordinaires, sont d’ailleurs même réduits au strict minimum. Le composant Amp-Pixel est une simple balise qui vous permet de voir vos pages consultées, et le composant étendu Amp-Analytics permet d’obtenir d’autres données d’analyse d’audience via Google Analytics. Pour de plus amples informations à ce sujet, informez-vous au sujet d’AMP Analytics.

Voulez-vous en savoir plus ?

Retrouvez de plus amples informations chez nos collègues de Practical ECommerce (au sujet du SEO pour l’e-commerce via AMP), TechCrunch (au sujet des pages AMP dans les résultats de recherche et de la prise en charge de WordPress pour AMP), WebProNews (au sujet d’AMP et Drupal 8), SearchEngineLand (par où commencer avec AMP), et bien entendu aussi sur le site du projet AMP même et sur le blog d’AMP HTML.