Intervenant : Philippe Yonnet, Directeur Général de Search Foresight

1. tuniseo.tn
2018 SEO à l’heure du Mobile first

2. 2018,
Le SEO à l’heure du
mobile first index
Philippe Yonnet
CEO & fondateur
Agence Search Foresight

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

4. La montée en
puissance des
usages mobiles
#TUNISEO

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

6. Selon Médiamétrie
6

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

8. Les 2 modes d’usage multi-écran
- 8 -
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

9. 9

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

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

12. - 12 -
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)

13. - 13 -
Nouveau critère : les « popups intrusifs »
❑ Le 10 janvier 2017, la présence d’insterstitiels intrusifs conduira au déclassement de vos pages sur
smartphone.
❑ Une étude SF montre que 38% des sites medias/information testés sont non conformes !

14. La recherche vocale
change l‘expérience de
recherche et les algorithmes de
classement
#TUNISEO

15. Se transformer en
moteur
de réponses

16. “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

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

18. 2020Tous Devices
50%

19. Voice Everywhere

20. De la recherche au conversationnel
Amazon Echo

21. Google Home

22. 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

23. #TUNISEO
2018 :
Le mobile first index

24. 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
24

25. Déploiement en cours
Google commence
avec les sites pour
lesquels il sait 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 »
Déploiement prudent et progressif
25

26. Comment savoir si on a basculé ?
26
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.)
Attention : cela ne marche pas
pour tous les sites / pages

27. Prérequis avant la mise à jour
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
27

28. Prérequis avant la mise à jour
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é
28

29. Prérequis avant la mise à jour
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
29

30. Prérequis avant la mise à jour
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é
30

31. Prérequis avant la mise à jour
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é
31

32. Prérequis avant la mise à jour
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
32

33. Prérequis avant la mise à jour
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
33

34. Faites la chasse aux pubs intrusives
34
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

35. Prérequis avant la mise à jour
Pas de changement notable à prévoir aussi pour l’AMP
Spécificité > site mobile dédié
Principe de base : AMP
35

36. Prérequis avant la mise à jour
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
36

37. #TUNISEO
La speed update

38. 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 devient un critère de classement sur mobile
38

39. 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 !
39

40. Vais-je être 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 vont subir des pertes de position
40

41. 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
41

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

43. Les pages AMP
#TUNISEO

44. 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

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

46. 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

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

48. Un code sérieusement allégé
48
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

49. 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
49

50. 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 !
50

51. 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

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

53. Et parce qu’il y’a un ranking boost !
Et donc un traffic boost parfois
53
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

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

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

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

57. 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
57

58. #TUNISEO
Les progressive web
apps

59. 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

60. 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)

61. 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

62. 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

63. 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

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

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

66. 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.

67. 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

68. 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/

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

70. CONCLUSION
#TUNISEO

71. 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 !
71

72. SF vous partage sa passion du Search
Chaque semaine, de nouvelles ressources à votre disposition en exclusivité
72
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/

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

74. La question
qui vaut un mug
#TUNISEO
Comment s’appelait
le concurrent de la
technologie AMP
inventé par Baidu ?

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