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.
- Les avantages
- Une vitesse de chargement inégalée
(plus de 2 fois plus rapide) - Un taux de rebond plus faible
- Une vitesse de chargement inégalée
- 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.
Sommaire
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.
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
Le temps de chargement de 2,22 secondes est honorable pour une page de 2,6 Mo.
En version responsive
Les performances sont strictement identiques à la version ordinateur.
En version AMP
Le temps de chargement passe à 1 seconde (-54%) pour une taille de 740 Ko (-72%).
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
- 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)
Traduction
Menu Better AMP > Translation
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
Personnalise l’apparence
Better AMP > Customize AMP
AMP Theme dans le menu de la personnalisation
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
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
Footer
- 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
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
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
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
Google Analytics
- Coller ton code UA
Administration > Paramètres de la propriété > ID de suivi
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
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
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
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.
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.
Des articles qui peuvent te plaire
- [Référencement] Google t’offre tous les outils pour faire remonter ton site
- Installe et configure Yoast : l’extension qui facilite le référencement
- Intègre des données structurées sur ton site pour le SEO
Retrouve tous les articles pour Créer seul ton site
Pour aller plus loin :
- Pourquoi et comment installer AMP pour WordPress ? de WP Formation.
- Faut-il passer votre blog au format AMP ? par Tout sur WordPress.
- Étude de cas Google AMP – Les ventes ont chuté de 59% (Comment le désactiver) de Kinsta.
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
