1.
La visibilité sur Google
mobile
Octobre 2016 – Madeline
Pinthon

2.
L’univers du mobile
Site web
Site
mobile
Web app
AMP
Pour être visible sur le mobile, plusieurs
solutions sont possibles.
Google donne des conseils pour
chacun des éléments.
App

3.
Les nouveautés de Google sur mobile
• Rich cards
• Live
• Recherche vocale
• AMP
• App indexing
• Android Instant App
• Progressive Web App

4.
Les carrousels et
la mise en avant
des Rich Cards

5.
Faciliter la navigation avec les carrousels
Google propose plusieurs types de carrousels dans
les résultats de recherche.
Les carrousels sont utilisés pour les news, les
vidéos, certaines thématiques, présenter des articles
d’un site, des recettes, des tweets,…
Cela permet d’enrichir les résultats de recherche via
une navigation horizontale.

6.
Carrousel pour un même sujet
Google propose un carrousel d’articles récents sur un sujet. Ce
carrousel contient des articles, des vidéos, etc.
Pour ce carrousel, Google présente de plus en plus de
contenus AMP.

7.
Exemples de carrousel top stories
Pour les films/séries Pour les actualités (labelsAMP)

8.
Exemples de carrousel
Pour les tweets Pour les recettes Pour le site

9.
Passer d’un résultat à l’autre avec AMP
Avec AMP, il est possible de naviguer
horizontalement entre les différents contenus.

10.
Carrousel pour un même site
Pour un même site, Google peut également
présenter les contenus les plus récents en
carrousel.
C’est une sorte de sitelinks amélioré.
Les résultats ont généralement moins de 2
semaines et sont présentés en chronologie
décroissante (du plus frais au plus ancien).
Les données sont issues de :
- Schema.org (ex: datePublished)
- Open graph (ex: meta property="article:published_time")
- Balises traditionnelles (ex: title)

11.
Les carrousels pour les vidéos
Pour afficher des extraits enrichis pour les vidéos,
certains champs sont obligatoires :
• Name
• Description
• Thumbnail
• UploadDate
Les videos peuvent être affichées dans les carrousels
de sites mais également « à la une » (top stories), ou
les videos.
https://developers.google.com/search/docs/data-types/videos#examples

12.
Les Rich Cards
Google propose un nouvel affichage pour 2 types de résultats : les recettes et les films
https://webmasters.googleblog.com/2016/05/introducing-rich-cards.html

13.
Qu’est-ce qu’une Rich Card ?
C’est un format d’affichage attractif, ce sont des extraits
enrichis plus évolués.
Elles peuvent s’afficher sous différentes formes :
- Plusieurs sites différents
- Plusieurs pages d’un même site.
Les Rich Cards sont déployées pour les recettes, elles
sont testées pour les films et toucheront à l’avenir
d’autres types de contenus.
Elles se basent sur le marquage de schema.org.

14.
Les déploiements en cours
https://developers.google.com/search/docs/guides/mark-up-content

15.
Des nouveautés pour les films : les listes et
les actions
Les recherches sur des noms de films peuvent
déclencher l’affichage d’un Knowledge graph.
Les informations sont issues de Wikipedia, des certains
sites d’autorité et des données structurées.
Google souhaite proposer des liens pour voir les
films en streaming ou VOD, en faisant apparaître des
sites partenaires.
Ces sites partenaires doivent avoir mis en place un
balisage précis, indiquant une action (regarder un film)
et s’être manifesté via un formulaire.

16.
Exemple de mise en avant vidéo

17.
La recherche
vocale

18.
La recherche vocale
Le mobile favorise la recherche vocale.
Google a fait énormément de progrès pour
comprendre l’oral.
Sur Google drive, il est possible de dicter
un texte.
Sur Google Search, il est possible de faire
des recherches vocales.
Google souhaite également devenir
véritable un assistant personnel.

19.
Google Assistant
Google Assistant permet à Google de chercher à partir d’un texte, d’une
image, etc.
Google mélange plusieurs sources d’informations : Knowledge Graph,
Google Goggles, etc.
Google Assistant permet de trouver des informations sur :
• Restaurants : trouvez les restaurants et les autres points d'intérêt
mentionnés à l'écran.
• Films : consultez des avis et des informations sur les acteurs d'un film à
partir de son nom.
• Musique : obtenez davantage d'informations sur un titre ou un artiste
directement à partir de votre application.
• Personnes : obtenez des informations sur les célébrités mentionnées
dans les actualités.
• Images : informez-vous sur des œuvres d'art, des logos de produit, des
monuments, etc.

20.
Rechercher dans les applications
Le 30 août 2016, Google annonce une nouvelle
fonctionnalité pour les téléphones Android : la possibilité de
rechercher des informations dans les applications.
Actuellement, il peut rechercher dans Gmail, Spotify,
Youtube...et très prochainement dans Facebook Messenger,
Linkedin, Evernote,….
https://search.googleblog.com/2016/08/a-new-way-to-search-for-content-in-
your.html

21.
Activer la commande vocale
https://developers.google.com/voice-actions/

22.
Indexer en direct

23.
Nouveauté : label Live
Il existe une étiquette rouge pour indiquer du live blogging.
Il s’agit d’une beta privée.
Actuellement en France, 20minutes fait partie des testeurs
https://developers.google.com/search/pilot/open/live-blogs

24.
Nouveauté : Real time indexing API
Google met en avant des pages qui s’actualisent en direct via
l’étiquette « live ».
Google souhaite également pouvoir indexer les contenus en
temps réel et indiquer ce qui se passe maintenant.
Cette nouveauté n’est pas encore déployée….

25.
Les site
« compatibles
mobiles »

26.
Google et les sites mobiles
Google fournit beaucoup de conseils pour concevoir un site mobile.
Il fournit également plusieurs outils pour faire des tests de compatibilité mobile.
Google ne va plus faire apparaître l’étiquette « site mobile » car 85% des sites le sont. Ce n’est plus
un critère différenciant, c’est devenu un standard.
https://developers.google.com/webmasters/mobile-sites/?hl=fr-FR

27.
La chasse aux interstitiels
A compter du 10 janvier 2017, les pages ayant du contenu difficilement accessibles pourront être
moins bien classées.
Les pop-ups font partie des pratiques gênantes. Quelques exceptions seront tolérées (cookies,
obligations légales, etc.).
http://googlewebmastercentral-fr.blogspot.fr/2016/08/faciliter-acces-au-contenu-mobile.html

28.
Suppression du label « site mobile »
Fin août 2016, Google a supprimé le label « Site Mobile » dans les
résultats de recherche mobile.
La cause est que Google a remarqué que 85% des pages web sont
compatible au niveau mobile, la présence du label est donc devenu
moins important.
L’algorithme mobile-friendly est toujours en vigueur mais ne sera
plus affichée sur les appareils mobiles.
Le label AMP fait son apparition.

29.
Des tests sur les sites lents
Google a testé l’affichage d’un label « slow » pour les sites lents à charger.
Ce test n’as pas été déployé, il n’est resté qu’au stade de l’expérimentation.
http://searchengineland.com/google-testing-red-slow-label-search-results-slower-sites-215483

30.
La mise en avant des sites incompatibles
Google évite de présenter des pages non compatibles dans ses résultats.
Cependant, lorsque c’est le cas, il peut afficher une alerte.
https://webmasters.googleblog.com/2014/07/promoting-modern-websites-for-modern.html

31.
Un 1er outil de test de compatibilité
https://www.google.com/webmasters/tools/mobile-friendly/

32.
Une nouvelle version de l’outil
https://search.google.com/search-console/mobile-friendly

33.
Un outil qui inclut Google Page Speed
https://testmysite.thinkwithgoogle.com

34.
AMP
Accelerated Mobile
Pages

35.
Où voir des pages AMP ?
L’AMP est actuellement visible dans un carrousel de news.

36.
AMP dans les résultats de recherche mobiles
Google propose des pages AMP dans ses résultats de
recherche mobiles.
Cela permettra aux internautes de précharger la page
et de la voir instantanément.
L’AMP ne sera pas un boost pour le classement. Si
une version AMP est disponible, elle sera présentée
en lieu et place de la page mobile.
Cependant, la présence du label peut faire augmenter
le taux de clic et un bon taux de clic peut améliorer le
ranking.
https://webmasters.googleblog.com/2016/08/amp-your-content-preview-of-
amped.html

37.
L’AMP également disponible pour l’e-
commerce
Pour le moment, Google propose des formats pour les pages listing et produits.
Mais AMP est compatible pour tout type de site.
Page Listing Page Produit

38.
AMP – Accelerated Mobile Pages
https://www.ampproject.org

39.
L’AMP
Objectif : Charger des pages très rapidement sur mobile
Améliorer l’expérience utilisateur
Consommer moins de ressources (batterie, processeur,…).
50% des pages AMP ont un temps de chargement inférieur à 1 seconde
AMP, c’est :
• Un projet open-source très actif, fortement soutenu par Google.
• Un sous html5, plus léger, qui doit permettre d’afficher une page en faisant une seule requête
http.
• Des pages miroir beaucoup plus légères que les pages html traditionnelles

40.
Les 3 piliers
AMP est composé de trois parties distinctes:
• AMP HTML
Un HTML avec certaines restrictions.
• AMP JS
Une bibliothèque JS assure pour un rendu rapide des pages AMP HTML
• Google AMP Cache
Cache Google pour fournir les contenus valides.

41.
Pourquoi AMP est si rapide ?
Autorise seulement les scripts asynchrones
Les ressources doivent définir leur taille
Blocage du rendering impossible
Les JS Tiers sont appelés dans des iframes.
Les CSS sont inline et avec une taille limite
Le téléchargement des Fonts est asynchrone
Minimise les recalcules du style layout
Les animations utilisent le calcul par le GPU
Priorisation des éléments
Pré-chargement des ressources

42.
Les champs obligatoires en AMP
<!doctype html>
<html amp >
<head>
<meta charset="utf-8"> <
<link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate> body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;
-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;
-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;
animation:-amp-start 8s steps(1,end) 0s 1 normal both}
@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript> <style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-
msanimation:none;animation:none}</style>
</noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
</body>
</html>
Déclaration de l’AMP
Canonical
Boiler Plate
AMP JS sur le CDN AMP
Adapté aux mobiles

43.
⚡ AMP HTML : les restrictions
Les commentaires HTML conditionnels ne sont pas autorisés
Tous les attributs commençant par «on» ne sont pas autorisés
Le schéma ‘‘Javascript:’’ n’est pas autorisé
Tous les styles doivent être Inline
Une seule balise de style dans le <head>
Les règles de style doivent être inférieures à 50 Ko
Pas de Input ou de text area.

44.
⚡ AMP HTML : les changements
<img> est remplacée par <amp-img>
<video> est remplacée par <amp-video>
<audio> est remplacée par <amp-audio>
<iframe> est remplacée par <amp-iframe>

45.
AMP HTML : Quelles restrictions sur les iframe ?
amp-iframe ne peut pas apparaître à proximité du haut du document (sauf pour les iframes qui utilisent l'espace
réservé comme décrit ci-dessous).
Elles doivent être au minimum éloigné de 600px du haut de la page ou ne pas apparaitre dans les premiers
75% de la fenêtre quand défile vers le haut.
Elles ne peuvent seulement appeler des ressources via HTTPS ou à partir d'un data-URI ou via l'attribut srcdoc.
Elles ne doivent pas être de la même origine que le conteneur à moins qu‘elles ne permettent pas le allow-
same-origin dans l'attribut sandbox.
Plus de détails sur pour les iframes ici :
https://github.com/ampproject/amphtml/blob/master/extensions/amp-iframe/amp-iframe.md
https://github.com/ampproject/amphtml/blob/master/spec/amp-iframe-origin-policy.md

46.
AMP JS
La bibliothèque AMP JS implémente les meilleures pratiques d’AMP en termes d’efficacité.
Tous les scripts doivent avoir l’attribut async.
Les éléments externes ne peuvent être chargés que dans des iframes.
Les ressources externes sont limitées et contrôlées. Cela permet de diminuer le nombre de requêtes
et d’éléments à charger.
Le poids de la page est fortement diminué.

47.
Ajouter des meta données en JSON-LD
Les meta données en JSON-LD
sont compatibles AMP.
Il est même fortement recommandé
de les installer pour aider Google à
mieux comprendre les pages.
Cela permet d’activer les rich cards
(si les contenus sont compatibles).

48.
Google AMP Cache
Google AMP Cache est un réseau de distribution de contenus basé sur proxy qui fournit tous les
documents AMP valides.
Il extrait les pages AMP HTML, les stocke en mémoire cache et améliore automatiquement la
performance des pages.
Avec Google AMP Cache, le document, tous les fichiers JS et toutes les images se chargent à partir
d'une source, laquelle utilise HTTP 2.0 pour une efficacité optimale.

49.
Ne pas oublier de déclarer les différentes
versions
<link rel="amphtml" href="{amp
version}">
<link
rel="canonical"
href="{desktop
version}">
<link rel="only screen and
(max-width: 640px)"
href="{mobile version}">
<link
rel="canonical"
href="{desktop
version}">
<link
rel="amphtml"
href="{amp
version}">
canonical
canonical
Only
screen
and…
amphtml
amphtml

50.
Tester le code AMP

51.
Tester les meta données

52.
Surveiller l’indexation dans la Search Console

53.
Analytics et AMP
Les scripts analytiques doivent être chargés en
asynchrone.
Ils doivent être intégrés dans une balise <amp-
analytics>
La plupart des solutions sont maintenant compatibles
AMP : AT Internet, comScore, Google Analytics,
Clicky,…
Exemple : AT internet
http://developers.atinternet-solutions.com/javascript-
fr/fonctionnalites-avancees-javascript-fr/accelerated-
mobile-pages-amp-javascript-fr/

54.
Médiamétrie et AMP ?
Médiamétrie va comptabiliser les audiences des pages
AMP en 2017, dans une nouvelle catégorie appelée
« agrégat de contenus »
http://www.offremedia.com/mediametrie-va-mesurer-laudience-dinstant-
articles-et-amp-au-1er-semestre-2017

55.
Les ressources sur l’AMP
• AMP validator : https://chrome.google.com/webstore/detail/amp-
validator/nmoffdblmcmgeicmolmhobpoocbbmknc
• Nouvel outil de validation AMP : https://search.google.com/search-console/amp
• Site officiel : https://www.ampproject.org/fr/
• Github : https://github.com/ampproject
• Exemples : https://ampbyexample.com/
• Why AMP is fast ?: https://medium.com/@cramforce/why-amp-is-fast-7d2ff1f48597#.lbug1423e

56.
Et les applications
?

57.
Interactions avec les applications
L’app indexing permet d’indexer directement les contenus des applications dans Google.
Le but est d’inciter les utilisateurs à découvrir des applications, ou de les encourager à les utiliser
plus souvent.
https://firebase.google.com/docs/app-indexing/#key_functions

58.
App indexing, des résultats décevants
“Not much changed [with Google App Indexing], as far as I know.
But, if I remember correctly, the engagement on those app install
buttons weren’t high enough or there weren’t enough
engagements to spend more resources on it. We just moved
them to another feature as opposed to spending more resources
on it and maintaining it.”
Gary Illyes
L’app indexing n’a pas donné de résultats concluants.
Google travaille sur de nouvelles fonctionnalités.

59.
L’AMP préféré à l’app indexing
Depuis le 20 septembre 2016, Google commence à proposer les pages AMP en lieu et place des
pages mobiles ou des applications.
https://support.google.com/webmasters/answer/6211453?hl=en

60.
Android Instant App : utiliser une application
sans l’installer
A chaque étape du processus d’installation d’une application, 20%
des internautes abandonneraient.
Pour éviter cette fuite, Google travaille la possibilité de streamer les
applications android: pouvoir les utiliser sans les installer.
Il « suffira » de mettre à jour une application Android.
Ce programme est encore limité, il faut s’inscrire pour pouvoir
accéder à la documentation.

61.
Progressive Web Applications
Une Progressive Web App utilise les possibilités du web moderne pour délivrer une expérience
utilisateur similaire à une application native.
Elle allie le meilleur des applications natives et des sites mobiles.
https://developers.google.com/web/progressive-web-apps/

62.
Les avantages d’une PWA
Chargement très rapide
Utilisation hors ligne
Ajout d’une icône sur l’écran d’accueil
Pas d’installation
Notifications Push
Serveur sécurisé
Responsive

63.
En conclusion

64.
Que faire pour le mobile ?
- Un site doit être mobile (et rapide)
- L’AMP gagne du terrain
- Le HTTPS devient une nécessité
- Le balisage sémantique est essentiel
- Relier les applications et le web mobile pour
exploiter au mieux l’expérience mobile

65.
Merci !
Madeline Pinthon
Madeline.pinthon@iprospect.com
Octobre 2016