Comment créer

un site mobile

compatible seo

UN ENJEU MAJEUR

Benoit Chevillot, Divioseo, @beunwa,

info@divioseo.fr

• Content, perf, usability,

linking

• Une annonce google

inhabituelle

• Une deadline qui

approche

Evolution des critères de classement

0

14

28

42

56

70

84

Content Perf Usability Linking

• Les évolutions des critères de classement de

recherche évoluent, après le critère de linking pur, le

contenu (panda) a pris de plus en plus d’importance

• Puis la performance est devenu un critère

primordial, au même titre que la qualité (voir les

guidelines quality raters) et maintenant l’utilisabilité

Content, perf, usability, linking

• Le 27 février 2015 google a annoncé officiellement un

changement majeur dans son algorithme prévue le 21

avril 2015 :

• Apporter des résultats plus adaptés aux utilisateurs mobiles dans le

moteur de recherche

• Google en remet une couche le 17 mars en annonçant une série de

vidéo et webinar destinés à vous aider à passer au mobile :

https://plus.google.com/s/%23MobileMadness

• Généralement google n’annonce pas ses changements,

il faut donc certainement la prendre au sérieux

Une annonce inhabituelle

• + de sites mobile-friendly dans les résultats de

recherche.

• Nous allons étendre notre utilisation du critère de compatibilité mobile

pour en faire l'un des critères de positionnement du moteur. Ce

changement affectera les résultats de recherche mobiles partout dans

le monde et dans toutes les langues, et son impact sera significatif.

• + de contenu issu d'applications dans les résultats de

recherche

• Informations provenant des applications indexées comme critère de

positionnement, pour nos utilisateurs connectés et qui ont déjà installé

les applications en question sur leur appareil mobile

Le 21 avril la donne va changer

• Outils en ligne

• Outils navigateurs

Verifier la compatibilité mobile

• Outil google :

https://www.google.com/webmasters/tools/mobile-friendly/

https://developers.google.com/speed/pagespeed/insights/

• W3C mobile test (outil intégriste) :

http://validator.w3.org/mobile/

• Emulateur online :

http://www.mobilephoneemulator.com/

• Responsive test online :

http://mattkersley.com/responsive/

• Page speed

https://developers.google.com/speed/pagespeed/

http://gtmetrix.com/

• Browserstack et compagnie (saucelabs, browserling, mobiletestme, …)

Outils en ligne

• Chrome dev tools

https://developer.chrome.com/devtoolsctrl + shift + i puis clic sur icone mobile

• Mode responsive de firefox

https://developer.mozilla.org/fr/docs/Outils/Vue_adaptativectrl + shift + m

• Emulateur Iphone (xcode)

https://developer.apple.com/library/ios/documentation/IDEs/Conceptu

al/iOS_Simulator_Guide/Open developper tools -> ios simulator

• Genymotion (emulateur android)

https://www.genymotion.comAjouter un terminal virtuel -> lancer

Outils navigateur et OS

• Guidelines

• Quick n Dirty

• Optimisations

• CMS

Améliorer la compatibilité mobile

Si vous avez déjà un site bien optimisé pour le seo vous n’avez que quelques

« détails » à régler :

• Page speed : TTFB

• Les mobiles sont encore plus sensibles aux problématiques de performance et de temps de

chargement à cause de leur hardware et leur connectivité limitée (de moins en moins vrais) :

limitez les appels réseaux et optimisez vos contenus pour les alleger

• Design mobile

• N’utilisez pas FLASH (bien que certain navigateurs mobiles le supporte : firefox par exemple)

• N’utilisez pas les popups (utilisez les popins responsive au besoin)

• Pensez que les utilisateurs ont des gros doigts (mettez de l’air autour de vos zones chaudes)

• Keep it stupid simple

Guidelines

• Optimisez (encore vos titles et meta description)

• L’espace d’affichage restreint des mobiles nécessite de raccourcir

encore vos titles et description tout en restant pertinent.

• Abusez des micro données

• L’espace d’affichage restreint permet de faire sauter aux yeux les

rich snippets, profitez en.

• Choisissez la technologie adequate

• Responsive, dynamic serving, separate url

Guidelines

Si vous n’avez ni temps ni budget voici la solution

magique :

• Utilisez la balise viewport

• <meta name="viewport" content="width=device-

width, initial-scale=1.0">

Evidement cette solution (utilisée seule) ne règle que

les problèmes en apparence mais vous permettra de

passer le 21 avril sereinement (ou pas)

Quick hack

• Utilisez des typos d’icones :

fontawesome, flaticon, icomoon, …

• Transformez vos images en sprites quand cela est

possible :

css.spritegen.com, spritepad, spritizer, …

• Concatenez vos script javascript et vos feuilles de

style

Réduction du nombre de ressources

• Compressez au maximum vos images sans perdre

en qualité visuelle, en utilisant les outils adaptés

vous pourrez gagner en moyenne 25% sur le poids

de vos images :

smush.it (devenu imgopt.com), gtmetrix report, riot

(logiciel desktop), kraken.io (payant)

Optimisation des images

Le but est d’accélérer au maximum l’affichage de la

page (en dehors de la problématique TTFB)

• Evitez l’accumulation de librairies js hétérogènes

• Réduisez la complexité du Document Object Model :

KISS

Simplification du dom

Les media queries sont un mécanisme css permettant

de détecter la configuration d’un terminal et d’adapter

la feuille de style délivrée.

• Utilisez les media queries pour délivrer un contenu

adapté à la taille de l’écran

• En utilisant de manière adéquate les css vous

pourrez également délivrer des images (en

background) adaptées en taille

Media queries

Tous les CMS modernes proposent des thèmes et

templates responsive, vous pouvez en trouver sur tous

les sites ou vous avez l’habitude d’en chercher.

http://themeforest.com

http://www.elegantthemes.com/

http://www.templatemonster.com

Bon courage : la plupart génèrent un code mal

optimisé (plusieurs H1, …)

Themes responsive pour CMS

• Responsive web

design

• Dynamic serving

• Separate mobile site

• Comparaison

• Lequel choisir

Technologies disponibles

• Le même code html est généré et envoyé aux différents terminaux (mobiles,

desktops, tablettes, …)

• Utilisation des médias queries pour adapter le design à la taille de l’écran via les

feuilles de style.

• Gestion du contenu centralisée.

• Indexation simplifiée pour les robots.

• Pas de redirection basée sur la détection de user agent (sujette à erreur).

• https://developers.google.com/webmasters/mobile-sites/mobile-

seo/configurations/responsive-design?hl=fr

• ATTENTION : pensez votre contenu pour le mobile en premier (mobile first), vous

n’aurez ainsi aucun problème pour adapter votre design aux version desktop.

Responsive web design

• Le code html, css et js généré est différent en fonction des

terminaux connectés.

• Les urls restent les mêmes quelque soit le terminal

• La détection du terminal se base sur le user agent, le serveur

DOIT RENVOYER une entête http « vary » qui permet aux

robots d’êtres informés que le contenu varie selon le user agent

et ainsi d’afficher la bonne version de cache par exemple.

• Attention aux erreurs lors de la détection des user agent :Il ne doit pas rechercher Googlebot de manière spécifique. Tous les user-agents

Googlebot sont considérés comme des appareils mobiles spécifiques. Vous devez

traiter ces user-agents Googlebot de la même manière que ces appareils.

Dynamic serving

• Les terminaux sont redirigés via http vers des urls distinctes en

fonction de leur configuration, un code html spécifique est

généré sur ces urls.

• Utilisation des balise rel=alternate et rel=canonical sur chaque

page et dans le sitemap.rel=alternate sur la version desktop

rell=canonical sur la version mobile

• Attention aux erreurs lors de la détection des user agent :Il ne doit pas rechercher Googlebot de manière spécifique. Tous les user-agents

Googlebot sont considérés comme des appareils mobiles spécifiques. Vous

devez traiter ces user-agents Googlebot de la même manière que ces appareils.

• Gestion du contenu complexifiée

Separate mobile website

Comparaison

Configuration Mêmes urls ? Même code HTML

Responsive Web Design

Dynamic serving

Separate mobile website

• A moins que vous n’ayez pas le choix et que vous

héritiez d’une version mobile de votre site avec des

urls distinctes je vous conseille d’opter pour la

version responsive design qui est la plus simple à

gérer et à mettre en place, elle évite également les

erreurs potentielles de redirection et de balise

canonical mal configurés.

• La version Dynamic serving demande un peu plus de

setup mais va permettre de servir une version « sur

mesure » pour les mobiles (javascript et médias

adaptés)

Lequel choisir

• Lisez les guidelines

• Testez

• Faites appel à un pro

• Choisissez la techno adaptée à votre cas de figure

• Venez au TEKNSEO le 13 JUIN à LYON :

http://teknseo.com

Conclusion

Benoit Chevillot, Divioseo, @beunwa, info@divioseo.fr