logo-small logo-small_halloween

La compatibilité mobile de WordPress et le SEO #semrushconf

55
Wow-Score
Le Wow-Score montre la capacité d'engagement d'un billet de blog. Il est calculé en fonction de la corrélation entre le temps de lecture actif de l'utilisateur, sa vitesse de défilement et la longueur de l'article.
En savoir plus

La compatibilité mobile de WordPress et le SEO #semrushconf

Alina Petrova
La compatibilité mobile de WordPress et le SEO #semrushconf

Nous sommes très heureux d’avoir pu accueillir à nouveau Daniel Roch, fondateur de SeoMix et expert depuis une dizaine d’années sur le référencement naturel de WordPress.

Dans ce webinaire, Daniel nous a expliqué comment optimiser un site WordPress pour qu'il soit adapté au mobile. Restez avec nous, pour découvrir ses conseils pratiques et les erreurs à éviter en optimisation mobile pour WordPress.

Pourquoi s’intéresser au mobile ?

D’abord pour une raison évidente de business. Au niveau mondial, il y a de moins en moins de trafic sur ordinateur et de plus en plus sur mobile (+ 25 % en un an vs. – 20 % pour desktop). Il faut donc absolument s’intéresser à la comptabilité mobile.

Deuxième raison : c’est extrêmement utile pour le référencement naturel. Cela améliore tout ce qui est indexation et crawl. Les Google bots navigueront alors plus facilement sur votre site.

Troisième raison : avec l’index mobile-first de Google qui est en train d’arriver et les AMP, Google met de plus en plus l’accent sur les sites compatibles avec le mobile.

Donc, vous devez vous intéresser absolument à tous les aspects mobiles de votre site. En 2107, c’est incontournable !

Pourquoi WordPress ?

Beaucoup de gens ont une vision basique de cet outil, et ils ne s’intéressent pas à toutes ses possibilités. Par exemple, WordPress a tout ce qu’il faut pour une compatibilité mobile parfaite avec un temps de chargement excellent.

WordPress renferme de nombreuses fonctions pour le mobile. Daniel nous donne des exemples de quelques-unes :

  • wp_is_mobile() : pour savoir si l’utilisateur utilise un appareil mobile (pour le rediriger ou changer le chargement des contenus)

  • add_image_size(). Pour adapter les images aux différents types d’écrans. Vous pouvez utiliser l’extension Ajax Thumbnail Rebuild pour régénérer toutes les miniatures et les tailles d’image.

Hooks Wordpress

Les solutions avec WordPress

Daniel rappelle quelques généralités sur WordPress et insiste particulièrement sur les hooks, ces portes d’entrée qui permettent à votre développeur d’intercepter le code et de le modifier. La plupart des solutions que Daniel va donner se basent sur les hooks.

Créer un site mobile à part entière (m.monsite.fr)

Daniel déconseille de créer plusieurs installations WordPress différentes et recommande plutôt l’installation multisite.  

Mais d’une manière générale, créer un site dédié n’est pas la meilleure solution, car ça provoque beaucoup de problèmes liés au gestion de contenu pour synchroniser les sites. Et ça entraîne également des problèmes d’indexation, car vous donnez deux fois plus de contenu aux moteurs de recherche, ainsi que des problèmes de duplication de contenu.

Daniel recommande carrément d’oublier cette solution.

Installer une extension pour avoir un site mobile

Cette solution avait le vent en poupe il y a quelques années. L’extension gère alors automatiquement pour vous l’intégralité de la version mobile de votre site.

WPtouch est la plus connue : elle crée un site mobile avec les mêmes URL.

Daniel déconseille également cette solution. En effet le design et les contenus seront différents (vous n’aurez pas le même menu, footer, etc.), et il y aura aussi des problèmes de performance.

Avoir un thème Responsive

Daniel est catégorique : c’est obligatoire. Il faut donc utiliser le Responsive Design, c’est-à-dire que tout l’aspect visuel va s’adapter en temps réel à la taille d’écran de l’utilisateur. Et vous n’avez pas à vous soucier de son appareil.

Dans ce cas, il ne faut pas oublier quelques points :

  • Faire attention lorsqu’on rajoute des extensions (une extension tableau, par exemple), car il est possible qu’elles ne soient pas prises en compte par le thème et cassent toute la compatibilité de la page.

  • Il faut que les utilisateurs, ceux qui ajoutent du contenu, soient formés. Par exemple, quand on ajoute une vidéo, il ne faut pas copier-coller le petit bout de code que YouTube nous donne, mais insérer l’URL de la vidéo.

  • Avoir un site bien paramétré (robots.txt, notamment, qui peut empêcher de tester la comptabilité mobile)

Il ne faut pas hésiter à tester la compatibilité mobile des pages, par exemple avec la Search Console ou en donnant une URL à l’outil de test mobile de Google. Il existe aussi plein de logiciels d’accessibilité.

Mais il ne faut pas oublier le simple bon sens. Par exemple, si vous affichez du texte sur une image, quand celle-ci rétrécit, le texte se déplace et peut ne plus être lisible (car il se retrouve sur la même couleur que sa police, par exemple).

Lisibilité du texte

L’application mobile

Cela consiste à pouvoir fournir une appli mobile sur Google Play ou App Store à mes utilisateurs. C’est excellent pour le marketing, mais ça ne transforme pas WordPress en site compatible mobile. L’appli mobile ne remplace pas les autres solutions. C’est un supplément, que Daniel conseille pour fidéliser sa clientèle.

Google AMP

Il s’agit d’une solution pour rendre vos pages les plus rapides possible à charger.

Pourquoi faire de l’AMP ? Parce que ça permet une meilleure visibilité sur mobile (en particulier avec Google News) et parce que, bien sûr, ça améliore le temps de chargement.

Pour le faire dans WordPress, Daniel recommande l’extension WordPress AMP.

Mais quelle que soit l’extension qu’on utilise, il s’agit de bien s’assurer que :

  • les URL sont uniques  /amp

  • entre l’URL AMP et l’URL normale, on a utilisé des canoniques

  • on a ajouté le bon code Analytics pour suivre nos visites

  • les données sont structurées

On peut tester ses AMP avec la Search Console manuellement ou avec l’outil gratuit en ligne de test AMP. 

Les extensions WordPress, parfois, ne mettent pas de l’AMP partout, il faut donc bien tout tester.

Auditez vos pages AMP

avec SEMrush Site Audit

Please specify a valid domain, e.g., www.example.com

Les Progressive Web Apps (PWA)

Qu’est-ce que c’est ? Grosso modo, ça reste des sites web, mais qui ne réagissent pas comme des sites traditionnels, et s’associent à plein d’avantages qu’ont les applis mobiles. Les Progressive Web Apps sont à mi-chemin entre les applis et les sites traditionnels. Beaucoup de gens pensent que c’est l’avenir du web.

L’App Shell représente la trame de votre site et vous permet d’insérer du contenu. Elle contient un petit script, Service Workers, qui est installé entre votre téléphone et votre site web et injecte le contenu.

Service Workers

Les avantages de la PWA :

  • L’utilisateur n’a pas à l’installer (il n’y a donc pas de temps d’installation ni de mises à jour)

  • C’est cross-platform et cross-device

  • Pages extrêmement rapides à charger

  • Peut fonctionner hors ligne et l’utilisateur peut faire des notifications quand il perd sa connexion

  • Peut être indexée par Google

  • Amélioration progressive en fonction du device

En revanche, les PWA sont complexes à mettre en place.

Daniel déconseille d’utiliser les extensions WordPress qui existent pour la PWA, parce qu’elles ont plein de défauts. Une PWA est un énorme plus, mais à condition que ce soit bien fait.

Erreur Progressive Web App

Si vous faites une PWA avec une extension, il faudra la corriger.

Ou alors, vous la codez vous-même, mais sachez que ça vous prendra beaucoup de temps. Dans ce cas, Daniel recommande d’utiliser la REST API de WordPress pour envoyer et recevoir des données au bon format, et de « jouer » avec les hooks suivants :

  • stylesheet

  • template

  • theme_root

  • theme_root_uri

Peut-on allier PWA et AMP ?

Le problème de l’AMP, c’est qu’on est énormément bridé sur le rendu du contenu (les fonctionnalités, les scripts, etc.). La PWA a de gros avantages pour l’utilisateur : envoi de notifications, mises en cache...

Il s’avère qu’on peut allier PWA et AMP, et c’est même Google qui le conseille.

Pour cela, il faut d’abord mettre en place l’AMP (en n’oubliant pas de faire les corrections nécessaires). Et une fois que l’AMP fonctionne, que Google trouve vos contenus, etc., vous appliquer par-dessus le Worker de la PWA.

Ainsi l’AMP permet d’attirer l’internaute sur votre site, puis la PWA le fidélise.

Pour récapituler comment rendre réellement WordPress compatible pour tous les périphériques mobiles, Daniel conseille de :

  1. Avoir un site responsive
  2. Former ceux qui gèrent le site au quotidien
  3. Mettre en place l’AMP
  4. Rajouter une Progressive Web App
  5. (En option) Basculer tout le site en PWA (ou bien avoir un site mobile en PWA et site normal pour desktop).

Pour terminer, Daniel recommande Google Lighthouse pour vérifier que votre site obéit à toutes les préconisations sur les PWA.

Nous remercions Daniel pour son intervention riche en informations de qualité et en conseils utiles.

Auditez vos pages AMP

avec SEMrush Site Audit

Please specify a valid domain, e.g., www.example.com

Je suis responsable du Content Marketing chez SEMrush France et rédactrice sur ce blog.
Passionnée par la création de contenu, j'écris des articles sur le Content marketing, le SEO et la stratégie digitale.
J'ai plus de trois ans d'expérience dans la rédaction et la traduction de contenu pour le web.
Adresse mail : a.petrova@semrush.com
===========================================================================================
Content Marketing manager at SEMrush French Marketing team.
I write about Content Marketing, SEO and Digital Strategy.
My email: a.petrova@semrush.com
Partager cet article
ou

Commentaires

Il reste 2000 caractères
Guillaume Guersan
Wahou, je ne connaissais pas toutes ces fonctions WordPress pour Mobile. Sinon, le choix du thème est CRUCIAL ! Il faut à tout prix le tester avec plusieurs OS mobiles, plusieurs tailles d'écran, et vérifier la "vitesse" / l'optimisation du thème pour mobile.