Nouveautés Google Mobile 2016

881 vues

Publié le

Depuis 2015, Google a différencié le moteur de recherche mobile par rapport au desktop, découvrez les principaux nouveautés sur cette présentation.

Article : https://www.iprospect.com/fr/fr/le-blog/nouveautes-google-mobile/

Publié dans : Marketing
0 commentaire
2 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
881
Sur SlideShare
0
Issues des intégrations
0
Intégrations
323
Actions
Partages
0
Téléchargements
18
Commentaires
0
J’aime
2
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Nouveautés Google Mobile 2016

  1. 1. La visibilité sur Google mobile Octobre 2016 – Madeline Pinthon
  2. 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. 3. Les nouveautés de Google sur mobile • Rich cards • Live • Recherche vocale • AMP • App indexing • Android Instant App • Progressive Web App
  4. 4. Les carrousels et la mise en avant des Rich Cards
  5. 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. 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. 7. Exemples de carrousel top stories Pour les films/séries Pour les actualités (labelsAMP)
  8. 8. Exemples de carrousel Pour les tweets Pour les recettes Pour le site
  9. 9. Passer d’un résultat à l’autre avec AMP Avec AMP, il est possible de naviguer horizontalement entre les différents contenus.
  10. 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. 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. 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. 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. 14. Les déploiements en cours https://developers.google.com/search/docs/guides/mark-up-content
  15. 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. 16. Exemple de mise en avant vidéo
  17. 17. La recherche vocale
  18. 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. 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. 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. 21. Activer la commande vocale https://developers.google.com/voice-actions/
  22. 22. Indexer en direct
  23. 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. 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. 25. Les site « compatibles mobiles »
  26. 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. 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. 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. 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. 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. 31. Un 1er outil de test de compatibilité https://www.google.com/webmasters/tools/mobile-friendly/
  32. 32. Une nouvelle version de l’outil https://search.google.com/search-console/mobile-friendly
  33. 33. Un outil qui inclut Google Page Speed https://testmysite.thinkwithgoogle.com
  34. 34. AMP Accelerated Mobile Pages
  35. 35. Où voir des pages AMP ? L’AMP est actuellement visible dans un carrousel de news.
  36. 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. 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. 38. AMP – Accelerated Mobile Pages https://www.ampproject.org
  39. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 50. Tester le code AMP
  51. 51. Tester les meta données
  52. 52. Surveiller l’indexation dans la Search Console
  53. 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. 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. 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. 56. Et les applications ?
  57. 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. 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. 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. 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. 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. 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. 63. En conclusion
  64. 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. 65. Merci ! Madeline Pinthon Madeline.pinthon@iprospect.com Octobre 2016

×