Comment utiliser le plugin WordPress officiel de Google AMP

Il est courant que la vitesse des sites Web soit plus lente sur un appareil mobile que sur un navigateur, et plus la page est riche en contenu, plus son chargement peut prendre du temps. Même si vous avez essayé plusieurs choses pour accélérer votre site, Google AMP et le plugin WordPress AMP peuvent vous donner le coup de pouce que vous recherchez.

Lorsqu'un site Web prend trop de temps à charger, cela peut augmenter votre taux de rebond. D'autre part, lorsqu'une page Web apparaît presque instantanément, l'expérience utilisateur (UX) s'améliore et votre trafic peut augmenter. Voici comment fonctionne Google AMP et comment l'utiliser sur votre site Web.

Un aperçu de Google AMP

Google AMP est un projet open source lancé en octobre 2015. AMP signifie « pages mobiles accélérées », mais Google AMP ne se limite plus au mobile ; aujourd'hui, il fonctionne également sur les pages de bureau. (Pour le bien de cet article, cependant, je parlerai principalement en termes de pages mobiles, car c'est là qu'AMP est le plus utile.) Le but de Google AMP est que le contenu Web se charge plus rapidement. Le plugin WordPress AMP est un moyen simple de convertir vos pages en versions AMP.

La façon dont cela fonctionne est qu'AMP accélère les pages Web grâce à des CSS, HTML et JavaScript limités. Fondamentalement, c'est un moyen de créer des pages Web extra-légères, ce qui réduit le temps de chargement. Le cache Google AMP héberge le contenu et la version mise en cache est ce que Google envoie aux utilisateurs, leur permettant de voir la page Web instantanément. Les grandes entreprises technologiques comme Google, LinkedIn, Reddit et Twitter prennent en charge Google AMP, et les AMP sont visibles sur toutes les applications, navigateurs et visionneuses Web.

Avantages et inconvénients de Google AMP

Bien que la plupart des sites Web bénéficient de Google AMP, il présente également quelques inconvénients. Voici les avantages et les inconvénients de Google AMP, qui vous aideront à décider si le plugin WordPress AMP vous convient.

Avantages

• Si vous obtenez beaucoup de trafic à partir de recherches mobiles, AMP peut améliorer l'UX et vous aider à obtenir un meilleur classement.
• Les utilisateurs mobiles qui sont bloqués avec une connexion Internet lente peuvent interagir avec votre site Web.
• Google met en cache tous les sites qui utilisent le framework AMP, ce qui peut aider à améliorer le classement de Google.
• Des temps de chargement plus rapides conduisent à un meilleur engagement, ce qui conduit souvent à plus de revenus.

Les inconvénients

• Étant donné qu'AMP utilise des CSS, HTML et JavaScript limités, les concepteurs de sites Web doivent créer des pages simplifiées. Certaines fonctionnalités et widgets, comme les animations, les boîtes « J'aime » des médias sociaux et les formulaires d'inscription intelligents, doivent être utilisés pour réduire le gonflement.
• Google AMP prend en charge Google Analytics, mais à part cela, il ne prend pas en charge la plupart des autres plates-formes d'analyse.
• Il n'y a pas non plus beaucoup d'options publicitaires prises en charge par Google AMP. Avec des plugins supplémentaires, cependant, vous pouvez ajouter des options publicitaires – plus à ce sujet plus tard.
• Il s'agit d'un inconvénient mineur, mais si vos pages mobiles sont déjà légères et optimisées, elles peuvent ne pas être sensiblement plus rapides en utilisant AMP, donc la configuration peut être une perte de temps.

Le plugin WordPress AMP

Le plugin Google AMP pour WordPress crée automatiquement des versions AMP de tous vos messages. Ensuite, les moteurs de recherche et les applications et services pris en charge par AMP savent où rechercher la version AMP de la page grâce à « amphtml » dans le code source. Le plugin fonctionne de manière transparente avec WordPress, que vous utilisiez le constructeur classique ou Gutenberg.

Le plug - in ne crée pas de thème mobile distinct et ne dirige pas les appareils mobiles vers une version AMP de votre site Web. Cependant, si un visiteur mobile trouve votre contenu sur une plate-forme comme Google, Pinterest ou Twitter, il verra la version AMP.

S'il n'est pas possible de rendre une version AMP d'une page, le plug-in s'assure que la version non-AMP se charge. Cela signifie que la plus grande partie possible du site sera optimisée pour AMP, et pour les parties du site qui ne peuvent pas l'être, elles s'afficheront et fonctionneront toujours selon vos besoins.

Fonctionnalités du plugin WordPress AMP

• Compatibilité et validation : si la conversion automatique en AMP n'est pas possible, vous obtiendrez des erreurs de validation détaillées afin que vous puissiez trouver un balisage non valide. Vous pouvez choisir de supprimer ou de conserver le balisage.
• Prise en charge des thèmes principaux : AMP est compatible avec tous les thèmes WordPress principaux. (Il est également compatible avec de nombreux thèmes non essentiels.)
• CSS Tree Shaking : supprimez automatiquement les CSS inutilisés pour obtenir le total dans la limite de 50 Ko AMP.
• AMP Stories : AMP dispose d'un générateur d'histoires qui vous permet de créer des publicités et des expériences en plein écran pour les visiteurs.

Source : AMP

Comment configurer et utiliser le plugin WordPress AMP

1. Installez et activez le plugin. Obtenez le plugin ici.

2. Accédez à Apparence et choisissez AMP. Vous verrez à quoi ressemble votre site Web lorsque vous utilisez un appareil mobile, et vous pouvez également afficher la version de bureau AMP. Si la page d'accueil ne peut pas utiliser AMP, vous recevrez cette notification :

Lorsqu'une page Web est convertie en AMP, il s'agit essentiellement d'une version allégée de l'original. Ci-dessous, vous pouvez comparer la version originale de mon article de blog à la version AMP – le logo (mon nom dans la police stylisée), les couleurs et les polices sont différentes.

3. Cliquez sur « Conception » pour mettre à jour la couleur du texte de l'en-tête, l'arrière-plan de l'en-tête et la couleur du lien, ainsi que le jeu de couleurs (clair ou foncé). Vous pouvez également choisir d'afficher un lien pour permettre aux visiteurs de quitter le mode lecteur.

4. Vous pouvez accéder à l'URL de n'importe quel article de votre site Web et ajouter /amp/ à la fin pour voir la version AMP de l'article. Si vous obtenez une erreur 404 lorsque vous essayez de voir la version AMP, allez dans Paramètres, puis Permaliens et cliquez sur « Enregistrer les modifications » en bas à gauche. Vous n'avez pas besoin d'apporter de modifications, mais en cliquant sur le bouton Enregistrer, votre structure de lien permanent sera actualisée, ce qui peut faire apparaître ces pages AMP pour vous.

Choisissez un mode de site Web

Le plugin WordPress AMP propose trois modes de site Web, auxquels vous pouvez accéder en accédant à AMP dans la barre latérale gauche, puis en cliquant sur Général :

1. Standard : AMP est le cadre de votre site Web. Vous n'avez pas besoin de versions distinctes non AMP et AMP.
2. Transitionnel Chaque page a une URL canonique et une URL AMP.
3. Lecteur : chaque page a une URL canonique et une URL AMP. En mode lecteur, AMP n'est utilisé que sur des articles, des pages et d'autres types d'articles uniques ; les deux autres modes de site Web sont utilisés sur l'ensemble du site Web.

Par défaut, le mode lecteur sera choisi. Si vous passez à l'une des deux autres options, vous ne pourrez plus accéder à cette section "Conception" via Apparence.

Le mode de site Web que vous choisissez affectera les options supplémentaires dont vous disposez. Si vous sélectionnez standard ou transitionnel, vous aurez les options dans la capture d'écran ci-dessous. Si vous sélectionnez lecteur, vous ne pourrez choisir que parmi les trois types de contenu.

Personnalisez vos AMP avec des plugins supplémentaires

Étant donné que le plugin WordPress AMP n'a pas beaucoup d'options de personnalisation, vous pouvez utiliser d'autres plugins pour personnaliser davantage vos pages. Par exemple, AMP WP prend en charge les icônes sociales et dispose d'un schéma de couleurs personnalisable (parmi un tas d'autres fonctionnalités), et Ads for WP a une prise en charge publicitaire avancée pour AMP.

De plus, si vous utilisez actuellement Yoast SEO, vous pouvez utiliser le plugin Glue for Yoast SEO et AMP afin que vos pages AMP aient les bonnes métadonnées Yoast SEO. Après avoir installé et activé le plugin, vous définirez les options de Yoast SEO comme d'habitude. Le plugin opérera sa magie en arrière-plan.

Une fois que vous avez configuré des plugins supplémentaires liés à AMP, assurez-vous de revalider vos pages AMP. Cela vérifiera toute nouvelle erreur de validation qui n'existait pas auparavant.

Dernières pensées

La configuration de pages mobiles accélérées n'est qu'une des nombreuses techniques que vous pouvez utiliser pour accélérer le chargement de vos pages Web. Grâce au plugin WordPress, vous n'avez pas besoin de comprendre les tenants et aboutissants du fonctionnement d'AMP pour savoir qu'il est bénéfique pour votre site Web. Et avec un processus d'installation aussi simple, tout est fait pour vous, vous pouvez l'installer en un après-midi et convertir l'intégralité de votre archive en quelques jours.

Une dernière chose : si vous utilisez la console de recherche Google, ne vous inquiétez pas si vous ne voyez pas immédiatement les résultats de vos pages AMP. Google peut prendre son temps pour indexer vos AMP et afficher les données.

Vous voulez tirer encore plus de traction de votre site mobile ? Consultez notre guide sur la façon d'optimiser votre barre latérale sur mobile à l'aide de Divi Theme Builder.

Image en vedette via Fouaddesigns / shutterstock.com