WordPress : Installe l’AMP pour séduire les mobinautes

/

article amp

T Tu vas créer une version allégée de ton site spécifique pour les mobiles.

Ton site va se charger en un clin d’œil pour le plus grand bonheur de tes lecteurs.

mobile amp
  • Les avantages
    • Une vitesse de chargement inégalée
      (plus de 2 fois plus rapide)
    • Un taux de rebond plus faible
  • Les inconvénients
    • La disparition de l’habillage du site
    • La perte des pop-ups et boutons de partage des images
    • Peu adapté pour les sites d’e-commerce
    • Le HTPPS est nécessaire
    • Seuls certains réseaux publicitaires sont compatibles

Note : Cette extension conserve toujours son attrait mais elle est incompatible avec Rank Math. Je l’ai désinstallé pour l’instant.

Cet article prend environ 5 minutes à lire. Si tu n’as pas le temps, tu peux l’épingler sur Pinterest pour le lire plus tard.

Créé une version AMP de ton site pour optimiser le chargement sur mobiles : 1 seconde !
picto articles avancés
Avancé

Présentation de l’AMP

L’Accelerated Mobile Pages est une technologie récente (2016) qui vise à accompagner l’essor de la consultation sur mobile. Ce projet open source est activement soutenu par Google.

Voici 3 versions de la même page  :

Site standard sur PC

site version classique

Le temps de chargement de 2,22 secondes est honorable pour une page de 2,6 Mo.

test vitesse version standard

En version responsive

version responsive

Les performances sont strictement identiques à la version ordinateur.

En version AMP

version amp

Le temps de chargement passe à 1 seconde (-54%) pour une taille de 740 Ko (-72%).

test vitesse amp

AMP et responsive ne sont pas équivalents

Le responsive est une présentation avec une largeur adaptée aux mobiles de ton site. Il comporte exactement les mêmes caractéristiques que ton site sur ordinateur.

L’AMP utilise une autre technologie qui écarte de nombreuses fonctionnalités et vise la vitesse de chargement en priorité.

Pour qui ?

Les sites avec un profil éditorial sont de parfaits candidats. Le contenu texte est privilégié.

La contrainte est forte pour la conversion qui devient compliquée sans pop-ups. Tu décides quelles pages seront disponibles en AMP et peux conserver ta page d’accueil en version standard par exemple.

Il est grand temps de passer à la pratique.

Installe l’AMP sur WordPress

  • Rechercher Better AMP dans les extensions
  • Installer et activer
extension wordpress better amp
  • Tester un article de ton site en ajoutant /amp/ à la fin de l’URL. Par exemple : https://www.pourpasunrond.fr/amp/elementor/

Note : Si tes images ne s’affichent pas : désactive les extensions de chargement progressif des images (BJ Lazy Load par exemple n’est malheureusement pas compatible)

Tu peux le remplacer par A3 Lazy Load.
Vider le cache et retester.

Traduction

Menu Better AMP > Translation

better amp menu

Comme souvent, il faut traduire l’extension en Français.

  • Compléter les champs
  • Bouton Enregistrer les modifications

Voici le détail :

  • Previous : Précédent
  • Next : Suivant
  • Page
  • of %d%d : de %
  • By %s1 on %s2 : de %s1 le %s2
  • Browse Author Articles : Découvrir les autres articles de l’auteur
  • Comments : Commentaires
  • Add Comment : Commenter
  • Share : Partager
  • View Desktop Version : Passer sur la version PC
  • Read more : Lire la suite
  • Large Listing Date Format : D M Y
  • Search on site : Recherche
  • Search input placeholder : Recherche …
  • Search button : Recherche
  • Header
  • Tags : Etiquettes
  • 404 Page Message : Oops! Cette page est introuvable.
  • Browsing : Navigation
  • Archive
  • Browsing category : Consulter la catégorie
  • Browsing tag : Consulter l’étiquette
  • Browsing author : Consulter par auteur
  • Browsing yearly archive : Consulter les archives de l’année
  • Browsing monthly archive : Consulter les archives du mois
  • Browsing daily archive : Consulter les archives du jour
  • Browsing archive : Consulter les archives
  • Browsing shop category : La boutique
  • Browsing shop tag : Les produits
  • Related Posts : Les articles similaires
  • Edit Comment : Modifier
  • Reply : Répondre
  • Reply To %s : Répondre à %s
  • Previous : Précédent
  • Next : Suivant
  • Page %1$s of %2$s : Page %1$s sur %2$s
  • Asides : A part
  • Galleries : Galeries
  • Images
  • Videos : Vidéos
  • Quotes : Citations
  • Links : Liens
  • Statuses : Statuts
  • Audio
  • Chats
  • Return to post : Revenir sur l’article « %s »
  • Click here : Cliquer
  • Play Video : %s pour lire la vidéo
  • Play Audio : %s pour écouter
  • Download File : %s pour télécharger
  • Next Attachment : Suivant
  • Previous Attachment : Précédent
  • Shop : Boutique
  • Product Description
  • Product Reviews : Commentaires(%s)
  • View : Vue
  • Sale! : Vente
traduction

Personnalise l’apparence

Better AMP > Customize AMP

AMP Theme dans le menu de la personnalisation

personnalisation amp

Header

  • Charger ton logo en version allongée : 230 X 40 pixels recommandé. Il sera sur un aplat de couleur. Si besoin, n’oublie pas de mettre un fond blanc.
  • Bouton Publier
amp logo du header

Sidebar

La barre latérale est intégrée dans le menu.

  • Sélectionner un logo : 150 X 150 px recommandé (le favicon fonctionne bien)
  • Compléter les adresses de tes réseaux sociaux
barre latérale
  • Indiquer sa page de mentions légales : <a href= »https://www.tonsite.fr/ta-page/ » target= »_blank » rel= »noopener »>Mentions légales</a>
  • Sélectionner Yes pour renvoyer sur ta page standard
pied de page

Posts

  • Changer Show share count? en No, don’t show si comme moi, les compteurs de partagesont peu flatteurs.
  • Cocher les réseaux sociaux sur lesquels tu souhaites des partages
articles

Homepage

Par défaut, ta page d’accueil est remplacée par une sélection d’articles.

J’ai préféré conserver la page classique du site même si cela n’est pas parfait.

  • Cocher
  • Trouver sa page dans le menu déroulant Front page
page d'accueil

Color

Tu vas retrouver une partie de la palette de couleurs de ton site.

  • Theme Color : bandeau supérieur
  • Background Color : bandes latérales
  • Content Background Color : fond sous le texte
  • Footer Background : pied de page
  • Footer Navigation Color : menu du pied de page
  • Text Color : texte
couleurs

Google Analytics

  • Coller ton code UA
    Administration > Paramètres de la propriété > ID de suivi
google analytics

AMP Pages

  • Cliquer sur No pour Enable on HomePage si tu souhaites conserver ta page d’accueil actuelle.
  • Vérifier qu’article n’est pas en bleu dans Disabled post types
amp pages

Ajoute des menus

Apparence > Menus

Onglet Gérer les emplacements

  • Attribuer les menus qui apparaîtront dans la barre latérale et le pied de page
menus amp

Désactive l’AMP sur les pages de conversion

Sur chaque page et article, tu disposes d’une nouvelle option tout en bas de la colonne de droite.

  • Cocher Disable amp version pour désactiver l’AMP
désactiver amp

Vérifie le bon fonctionnement

Tu as un espace dans Google Search Console dédié au test de l’AMP.

Tu retrouveras tous le détail dans l’article consacré à GSC dans la partie Élimine les erreurs néfastes au bon référencement de ton site.

Mesure la performance

Tes pages AMP remontent dans tes résultats dans Google Analytics. Tu peux les isoler facilement.

Comportement > Contenu du site > Toutes les pages

Inscrire /amp/ dans le champ de recherche.

google analytics amp

Conclusion

L’AMP est une opportunité à saisir pour diffuser plus largement tes articles.

La part de la lecture sur mobile ne cesse de s’accroître. Une meilleure expérience utilisateurs ne peut que favoriser le trafic. Surtout quand Google soutient ce format.

[tweetshare tweet= »Installe l’AMP sur ton site WordPress pour séduire les utilisateurs sur mobiles – Tuto » username= »pourpasunrond »]

Malheureusement, la simplification du site rend la tâche du marketeur plus ardue en lui enlevant de nombreux outils pour séduire de nouveaux abonnés.

C’est un arbitrage qui fût simple pour moi car je ne vends pas de produits mais qui doit être soigneusement évalué avant de se lancer.

signature de Jean du site pour pas un rond

Des articles qui peuvent te plaire

Retrouve tous les articles pour Créer seul ton site

Pour aller plus loin :

bannière pour l'inscription à la newsletter
portrait jean

Je partage mes apprentissages et mes expériences depuis 2017 avec + de 100 tutoriels et ressources.

Tu devrais trouver ton bonheur pour créer ta marque, construire ton site puis le faire grandir et développer ton entreprise sur pour pas un rond.

Jean

Crédit photo : GraphicsFuel