WordPress et la compatibilité mobile - Semrush & SeoMix

WordPress
et la compatibilité
mobile

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

Pourquoi
s’intéresser
aux mobiles ?

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

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.

Toutes les solutions
mobiles sont faisables
dans WordPress

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

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

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

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

Solution 1 : le site mobile dédié

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

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

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

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)

On teste !
✘ Search Console
✘ Outil de test mobile de Google
✘ Outils d’accessibilité
✘ Et surtout du bon sens

Lisible ?

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

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

Dans WordPress ?
✘ Une extension officielle :
https://wordpress.org/plugins/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 !

Comment tester ?
✘ La Search Console
✘ Les tests manuels
✘ L’outil de test AMP

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

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

✘ Rappel : vous devez refaire votre design

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

Sources image : https://dzone.com/articles/progressive-web-app-better-low-cost-mobile-presenc

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

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)

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

Dans WordPress ?
=> Des extensions existent, mais sont déconseillées…

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

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

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

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

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

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

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

WordPress et la compatibilité mobile - Semrush & SeoMix

Contenu connexe

Tendances

Similaire à WordPress et la compatibilité mobile - Semrush & SeoMix

Plus de Daniel Roch

WordPress et la compatibilité mobile - Semrush & SeoMix