octobre 30, 2020

Voici comment configurer simplement AMP pour votre site Web

Par damien

Plus tôt cette année, Google a fait une grande annonce: ils ont amplifié les pages mobiles.

Si vous n’avez pas entendu parler du nouveau développement de Google, appelé AMP, le moment est venu de vous en informer.

Si vous n’êtes toujours pas convaincu que votre site a besoin d’AMP, ne nous croyez pas sur parole, prenez celle du Washington Post.

Avec AMP, le Washington Post a augmenté de 23% les utilisateurs qui reviennent de la recherche mobile.

La publication a également montré une amélioration de 88% du temps de chargement du contenu AMP par rapport au Web mobile traditionnel.

Alors qu’attendez-vous? Il est temps de configurer AMP comme un champion! Continuez à lire pour savoir comment.

Qu’est-ce que l’AMP?

AMP signifie Accelerated Mobile Pages.

Ce framework HTML open-source permet aux pages Web de se charger instantanément.

Vous nous avez bien entendu. Même si vous avez un contenu riche tel que des vidéos et / ou des publicités, ne vous inquiétez pas, AMP vous couvre également.

En un mot, AMP est une version allégée de votre page Web et est un moyen d’accélérer votre site Web. Il contiendra toutes les bases de votre contenu, mais supprimera les extras qui ralentissent votre site.

Qu’est-ce que ça veut dire? Avec AMP, les visiteurs peuvent voir votre contenu instantanément, plutôt que d’avoir à attendre. Et comme ce temps d’attente peut atteindre jusqu’à 20 secondes horriblement longues, vous voudrez sauter dans le train AMP le plus tôt possible.

3 différentes parties d’AMP: comment fonctionne AMP

AMP est composé de trois parties différentes: AMP HTML, AMP JS, Google AMP Cache.

Avant de configurer AMP, explorons un peu plus ces parties de travail.

AMP HTML

Commençons par AMP HTML. Au-delà des bases, AMP HTML est du HTML avec quelques restrictions et quelques extensions.

Les restrictions AMP HTML garantissent des performances fiables. Les extensions permettent à un utilisateur de créer un contenu riche qui surpasse le HTML de base.

AMP JS

Nous avons ici une bibliothèque qui assure le rendu rapide des pages HTML AMP.

La bibliothèque AMP JS implémente toutes les meilleures pratiques de performances AMP.

Mais attendez, il y a plus! AMP JS gère également le chargement des ressources et vous donne les balises personnalisées de AMP HTML. Tout cela assure un rendu rapide de votre page.

Cache AMP Google

Enfin, le cache Google AMP peut être utilisé pour diffuser des pages HTML AMP mises en cache.

Réseau de diffusion de contenu basé sur un proxy, Google AMP Cache fournit tous les documents AMP valides.

Les tâches du cache Google AMP sont les suivantes:

Récupération des pages HTML AMP, mise en cache des pages HTML AMP et amélioration automatique des performances des pages.

Maintenant que nous savons quoi, il sera plus simple de configurer AMP, alors commençons.

Comment configurer AMP en 6 étapes indolores 1. Installez le plug-in AMP

Tout d’abord, pour configurer AMP, vous devrez l’installer.

Avant de pouvoir utiliser AMP sur votre site WordPress, vous devez trouver et installer le plugin.

Vous pouvez installer le plugin AMP WordPress officiel à partir du magasin de plugins WordPress et du site Github du projet.

Le moyen le plus rapide d’installer le plugin est via WordPress.

Si vous choisissez cette voie, effectuez simplement une recherche sur amp-wp dans la section «Ajouter nouveau». Vous le trouverez sur votre panneau d’administration Plugins WordPress.

Ensuite, installez le plugin AMP sur votre WordPress comme vous le feriez avec n’importe quel autre plugin.

Si vous recherchez la dernière version du plugin AMP, passez par Github et installez le plugin manuellement.

Pour cela, téléchargez d’abord le package Github. Vous pouvez le télécharger en choisissant «Télécharger le plugin» dans votre panneau «Ajouter un nouveau» plugins.

Ensuite, recherchez le fichier zip contenant le package. Ensuite, WordPress peut s’occuper du reste.

Vous pouvez activer le plugin et commencer à l’utiliser une fois le téléchargement terminé.

2. Essayez-le

Le plugin AMP officiel provient de l’équipe de projet AMP de Google. Cela en fait la version la plus à jour.

Le plugin officiel crée une version / amp / de chaque page et publication que vous avez.

Pour voir par vous-même, ajoutez “/ amp /” à la fin des URL.

Une autre option à utiliser, surtout si vous n’avez pas de bons permaliens, est d’ajouter «? Amp = 1».

Remarque: vous ne pouvez pas modifier ces pages AMP.

Si vous avez besoin de plus que ce que fournit le plugin de base, vous aurez besoin d’un autre plugin AMP.

PageFrog est un bon exemple de ce que vous pouvez utiliser.

Qu’est-ce que PageFrog?

PageFrog est un plugin conçu pour aider les éditeurs à optimiser et à gérer leur contenu pour les formats mobiles (tels que Google AMP).

Ce plugin fonctionne en s’appuyant sur le plugin AMP principal, qui vous permet d’éditer certaines des modifications qu’il apporte.

De plus, vous pouvez ajouter des fonctionnalités de style et de thème. Cela vous permettra même d’ajouter d’autres protocoles; par exemple, les articles instantanés de Facebook ou Apple News.

Consultez le magasin de plugins WordPress pour trouver PageFrog et quelques autres plugins AMP que vous pouvez utiliser.

3. Configurez votre site WordPress pour AMP

Après l’activation du plugin, vous avez terminé!

Pour la plupart des installations, vous créerez du contenu comme vous le feriez normalement. Le plugin AMP s’occupera du reste.

Sachez que certaines choses ne fonctionneront pas sur vos pages AMP par défaut, telles que votre code Google Analytics.

Si nécessaire, vous pouvez ajouter Google Analytics à vos pages AMP.

Vous pouvez même avoir de telles fonctionnalités sur vos pages mobiles. Cependant, vous devrez les ajouter manuellement au modèle de page single.php du plugin.

4. Ajouter des plugins SEO

Les pages AMP n’incluront aucun de vos outils ou fonctionnalités de référencement. Cela signifie que vous devrez ajouter un nouveau plugin SEO pour WordPress compatible AMP.

Heureusement pour vous, la plupart des développeurs de plugins SEO se sont occupés de cela. Ils ont ou auront des extensions AMP que vous pouvez vous.

Commencez par les installer séparément. Celles-ci sont indispensables pour garantir que toutes vos pages travaillent à l’amélioration du référencement de votre site.

5. Corrigez les erreurs

Testez vos pages AMP pour détecter les erreurs et les incohérences. Ensuite, corrigez-les.

Étant donné que l’AMP est toujours en évolution, il est prudent de dire que de nombreuses fonctionnalités pourraient encore avoir des bogues ou des problèmes à résoudre.

Pour résoudre ces problèmes, vous devrez travailler manuellement dans votre fichier de modèle. Faites-le avant de rendre vos pages AMP publiques.

En cas de changement, vous devrez peut-être refaire vos modifications chaque fois que vous mettez à jour le plugin.

6. Faites de la publicité sur vos pages AMP

Le HTML AMP ne peut pas être intégré directement car il n’autorise pas les annonces JavaScript.

Cependant, Google a conçu AMP pour autoriser certains types de publicité.

La version compatible AMP de vos plugins publicitaires vous aidera certainement.

Voici quelques exemples de fournisseurs d’annonces pris en charge:

A9

AdReactor

Google adsense

AdTech

Double-clic

Avez-vous configuré AMP vous-même? Qu’avez-vous fait différemment? Dites-nous les astuces que nous avons manquées et vos conseils AMP dans les commentaires!