La visibilité sur Google mobile

Octobre 2016 – Madeline

Pinthon

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

Les nouveautés de Google sur mobile

• Rich cards

• Live

• Recherche vocale

• AMP

• App indexing

• Android Instant App

• Progressive Web App

Les carrousels et la mise en avant des Rich Cards

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.

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.

Exemples de carrousel top stories

Pour les films/séries Pour les actualités (labels AMP)

Exemples de carrousel

Pour les tweets Pour les recettes Pour le site

Passer d’un résultat à l’autre avec AMP

Avec AMP, il est possible de naviguer

horizontalement entre les différents contenus.

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)

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

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

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.

Les déploiements en cours

https://developers.google.com/search/docs/guides/mark-up-content

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.

Exemple de mise en avant vidéo

La recherche vocale

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.

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.

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

Activer la commande vocale

https://developers.google.com/voice-actions/

Indexer en direct

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

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

Les site « compatibles

mobiles »

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

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

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.

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

http://searchengineland.com/google-testing-red-slow-label-search-results-slower-sites-215483

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

Un 1er outil de test de compatibilité

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

Une nouvelle version de l’outil

https://search.google.com/search-console/mobile-friendly

Un outil qui inclut Google Page Speed

https://testmysite.thinkwithgoogle.com

AMP Accelerated Mobile

Pages

Où voir des pages AMP ?

L’AMP est actuellement visible dans un carrousel de news.

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

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.

https://amphtml.wordpress.com/2016/08/22/getting-started-with-amp-for-e-commerce/

Page Listing Page Produit

AMP – Accelerated Mobile Pages

https://www.ampproject.org

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

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.

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

Les champs obligatoires en AMP

Définir le doctype : <!doctype html>.

Ouvrir un tag : <html ⚡> tag (<html amp> is accepted as well).

Obligatoirement contenir un tag <head> et <body>

Mentionner une URL canonique : <link rel="canonical" href="$SOME_URL" /> tag inside their head

that points to the regular HTML version of the AMP HTML document or to itself if no such HTML

version exists.

contain a <meta charset="utf-8"> tag as the first child of their head tag.

contain a <meta name="viewport" content="width=device-width,minimum-scale=1"> tag inside their

head tag. It's also recommend to include initial-scale=1 (1).

contain a <script async src="https://cdn.ampproject.org/v0.js"></script> tag inside their head tag.

contain the AMP boilerplate code ('head > style[amp-boilerplate]' and 'noscript > style[amp-

boilerplate]') in their head tag.

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

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

⚡ 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>

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

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

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

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.

Ne pas oublier de déclarer les différentes versions

L’AMP est une version légère d’une page.

Pour éviter la duplication de contenu, il est obligatoire de mettre une balise link rel canonical vers le

contenu original.

Si seules des pages AMP existent, elles doivent avoir une canonical vers elles-même.

<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

Tester le code AMP

Tester les meta données

Surveiller l’indexation dans la Search Console

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/

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

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

Et les applications ?

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

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.

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

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.

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/

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

En conclusion

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

Merci ! Madeline Pinthon

Madeline.pinthon@iprospect.com

Octobre 2016