Avec l’arrivée, le 21 avril 2015, de la mise à jour de Google prenant en compte l’ergonomie mobile, il est temps de mettre vos sites à jour ! Si comme moi, vous travaillez avec WordPress, il existe plusieurs solutions très simples. Par exemple, installer un plugin comme Jetpack ou adopter un thème Premium avec un responsive design du plus bel effet.
Mais voilà, ce n’est pas toujours possible… Par exemple, si vous avez un site avec un thème non responsive, et que vous souhaitez le garder tel quel pour les utilisateurs d’ordinateurs de bureau. Dans ce cas, il vous faut créer un sous-domaine et rediriger vers ce dernier les utilisateurs de mobiles. Cela vous donne deux sites, avec deux installations de WordPress :
- http://www.votresite.com/
- http://m.votresite.com/
C’est exactement ce que j’ai dû faire sur un des sites sur lesquels je travaille. Et cela soulève plusieurs difficultés… Je vais donc vous donner ici la marche que j’ai suivie. Elle me semble efficiente, mais ce n’est peut-être pas la meilleure. Donc n’hésitez pas à me donner vos avis !
Les pré-requis pour votre site “mobile friendly”
Si vous utilisez deux URL distinctes, comme c’est le cas ici, Google vous donne plusieurs impératifs à respecter. Auxquels s’ajoutent d’autres impératifs, notamment le fait que vos pages “bureau” redirigent automatiquement vers vos page “mobile” responsives. En voici la liste :
- Vous devez gérer automatiquement les redirections, par exemple de http://www.votresite.com/page-1 vers http://m.votresite.com/page-1
- Vous devez empêcher l’indexation de votre site mobile pour éviter le duplicate content (et ce même si Google dit de ne pas trop s’en préoccuper).
- Vous devez empêcher la mise en cache désordonnée de chaque version de votre site, pour éviter que des utilisateurs bureau arrivent sur la version mobile, et vice-versa.
- Vous devez indiquer à Google quelles sont les pages “canoniques” et les pages “alternative”, avec les balises rel=”canonical” et rel=”alternate”.
Et vous devez faire tout ça avec WordPress (donc) !
La redirection de votre site bureau vers votre sous-domaine mobile
Vous pouvez certes modifier votre fichier .htaccess. Mais j’ai trouvé une solution plus simple, et qui me semble être plutôt bonne. J’utilise pour ceci le plugin “Mobile Site Redirect“. Il vous suffit de l’installer sur votre site “bureau” et d’y indiquer quelle est l’URL mobile de votre site. Le plugin se charge automatiquement de la redirection pour l’ensemble du site.
Simple et efficace. Vous pouvez choisir de rediriger mobiles et tablettes, ou seulement l’un d’entre eux. De tous les plugins de ce type que j’ai testé, c’est le meilleur. Certains d’entre eux ne marchaient pas du tout, ou se contentait de rediriger n’importe quelle page “bureau” vers la page d’accueil “mobile”.
Jusque-là, rien de bien compliqué donc. Passons à la suite !
Au niveau de votre fichier .htaccess
L’entête Vary: User-Agent
Pour indiquer à Google que vous utilisez des URL distinctes en fonction du type d’appareil à partir duquel se connecte votre visiteur, il faut que vous indiquiez cette variation, dans le header, avec les termes “Vary: User-Agent”.
Avec WordPress, certains sites conseillent de modifier le fichier functions.php de chacun de vos thèmes. Pour avoir essayé, cela ne fonctionne pas à tous les coups. Le plus simple est de modifier directement votre fichier .htaccess, en y ajoutant la ligne suivante :
Header append Vary User-Agent
Si vous voulez en apprendre plus sur la fonction de Vary (qui est “vary important”), je vous conseille de lire cet article (en anglais) : Vary: User-Agent header. A noter que, d’après Google, c’est le plus important à indiquer.
Où ajouter ce Vary: User-Agent ? Tout simplement dans les fichiers .htaccess de vos deux sites (bureau et mobile). En effet, cela permet d’indiquer à Google qu’il existe une variation de cette page, quelle que soit la version sur laquelle il arrive.
Empêcher l’indexation de votre site mobile
Pour empêcher l’indexation de la version mobile de votre site, il faut indiquer autre chose au niveau de votre fichier .htaccess. Mais attention, bien évidemment, ce coup-ci il faut l’indiquer seulement dans celui de la version mobile. Autrement, vous risqueriez de désindexer votre site bureau !
Voici, d’après Yoast, la façon de le faire correctement :
Header set X-Robots-Tag "noindex, nofollow"
Il vous suffit de rajouter cette ligne à votre fichier .htaccess. Attention à ne pas passer par le fichier robots.txt (je vous laisse l’article de Yoast mis en ligne ci-dessus si vous voulez savoir pourquoi).
Les balises rel=”caninocal” et re=”alternate”
Passons maintenant la question la plus épineuse. Pour indiquer à Google quelle page est la version alternative et quelle page est la version canonique, il va falloir rajouter ces deux balises dans l’entête de chacune de vos pages, ou dans le sitemap de votre site.
Sur votre site bureau : ajoutez la balise “link” rel=”alternate” sur chacune de vos pages pour indiquer l’URL de la version mobile.
- Par exemple, sur http://www.votresite.com/page-1, vous allez indiquer en rel=”alternate” la page http://m.votresite.com/page-1
Sur votre site mobile : ajoutez la balise “link” rel=”canonical” sur chacune de vos pages pour indiquer l’URL de la version originale.
- Par exemple, sur http://m.votresite.com/page-1, vous allez indiquer en rel=”canonical” la page http://www.votresite.com/page-1
Pourquoi c’est compliqué avec WordPress ?
Vous utilisez probablement un plugin SEO ou un plugin de génération de sitemap. Ces derniers génèrent automatiquement vos sitemaps dès que votre site est mis à jour. Donc même si vous modifiez votre fichier sitemap comme l’indique Google, il faudra le reprendre à chaque modif de votre site. J’ai donc adopté une solution différente.
La balise rel=”canonical” (sur le site mobile)
Dans le plugin WordPress SEO by Yoast, vous allez pouvoir indiquer, sur chacune de vos pages, l’URL canonique :
Pour cela, vous allez dans l’onglet “Avancé“, et vous pouvez y indiquer l’URL canonique (celle de votre site bureau). Il vous suffit de le faire pour chacun de vos articles, pages, voire catégories et mots-clefs. Si vous avez un gros site, ça risque de vous prendre du temps ! En même temps, modifier votre sitemap vous demanderait tout autant…
A noter que All in One SEO Pack propose aussi d’indiquer une URL canonique. Sauf que ça ne marche pas. Pour le vérifier, ouvrez la page modifiée avec All in One SEO Pack et affichez le code source. Vous verrez que la balise rel=”canonical” reste celle définie automatiquement par WordPress.
La balise rel=”alternate” (sur le site bureau)
Pour ajouter les balises rel=”alternate” sur votre site pour ordinateur de bureau, vous pouvez installer le plugin “Add Meta Tags“. Il vous suffira ensuite de décocher l’ensemble des options de ce plugin, et de laisser uniquement celle intitulée “Full Meta Tags Box” :
Cette option vous permet d’ajouter les balises meta de votre choix. Sur votre site bureau, vous allez donc pouvoir indiquer la page mobile alternative, et ce, encore une fois, pour chacune de vos pages. Voici ce qu’il faut que vous indiquiez (toujours dans l’exemple de votre “page 1”) :
<link rel="alternate" media="only screen and (max-width: 640px)"
href="http://m.votresite.com/page-1" >
Il vous suffit d’ajouter le code à cet endroit :
Notons enfin qu’avoir plusieurs balises “alternate” n’est pas un souci (au cas où vous vous poseriez la question). Ce sera forcément le cas pour votre site, ne serait-ce qu’avec le flux RSS.
Pour conclure sur ces balises
Vous vous dites peut-être que ça fait beaucoup de plugin pour grand chose, et je serais plutôt d’accord avec vous ! Il y a peut-être un moyen plus simple de définir une structure personnalisée pour ces deux balises (quelque chose qui dirait : “remplace http://www.votresite.com/ par http://m.votresite.com/ et garde tout le reste pareil), mais je vous avoue que je sais pas comment faire…
Quoi qu’il en soit, en utilisant ces deux plugins, tout fonctionne bien. Je vous invite à vérifier votre code source pour vous en assurer.
Tester l’ergonomie mobile de votre site
Maintenant que tout est en place, vous allez pouvoir tester l’ergonomie mobile de votre site. Pour cela, je vous invite à utiliser ces deux services :
Cet outil vous donne un diagnostic sur votre page, en termes d’expérience utilisateur et de performance (vitesse). Il vous indique également les paramètres de Vary et la page canonique.
Là, c’est Google. Ça vaut toujours le coup de vérifier !
Voilà qui conclut cet article. Il ne nous reste plus qu’à croiser les doigts en attendant la date fatidique du 21 avril !