A l'heure ou Google bascule son index en mode "mobile first", il est important de comprendre qu'en 2018 la version visible en usage mobile est devenue la plus importante du site pour le référencement. La conférence a passé en revue les prérequis pour qu'un site soit bien référencé en usage de recherche mobile, et sur les dernières techniques pour être bien référencé.

1. 2018,
Mobile et SEO : adaptez votre
site aux dernières évolutions de
Google
Philippe Yonnet
CEO & fondateur
Agence Search Foresight

2. Programme de la conférence
35 mn + 10 mn de questions
2
Présentation du
Speaker
Conclusion
Search-Foresight
Etre mobile
friendly
La recherche vocale
Les
Progressive Web Apps
(PWA)
#S4sight @s4sight #GEN
La Speed
UpdateLe Mobile First
Index
La montée
en
puissance
des usages
mobiles
Les pages
AMP

3. La montée en puissance des
usages mobiles

4. L’ÉVOLUTION DE L’USAGE
Nos usages évoluent et Google adapte en conséquence son algo
4

5. Selon Médiamétrie
5

6. AXA DRIVECAPITAINE TRAIN MEETIC FOODCHERIROBIN HOOD ZIPJET
Des business models “Mobile Only” émergent

7. Les 2 modes d’usage multi-écran
- 7 -
Usage Séquentiel
Passer d’1 écran à l’autre
pour effectuer une tâche
Usage Simultané
Utiliser différents écrans pour un usage
complémentaire ou non
Multi-tasking – Activités différentes Usage Complémentaire – Activités reliées
Source : Think With Google

8. 8

9. C’est plus grave que vous ne le pensez !
9
Le mobile s’immisce partout !

10. La priorité :
Etre mobile friendly
selon les critères de Google !

11. - 11 -
Vérifiez la compatibilité mobile de votre site
 https://www.google.com/webmaster
s/tools/mobile-friendly/
 Ne pas regarder pagespeed insights
 Les principaux points d’attention
 Usage de plugins interdits :
 Présence d’une balise viewport
(conf de la fenêtre d’affichage)
 Adaptation du contenu à la taille
de l’écran
• Attention aux images
 Adaptation des CSS (texte trop
petit, éléments trop rapprochés)

12. - 12 -
Nouveau critère : les « popups intrusifs »
 Depuis le 10 janvier 2017, la présence d’insterstitiels intrusifs conduit au déclassement
de vos pages sur smartphone.

13. La recherche vocale
change l‘expérience de
recherche et les algorithmes de
classement

14. Se transformer en
moteur
de réponses

15. “we’re trying
to get you direct answers
to your queries
because it’s quicker (…)
than the ten blue links Google
used to show.”
“This is especially important on
mobile (…).”
09/2014

16. S’adapter à la
transformation des
recherches
via mobile et vocal

17. 2020Tous Devices
50%

18. Voice Everywhere

19. De la recherche au conversationnel
Amazon Echo

20. Google Home

21. Qu’est-ce que ça peut changer en SEO ?
Référencer et positionner
un site dans un index
Insérer sa réponse dans
une conversation !
Insérer les mots clés des
requêtes populaires dans ses
pages d’atterrissage
Créer une page qui soit la
meilleure réponse possible à
une question de l’internaute

22. 2018 :
Le passage au mobile first index

23. Qu’est ce que le Mobile First Index ?
Index primaire mobile
Afin d’améliorer l’expérience utilisateur, Google souhaite améliorer son index mobile
ainsi que ses résultats de recherches mobiles en indexant prioritairement la version
mobile d’un site.
Genèse du projet
23

24. Déploiement en cours
Google a commencé
avec les sites pour
lesquels il savait que que
l’impact va être minime
(sites responsive)
Combien de temps va
prendre la bascule ?
On n’en sait rien, et
Google avance « sur des
œufs »
Tous les sites n’ont pas
encore basculé
Déploiement prudent et progressif
24

25. Comment savoir si on a basculé ?
25
Déploiement du Mobile First Index
Méthode 1 : regarder ses logs
Si Googlebot mobile crawle plus de
pages que Googlebot mobile : le site a
basculé, ou est en train de basculer
Seule méthode possible si le site est
responsive
Méthode 2 : regarder ses
snippets si les balises sont
différentes (site en m.)
Méthode 3 (la plus sûre):
regarder les messages de sa
Google Search Console

26. Prérequis pour le mobile first
Avoir un contenu identique
Le contenu visible sur desktop doit être 100% présent sur mobile: que ce soit pour les
robots ou pour les utilisateurs, les contenus des deux versions doivent être les mêmes. Les
systèmes de cloaking sont bien évidemment à bannir.
Principe de base : contenu
26

27. Prérequis pour le mobile first
Contenu masqué : onglets et accordéons
Le contenu caché mais potentiellement visible
dans une page (onglets, accordéons, roll
over...) sera traité, lors du lancement du projet
Mobile First, comme du texte visible "normal". Le
seul impératif est que l’internaute doit pouvoir
découvrir le contenu par un clic.
Confirmation de John Mueller via un hangout
(juillet 2017)
Rappelons qu'aujourd'hui, ce texte
potentiellement visible est indexé, mais avec un
poids moins fort. Cette perte de poids n'existera
donc plus avec Mobile First.
Déclaration officielle Google sur le contenu caché
27

28. Prérequis pour le mobile first
Autoriser le crawl de la version mobile
Les ressources ne doivent pas être bloquées aux
Googlebot mobile : en effet, il est courant d’avoir
des sites bloquant les fichiers JS et CSS. Cela fait
quelque temps que Google nous invite à ne pas le
faire. C’est encore plus important d’éviter de le
faire surtout si ces fichiers statiques sont utiles à
l’affichage de votre rendu mobile.
Principe de base : crawl
28

29. Prérequis pour le mobile first
Pas de changement notable à prévoir pour l’implémentation des balise
rel=canonical (version desktop) et les alternate (vers mobile)
Google vous invite à conserver le système du balisage et des canonicales (vers la
version desktop) et alternates vers la version mobile ne changent pas
cas des sites mobiles dédiés : m.domaine.com ou mobile.domaine.com
site mobile dédié
29

30. Prérequis pour le mobile first
Auditer votre site mobile avec la Search Console
Inscrivez votre site mobile pour être averti des dysfonctionnements (erreurs de crawl,
bot bloqué, actions manuelles, problèmes ergonomiques ou microdatas.)
site mobile dédié
30

31. Prérequis pour le mobile first
Optimisez vos performances
Voici les 3 critères de votre site mobile que vous devez évaluer
Time to First Byte < 200ms
Temps de téléchargement HTML < 500ms
Temps de rendition < 2 secondes
temps de chargement
31

32. Prérequis pour le mobile first
Les Micro-datas un sont un MUST HAVE sur Mobile
Si vous avez omis le balisage sur mobile, alors qu’elles sont bien implémentées sur
desktop, vous perdrez vos résultats enrichis dans les SERPS (résultats de recherche).
Si vous êtes en version responsive, vos micro datas sont implémentés, pas besoin de
faire deux fois le travail.
Principe de base : données structurées
32

33. Faites la chasse aux pubs intrusives
33
Chrome bloque des publicités
classées comme trop intrusives
selon les standards de la
"Coalition for Better Ads"
Ne placez pas des overlays qui
s’affichent lors de la première
visite (overlay de
téléchargement)
Googlebot les voit à chaque visite,
car il ne stocke pas les cookies !
Les formats bloqués dorénavant par Chrome
Avertissement affiché par Chrome quand une
publicité intrusive est détectée

34. Prérequis pour le mobile first
Pas de changement notable à prévoir aussi pour l’AMP
Spécificité > site mobile dédié
Principe de base : AMP
34

35. Prérequis pour le mobile first
Linking externe
À date, nous avons peu
d’information de la part de
Google ! On sait simplement que
les liens s’obtiennent rarement sur
une version mobile d’un site. Les
fondements de l’algorithme seront
toujours concentrés autour de la
popularité et donc de celle
acquise sur votre version desktop.
Principe de base : AMP
35

36. Juillet 2018 :
La speed update

37. Juillet 2018
C’était déjà le cas sur Desktop
Mais pas sur mobile. Ce n’est même pas
un problème pris en compte dans le
mobile friendly test
Il a fallu attendre une plus grande
fiabilité des outils de mesure de la
performance par Google
Mise à jour des outils Pagespeed
https://webmasters.googleblog.com/201
8/01/using-page-speed-in-mobile-
search.html
La vitesse de chargement est devenu un critère de classement sur mobile
37

38. Pensez à vos utilisateurs d’abord
Avoir de meilleurs
performances dope la
conversion sur mobile
Avoir de mauvaises
performances vous fait perdre
des visiteurs et des clients
Si vos concurrents ont des
vitesses de téléchargement
plus élevées, vos clients iront
chez eux
Ne travaillez pas vos performances juste parce que Google le veut !
38

39. Suis-je impacté ?
Les outils suggérés par Google pour
savoir où vous en êtes côté
performance
Chrome User Experience Report
https://developers.google.com/web/to
ols/chrome-user-experience-report/
Lighthouse
https://developers.google.com/web/to
ols/lighthouse/
Pagespeed Insights
https://developers.google.com/speed/p
agespeed/insights/
Seuls les cancres ont subi des pertes de position
39

40. Google propose beaucoup d’outils sur la perf
https://developers.google.com/web/f
undamentals/performance/speed-
tools/pdf/Infographic-
How_To_Think_About_Speed_Tools.pdf
https://developers.google.com/web/f
undamentals/performance/speed-
tools/
Pour y voir clair, il y’a cette infographie
40

41. Impact : sur les positions SEO, et le quality score
41

42. Les pages AMP

43. Le projet AMP pour accélérer l’expérience
mobile
Lancé fin 2015, le format AMP (accelerated mobile pages)
permet un affichage quasi-instantané des contenus sur
mobile via leur mise en cache dans un CDN Google, et un
code optimisé et un contenu optimisé
Au départ réservé aux sites media, ce format est maintenant
ouvert aux sites e-commerce. Ebay a été le 1er à l’adopter en
juin 2016.
Les résultats AMP apparaissaient uniquement dans un
carrousel en haut de page ; depuis le 20 septembre 2016, on
les retrouve mêlés aux résultats classiques.
Nouveauté : les URL d’origine des pages seront utilisées lors
des partages.
Remplacement du site mobile et mort de l’App Indexing ?
App Indexing
Version Mobile
AMP

44. Pour en savoir plus :
http://www.ampproject.org
44

45. Augmentation de la part de l'AMP
Pour une requête portant sur l'actualité, 7 résultats sur 10 sont au format AMP
70%
AMP

46. Les principes
Gains de
perfomance
X10
Code
allégé
Mise en cache
Pré rendition /
préchargement
chez Google

47. Un code sérieusement allégé
47
Une page AMP contient 5 fois moins de
trackers en moyenne qu’une page
« normale », et un code 6 foix plus léger.
Comment ?
Des balises HTML « lourdes » interdites
Une librairie javascript « couteau suisse » unique
et allégée

48. Un CDN dédié
Un CDN (content delivery network) est
un ensemble de serveurs :
• Conservant une version « en cache » de la page
• Et répartis partout dans le monde, près des utilisateurs
Google fournit le CDN dédié aux
pages AMP
Remarque : la mise en cache
systématique rend la création de
pages AMP entièrement dynamiques
« server side » impossible
Par contre, on peut créer des pages
partiellement dynamiques
48

49. SEO : attention aux doublons
La page AMP est un doublon quasi
parfait du contenu de la page
« normale »
Il faut donc « canonicaliser » la page
AMP
Lien link rel=canonical pointant vers le
contenu d’origine
Au départ, Google recommandait de
pointer vers la version desktop
Avec le mobile first index : la
recommandation reste la même !
Pourquoi ? Pour les autres moteurs !
49

50. Adopter l’AMP : parce que c’est plus rapide
Test fait en 2016 sur les pages
responsive du Guardian,
comparé avec la version AMP
Le score Google pagespeed
passe de 57% à 94% !
L’amélioration de l’UX est réelle et spectaculaire

51. Et l’impact, c’est plus de conversions
51

52. Et parce qu’il y’a un ranking boost !
Et donc un traffic boost parfois
52
Sur mobile, les carrousels AMP pour les news sont
placés en tête des résultats (position zéro)
Pour être présent dans ce carrousel, il n’est pas nécessaire
d’être indexé dans google news, il faut juste le balisage
schema.org ad hoc et des pages AMP
Evidemment, cela met en valeur les pages AMP vs les
pages « normales »
Le gain maximal est atteint si on est dans la première
case du carrousel

53. Et c’est vrai à l’international
Les carrousels AMP envahissent les versions internationales de google
53

54. International : Baidu supporte l’AMP !
Son format MIP est devenu AMP compatible depuis le printemps 2017

55. De plus en plus de diffuseurs exploitent l’amp
Les principales plateformes qui exploitent l’AMP en dehors de Google :
Pinterest, LinkedIn, et Twitter
55

56. Quels sont les limitations de l’AMP ?
L’AMP est rapide car il n’embarque qu’un
certain nombre limité de fonctionnalités,
certaines balises, scripts ou façon de
codées sont volontairement interdites
Conclusion : tout n’est pas supporté en AMP
Au début : beaucoup de choses utiles
voire indispensables n’étaient pas
disponibles
Mais aujourd’hui, toutes les briques utiles
sont dispo en AMP !
Possibilité de faire 100% d’un site éditorial ou
ecommerce en AMP
Mais au prix de certaines concessions
Changement d’outils de trackings, d’ad
servers, de régies, de systèmes de
paiement, ou de méthodes de conception
Il y’en a, de moins en moins gênantes, et plus vraiment bloquantes
56

57. Les Progressive
Web Apps

58. mSites & apps convergent
http://blog.chromium.org/2015/03/chrome-42-beta-push-notifications_12.html
OFFLINEPUSH NOTIFICATION APP INDEXING
GOOGLE NOW
ON TAP
BOUTON “ADD TO
HOMESCREEN” APP STREAMING

59. Qu’est ce que le PWA: Progressive Web App?
Le meilleur des technologies du Web (HTML5) associées aux fonctionnalités des applications
Les principaux avantages:
 Un site web qui fonctionne sans connexion (comme une App)
 Une application qui se référence sur Google (mieux qu’avec l’App Indexing)
 Un outil avec un excellent temps de chargement
 Un support interactif avec des notifications (comme une App)

60. Pourquoi les PWA sont intéressantes pour le SEO ?
Les principaux avantages:
 Google sait indexer de manière native une page
provenant d’une PWA
 Une page PWA s’optimise et se référence
exactement comme une page web normale
 Une PWA correctement indexée permet de capter
efficacement un public via le search pour le
fidéliser avec une app
 Rappel : les recherches sur Google sont beaucoup,
beaucoup plus importantes en volume que les
recherches sur un App Store

61. Et l’app indexing alors ?
Cela fonctionne toujours mais
 Les pages d’app captent peu de clics dans la
pratique
 Manque de visibilité
 Manque d’intérêt des utilisateurs
 Sur mobile, entre une page AMP et son
équivalent sur une APP, Google renvoie vers la
page AMP
 depuis le 21 sept. 2016
 CONCLUSION :
 L’ASO et l’App Indexing restent d’actualité
 Mais le PWA a de réels avantages côté SEO

62. Mais il ne faut pas oublier les fondamentaux ?
 Les PWA sont souvent trop souvent codées
avec des technologies ou des approches
qui posent des problèmes pour le
référencement
 Client Side Rendering
 Problèmes de performance
 Urls « Ajax »
Mais ce n’est pas du tout une fatalité !
 En principe, faire le choix d’une PWA
apporte un plus pour le référencement, à
condition de ne pas oublier les bonnes
pratiques applicables aux sites web

63. Quels sont les points d’attention ?
https://developers.google.com/web/progressive-
web-apps/checklist

64. Et évidemment, n’oubliez pas les balises SEO !
64

65. Les avantages du PWA: Le cas LANCÔME
 Baisse de 84% du temps de chargement
 Augmentation de 17% du taux de conversion
 Diminution du taux de rebond de 15%
 18% de taux d’ouverture des notifications
 Accroissement de 12% du taux de conversion sur la
récupération de panier via les notifications push.

66. Et Google recommande…
Le mixte du PWA et l’AMP
Google, recommande de cumuler les deux technologies:
AMP + PWA = #PWAMP
PWA va dans le sens de l’histoire
AMP : c’est moins sûr => résoudre les problèmes de performance avec une approche « AMP like » peut être
aussi efficace, plus universel et plus durable + PWA

67. Où en est-on du support des PWA ?
Même safari se met bientôt aux Service Workers !
Rappel : ce n’est pas du tout ou rien, une PWA continue de fonctionner en mode dégradé
en cas de support partiel (y compris sur Safari)
https://ispwaready.toxicjohann.com/

68. Exemples de code
https://hybrid-dot-indexable-pwa.appspot.com/

69. CONCLUSION

70. Conclusion
Dorénavant, travaillez à fond la version mobile de vos
sites,
Testez l’AMP et pensez aux PWA
(faites au moins un test, un POC)
Exploitez tout le potentiel des données structurées
Travaillez toute la chaine du SXO, et notamment les
positions zéro et attention à la qualité
Pensez performance, performance et encore
performance
Soyez la meilleure réponse possible à une recherche
d’un internaute !
Adaptez vous !
70

71. SF vous partage sa passion du Search
Chaque semaine, de nouvelles ressources à votre disposition en exclusivité
71
Des prises de parole chaque semaine
Un accès en avant première aux web-conférences
Search Foresight et aux contenus de nos prises de
parole pour vous transmettre notre expérience
Des contenus de référence
Des contenus exclusifs chaque semaine :
Newsletter, Articles, Case study, Etudes…
Une communauté de passionnés
Partagez avec une communauté d’experts du Digital,
du Search, du Webmarketing…
Des évènements pointus
Echangez et networkez lors de nos évènements
exclusifs : Meet-up, Barcamp, Petits-déjeuners…
https://www.search-foresight.com/blog_seo_sea/

72. 72
Merci !
Et maintenant,
passons à vos questions

73. Restons en contact
www.search-foresight.com
73
philippe.yonnet@search-foresight.com
+ 33 1 74 18 29 40
@s4sight
Slideshare.net/S4sight
Philippe Yonnet, Directeur Général et fondateur