Guide des AMP et des PWA

L'AMP et les PWA seront certainement deux des sujets de marketing de contenu les plus discutés au cours de l'année à venir. Dans ce guide, nous vous donnerons les informations clés sur les deux, y compris les définitions succinctes des AMP et des PWA, et comment vous pouvez les utiliser pour diffuser du contenu. Nous discuterons également des différentes manières dont AMP et PWA peuvent être utilisés pour aider à atteindre les objectifs marketing, en particulier en ce qui concerne le référencement.

Qu'est-ce que le projet AMP (Accelerated Mobile Pages Project) ?

AMP est synonyme de pages mobiles accélérées - et fondamentalement, c'est ce qu'il vous donne.

Les pages AMP fournissent essentiellement le même contenu qu'une page Web existante, comme un article en ligne. Le contenu est livré aux utilisateurs mobiles dans un format simplifié, basé sur un langage unique appelé AMP HTML, qui combine des éléments simples de HTML et CSS, et limite l'utilisation de JavaScript. Cela signifie que les pages AMP se chargent beaucoup plus rapidement que les pages Web d'origine sur lesquelles elles sont généralement basées.

Les utilisateurs de la recherche mobile ont pu accéder pour la première fois au contenu AMP en février 2016, lorsque Google a commencé à proposer des versions AMP des pages Web dans les résultats de recherche. Au moment de la rédaction, le contenu AMP dans les pages de résultats de recherche mobile est fourni à la fois sous forme de carrousel et d'histoire en vedette, permettant dans chaque cas à l'utilisateur de parcourir le contenu pertinent à partir de plusieurs sources. Le contenu est signalé dans les résultats de recherche Google par une icône AMP représentée par un éclair blanc dans un cercle bleu.

Le moyen le plus simple de produire du contenu AMP, adapté à la diffusion dans les fonctionnalités de recherche Google AMP, consiste à modifier le code HTML du contenu existant en AMP HTML, puis à valider la page et à la préparer pour la découverte. Amp.dev propose aux développeurs un tutoriel simple sur la façon de convertir une page HTML en une page HTML AMP.

Les pages AMP sont presque toujours liées canoniquement à d'autres pages. Cela signifie que leur URL a une balise rel "canonique" qui indique aux moteurs de recherche que la page est identique à une page de votre site Web. La version non AMP de la page a la primauté du point de vue du référencement.

Il existe une exception clé à cette règle, sous la forme de sites Web uniquement AMP qui sont actuellement créés par certains éditeurs en ligne.

John Mueller, analyste Google Webmaster Trends, a informé les webmasters que les sites Web uniquement AMP peuvent être une bonne chose :

"Je ne vois pas de problème à utiliser un site uniquement AMP - c'est un excellent cadre pour créer des sites rapides relativement facilement. Puisqu'il s'agit essentiellement de HTML, cela fonctionnera de la même manière que n'importe quelle autre page HTML. C'est génial de voir plus de sites uniquement AMP apparaître, cela peut rendre les choses tellement plus faciles (pour l'exploration, l'indexation et le référencement en général) lorsque vous n'avez qu'une seule URL pour chaque élément de contenu !

Si vous souhaitez tester votre propre site AMP uniquement, nous vous recommandons de le configurer sur WordPress et d'utiliser le plug-in AMP for WP – Accelerated Mobile Pages.

AMP est un projet open source en cours avec des applications dans les e-mails et les publicités, ainsi que du contenu Web. Pour des informations complètes et à jour sur le projet, visitez Amp.dev.

Que sont les PWA et pourquoi devrais-je commencer à les utiliser ?

Une application Web progressive (PWA) est une application Web qui augmente une page Web avec des fonctionnalités et des éléments d'expérience utilisateur (UX) que l'on trouve traditionnellement principalement dans les applications natives. En d'autres termes, ils font en sorte que le contenu Web agisse comme le contenu d'une application.

L'expérience utilisateur PWA comporte les étapes suivantes :

1. L'utilisateur ouvre la page PWA via son appareil mobile. Il agit comme une page Web normale ;
2. L'utilisateur reçoit une invite pour ajouter la page à l'écran d'accueil de son appareil ;
3. L'utilisateur accepte l'invite. La page apparaîtra alors et agira comme une application sur leur écran d'accueil.
4. L'UX continue du site Web/PWA comporte des éléments typiques de l'UX de l'application native.

Transformer du contenu Web en PWA est un travail pour votre développeur Web, nécessitant des compétences en HTML et JavaScript.

Google a des critères étendus pour ce qui constitue une PWA « de base » ou une PWA « exemplaire ».

PWA de base :

• Sont servis via HTTPS
• Sont réactifs sur les tablettes et les appareils mobiles
• Contenir des URL qui se chargeront toutes hors ligne
• Fournir des métadonnées pour "Ajouter à l'écran d'accueil"
• Chargez rapidement, même en 3G
• Travailler sur plusieurs navigateurs (y compris dans Chrome, Edge, Firefox et Safari)
• Fournir une transition rapide entre les pages
• Avoir une URL dédiée pour chaque page

La satisfaction de ces critères est cruciale pour la viabilité et la portée potentielle d'une PWA (ou d'une future PWA) dans Google Chrome.

Les critères des PWA exemplaires sont plus approfondis. Consultez la liste de contrôle des applications Web progressives de Google pour obtenir des informations complètes.

Les PWA offrent de nombreux avantages. Après le premier chargement, ils chargent généralement le contenu plus rapidement que la plupart des pages Web traditionnelles. Cela aide à retenir l'attention de l'utilisateur lorsqu'il navigue dans plusieurs éléments de contenu, car cela réduit la fenêtre de temps pendant laquelle il pourrait s'éloigner en raison du chargement lent du contenu. Si vous souhaitez encourager les utilisateurs à consommer une série d'éléments de contenu consécutivement, il serait judicieux de diffuser ce contenu via une PWA.

Un autre avantage clé est que les PWA peuvent donner aux marques une présence continue sur l'écran d'accueil de l'appareil mobile de l'utilisateur. Cette opportunité arrive à point nommé, car de nombreux éditeurs ont du mal à être compétitifs sur un marché d'applications natives encombré où la rétention des applications après 90 jours est aussi faible que 4 %, et les utilisateurs passent 77 % du temps d'utilisation global des applications sur leurs 3 principales applications (source : Téléchargement d'applications et statistiques d'utilisation (2019) - Business of Apps).

Les PWA changent potentiellement la donne pour les éditeurs ciblant les jet-setters ou les lecteurs ruraux, car ils peuvent charger du contenu lorsque l'utilisateur est hors ligne.

Un inconvénient potentiel des PWA est qu'elles semblent parfois fonctionner de manière imprévisible dans les résultats de recherche Google.

Selon Ignite Visibility, les sites visant à obtenir du contenu indexé par les PWA à des fins de référencement devraient «soit avoir une base HTML et charger l'application Web progressive par-dessus, [ou] utiliser un outil comme prerender.io et/ou pushstate».

Le site Web communautaire PWA Stats maintient une liste en direct des statistiques sur les résultats que les marques ont produits en passant à une PWA, des temps de chargement réduits de Tinder à l'augmentation des revenus de Best Western.

Quelle est la différence entre AMP et PWA ?

Il existe une idée fausse commune selon laquelle AMP et PWA sont des technologies rivales ayant le même objectif.

S'il est vrai qu'un rôle clé des deux technologies est de charger le contenu plus rapidement pour l'utilisateur, AMP et PWA ont des forces, des faiblesses et des utilisations tactiques distinctes du point de vue du marketing.

Les pages AMP offrent des temps de chargement imbattables au premier clic. Cela les rend parfaitement adaptés pour attirer de nouveaux lecteurs, car la probabilité que les utilisateurs rebondissent en raison d'un chargement lent est réduite. Ils ont également une excellente visibilité dans les résultats de recherche Google. Cependant, AMP ne prend pas en charge les fonctionnalités avancées de la plate-forme telles que le contenu dynamique et les notifications push.

Les pages PWA se chargent relativement lentement au premier chargement, mais se chargent ensuite très rapidement à partir du deuxième chargement, ce qui peut entraîner de meilleurs temps de chargement et un taux de rebond réduit dans la relation continue entre le lecteur et votre contenu. De plus, les PWA peuvent prendre en charge des fonctionnalités de plate-forme avancées telles que le contenu dynamique, la navigation hors ligne et les notifications push, offrant ainsi aux spécialistes du marketing davantage de moyens d'influencer les parcours des utilisateurs et d'augmenter les conversions.

Les éditeurs en ligne peuvent combiner les avantages de l'AMP et des PWA en utilisant les deux technologies ensemble. Instapage décrit une telle approche dans son article sur les PWA vs AMP :

"[Pensez] à votre page AMP comme crochet à votre site Web. Il attrape l'utilisateur avec une charge instantanée, puis l'enroule dans votre application Web progressive. Cela vous permet de combiner les pages AMP à chargement rapide avec un [..] PWA dynamique.

Une autre option consiste à activer les fonctionnalités PWA dans une page AMP.

Alternativement, vous pouvez choisir de développer une PWA en utilisant AMP. Cette méthode est basée sur l'écriture d'une PWA en AMP HTML et sur l'utilisation d'un composant appelé amp-install-serviceworker pour activer les fonctionnalités avancées de la PWA.

Quelle option est la meilleure pour le référencement et les classements de recherche : AMP ou PWA ?

À notre avis, la réponse est un peu des deux, car AMP et PWA aident tous deux le référencement de différentes manières.

Les PWA rendent le contenu du site plus attrayant et peuvent donc augmenter le niveau de consommation de contenu des utilisateurs. Pendant ce temps, AMP diminue le taux de rebond en augmentant considérablement la vitesse de chargement des pages mobiles.

Dans les deux cas, il y a une amélioration des commentaires à Google sur les principaux facteurs de classement des pages Web, qui jouent un rôle dans la détermination des classements de recherche et de la visibilité globale de la recherche pour la page et son domaine.

Ainsi, la meilleure approche du point de vue du référencement pourrait être d'utiliser AMP et une PWA en combinaison, comme indiqué dans la section précédente de cet article.

Qu'est-ce que j'entends au sujet des controverses entourant l'AMP ?

Bien qu'il ne fasse aucun doute qu'AMP est un outil puissant pour distribuer du contenu Web et le charger plus rapidement, vous devez garder à l'esprit qu'il existe une controverse importante autour du projet.

Certains commentateurs considèrent l'AMP comme un moyen pour Google de nier les sites Web des éditeurs en ligne et d'usurper leur contenu, enfermant les utilisateurs dans une expérience optimisée pour et basée sur Google.

Comme le dit l'auteur de The Register, Scott Gilbertson :

« Ce n'est pas vraiment une question de vitesse. Comme pour tout ce qui évite les normes pour sa propre version modifiée, il s'agit de verrouillage. Des tonnes de pages dans le balisage Google AMP signifient des tonnes de pages optimisées spécifiquement pour Google et indexées principalement par Google et présentées principalement aux utilisateurs de Google. C'est la tentative de Google d'égaler la plate-forme de Facebook. Et oui, Facebook est bien pire que AMP, mais cela ne fait pas de Google AMP une bonne idée. Au moins, Facebook n'essaie pas de prétendre qu'il est ouvert.

De plus, les pages AMP sont affichées sans l'URL de l'éditeur ni les éléments de sa propre marque, dissociant ainsi le contenu de son éditeur.

L'argument le plus fort en faveur de l'utilisation d'AMP est peut-être pour les éditeurs. De nombreux producteurs de contenu multimédia parmi les plus importants au monde l'utilisent, des principaux fournisseurs d'informations comme The Guardian et Daily Mail aux éditeurs spécialisés comme Wired et Social Media Today. Cela soulève la question : si les principaux éditeurs de votre domaine utilisent AMP, votre publication peut-elle se permettre de ne pas le faire ?

Pour plus d'informations sur la controverse entourant l'AMP, consultez notre épisode de podcast sur le marketing numérique sur la façon de créer des sites Web rapides, qui comprend une interview avec le co-fondateur de Raven Tools, Jon Henshaw.

Les applications Web progressives (PWA) sont-elles l'avenir des applications ?

En décembre 2019, TechCrunch a rapporté la découverte étonnante que les 1% des éditeurs de l'App Store génèrent 80% des nouveaux téléchargements.

Cela brosse un tableau sombre pour les éditeurs numériques qui souhaitent accéder aux avantages que les applications peuvent apporter, notamment une présence soutenue de la marque sur les appareils mobiles des utilisateurs, un engagement accru des utilisateurs, la propriété de la plate-forme, un accès analytique complet et peut-être le plus important, un mobile optimal UX.

Dans le contexte de la diminution des téléchargements d'applications natives, les PWA semblent offrir de loin le meilleur moyen pour tous, sauf les plus grands éditeurs en ligne, d'accéder à ces avantages. Ils contournent la réticence des utilisateurs Web à installer une application à partir d'un marché d'applications, en les faisant plutôt passer à une application au sein d'une expérience de page Web ordinaire.

Les applications natives continuent de croître en termes de téléchargements mondiaux et de temps d'utilisation, et en ce sens, elles restent sans doute l'avenir des applications. Cela vient avec la mise en garde que la croissance est tirée par une puissante minorité d'éditeurs de premier plan.

Cela dit, il semble que les PWA pourraient jouer un rôle énorme dans l'avenir de la consommation de contenu mobile - un domaine dans lequel les avantages UX des PWA pourraient entraîner une adoption accrue de la technologie par les lecteurs et les éditeurs.

Conclusion : comment les spécialistes du marketing doivent-ils agir sur les AMP et les PWA ?

Le potentiel avéré des AMP et des PWA pour améliorer certains aspects de la performance du contenu et de l'UX suggère que ces technologies sont une piste importante à explorer pour les éditeurs en ligne.

AMP est le plus facile des deux à tester à une échelle limitée : vous pouvez simplement convertir quelques pages de contenu en AMP HTML et observer les résultats (dans les limites des analyses relativement limitées que Google fournit aux éditeurs AMP). Une PWA engage implicitement l'éditeur à fournir une expérience de style application à ses lecteurs sur une base continue, et ne doit donc pas être entreprise à la légère.

D'un autre côté, les PWA semblent offrir des avantages relativement non dilués, par rapport à l'AMP. Les lecteurs qui reviennent obtiennent des temps de chargement plus rapides, ainsi que les fonctionnalités avancées de style application qui manquent à AMP. Fondamentalement, l'éditeur conserve un contrôle et une propriété accrus du contenu.

Notre conseil aux éditeurs en ligne qui envisagent AMP et PWA est de commencer par tester AMP avec quelques pages de contenu, et d'étudier en profondeur l'option de déploiement d'une PWA à grande échelle. Qu'elles soient utilisées seules ou en combinaison, les deux technologies semblent devoir figurer dans la façon dont les utilisateurs mobiles consomment le contenu Web pour les années à venir.

obtenez votre adhésion gratuite maintenant - aucune carte de crédit requise

• La boîte à outils du marketing numérique
• Séances d'apprentissage vidéo exclusives en direct
• Bibliothèque complète du podcast de marketing numérique
• Les outils de benchmarking des compétences numériques
• Cours de formation en ligne gratuits

ADHÉSION GRATUITE