Les bonnes pratiques SEO avec les frameworks javascript - SEO CAMPUS 9 mars 2017

Fates dcoller votre trafic & vos leads

SEO & Frameworks JS

Cedric Rambaud

Consultant SEO Senior Search Foresight

Philippe Yonnet

DG et fondateur Search Foresight3

Confiez-nous vos projets ambitieux Plateforme e-commerce, Accompagnement SEA international, Migration & RefonteNos experts matrisent les problmatiques les plus avances.

4

PROJETS COMPLEXESPROBLEMATIQUES TECHNIQUES, CMS, MIGRATIONS, ORGANISATION

PROJETS EXTREMESSITES A FORT TRAFIC, LEADERS, GRANDS COMPTES, FORTES VOLUMETRIES

INTERNATIONALSITES MULTILINGUES, SEO LOCAL,GESTION DES LANGUES

SF vous partage sa passion du Search Chaque semaine, de nouvelles ressources votre disposition en exclusivit5Des prises de parole chaque semaineUn accs en avant premire aux web-confrences Search Foresight et aux contenus de nos prises de parole pour vous transmettre notre exprienceDes contenus de rfrence Des contenus exclusifs chaque semaine : Newsletter, Articles, Case study, EtudesUne communaut de passionnsPartagez avec une communaut dexperts du Digital, du Search, du Webmarketing Des vnements pointusEchangez et networkez lors de nos vnements exclusifs : Meet-up, Barcamp, Petits-djeuners

SF recrutehttps://www.search-foresight.com/agence-seo/nos-jobs/

Retrouvez-nous au job dating organis loccasion du SEO Campus 17h30 6

La problmatique7

Agence conseil en stratgie digitale | SEO SEM CRO Inbound Marketing Analytics

Oups jai fait mon site en full Angular JS !Et je le regrette dj8

Javascript activJavascript dsactiv

Euh o est le contenu ?

Un site full angular index

Angular JS cest compliqu, cela ne renvoie pas le mme code quun site standard et les bots ne semblent pas comprendre ce quils voient. Et pourtant.

9 un site full angular JS peut tre index !

Par contre, ct visibilit, cest plus vraiment a

10

Ce que voit lutilisateur

Tout le contenu est accessible avec une navigation dans la sidebar de gauche.

11

Ce que voit GooglebotEt pourtant le code tlcharg ressemble a :

La rendition est parfaite sur fetch as Googlebot12

Ce que voit un bot normalLe contenu nest pas visible. L o se trouvaient les contenus se trouvent maintenant des variables.

Simulation via Browseo13

Google et le javascript14


Une histoire damourEn 2008 google nous dit : je peux crawler le flash et le javascript ! Cependant entre le discours et la ralit des faits il y avait alors un foss ! Ds lors, les webmasters et SEO partaient tout de mme du principe que Google ne crawlait pas le javascript.

Depuis 2015 la question se repose de plus en plus : Google crawl-t-il le javascript ? Et depuis 2015 la rponse penche plutt vers le Oui maisEn 2016 Google met jour ses guidelines concernant le javascript en indiquant quil supporte lutilisation du javascript pour les titles, description et robots meta tags.

15

+

=

?

Google sait rendre le JS et CSSGoogle peut comprendre et rendre le CSS et le JS. En tmoigne un exemple trs simple : les sites responsives. Google doit avoir accs au CSS dun site ( minima) pour comprendre quun site responsive est mobile friendly.

Aussi, un explorer comme Google dans la search console nous montre trs clairement que Google voit ce que le navigateur voit.

16

Et les liens brouills alors ?Cela a bien videmment pour consquence que les liens brouills en javascript ne le sont plus vraiment * priori* !

Google peut lire par exemple : Les liens avec la fonction OnclickLes liens avec la fonction Onclick qui gnre le lien (via lappel un script dans le header de la page)Les liens jquery faisant appel un script dans le header de la pageLes liens onclick avec un appel un script externe

17

Exemple de liens lus par Googlebot

Sil peut suivre les liens Il peut aussi lire le contenu !Cela impact donc galement la lecture des contenus encapsuls dans du javascript et leur indexation.

Google pourra indexer des pages avec du contenu gnr dynamiquement en javascript ce qui peut tre soit :

Une bonne nouvelle : mon texte est intressant et enrichit la page peut-tre un meilleur positionnement.

Une mauvaise nouvelle : le contenu gnr en javascript nest pas intressant et ne va pas dans le sens de ce que je voulais faire.

18

Google peut tout lire ? NON.Google ne peut pas, ne sait pas tout lire : cest le cas de lAJAX par exemple.

POURQUOI ? Parce que lajax ne ncessite aucune action pour tre charg aucun moyen pour le moteur de deviner ce quil doit faire pour dclencher lajax !

En 2009 Google mettait en avant la technique des hash bang pour aider le crawl et lindexation des contenus chargs en AJAX.

En 2015 Google ne recommande plus cette technique parce quil nous dit pouvoir lire les contenus gnrs en AJAX.

Malheureusement, dans les faits cest loin dtre concluant.

19

La mthode (obsolte) du hash bangEn 2009, Google propose lutilisation du hashbang (escaped fragment) pour mieux grer lAJAX.

Principe : Utilisation habituelle du # (hash) pour afficher un lment dune page ct client.Ajout du ! (bang) pour le rendre comprhensible par le moteur.

Lorsquil rencontre une URL avec un hashbang (#!) le moteur va la crawler en remplaant cet lment par un _escaped_fragment_

Puis il va indexer la page sous sa forme originale.

20

La mthode HTML 5 (sympa) du pushstate()Il sagit dune fonction javascript directement incluse dans le HTML5. Concrtement, pushState() change le chemin de lurl qui apparait dans la barre dadresse de lutilisateur.

Quel intrt pour le SEO ? Les moteurs seront capables de lire ces URL et de les diffrencier des autres.

Quand lutiliser ? chaque fois que lon identifie un tat qui correspond:- lquivalent dune page HTML complte (90% / 100% diffrente dans son contenu de ltat prcdent)- une page suffisamment diffrente pour justifier son bookmarkage dans un favori, dans un lien externe, dans un retour en arrire dans lhistorique

Alors, on pousse lurl correspondant cet tat via la mthode pushstate aprs dclenchant de lvnement ou de laction conduisant ce changement dtat.

21

window.history.pushState('','','test/url/that-does-not-really-exist')Dmonstration

Du pushstate sur du scroll infiniImplmentation sur une long scrolling page :https://webmasters.googleblog.com/2014/02/infinite-scroll-search-friendly.html 22

Consquence : les tabs et contenus cachs

Ils peuvent ne pas tre indexs, ou leur poids peut-tre diminu23Attention : cela changera avec le mobile first index

Quest-ce quun framework javascript ?


Larchitecture traditionnelle des sites

Les pages sont statiques

Le client side rendering

La magie se passe ct client (dans le navigateur) : utilisation de lAJAX26

Le concept de SPA (single page application)Application web monopageTwitter est un site web de type SPA

Problme : les moteurs de recherche sont construits pour associer des signaux de multiples pages

Crer un site web monopage pose donc des problmes pour le rfrencement

Larchitecture version SPA (client side)

28

Les principaux frameworks JSAngularJSLe plus connu, appartenant lcosystme GoogleDiffrences entre version 1 et version 2 (la V2 peut tre utilise en middleware et en rendition hybridehttps://angularjs.org/

EmberJShttp://emberjs.com/

BackboneJShttp://backbonejs.org/

29

Challenge n1 pour les moteursUn bot traditionnel de moteur de recherche tlcharge le code HTML, et analyse le contenu prsent dans ce code

Le contenu gnr en ajax ou en javascript est ignor

Cest encore vrai pour la plupart des moteurs de recherche

Googlebot, avec son headless browser, fait exceptionExplorer une SPA

Challenge n2

Quoi indexer ?Le contenu change en fonction des interactions : Comment identifier tous les contenus possibles ?Si on clique partout, tout mrite-til dtre index ?Comment viter que lexploration dun tel site demande un temps trs long ?Quels signaux prendre en compte ?Comment exploiter le maillage hypertexte ?Comment analyser le contenu ? Comment analyser un morceau de page ou au contraire une page qui contient lquivalent dun site entierA quoi rattacher ces signaux ?Si la notion de page relie une url a disparu, comment continuer utiliser lalgorithme habituel ?

Quoi indexer ? Quels signaux prendre en compte ? A quoi les associer ?

Les performances en SEO ne sont pas toujours au rendez-vous

Il est possible de rendre un site de type SPA, avec un rendu client side entirement crawlable et indexable, pour GoogleNous allons voir comment un peu plus loinAttention : on est proche des limites des possibilits actuelles du moteurmais attention : cela ne marchera quavec Google, attention pour les sites internationaux

Mais les performances en termes de position ne sont pas toujours au rendez-vousRendre le site explorable est juste un minimum syndical

Conclusion : il est formellement dconseill d'utiliser ces technologies dont la compatibilit SEO est partielle voire nulle et en plus, c'est mme dconseill parce que ce n'est pas une solutionaussi logique et lgante que les dveloppeurs et intgrateurs veulent bien le dire

Deux bonnes raisons (non SEO)pour ne pas utiliser cette approche33


Ce n'est pas compatible avec les principes de l'unobstrusive javascriptUnobstrusive javascript : Javascript discret en franaisCest une bonne pratique de codage de page web qui consiste bien sparer le code HTML et Javascript pour limiter les inconvnients habituels provoqus par leur intricationPb de maintenabilitPb de compatibilitPb daccessibilitEt bien sr : problmes de SEO

Exemple :Ce code nest pas conforme :

Il faut utiliser ce code plutt

Et

document.getElementById( "datefield" ).addEventListener( 'change', function(){ do_something(); }, false );

Et la compatibilit avec lamlioration progressive ?

La plupart des implmentations faites avec des frameworks javascripts ne sont pas compltement fidles, voire pas du tout, avec les prceptes de lamlioration progressiveQuand on dsactive le javascript : pas de fallback, le site nest plus utilisableAvec des navigateurs exotiques ou anciens, le site peut montrer des bugs bloquantsLa lourdeur des pages en javascript (chargs avec la page ou dynamiquement) peut poser des problmes de temps de rendition sur smartphoneEt le mobile first ?

Pourquoi cest populaire chez les dveloppeurs ?

Cela transforme les sites web en vraies applicationsUn site web est vraiment un objet logiciel exotique pour la plupart des dveloppeurs habitus faire des logiciels classiques et coder des logiciels en utilisant des langages comme le C, ou le JavaUn seul langage permet de faire tout le site webCela dporte certains problmes ct client (navigateur)Cela permet des interfaces richesCest moderneCest plus efficient, on dveloppe plus rapidementQuelques raisons invoques rgulirement !

Auditer un site fait avec un framework javascript37


Tester une page avec "fetch as Google"https://support.google.com/webmasters/answer/6066468?hl=fr

Si le test montre que Google ne parvient pas rendre la page correctement : vous avez un problme

Le concept de "headless browser"Un browser headless est un environnement logiciel, programmable ou pilotable en ligne de commande, qui est capable deffectuer une rendition complte dune page HTML en excutant tout le code : HTML, CSS et JavascriptIl est qualifi de headless car il ne dispose pas de GUI (dinterface utilisateur)Grce un headless browser, on peut donc simuler tout ce qui se passe dans un navigateur comme Chrome ou Firefox. Et donc tester le code gnr en Ajax, ou par des framework JavascriptRemarque : ce type de crawl cre de fausses visites dans vos outils de web analytics

Un bot sans tte mais avec des yeux !

PhantomJS et CasperJSPhantomJS est le headless browser le plus populaire : http://phantomjs.org/

CasperJS est un webkit permettant de scraper le contenu de pages web. Il utilise PhantomJS comme headless browserhttp://casperjs.org/

Auditer avec Screaming FrogScreaming Frog est un crawler orient SEO

Il dispose depuis peu dun mode headless browser bas sur PhantomJS

Dans ce mode, il peut crawler un site en full Angular

https://www.screamingfrog.co.uk/seo-spider/

Le mode crawl Javascript

Auditer un site avec BotifyMme possibilit dans Botify depuis janvier 2017https://www.botify.com/blog/breaking-news-botify-announces-javascript-crawl/

https://www.botify.com/blog/crawling-javascript-for-technical-seo-audits/

Comment rendre ces sites SEO Compliant ?43


Solution 1 : coder diffremment

Par exemple : amlioration progressive et jQuery

Crer des snapshots HTML (soi mme)Le principe : Le code javascript est excut via un headless browser ct server, afin de gnrer le HTML produit par le code javascriptCe code est captur avant dtre envoy, comme une page HTML normale, au navigateur de linternauteProblme : la mthode fait perdre une partie de lintrt du client side rendering, la page devient statiqueSouvent, larbitrage est denvoyer les snapshots aux bots des moteurs de recherche uniquement

Une mthode prconise par Google pour lAjax

Utiliser un serveur de prrendition tiersPrerender.io: https://prerender.io/

SEO 4 Ajax (Cocorico !) :https://www.seo4ajax.com/

Brombone : http://www.brombone.com/

Inutile de dvelopper votre propre solution de prrendition

Attention : les serveurs de rendition utilisent la mthode obsolte pour rendre lajax crawlableSoit la mthode des escaped fragments avec hash bangs

Soit la mthode des escaped fragments avec balise meta

Attention, cette mthode en HTML5 utilisant la mthode pushstate() est aussi obsolte que lautre !!!

Pour le moment : tout fonctionne correctementCest compatible avec la plupart des moteurs de recherche qui comptent : Bing, YandexMais demain ???

www.example.com/ajax.html#!key=value www.example.com/ajax.html?_escaped_fragment_=key=value

Frameworks javascript :The next generation48


ReactJS, HapiJS, Angular2 etc.Code isomorphe : le mme code peut tre utilis ct navigateur, ct serveur, ou nimporte o entre les deuxAvec ReactJS ou HapiJS, on peut donc gnrer le HTML avant de lenvoyer au navigateurIl devient possible de crer des sites webs avec des frameworks JS, sans gnrer de problmes avec le SEOAttention : mal utiliss, ces frameworks JS de dernire gnration peuvent poser les mmes problmes que ceux expriments avec la premire gnrationDes frameworks isomorphes capables dune rendition hybride ou server side

Conclusion50


ConclusionComptences ct dveloppeursComptences ct SEO

Et dans tous les cas, cest rserver des situations o le trafic SEO nest pas stratgique pour le site :On peut rendre les sites faits avec ces technologies crawlables et indexablesMais si lon veut atteindre des positions cls sur des requtes concurrentielles, il vaut mieux compter sur un site web en server side rendering lancienneUn casse tte qui nest pas insoluble, mais qui demande de solides comptences techniques

Merci.52

La question qui peut vous rapporter 1 MugQuel est le nom anglais de la mthode recommande pour bien sparer le HTML et le javascript ?53

Restons en contactPhilippe Yonnet, DG et [email protected]+ 33 1 74 18 29 40 / + 33 6 99 60 21 49Slideshare.net/S4sight@S4sight & @Cariboo_seowww.search-foresight.com54

Internet

Les bonnes pratiques SEO avec les frameworks javascript - SEO CAMPUS 9 mars 2017