Les chantiers indispensables à ajouter à votre roadmap 2018 - Philippe Yonnet - Petit Déjeuner du 1er Février - Luxembourg

1. 1 SEO – Votre priorité 2018 optimiser les performances de votre site Web Actualités SEO, Content marketing et E-commerce, Google Shopping, Crawl… 1 BIENVENUE @s4sight Lux Future Lab, LuxembourgJeudi 1er Février 2018 Petit Déjeuner SEOSEA Matinée Conférences Search : les changements majeurs annoncés en 2018 Actualité SEO SEA Chantiers indispensables pour 2018  Mobile first index  Content Marketing Crawl… en partenariat avec

2. Programme de la matinée Nous allons passer 3 heures passionnantes ensemble 2 Présentation de l’agence Actualité des moteurs de recherche et du référencement (SEO & SEA) PauseLes chantiers indispensables à glisser dans votre roadmap 2018 Comment tirer le meilleur parti possible du content marketing @s4sight Les étapes du développement d’une stratégie de content marketing Le mobile first index L’évolution des crawls mobile de Google…

3. Les chantiers indispensables à ajouter à votre roadmap 2018 3

4. Agence conseil en stratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics Ajouter des données structurées sur vos pages

5. Les moteurs sont dépendants des balisages schema.org Ces balises sont devenues nécessaires pour être visibles 5

6. Quel balisage pour quelles données ? 6 Pour savoir ce qui est supporté par Google : • https://developers.google.com/structured-data/ • En évolution permante (notamment pour Json.LD) Les microformats (obsolètes) Les formats « web semantique » RDFa Les microdata (microdonnées) pour le html 5 (schema.org) Le Json.LD ! (nouveau)

7. Où apparaissent ces « données structurées »? Résultats « produits » Articles Recettes de cuisine Videos / films Evènements Résultats locaux Avis Notes … 7

8. Agence conseil en stratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics Faire indexer votre contenu généré en javascript 8

9. Faire indexer votre contenu en ajax Prise en compte différente à partir de mai 2018 des urls en #! Reco de Google, utiliser la méthode pushstate en HTML5 Démo sur le site de SF http://pushstate.search-foresight.com Ou en framework javascript 9

10. Oups j’ai fait mon site en full Angular JS ! Et je le regrette déjà 10 Javascript activé Javascript désactivé <body ng-controller="appController as app" id="appController"> <a href="{{pathMap._home._hash}}"> </a> <a id="triggerAutoRefreshTag" onclick='angular.element("#appController").scope().autoRe fresh(location.hash);'></a> <app-head></app-head> <app-head-mini></app-head-mini> <div class="container main {{app.isCurrentContext(pathMap._phoneDetails._formated Hash) || app.isCurrentContext(pathMap._hotspotDetails._formated Hash) ? 'phonedetails' : ''}}"> <app-navigator></app-navigator> <app-title></app-title> <banner></banner> <app-container></app-container> <store-container></store-container> <phone-container></phone-container> <support-container></support-container> <plan-container></plan-container> <as-container ng-if="appName=='spp'"></as-container> <familyplans-container ng- if="appName=='spp'"></familyplans-container> <checkout-container></checkout-container> <page></page> Euh … où est le contenu ?

11. Rendre ces sites crawlables et indexables Le contenu est parfaitement visible pour Google C’est possible, mais pas simple 11 Et pourtant le code téléchargé ressemble à ça : </head> <body itemscope itemtype="http://schema.org/WebPage"> <div class="wrapper"> <div ng-include="'app/layout/shell.html'"></div> <div id="splash-page" ng-show="showSplash"> <div class="page-splash"> <div class="page-splash-message"> </div> <div class="progress progress-striped active page-progress-bar"> <div class="bar"></div> </div> </div> </div> </div> <script src="rsc/js/lib-adc3d5f6d9.js"></script> <script src="rsc/js/app-f84e7b0c4f.js"></script> </body> </html>

12. La reco : coder en JS côté serveur Code isomorphe : le même code peut être utilisé côté navigateur, côté serveur, ou n’importe où entre les deux Avec ReactJS ou HapiJS, on peut donc générer le HTML avant de l’envoyer au navigateur Il devient possible de créer des sites webs avec des frameworks JS, sans générer de problèmes avec le SEO Attention : mal utilisés, ces frameworks JS de dernière génération peuvent poser les mêmes problèmes que ceux expérimentés avec la première génération Server side rendering 12

13. Agence conseil en stratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics Chantiers Recherche mobile Web mobile

14. « Nous sommes tous hyper connectés à notre mobile » 14

15. Il semblerait que ce soit devenu un nouveau besoin primaire 15

16. S’adapter en mobile first index Si le site est responsive : Impact minimum Rendre le site compatible avec les nouvelles exigences mobiles : Pubs intrusives Performances Etc. Si le site est une version mobile en m. ou du dynamic serving Plusieurs points d’attention Risque d’impact négatif sur les classements On en reparle en détail tout à l’heure 16

17. Agence conseil en stratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics Créer des pages AMP 17

18. Le contexte : des pages mobiles trop lentes Le poids des pages mobiles ne cesse d’augmenter La faute : A des pages RWD mal conçues A des pages mobiles conçues avec des frameworks et des standards conçus… pour le desktop

19. Et pour les sites éditoriaux, c’est pire Le problème : Les scripts de tracking Les mouchards publicitaires Les gestionnaires de bannières La monétisation implique l’emploi de scripts javascripts nombreux, lourds et lents Par ailleurs, ces sites présentent : Pages avec beaucoup de contenus Des images et des videos 19

20. Une lenteur qui fait fuir les internautes A partir d’un load time de 2 sec, on perd un internaute sur deux Bref, le web mobile est partiellement inutilisable, car le chargement des pages est trop lent ! Et ce n’est pas qu’un problème de bande passante, de 3G vs 4G 20

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

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

23. A quoi ressemble ce code ? AMP c’est du HTML5 Mais un « sous ensemble » du HTML5 A droite : le code d’une page AMP ultra simple 23

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

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

26. Peut-on faire des pages AMP sa version mobile ? Si vous déclarez l’AMP comme votre version mobile via les rel=alternate, alors les pages AMP seront votre version mobile Sinon : vous n’avez pas de version mobile ! Pour le mobile first index, si vous n’avez pas de version mobile déclarée, c’est la version desktop qui sera indexée, pas la version AMP ! Tout à fait, mais attention aux balises rel=alternate 26

27. Agence conseil en stratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics Les pages AMP : Pourquoi les utiliser

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

29. C’est VRAIMENT plus rapide Source : Rannaa Zhou de Google, SMX West 2017 29

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

31. VRAIMENT plus de conversions Etude Wompmobile 2017 31

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

33. Indirectement, il y’a parfois un ranking boost Deux exemples Impact avec des cas de sites mobiles AMP Cause : probablement le speed boost Un code plus SEO friendly ? Mais avoir des pages AMP n’est pas un ranking factor 33

34. Il y’a aussi le « label » AMP sur les résultats Question : quelle est la proportion d’utilisateurs qui ont compris que les résultats avec ce label s’affichaient plus vite Pas d’étude sérieuse, mais ils sont visiblement minoritaires Notons que l’affichage du label n’est pas stable, il y’a eu beaucoup de test and learn depuis fin 2015 Test label bleu « instant » en oct 2017 34

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

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

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

38. Le nombre de sites AMP a explosé 4 milliards de pages AMP, 25 millions de domaines

39. Et les sites ecommerce s’y mettent Le « traffic boost » est moins net que pour le site media Le « conversion boost » est néanmoins intéressant 39

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

41. Agence conseil en stratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics Les progressive Web Apps

42. Qu’est ce que le Progressive Web Apps? Site mobile + Application • Les principaux avantages: ➢ Un site web qui fonctionne sans connexion (comme une app) ➢ Une site référençable ➢ Un excellent temps de chargement ➢ Un support interactif avec des notifications (comme une app)

43. Et Google recommande… Le mix du PWA et l’AMP Google recommande de cumuler les deux technologies : AMP + PWA = #PWAMPAccelerated Mobile Pages

44. Le meilleur des deux mondes PWAMP

45. Agence conseil en stratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics HTTPS : Sécurisez vos données

46. Évolution des sites en HTTPS Nous atteignons 75% des sites qui sécurisés sur les 30 derniers jours Mozcast : Outil permettant de suivre l’évolution des SERPS 46

47. Passage au HTTPS À chaque étape, les impacts peuvent être importants En 3 étapes 47 Choix du certificat MAJ URLs/Ressources Plan de redirection

48. Agence conseil en stratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics HTTP2

49. HTTP2 Le protocole pour la performance

50. HTTP2 C’est facile à dire! 1) Toutes les technologies ne le supportent pas: Magento 1, NGNIX, Prestashop <1.6 2) Passer au HTTPS 3) Revoir les optimisations faites en protocole HTTP1 (regrouper les appels JS et CCS par exemple) 4) Se limiter en termes de domaine appelant des éléments de construction de la page 5) Avoir des équipes techniques agiles et compétentes

51. Restons en contact Philippe YONNET | CEO philippe.yonnet@search-foresight.com +33 1 74 18 29 40 Slideshare.net/S4sight @S4sight | @Cariboo_seo www.search-foresight.com 51

Les chantiers indispensables à ajouter à votre roadmap 2018 - Philippe Yonnet - Petit Déjeuner du 1er Février - Luxembourg

Vous êtes en train de lire un aperçu.

Consultez-les par la suite

Les chantiers indispensables à ajouter à votre roadmap 2018 - Philippe Yonnet - Petit Déjeuner du 1er Février - Luxembourg

Plus De Contenu Connexe

Diaporamas pour vous (20)

Similaire à Les chantiers indispensables à ajouter à votre roadmap 2018 - Philippe Yonnet - Petit Déjeuner du 1er Février - Luxembourg (20)

Plus par Peak Ace (20)

Plus récents (20)