Qu'est-ce que AMP, faut_il s'y interesser en 2017 (oui!) et comment s'y prendre pour mettre en oeuvre AMP sur son site WordPress avec le maxiumm de chance d'en tirer des bénéfices.

1. Yannick Gaultier - weeblrpress.com
WordPress Bordeaux Meetup – 14 septembre 2017
Accelerated
Mobile Pages
Pourquoi et comment

2. WordPress Meetup Bx 09/17
Histoire
 développeur extensions
 début en 2006
 GPL seulement
 SEO, gestion contenu
 weeblrAMP pour WordPress!
2

3. WordPress Meetup Bx 09/17
Accelerated Mobile Pages
 AMP, c'est quoi ?
 Pourquoi ?
 Comment ?
3

4. WordPress Meetup Bx 09/17
Accelerated Mobile Pages
 Demo? Si ça veut bien!
4

5. WordPress Meetup Bx 09/17
AMP, c’est quoi ?
 Format web ouvert, centré sur la vitesse
 Développement open-source (Github)
 Pur HTML / javascript / super-optimisé
 Destiné aux mobiles, très bon sur desktop
 Depuis février 2016
5

6. WordPress Meetup Bx 09/17
AMP, c’est quoi ?
 Existent en parallèle de vos pages normales
 Créées automatiquement par un plugin
 Un lien (invisible) est ajouté aux pages
standard vers la version AMP
moteurs de recherche et autres savent qu’une page a
une version AMP
6

7. WordPress Meetup Bx 09/17
Découverte
des pages AMP
exemple.fr/ma-page/ exemple.fr/ma-page/amp/
7

8. WordPress Meetup Bx 09/17
AMP, c’est quoi ?
 Utilisent AMP:
 Recherche mobile: Google / Bing / Baidu
 Twitter, Pinterest, LinkedIn, Feedly…
 Fournissent pages AMP:
 Guardian, Le monde, BuzzFeed, Reddit, Snapdeal,
WordPress.com,…
 Shopify, Ebay, WooCommerce,…
8

9. WordPress Meetup Bx 09/17
Accelerated Mobile Pages
Pourquoi ?

10. WordPress Meetup Bx 09/17
AMP, pourquoi ?
 Utilisateurs: affichage ultra-rapide, sans à-coups
 Site + rapide
 + de vue
 + clicks
 + ventes,…
10

11. WordPress Meetup Bx 09/17 11
 SEO :
 raccourci pour la 1ère
page
 visibilité dans résultats
 Taux de conversion
 Officiellement, pas de
bénéfice pour le
référencement

12. WordPress Meetup Bx 09/17
Accelerated Mobile Pages
Comment ?

13. WordPress Meetup Bx 09/17
AMP, comment ?
 Des éléments HTML spécifiques
<amp-img>,<amp-video><amp-analytics>,…
 Pas de javascript du tout
 Pas de CSS externe
 <form>, sous conditions
 <iframe>, sous conditions
13

14. WordPress Meetup Bx 09/17
AMP, comment ?
 Codage à la main d’une version AMP
 Plugins pour CMS
 Services en ligne
14

15. WordPress Meetup Bx 09/17
AMP, comment ?
 Automattic fournit plugin « de base »
 Beaucoup d’autres extensions AMP
 Principe :
 extension convertit à la volée
 supprime le reste
 beaucoup de limitations
15

16. WordPress Meetup Bx 09/17
1. Bonnes pratiques

17. WordPress Meetup Bx 09/17
AMP, comment ?
 Définir stratégie
 Objectifs ? Affichage pub, inscription,
vente ?
 Ramener visiteurs vers site standard ?
 Navigation AMP ? recherche ?
 Interactivité: formulaire ? Commentaires ?
 Choisir ce que l’on convertit
17

18. WordPress Meetup Bx 09/17
AMP, comment ?
1. Rester AMP aussi longtemps que possible
 Navigation par menu, pages AMP
 Recherche avec résultats AMP
 Liens AMP entre articles ou produits
18
Certains préfèrent revenir vers pages
standards immédiatement.
Je préfère une expérience cohérente.

19. WordPress Meetup Bx 09/17
AMP, comment?
2. Maximum d’interactivité AMP
 Formulaire: inscription newsletter, demande contact
 E-Commerce: Ajout au panier, navigation produits
 Commentaires (Natif, Disqus), partagé entre AMP
et site standard
« expérience AMP » = presque une application
19

20. WordPress Meetup Bx 09/17
AMP, comment ?
3. Soigner la conception
 Unité avec le site
 Rester simple
 Beaucoup de choses sont
possibles malgré les
restrictions techniques
20

21. WordPress Meetup Bx 09/17 21
 Le pire!
 AMP augmente clics &
conversion
 Surtout pas le même look
que votre voisin

22. WordPress Meetup Bx 09/17
AMP, comment ?
Formulaires
(CF7, Gravity)
Commentaires
(WP, Disqus)
22

23. WordPress Meetup Bx 09/17
AMP, comment ?
E-Commerce
(WooCommerce)
23

24. WordPress Meetup Bx 09/17 24

25. WordPress Meetup Bx 09/17
AMP, comment ?
Non-WordPress
25

26. WordPress Meetup Bx 09/17
AMP, comment ?
 En résumé:
 Rester AMP aussi longtemps que possible
 Maximum d’interactivité sur AMP
 Personnaliser l’aspect, le + proche des
pages standard
26

27. WordPress Meetup Bx 09/17
2. Précautions

28. WordPress Meetup Bx 09/17
Validation
 Google n’accepte que les pages valides !
 Etape 1: Search Console
https://search.google.com/search-console/amp
 Etape 2: Structured data tester
https://search.google.com/structured-data/testing-tool/
Le + pratique = Extension Chrome AMP Validator
28

29. WordPress Meetup Bx 09/17
Mesure / Analytics
29

30. WordPress Meetup Bx 09/17
Promotion/partage
 Votre contenu pas forcément sur votre site
 Partage sur les réseaux: pas toujours la
bonne URL
 Afficher vos propres boutons de partage
30

31. WordPress Meetup Bx 09/17
Métadonnées
 Carrousel / Top Stories
 Métadonnées spécifiques obligatoires
 Une image largeur mini 696px
 Logo éditeur: hauteur 60px
31

32. WordPress Meetup Bx 09/17
AMP, en résumé
 L’amélioration au meilleur rapport qualité/prix
en 2017
 Personnalisation obligatoire, ne pas « juste »
installer le plugin
 Interactivité: formulaires, ajouter au panier, …
 Plugins avancés, ou développement requis
32

33. WordPress Meetup Bx 09/17
Merci 
 AMP
https://www.ampproject.org
https://ampbyexample.com/

https://www.weeblrpress.com/weeblramp