Découvrez la toute dernière conférence de Daniel Roch, de l'agence SeoMix, sur la compatibilité mobile de WordPress pour le référencement naturel. On y parle des éléments de base : un site WordPress responsive. Les slides présentent aussi les mauvaises solutions comme les applications mobiles, le site mobile dédié ou l'extension WordPress mobile. Daniel Roch y aborde ensuite des éléments treès efficace : la mise en place de Google AMP dans WordPress, ainsi que la mise en place d'une Progressive Web App dans ce CMS (une PWA).

1. WordPress
et la compatibilité
mobile

2. Hello !
Je suis Daniel Roch
Consultant en référencement naturel et WordPress
Créateur de l’agence SeoMix et de l’extension SEO KEY
Auteur du livre “Optimiser son référencement WordPress”
Conférencier compulsif
Suivez-moi sur @rochdaniel et seomix.fr

3. Pourquoi
s’intéresser
aux mobiles ?

4. N°1 : pour le potentiel

5. N°2 : pour
le SEO

6. Et WordPress ?

7. Et WordPress ?
WordPress gère les contenus
L’aspect visuel et l’HTML sont gérés par les
thèmes
Les extensions modifient ou injectent de l’HTML
WordPress est un outil qui peut faire du mobile

8. Quelques
fonctions mobiles
✘ wp_is_mobile() : l’utilisateur est-il sur mobile ?
✘ Tailles d’images
- add_image_size()
- Extension : Ajax Thumbnail Rebuild
- Scrset et sizes :
° wp_get_attachment_image_srcset()
° wp_get_attachment_image_sizes()
° wp_make_content_images_responsive()
✘ Etc.

9. Toutes les solutions
mobiles sont faisables
dans WordPress

10. Les solutions avec WordPress
✘ Une application mobile
✘ Un site mobile à part entière
✘ Un site mobile grâce à une extension
✘ Un site WordPress Responsive
✘ Google AMP
✘ Une progressive Web App

11. Quelques définitions
Je m’en fiche, WordPress c’est de la m****

12. Définitions
Post types : les
différents types de
contenus
Taxonomies : on
classe des contenus
Rewrites Rules : les
règles pour écrire de
jolies URL

13. Définitions
Les Hooks

14. Solution 1 : le site mobile dédié
m.monsite.fr
Avec WordPress, on peut faire cela avec :
✘ Plusieurs installations de WordPress différentes
✘ Une installation multisite

15. Solution 1 : le site mobile dédié

16. Solution 2 : un thème mobile
Installer une extension pour avoir un site mobile
Exemple :
WP TOUCH

17. Mauvaise idée car :
✘ Contenus différents
✘ Performances
✘ Design différent

18. Solution 3 : un thème responsive
C’est
OBLIGATOIRE

19. Solution 3 : un thème responsive
Pour cela, il faut :
✘ Un thème WordPress responsive
✘ Des extensions qui modifient le code et le contenu
SANS casser cette compatibilité
✘ Des utilisateurs formés
✘ Un site bien paramétré (robots.txt notamment)

20. Solution 3 : un thème responsive
On teste !
✘ Search Console
✘ Outil de test mobile de Google
✘ Outils d’accessibilité
✘ Et surtout du bon sens

21. Solution 3 : un thème responsive
Lisible ?

22. Solution 3 : un thème responsive
Lisible ?

23. Sur WordPress :
✘ Une extension pour gérer/publier (ex. WP-AppKit)
✘ On soumet dans chaque « App Store »
Excellent en marketing, mais ne rend pas WordPress
compatible mobile !
Solution 4 : L’application mobile

24. Solution 5 : Google AMP

25. Solution 5 : Google AMP
C’est quoi ?
✘ Un format web pour accélérer les pages mobiles
✘ C’est ni plus ni moins que de l’HTML
Pourquoi faire de l’AMP ?
✘ Meilleure visibilité sur mobile (encore + avec Google
News)
✘ Meilleurs temps de chargement

27. Solution 5 : Google AMP
Dans WordPress ?
✘ Une extension officielle :
https://wordpress.org/plugins/amp/

28. Normal AMP

29. Solution 5 : Google AMP
Que faut-il regarder ?
✘ Des URL uniques /amp
✘ Rel=amp et rel=canonical !!!!
✘ Le code Analytics à ajouter
✘ La présence de données structurées dans les pages
AMP
✘ Le design !

30. Solution 5 : Google AMP
Comment tester ?
✘ La Search Console
✘ Les tests manuels
✘ L’outil de test AMP

32. Solution 5 : Google AMP
Et WordPress ? Les extensions gèrent normalement :
✘ Les canonical
✘ Les liens rel=AMP
✘ Les scripts Analytics
✘ Le code HTML de base

33. Solution 5 : Google AMP
MAIS
✘ Attention aux incompatibilités (extensions et
utilisateurs)
✘ Seul le Post Type « article » est compatible par
défaut dans l’extension officielle :
add_action( 'amp_init', 'seokey_amp_add_cpt' );
function seokey_amp_add_cpt() {
add_post_type_support( ‘post-type', AMP_QUERY_VAR );
}
✘ Pas d’AMP pour l’accueil et les taxonomies

34. Solution 5 : Google AMP
✘ Rappel : vous devez refaire votre design

35. Solution 6 : les PWA
C’est quoi ?
✘ Un site web qui « réagit » comme une
application mobile
✘ C’est « l’avenir du web »…

36. Solution 6 : les PWA

37. Solution 6 : les PWA
Sources image : https://dzone.com/articles/progressive-web-app-better-low-cost-mobile-presenc

38. Solution 6 : les PWA
Les atouts ?
✘ C’est un site web
✘ Pas d’installation pour l’utilisateur
✘ Cross-plateform et Cross-device
✘ Rapide et dynamique
✘ Peut fonctionner hors-ligne et faire des notifications
✘ Peut être indexé par Google
✘ Progressive enhancement en fonction du device

39. Solution 6 : les PWA
MAIS complexe techniquement à mettre en place :
✘ Application Shell (le site)
✘ Worker (pour mettre à jour les contenus)
✘ manifest.json (pour permettre d’ajouter la PWA sur le
mobile)

40. Site mobile de lequipe.fr après la PWA (non WP)

41. Normal PWA

42. Solution 6 : les PWA

45. Solution 6 : les PWA
Dans WordPress ?
=> Des extensions existent, mais sont déconseillées…

46. Solution 6 : les PWA
Les dangers avec les extensions WordPress actuelles :
✘ Sur un même site, le contenu et les URL devraient être
identiques
PS : Avec des sites différents, il faut mettre en place des
rel=canonical et rel=alternate
✘ Les autres défauts :
- ressources peut-être bloquées (robots.txt, etc.)
- WebAnalytics non prévus
- bugs
- contenus pauvres

47. Firefox mobile Bug de contenu

48. Le template PWA doit être fait sur mesure
Ici, la PWA a un contenu pauvre par rapport au site

49. Solution 6 : les PWA
Coder soi-même ?
✘ Créer sa PWA :
- Application Shell (JS + PHP avec WordPress)
- Worker (en JS)
✘ Dans l’idéal, il faut utiliser la REST API
✘ Forcer le changement de thème :
add_filter sur les hooks suivants :
- stylesheet
- template
- theme_root
- theme_root_uri

50. Solution 7 : PWA + AMP
Peut-on allier les deux ?

51. Solution 7 : PWA + AMP
Oui !
Google conseille de :
✘ De mettre en place AMP
✘ Puis d’appliquer le Worker de la PWA lors du 1er clic :
<amp-install-serviceworker>
Source : https://www.ampproject.org/docs/guides/pwa-amp/amp-to-pwa

52. La compatibilité mobile de
WOrdPress en 5 étapes :
1. Avoir un site responsive (theme + plugins
compatibles)
2. Former les utilisateurs dans la rédaction de contenu
et la gestion du site
3. Mettre en place AMP
4. Rajouter par-dessus l’AMP une Progressive Web App
5. En option : basculer tout le site en PWA

53. Merci!
Des questions ?
@rochdaniel
daniel@seomix.fr
www.seomix.fr
www.seo-key.com