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

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

27.
Normal AMP

28.
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 !

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

30.
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

31.
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

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

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

34.
Solution 6 : les PWA

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

36.
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

37.
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)

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

39.
Normal PWA

40.
Solution 6 : les PWA

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

42.
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

43.
Firefox mobile Bug de contenu

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

45.
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

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

47.
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

48.
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

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