SlideShare une entreprise Scribd logo
1  sur  54
Télécharger pour lire hors ligne
SEO & Frameworks JS
Cedric Rambaud
Consultant SEO Senior – Search Foresight
Philippe Yonnet
DG et fondateur – Search Foresight
3
Confiez-nous vos projets ambitieux
Plateforme e-commerce, Accompagnement SEA international, Migration & Refonte…
Nos experts maîtrisent les problématiques les plus avancées.
4
PROJETS COMPLEXES
PROBLEMATIQUES TECHNIQUES,
CMS, MIGRATIONS, ORGANISATION
PROJETS EXTREMES
SITES A FORT TRAFIC, LEADERS,
GRANDS COMPTES, FORTES
VOLUMETRIES
INTERNATIONAL
SITES MULTILINGUES, SEO LOCAL,
GESTION DES LANGUES
SF vous partage sa passion du Search
Chaque semaine, de nouvelles ressources à votre disposition en exclusivité
5
Des prises de parole chaque semaine
Un accès en avant première aux web-conférences
Search Foresight et aux contenus de nos prises de
parole pour vous transmettre notre expérience
Des contenus de référence
Des contenus exclusifs chaque semaine :
Newsletter, Articles, Case study, Etudes…
Une communauté de passionnés
Partagez avec une communauté d’experts du Digital,
du Search, du Webmarketing…
Des évènements pointus
Echangez et networkez lors de nos évènements
exclusifs : Meet-up, Barcamp, Petits-déjeuners…
SF recrute
https://www.search-foresight.com/agence-seo/nos-jobs/
Retrouvez-nous au job dating organisé à l’occasion du SEO Campus à 17h30
6
Agence conseil en stratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics
La problématique
7
Oups j’ai fait mon site en full Angular JS !
Et je le regrette déjà
8
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 ?
Un site full angular indexé
Angular JS c’est compliqué, cela ne renvoie pas le même code qu’un site « standard »
et les bots ne semblent pas comprendre ce qu’ils voient. Et pourtant….
9
… un site full angular JS peut être
indexé !
Par contre, côté visibilité, c’est plus vraiment ça
10
Ce que voit l’utilisateur
Tout le contenu est accessible
avec une navigation dans la
sidebar de gauche.
11
Ce que voit Googlebot
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>
La rendition est parfaite sur fetch as Googlebot
12
Ce que voit un bot ‘normal’
Le contenu n’est pas visible. Là où se trouvaient
les contenus se trouvent maintenant des
variables.
Simulation via Browseo
13
Agence conseil en stratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics
Google et le javascript
14
Une histoire d’amour
En 2008 google nous dit : je peux crawler le flash et le javascript ! Cependant entre le
discours et la réalité des faits il y avait alors un fossé ! Dès lors, les webmasters et SEO
partaient tout de même 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 réponse penche plutôt vers le « Oui mais… »
En 2016 Google met à jour ses guidelines concernant le javascript en indiquant qu’il
supporte l’utilisation du javascript pour les titles, description et robots meta tags.
15
+ = ?
Google sait rendre le JS et CSS
Google peut comprendre et rendre le CSS et le JS. En témoigne un exemple très simple : les
sites responsives. Google doit avoir accès au CSS d’un site (à minima) pour comprendre qu’un
site responsive est mobile friendly.
Aussi, un ‘explorer comme Google’ dans la search console nous montre très clairement que
Google « voit » ce que le navigateur « voit ».
16
Et les liens brouillés alors ?
Cela a bien évidemment pour conséquence que les liens « brouillés » en javascript ne le sont
plus vraiment *à priori* !
Google peut lire par exemple :
Les liens avec la fonction Onclick
Les liens avec la fonction Onclick qui génère le lien (via l’appel à un script dans le header de la
page)
Les liens jquery faisant appel à un script dans le header de la page
Les liens onclick avec un appel à un script externe
17
Exemple de liens lus par Googlebot
S’il peut suivre les liens… Il peut aussi lire le contenu !
Cela impact donc également la lecture des contenus encapsulés dans du javascript et leur
indexation.
Google pourra indexer des pages avec du contenu généré dynamiquement en javascript ce qui
peut être soit :
Une bonne nouvelle : mon texte est intéressant et enrichit la page  peut-être un meilleur
positionnement.
Une mauvaise nouvelle : le contenu généré en javascript n’est pas intéressant 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 : c’est le cas de l’AJAX par exemple.
POURQUOI ? Parce que l’ajax ne nécessite aucune action pour être chargé  aucun moyen
pour le moteur de « deviner » ce qu’il doit faire pour déclencher l’ajax !
En 2009 Google mettait en avant la technique des hash bang pour aider le crawl et
l’indexation des contenus chargés en AJAX.
En 2015 Google ne recommande plus cette technique parce qu’il nous dit pouvoir lire les
contenus générés en AJAX.
Malheureusement, dans les faits c’est loin d’être concluant.
19
La méthode (obsolète) du hash bang
En 2009, Google propose l’utilisation du
hashbang (escaped fragment) pour mieux gérer
l’AJAX.
Principe : Utilisation habituelle du # (hash)
pour afficher un élément d’une page côté
client.
Ajout du ! (bang) pour le rendre
compréhensible par le moteur.
Lorsqu’il rencontre une URL avec un hashbang
(#!) le moteur va la crawler en remplaçant cet
élément par un _escaped_fragment_
Puis il va indexer la page sous sa forme
originale.
20
La méthode HTML 5 (sympa) du pushstate()
Il s’agit d’une fonction javascript directement incluse dans le
HTML5. Concrètement, pushState() change le chemin de l’url qui
apparait dans la barre d’adresse de l’utilisateur.
Quel intérêt pour le SEO ? Les moteurs seront capables de lire ces
URL et de les différencier des autres.
Quand l’utiliser ? À chaque fois que l’on identifie un état qui
correspond :
- À l’équivalent d’une page HTML complète (90% / 100% différente
dans son contenu de l’état précédent)
- À une page suffisamment différente pour justifier « son
bookmarkage » dans un favori, dans un lien externe, dans un retour
en arrière dans l’historique
Alors, on pousse l’url correspondant à cet état via la méthode
pushstate après déclenchant de l’évènement ou de l’action
conduisant à ce changement d’état.
21
window.history.pushState('','','t
est/url/that-does-not-really-
exist')
Démonstration
Du pushstate sur du scroll infini
Implémentation sur une long
scrolling page :
https://webmasters.googleblog.com
/2014/02/infinite-scroll-search-
friendly.html
22
Conséquence : les tabs et contenus cachés
Ils peuvent ne pas être indexés, ou leur poids peut-être diminué
23
Attention : cela changera avec le « mobile first index »
Agence conseil en stratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics
Qu’est-ce qu’un framework
javascript ?
L’architecture traditionnelle des sites
Les pages sont statiques
Le « client side rendering »
La magie se passe côté client (dans le navigateur) : utilisation de l’AJAX
26
Le concept de SPA (single page application)
Application web monopage
Twitter est un site web de type SPA
Problème : les moteurs de recherche sont
construits pour associer des signaux à de
multiples pages
Créer un site web monopage pose donc
des problèmes pour le référencement
L’architecture version SPA (client side)
28
Les principaux frameworks JS
AngularJS
Le plus connu, appartenant à l’écosystème
Google
Différences entre version 1 et version 2 (la V2
peut être utilisée en « middleware » et « en
rendition hybride »
https://angularjs.org/
EmberJS
http://emberjs.com/
BackboneJS
http://backbonejs.org/
29
Challenge n°1 pour les moteurs
Un bot traditionnel de moteur de
recherche télécharge le code HTML, et
analyse le contenu présent dans ce code
Le contenu généré en ajax ou en javascript
est ignoré
C’est encore vrai pour la plupart des
moteurs de recherche
Googlebot, avec son headless browser, fait
exception
Explorer une SPA
Challenge n°2
Quoi indexer ?
Le contenu change en fonction des interactions : Comment identifier tous les contenus possibles ?
Si on « clique » partout, tout mérite-t’il d’être indexé ?
Comment éviter que l’exploration d’un tel site demande un temps très 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 l’équivalent d’un site
entier
A quoi rattacher ces signaux ?
Si la notion de page reliée à une url a disparu, comment continuer à utiliser l’algorithme 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 » entièrement crawlable et indexable, pour
Google
Nous allons voir comment un peu plus loin
Attention : on est proche des limites des possibilités actuelles du
moteur
mais attention : cela ne marchera qu’avec Google, attention pour
les sites internationaux
Mais les performances en termes de position ne sont pas
toujours au rendez-vous
Rendre le site explorable est juste un minimum syndical
Conclusion : il est formellement déconseillé d'utiliser ces
technologies dont la compatibilité SEO est partielle voire nulle
et en plus, c'est même déconseillé parce que ce n'est pas une
solution aussi logique et élégante que les développeurs et
intégrateurs veulent bien le dire
Agence conseil en stratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics
Deux bonnes raisons (non SEO)
pour ne pas utiliser cette
approche
33
Ce n'est pas compatible avec les principes de
l'unobstrusive javascript
Unobstrusive javascript : Javascript discret en français
C’est une bonne pratique de codage de page web qui consiste à bien séparer le code HTML et Javascript
pour limiter les inconvénients habituels provoqués par leur intrication
Pb de maintenabilité
Pb de compatibilité
Pb d’accessibilité
Et bien sûr : problèmes de SEO
Exemple :
Ce code n’est pas conforme :
Il faut utiliser ce code plutôt
Et
<input type="text" name="date" onchange="validateDate(this);" />
<input type="text" name="date" id="datefield" />
document.getElementById( "datefield" ).addEventListener( 'change', function(){ do_something(); }, false );
Et la compatibilité avec l’amélioration progressive ?
La plupart des implémentations faites avec
des frameworks javascripts ne sont pas
complètement fidèles, voire pas du tout,
avec les préceptes de l’amélioration
progressive
Quand on désactive le javascript : pas de
fallback, le site n’est plus utilisable
Avec des navigateurs exotiques ou anciens, le
site peut montrer des bugs bloquants
La lourdeur des pages en javascript (chargés
avec la page ou dynamiquement) peut poser
des problèmes de temps de rendition sur
smartphone
Et le « mobile first » ?
Pourquoi c’est populaire chez les développeurs ?
Cela transforme les sites web en vraies applications
Un site web est vraiment un objet logiciel exotique pour la plupart des
développeurs habitués à faire des logiciels classiques et à coder des logiciels en
utilisant des langages comme le C, ou le Java
Un seul langage permet de faire tout le site web
Cela déporte certains problèmes côté client (navigateur)
Cela permet des interfaces riches
C’est moderne
C’est plus efficient, on développe plus rapidement
Quelques raisons invoquées régulièrement !
Agence conseil en stratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics
Auditer un site fait avec un
framework javascript
37
Tester une page avec "fetch as Google"
https://support.google.co
m/webmasters/answer/60
66468?hl=fr
Si le test montre que Google ne parvient pas à « rendre » la page correctement : vous avez un problème
Le concept de "headless browser"
Un browser « headless » est un environnement
logiciel, programmable ou pilotable en ligne de
commande, qui est capable d’effectuer une rendition
complète d’une page HTML en exécutant tout le code
: HTML, CSS et Javascript
Il est qualifié de « headless » car il ne dispose pas de
GUI (d’interface utilisateur)
Grâce à un headless browser, on peut donc simuler
tout ce qui se passe dans un navigateur comme
Chrome ou Firefox. Et donc tester le code généré en
Ajax, ou par des framework Javascript
Remarque : ce type de crawl crée de « fausses visites »
dans vos outils de web analytics
Un bot sans tête mais avec des yeux !
PhantomJS et CasperJS
PhantomJS 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 browser
http://casperjs.org/
Auditer avec Screaming Frog
Screaming Frog est un crawler orienté SEO
Il dispose depuis peu d’un 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 Botify
Même possibilité dans Botify depuis janvier
2017
https://www.botify.com/blog/breaking-news-
botify-announces-javascript-crawl/
https://www.botify.com/blog/crawling-
javascript-for-technical-seo-audits/
Agence conseil en stratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics
Comment rendre ces sites SEO
Compliant ?
43
Solution 1 : coder différemment
Par exemple : amélioration progressive et jQuery
Créer des snapshots HTML (soi même)
Le principe :
Le code javascript est exécuté via un headless
browser côté server, afin de générer le HTML
produit par le code javascript
Ce code est « capturé » avant d’être envoyé,
comme une page HTML normale, au navigateur
de l’internaute
Problème : la méthode fait perdre une partie
de l’intérêt du « client side rendering », la
page devient statique
Souvent, l’arbitrage est d’envoyer les snapshots
aux bots des moteurs de recherche uniquement
Une méthode préconisée par Google pour l’Ajax
Utiliser un serveur de prérendition tiers
Prerender.io : https://prerender.io/
SEO 4 Ajax (Cocorico !) :https://www.seo4ajax.com/
Brombone : http://www.brombone.com/
Inutile de développer votre propre solution de prérendition
Attention : les serveurs de rendition utilisent la
méthode obsolète pour rendre l’ajax crawlable
Soit la méthode des escaped fragments avec hash bangs
Soit la méthode des escaped fragments avec balise meta
<meta name="fragment" content="!">
Attention, cette méthode en HTML5 utilisant la méthode pushstate() est aussi obsolète que l’autre !!!
Pour le moment : tout fonctionne correctement
C’est compatible avec la plupart des moteurs de recherche qui comptent : Bing, Yandex…
Mais demain ???
www.example.com/ajax.html#!key=value
www.example.com/ajax.html?_escaped_fragment_=key=value
Agence conseil en stratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics
Frameworks javascript :
The next generation
48
ReactJS, HapiJS, Angular2 etc.
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
Des frameworks « isomorphes » capables d’une rendition hybride ou server side
Agence conseil en stratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics
Conclusion
50
Conclusion
Compétences côté développeurs
Compétences côté SEO
Et dans tous les cas, c’est à réserver à des
situations où le trafic SEO n’est pas stratégique
pour le site :
- On peut rendre les sites faits avec ces
technologies crawlables et indexables
- Mais si l’on veut atteindre des positions clés
sur des requêtes concurrentielles, il vaut
mieux compter sur un site web en server
side rendering à l’ancienne
Un casse tête qui n’est pas insoluble, mais qui demande de solides compétences techniques
Merci.
52
La question qui peut vous rapporter 1 Mug
Quel est le nom anglais de la méthode recommandée pour bien
séparer le HTML et le javascript ?
53
Restons en contact
Philippe Yonnet, DG et fondateur
philippe.yonnet@search-foresight.com
+ 33 1 74 18 29 40 / + 33 6 99 60 21 49
Slideshare.net/S4sight
@S4sight & @Cariboo_seo
www.search-foresight.com
54

Contenu connexe

Tendances

Cocon, metamots et plus si affinités sémantiques. Seo campus-03-2017
Cocon, metamots et plus si affinités sémantiques. Seo campus-03-2017Cocon, metamots et plus si affinités sémantiques. Seo campus-03-2017
Cocon, metamots et plus si affinités sémantiques. Seo campus-03-2017Olivier Andrieu
 
Micro interactions - Modèles d’interface utilisateur et optimisation UX
Micro interactions - Modèles d’interface utilisateur et optimisation UXMicro interactions - Modèles d’interface utilisateur et optimisation UX
Micro interactions - Modèles d’interface utilisateur et optimisation UXRelax In The Air
 
Migration seo - astuces techniques pour améliorer votre trafic
Migration seo - astuces techniques pour améliorer votre traficMigration seo - astuces techniques pour améliorer votre trafic
Migration seo - astuces techniques pour améliorer votre traficAymeric Bouillat
 
Analyse de logs par l'exemple - seocampus 2017
Analyse de logs par l'exemple - seocampus 2017Analyse de logs par l'exemple - seocampus 2017
Analyse de logs par l'exemple - seocampus 2017Madeline Pinthon
 
Connaissances SEO basique par www.seo-hero.fr
Connaissances SEO basique par www.seo-hero.frConnaissances SEO basique par www.seo-hero.fr
Connaissances SEO basique par www.seo-hero.frSEO-HERO
 
Les clés d’un site (beaucoup) plus rapide selon des facteurs qui restent trop...
Les clés d’un site (beaucoup) plus rapide selon des facteurs qui restent trop...Les clés d’un site (beaucoup) plus rapide selon des facteurs qui restent trop...
Les clés d’un site (beaucoup) plus rapide selon des facteurs qui restent trop...SEO CAMP
 
Techniques SEO 2016 : entités de recherche, navigation à facettes, AJAX et au...
Techniques SEO 2016 : entités de recherche, navigation à facettes, AJAX et au...Techniques SEO 2016 : entités de recherche, navigation à facettes, AJAX et au...
Techniques SEO 2016 : entités de recherche, navigation à facettes, AJAX et au...Mathieu Gheerbrant
 
Comment prévenir ou sortir d'une pénalité Google ?
Comment prévenir ou sortir d'une pénalité Google ?Comment prévenir ou sortir d'une pénalité Google ?
Comment prévenir ou sortir d'une pénalité Google ?semrush_webinars
 
Technical seo tips and tricks actionnables 2018
Technical seo tips and tricks actionnables 2018Technical seo tips and tricks actionnables 2018
Technical seo tips and tricks actionnables 2018Aymen Loukil
 
Etude de la position 0 (Featured Snippet) sur Google
Etude de la position 0 (Featured Snippet) sur GoogleEtude de la position 0 (Featured Snippet) sur Google
Etude de la position 0 (Featured Snippet) sur GoogleiProspect France
 
L'IA dans l'algorithme de Google - Matin neperien 7 juillet 2021
L'IA dans l'algorithme de Google - Matin neperien 7 juillet 2021L'IA dans l'algorithme de Google - Matin neperien 7 juillet 2021
L'IA dans l'algorithme de Google - Matin neperien 7 juillet 2021Philippe YONNET
 
La casa de SEO : les questions à se poser pour le casse SEO parfait
La casa de SEO : les questions à se poser pour le casse SEO parfaitLa casa de SEO : les questions à se poser pour le casse SEO parfait
La casa de SEO : les questions à se poser pour le casse SEO parfaitAymeric Bouillat
 
Seo camp'us 2018 - cloaking is not a crime : Patrick Valibus
Seo camp'us 2018 - cloaking is not a crime : Patrick ValibusSeo camp'us 2018 - cloaking is not a crime : Patrick Valibus
Seo camp'us 2018 - cloaking is not a crime : Patrick ValibusPatrick Valibus
 
Google AMP 1 an après : quel bilan, quelles perspectives ?
Google AMP 1 an après : quel bilan, quelles perspectives ?Google AMP 1 an après : quel bilan, quelles perspectives ?
Google AMP 1 an après : quel bilan, quelles perspectives ?Virginie Clève - largow ☕️
 
Comment passer de SEO à SEO + data
Comment passer de SEO à SEO + dataComment passer de SEO à SEO + data
Comment passer de SEO à SEO + dataSEO CAMP
 
Audit SEO : les clés de la réussite
Audit SEO : les clés de la réussiteAudit SEO : les clés de la réussite
Audit SEO : les clés de la réussiteDaniel Roch - SeoMix
 
Boostez votre référencement avec les sitemaps à l’ère du Data SEO - Olivier D...
Boostez votre référencement avec les sitemaps à l’ère du Data SEO - Olivier D...Boostez votre référencement avec les sitemaps à l’ère du Data SEO - Olivier D...
Boostez votre référencement avec les sitemaps à l’ère du Data SEO - Olivier D...SEO CAMP
 

Tendances (17)

Cocon, metamots et plus si affinités sémantiques. Seo campus-03-2017
Cocon, metamots et plus si affinités sémantiques. Seo campus-03-2017Cocon, metamots et plus si affinités sémantiques. Seo campus-03-2017
Cocon, metamots et plus si affinités sémantiques. Seo campus-03-2017
 
Micro interactions - Modèles d’interface utilisateur et optimisation UX
Micro interactions - Modèles d’interface utilisateur et optimisation UXMicro interactions - Modèles d’interface utilisateur et optimisation UX
Micro interactions - Modèles d’interface utilisateur et optimisation UX
 
Migration seo - astuces techniques pour améliorer votre trafic
Migration seo - astuces techniques pour améliorer votre traficMigration seo - astuces techniques pour améliorer votre trafic
Migration seo - astuces techniques pour améliorer votre trafic
 
Analyse de logs par l'exemple - seocampus 2017
Analyse de logs par l'exemple - seocampus 2017Analyse de logs par l'exemple - seocampus 2017
Analyse de logs par l'exemple - seocampus 2017
 
Connaissances SEO basique par www.seo-hero.fr
Connaissances SEO basique par www.seo-hero.frConnaissances SEO basique par www.seo-hero.fr
Connaissances SEO basique par www.seo-hero.fr
 
Les clés d’un site (beaucoup) plus rapide selon des facteurs qui restent trop...
Les clés d’un site (beaucoup) plus rapide selon des facteurs qui restent trop...Les clés d’un site (beaucoup) plus rapide selon des facteurs qui restent trop...
Les clés d’un site (beaucoup) plus rapide selon des facteurs qui restent trop...
 
Techniques SEO 2016 : entités de recherche, navigation à facettes, AJAX et au...
Techniques SEO 2016 : entités de recherche, navigation à facettes, AJAX et au...Techniques SEO 2016 : entités de recherche, navigation à facettes, AJAX et au...
Techniques SEO 2016 : entités de recherche, navigation à facettes, AJAX et au...
 
Comment prévenir ou sortir d'une pénalité Google ?
Comment prévenir ou sortir d'une pénalité Google ?Comment prévenir ou sortir d'une pénalité Google ?
Comment prévenir ou sortir d'une pénalité Google ?
 
Technical seo tips and tricks actionnables 2018
Technical seo tips and tricks actionnables 2018Technical seo tips and tricks actionnables 2018
Technical seo tips and tricks actionnables 2018
 
Etude de la position 0 (Featured Snippet) sur Google
Etude de la position 0 (Featured Snippet) sur GoogleEtude de la position 0 (Featured Snippet) sur Google
Etude de la position 0 (Featured Snippet) sur Google
 
L'IA dans l'algorithme de Google - Matin neperien 7 juillet 2021
L'IA dans l'algorithme de Google - Matin neperien 7 juillet 2021L'IA dans l'algorithme de Google - Matin neperien 7 juillet 2021
L'IA dans l'algorithme de Google - Matin neperien 7 juillet 2021
 
La casa de SEO : les questions à se poser pour le casse SEO parfait
La casa de SEO : les questions à se poser pour le casse SEO parfaitLa casa de SEO : les questions à se poser pour le casse SEO parfait
La casa de SEO : les questions à se poser pour le casse SEO parfait
 
Seo camp'us 2018 - cloaking is not a crime : Patrick Valibus
Seo camp'us 2018 - cloaking is not a crime : Patrick ValibusSeo camp'us 2018 - cloaking is not a crime : Patrick Valibus
Seo camp'us 2018 - cloaking is not a crime : Patrick Valibus
 
Google AMP 1 an après : quel bilan, quelles perspectives ?
Google AMP 1 an après : quel bilan, quelles perspectives ?Google AMP 1 an après : quel bilan, quelles perspectives ?
Google AMP 1 an après : quel bilan, quelles perspectives ?
 
Comment passer de SEO à SEO + data
Comment passer de SEO à SEO + dataComment passer de SEO à SEO + data
Comment passer de SEO à SEO + data
 
Audit SEO : les clés de la réussite
Audit SEO : les clés de la réussiteAudit SEO : les clés de la réussite
Audit SEO : les clés de la réussite
 
Boostez votre référencement avec les sitemaps à l’ère du Data SEO - Olivier D...
Boostez votre référencement avec les sitemaps à l’ère du Data SEO - Olivier D...Boostez votre référencement avec les sitemaps à l’ère du Data SEO - Olivier D...
Boostez votre référencement avec les sitemaps à l’ère du Data SEO - Olivier D...
 

En vedette

SEO et ecommerce sur Magento: retour d’expérience
SEO et ecommerce sur Magento: retour d’expérienceSEO et ecommerce sur Magento: retour d’expérience
SEO et ecommerce sur Magento: retour d’expérienceAurélien Lavorel
 
SEO : comment obtenir des liens puissants grâce à un contenu décalé
SEO : comment obtenir des liens puissants grâce à un contenu décaléSEO : comment obtenir des liens puissants grâce à un contenu décalé
SEO : comment obtenir des liens puissants grâce à un contenu décaléLaurent Peyrat
 
Designing Creative Content: How visualising data helps us see
Designing Creative Content: How visualising data helps us seeDesigning Creative Content: How visualising data helps us see
Designing Creative Content: How visualising data helps us seeVicke Cheung
 
Analyse de logs - Études de cas et best practices - SEO Campus 2017
Analyse de logs - Études de cas et best practices - SEO Campus 2017Analyse de logs - Études de cas et best practices - SEO Campus 2017
Analyse de logs - Études de cas et best practices - SEO Campus 2017iProspect France
 
HTTPS The Road To A More Secure Web / SEOCamp Paris
HTTPS The Road To A More Secure Web / SEOCamp ParisHTTPS The Road To A More Secure Web / SEOCamp Paris
HTTPS The Road To A More Secure Web / SEOCamp ParisAysun Akarsu
 
Measuring Content Marketing
Measuring Content MarketingMeasuring Content Marketing
Measuring Content MarketingDavid Iwanow
 
Organiser un projet à l’international : un Pari Fou
Organiser un projet à l’international : un Pari FouOrganiser un projet à l’international : un Pari Fou
Organiser un projet à l’international : un Pari FouOpen-linking
 
Pourquoi mes clients n'appliquent pas mes recommandations SEO (mais pas que ...)
Pourquoi mes clients n'appliquent pas mes recommandations SEO (mais pas que ...)Pourquoi mes clients n'appliquent pas mes recommandations SEO (mais pas que ...)
Pourquoi mes clients n'appliquent pas mes recommandations SEO (mais pas que ...)Thomas BART
 
Seo camp'us 2017 utiliser google analytics comme un voyou - aristide riou
Seo camp'us 2017   utiliser google analytics comme un voyou - aristide riouSeo camp'us 2017   utiliser google analytics comme un voyou - aristide riou
Seo camp'us 2017 utiliser google analytics comme un voyou - aristide riouPrénom Nom de famille
 
La mise en cache et ses secrets
La mise en cache et ses secretsLa mise en cache et ses secrets
La mise en cache et ses secretsAymeric Bouillat
 
Seo camp paris - A chaque enjeu, sa stratégie - Tips & REX
Seo camp paris - A chaque enjeu, sa stratégie - Tips & REX Seo camp paris - A chaque enjeu, sa stratégie - Tips & REX
Seo camp paris - A chaque enjeu, sa stratégie - Tips & REX Intuiti
 
Tendances Social Media 2017
Tendances Social Media 2017Tendances Social Media 2017
Tendances Social Media 2017Marie Dollé
 
12 secrets et astuces pour Booster votre visibilité sur Twitter & Facebook - ...
12 secrets et astuces pour Booster votre visibilité sur Twitter & Facebook - ...12 secrets et astuces pour Booster votre visibilité sur Twitter & Facebook - ...
12 secrets et astuces pour Booster votre visibilité sur Twitter & Facebook - ...Julien Anouilh (noska)
 
Marketing d’influence au travers de la communication de la génération z
Marketing d’influence au travers de la communication de la génération zMarketing d’influence au travers de la communication de la génération z
Marketing d’influence au travers de la communication de la génération zÉric Delcroix
 
Make your website load really really fast - seo campus 2017
Make your website load really really fast  - seo campus 2017Make your website load really really fast  - seo campus 2017
Make your website load really really fast - seo campus 2017SEO Camp Association
 
L’impact du Big Data et Machine Learning sur le marketing en ligne
L’impact du Big Data et Machine Learning sur le marketing en ligneL’impact du Big Data et Machine Learning sur le marketing en ligne
L’impact du Big Data et Machine Learning sur le marketing en ligneSEO Camp Association
 
Actualité des moteurs de recherche et du référencement (SEO & SEA) - Petit dé...
Actualité des moteurs de recherche et du référencement (SEO & SEA) - Petit dé...Actualité des moteurs de recherche et du référencement (SEO & SEA) - Petit dé...
Actualité des moteurs de recherche et du référencement (SEO & SEA) - Petit dé...Peak Ace
 
La position zéro et les astuces pour avoir une plus grande visibilité dans le...
La position zéro et les astuces pour avoir une plus grande visibilité dans le...La position zéro et les astuces pour avoir une plus grande visibilité dans le...
La position zéro et les astuces pour avoir une plus grande visibilité dans le...Peak Ace
 

En vedette (20)

SEO et ecommerce sur Magento: retour d’expérience
SEO et ecommerce sur Magento: retour d’expérienceSEO et ecommerce sur Magento: retour d’expérience
SEO et ecommerce sur Magento: retour d’expérience
 
SEO : comment obtenir des liens puissants grâce à un contenu décalé
SEO : comment obtenir des liens puissants grâce à un contenu décaléSEO : comment obtenir des liens puissants grâce à un contenu décalé
SEO : comment obtenir des liens puissants grâce à un contenu décalé
 
Designing Creative Content: How visualising data helps us see
Designing Creative Content: How visualising data helps us seeDesigning Creative Content: How visualising data helps us see
Designing Creative Content: How visualising data helps us see
 
Analyse de logs - Études de cas et best practices - SEO Campus 2017
Analyse de logs - Études de cas et best practices - SEO Campus 2017Analyse de logs - Études de cas et best practices - SEO Campus 2017
Analyse de logs - Études de cas et best practices - SEO Campus 2017
 
HTTPS The Road To A More Secure Web / SEOCamp Paris
HTTPS The Road To A More Secure Web / SEOCamp ParisHTTPS The Road To A More Secure Web / SEOCamp Paris
HTTPS The Road To A More Secure Web / SEOCamp Paris
 
Measuring Content Marketing
Measuring Content MarketingMeasuring Content Marketing
Measuring Content Marketing
 
Organiser un projet à l’international : un Pari Fou
Organiser un projet à l’international : un Pari FouOrganiser un projet à l’international : un Pari Fou
Organiser un projet à l’international : un Pari Fou
 
Pourquoi mes clients n'appliquent pas mes recommandations SEO (mais pas que ...)
Pourquoi mes clients n'appliquent pas mes recommandations SEO (mais pas que ...)Pourquoi mes clients n'appliquent pas mes recommandations SEO (mais pas que ...)
Pourquoi mes clients n'appliquent pas mes recommandations SEO (mais pas que ...)
 
Seo camp'us 2017 utiliser google analytics comme un voyou - aristide riou
Seo camp'us 2017   utiliser google analytics comme un voyou - aristide riouSeo camp'us 2017   utiliser google analytics comme un voyou - aristide riou
Seo camp'us 2017 utiliser google analytics comme un voyou - aristide riou
 
La mise en cache et ses secrets
La mise en cache et ses secretsLa mise en cache et ses secrets
La mise en cache et ses secrets
 
Seo camp paris - A chaque enjeu, sa stratégie - Tips & REX
Seo camp paris - A chaque enjeu, sa stratégie - Tips & REX Seo camp paris - A chaque enjeu, sa stratégie - Tips & REX
Seo camp paris - A chaque enjeu, sa stratégie - Tips & REX
 
Seo camp2017 Marguerite Leenhardt
Seo camp2017 Marguerite LeenhardtSeo camp2017 Marguerite Leenhardt
Seo camp2017 Marguerite Leenhardt
 
Tendances Social Media 2017
Tendances Social Media 2017Tendances Social Media 2017
Tendances Social Media 2017
 
12 secrets et astuces pour Booster votre visibilité sur Twitter & Facebook - ...
12 secrets et astuces pour Booster votre visibilité sur Twitter & Facebook - ...12 secrets et astuces pour Booster votre visibilité sur Twitter & Facebook - ...
12 secrets et astuces pour Booster votre visibilité sur Twitter & Facebook - ...
 
Marketing d’influence au travers de la communication de la génération z
Marketing d’influence au travers de la communication de la génération zMarketing d’influence au travers de la communication de la génération z
Marketing d’influence au travers de la communication de la génération z
 
Make your website load really really fast - seo campus 2017
Make your website load really really fast  - seo campus 2017Make your website load really really fast  - seo campus 2017
Make your website load really really fast - seo campus 2017
 
Enquête emploi SEO Camp 2017
Enquête emploi SEO Camp 2017Enquête emploi SEO Camp 2017
Enquête emploi SEO Camp 2017
 
L’impact du Big Data et Machine Learning sur le marketing en ligne
L’impact du Big Data et Machine Learning sur le marketing en ligneL’impact du Big Data et Machine Learning sur le marketing en ligne
L’impact du Big Data et Machine Learning sur le marketing en ligne
 
Actualité des moteurs de recherche et du référencement (SEO & SEA) - Petit dé...
Actualité des moteurs de recherche et du référencement (SEO & SEA) - Petit dé...Actualité des moteurs de recherche et du référencement (SEO & SEA) - Petit dé...
Actualité des moteurs de recherche et du référencement (SEO & SEA) - Petit dé...
 
La position zéro et les astuces pour avoir une plus grande visibilité dans le...
La position zéro et les astuces pour avoir une plus grande visibilité dans le...La position zéro et les astuces pour avoir une plus grande visibilité dans le...
La position zéro et les astuces pour avoir une plus grande visibilité dans le...
 

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

Google et le Javascript - Petit déjeuner du 29 mars 2017
Google et le Javascript - Petit déjeuner du 29 mars 2017Google et le Javascript - Petit déjeuner du 29 mars 2017
Google et le Javascript - Petit déjeuner du 29 mars 2017Peak Ace
 
Google : Prise en charge de l'Ajax et de l'Angular JS
Google : Prise en charge de l'Ajax et de l'Angular JSGoogle : Prise en charge de l'Ajax et de l'Angular JS
Google : Prise en charge de l'Ajax et de l'Angular JSPeak Ace
 
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...Peak Ace
 
Seocamp Bayonne - JS et SEO
Seocamp  Bayonne - JS et SEOSeocamp  Bayonne - JS et SEO
Seocamp Bayonne - JS et SEOErlé Alberton
 
Screaming frog - l'outil ne fait pas l'artisan
Screaming frog - l'outil ne fait pas l'artisanScreaming frog - l'outil ne fait pas l'artisan
Screaming frog - l'outil ne fait pas l'artisanAymeric Bouillat
 
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...Peak Ace
 
Javascript et indexation, où en est-on ? - SEO Camp'us Paris 2016
Javascript et indexation, où en est-on ? - SEO Camp'us Paris 2016Javascript et indexation, où en est-on ? - SEO Camp'us Paris 2016
Javascript et indexation, où en est-on ? - SEO Camp'us Paris 2016iProspect France
 
Référencement - Aquinum Bordeaux - Juillet 2012
Référencement - Aquinum Bordeaux - Juillet 2012Référencement - Aquinum Bordeaux - Juillet 2012
Référencement - Aquinum Bordeaux - Juillet 2012Yannick Gaultier
 
L'impact sur le SEO de Googlebot Evergreen
L'impact sur le SEO de Googlebot EvergreenL'impact sur le SEO de Googlebot Evergreen
L'impact sur le SEO de Googlebot EvergreenPhilippe YONNET
 
Développement d'interfaces web
Développement d'interfaces webDéveloppement d'interfaces web
Développement d'interfaces webDavid Desrousseaux
 
Seocamp2016 : javascript et indexation, où en est-on ?
Seocamp2016 : javascript et indexation, où en est-on ?Seocamp2016 : javascript et indexation, où en est-on ?
Seocamp2016 : javascript et indexation, où en est-on ?Madeline Pinthon
 
Utilisation avancée d'un crawler - SEO Camp'us 2015
Utilisation avancée d'un crawler - SEO Camp'us 2015Utilisation avancée d'un crawler - SEO Camp'us 2015
Utilisation avancée d'un crawler - SEO Camp'us 2015Philippe YONNET
 
Choisir une solution e commerce compatible seo : quelle plateforme vous perme...
Choisir une solution e commerce compatible seo : quelle plateforme vous perme...Choisir une solution e commerce compatible seo : quelle plateforme vous perme...
Choisir une solution e commerce compatible seo : quelle plateforme vous perme...Philippe YONNET
 
Les chantiers indispensables à ajouter à votre roadmap 2018 - Philippe Yonnet...
Les chantiers indispensables à ajouter à votre roadmap 2018 - Philippe Yonnet...Les chantiers indispensables à ajouter à votre roadmap 2018 - Philippe Yonnet...
Les chantiers indispensables à ajouter à votre roadmap 2018 - Philippe Yonnet...Peak Ace
 
Cours referencement optimisation
Cours referencement optimisationCours referencement optimisation
Cours referencement optimisationRémi Bachelet
 
Evolutions et nouveaux outils SEO
Evolutions et nouveaux outils SEOEvolutions et nouveaux outils SEO
Evolutions et nouveaux outils SEODimitri Brunel
 
Le référencement naturel ou SEO
Le référencement naturel ou SEOLe référencement naturel ou SEO
Le référencement naturel ou SEOForestier Mégane
 
Atelier de sensibilisation au SEO
Atelier de sensibilisation au SEOAtelier de sensibilisation au SEO
Atelier de sensibilisation au SEOKseo Conseil
 
Référencement et analyse site internet doc de travail
Référencement et analyse site internet doc de travailRéférencement et analyse site internet doc de travail
Référencement et analyse site internet doc de travailSéverine Alix
 

Similaire à Les bonnes pratiques SEO avec les frameworks javascript - SEO CAMPUS 9 mars 2017 (20)

Google et le Javascript - Petit déjeuner du 29 mars 2017
Google et le Javascript - Petit déjeuner du 29 mars 2017Google et le Javascript - Petit déjeuner du 29 mars 2017
Google et le Javascript - Petit déjeuner du 29 mars 2017
 
Google : Prise en charge de l'Ajax et de l'Angular JS
Google : Prise en charge de l'Ajax et de l'Angular JSGoogle : Prise en charge de l'Ajax et de l'Angular JS
Google : Prise en charge de l'Ajax et de l'Angular JS
 
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
 
Seocamp Bayonne - JS et SEO
Seocamp  Bayonne - JS et SEOSeocamp  Bayonne - JS et SEO
Seocamp Bayonne - JS et SEO
 
Screaming frog - l'outil ne fait pas l'artisan
Screaming frog - l'outil ne fait pas l'artisanScreaming frog - l'outil ne fait pas l'artisan
Screaming frog - l'outil ne fait pas l'artisan
 
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
Les chantiers indispensables à glisser dans votre roadmap 2018 - Petit-déjeun...
 
Javascript et indexation, où en est-on ? - SEO Camp'us Paris 2016
Javascript et indexation, où en est-on ? - SEO Camp'us Paris 2016Javascript et indexation, où en est-on ? - SEO Camp'us Paris 2016
Javascript et indexation, où en est-on ? - SEO Camp'us Paris 2016
 
Référencement - Aquinum Bordeaux - Juillet 2012
Référencement - Aquinum Bordeaux - Juillet 2012Référencement - Aquinum Bordeaux - Juillet 2012
Référencement - Aquinum Bordeaux - Juillet 2012
 
L'impact sur le SEO de Googlebot Evergreen
L'impact sur le SEO de Googlebot EvergreenL'impact sur le SEO de Googlebot Evergreen
L'impact sur le SEO de Googlebot Evergreen
 
Développement d'interfaces web
Développement d'interfaces webDéveloppement d'interfaces web
Développement d'interfaces web
 
Seocamp2016 : javascript et indexation, où en est-on ?
Seocamp2016 : javascript et indexation, où en est-on ?Seocamp2016 : javascript et indexation, où en est-on ?
Seocamp2016 : javascript et indexation, où en est-on ?
 
Utilisation avancée d'un crawler - SEO Camp'us 2015
Utilisation avancée d'un crawler - SEO Camp'us 2015Utilisation avancée d'un crawler - SEO Camp'us 2015
Utilisation avancée d'un crawler - SEO Camp'us 2015
 
Choisir une solution e commerce compatible seo : quelle plateforme vous perme...
Choisir une solution e commerce compatible seo : quelle plateforme vous perme...Choisir une solution e commerce compatible seo : quelle plateforme vous perme...
Choisir une solution e commerce compatible seo : quelle plateforme vous perme...
 
Les chantiers indispensables à ajouter à votre roadmap 2018 - Philippe Yonnet...
Les chantiers indispensables à ajouter à votre roadmap 2018 - Philippe Yonnet...Les chantiers indispensables à ajouter à votre roadmap 2018 - Philippe Yonnet...
Les chantiers indispensables à ajouter à votre roadmap 2018 - Philippe Yonnet...
 
Cours referencement optimisation
Cours referencement optimisationCours referencement optimisation
Cours referencement optimisation
 
Evolutions et nouveaux outils SEO
Evolutions et nouveaux outils SEOEvolutions et nouveaux outils SEO
Evolutions et nouveaux outils SEO
 
Le référencement naturel ou SEO
Le référencement naturel ou SEOLe référencement naturel ou SEO
Le référencement naturel ou SEO
 
Atelier de sensibilisation au SEO
Atelier de sensibilisation au SEOAtelier de sensibilisation au SEO
Atelier de sensibilisation au SEO
 
Référencement et analyse site internet doc de travail
Référencement et analyse site internet doc de travailRéférencement et analyse site internet doc de travail
Référencement et analyse site internet doc de travail
 
Association 2 0
Association 2 0Association 2 0
Association 2 0
 

Plus de Peak Ace

SEO CAMP'us Paris 2022 - CADOR EN SEO - Mathieu Chapon (1).pptx
SEO CAMP'us Paris 2022 - CADOR EN SEO - Mathieu Chapon (1).pptxSEO CAMP'us Paris 2022 - CADOR EN SEO - Mathieu Chapon (1).pptx
SEO CAMP'us Paris 2022 - CADOR EN SEO - Mathieu Chapon (1).pptxPeak Ace
 
SEO CAMP'us Paris 2022 - 6 Tips E-Commerce - Mathieu Chapon.pptx
SEO CAMP'us Paris 2022 - 6 Tips E-Commerce - Mathieu Chapon.pptxSEO CAMP'us Paris 2022 - 6 Tips E-Commerce - Mathieu Chapon.pptx
SEO CAMP'us Paris 2022 - 6 Tips E-Commerce - Mathieu Chapon.pptxPeak Ace
 
Guide shopify & seo: fausse bonne idée?
Guide shopify & seo: fausse bonne idée?Guide shopify & seo: fausse bonne idée?
Guide shopify & seo: fausse bonne idée?Peak Ace
 
Petit dejeuner sf 180419 actualite seo sea
Petit dejeuner sf 180419   actualite seo seaPetit dejeuner sf 180419   actualite seo sea
Petit dejeuner sf 180419 actualite seo seaPeak Ace
 
Event sf 180419 changement de marque et de domaine
Event sf 180419 changement de marque et de domaineEvent sf 180419 changement de marque et de domaine
Event sf 180419 changement de marque et de domainePeak Ace
 
Event sf 180419 gerer les contenus pagines
Event sf 180419 gerer les contenus paginesEvent sf 180419 gerer les contenus pagines
Event sf 180419 gerer les contenus paginesPeak Ace
 
Event sf 180419 les bonnes pratiques en netlinking
Event sf 180419 les bonnes pratiques en netlinkingEvent sf 180419 les bonnes pratiques en netlinking
Event sf 180419 les bonnes pratiques en netlinkingPeak Ace
 
Amazon : au cœur de votre stratégie SEO 2019 - Philippe Yonnet - Petit déjeun...
Amazon : au cœur de votre stratégie SEO 2019 - Philippe Yonnet - Petit déjeun...Amazon : au cœur de votre stratégie SEO 2019 - Philippe Yonnet - Petit déjeun...
Amazon : au cœur de votre stratégie SEO 2019 - Philippe Yonnet - Petit déjeun...Peak Ace
 
Contenu et SEO : quelles tendances pour 2019 ? - Julien Callaou - petit déjeu...
Contenu et SEO : quelles tendances pour 2019 ? - Julien Callaou - petit déjeu...Contenu et SEO : quelles tendances pour 2019 ? - Julien Callaou - petit déjeu...
Contenu et SEO : quelles tendances pour 2019 ? - Julien Callaou - petit déjeu...Peak Ace
 
Comment privilégier l’expérience utilisateur (UX) au cœur de votre stratégie ...
Comment privilégier l’expérience utilisateur (UX) au cœur de votre stratégie ...Comment privilégier l’expérience utilisateur (UX) au cœur de votre stratégie ...
Comment privilégier l’expérience utilisateur (UX) au cœur de votre stratégie ...Peak Ace
 
Comment structurer ses campagnes adwords pour tirer le meilleur parti de l’au...
Comment structurer ses campagnes adwords pour tirer le meilleur parti de l’au...Comment structurer ses campagnes adwords pour tirer le meilleur parti de l’au...
Comment structurer ses campagnes adwords pour tirer le meilleur parti de l’au...Peak Ace
 
Actualités SEO SEA - Tiphaine Coupeau - Petit déjeuner 26-02-2019 Paris
Actualités SEO SEA - Tiphaine Coupeau - Petit déjeuner 26-02-2019 ParisActualités SEO SEA - Tiphaine Coupeau - Petit déjeuner 26-02-2019 Paris
Actualités SEO SEA - Tiphaine Coupeau - Petit déjeuner 26-02-2019 ParisPeak Ace
 
Comment optimiser votre site pour être visible sur les requêtes saisonnières ...
Comment optimiser votre site pour être visible sur les requêtes saisonnières ...Comment optimiser votre site pour être visible sur les requêtes saisonnières ...
Comment optimiser votre site pour être visible sur les requêtes saisonnières ...Peak Ace
 
Le futur du SEO : l’optimisation pour les moteurs de réponse (AEO) - petit dé...
Le futur du SEO : l’optimisation pour les moteurs de réponse (AEO) - petit dé...Le futur du SEO : l’optimisation pour les moteurs de réponse (AEO) - petit dé...
Le futur du SEO : l’optimisation pour les moteurs de réponse (AEO) - petit dé...Peak Ace
 
« Le temps de chargement n’existe pas ! » - petit déjeuner 13 décembre paris
« Le temps de chargement n’existe pas ! » - petit déjeuner 13 décembre paris« Le temps de chargement n’existe pas ! » - petit déjeuner 13 décembre paris
« Le temps de chargement n’existe pas ! » - petit déjeuner 13 décembre parisPeak Ace
 
Comment exploiter et atteindre la position 0 ou featured snippets de Google ...
Comment exploiter et atteindre la position 0 ou featured snippets de Google  ...Comment exploiter et atteindre la position 0 ou featured snippets de Google  ...
Comment exploiter et atteindre la position 0 ou featured snippets de Google ...Peak Ace
 
Actualité des moteurs de recherche et du référencement (SEO & SEA) - petit dé...
Actualité des moteurs de recherche et du référencement (SEO & SEA) - petit dé...Actualité des moteurs de recherche et du référencement (SEO & SEA) - petit dé...
Actualité des moteurs de recherche et du référencement (SEO & SEA) - petit dé...Peak Ace
 
La nouvelle Google Search Console - petit déjeuner 15-11-2018 Nantes
La nouvelle Google Search Console - petit déjeuner 15-11-2018 Nantes La nouvelle Google Search Console - petit déjeuner 15-11-2018 Nantes
La nouvelle Google Search Console - petit déjeuner 15-11-2018 Nantes Peak Ace
 
Comment tirer le meilleur parti possible du content marketing - petit déjeune...
Comment tirer le meilleur parti possible du content marketing - petit déjeune...Comment tirer le meilleur parti possible du content marketing - petit déjeune...
Comment tirer le meilleur parti possible du content marketing - petit déjeune...Peak Ace
 
Migration les pièges a éviter - petit déjeuner 15-11-2018 Nantes
Migration les pièges a éviter - petit déjeuner 15-11-2018 Nantes Migration les pièges a éviter - petit déjeuner 15-11-2018 Nantes
Migration les pièges a éviter - petit déjeuner 15-11-2018 Nantes Peak Ace
 

Plus de Peak Ace (20)

SEO CAMP'us Paris 2022 - CADOR EN SEO - Mathieu Chapon (1).pptx
SEO CAMP'us Paris 2022 - CADOR EN SEO - Mathieu Chapon (1).pptxSEO CAMP'us Paris 2022 - CADOR EN SEO - Mathieu Chapon (1).pptx
SEO CAMP'us Paris 2022 - CADOR EN SEO - Mathieu Chapon (1).pptx
 
SEO CAMP'us Paris 2022 - 6 Tips E-Commerce - Mathieu Chapon.pptx
SEO CAMP'us Paris 2022 - 6 Tips E-Commerce - Mathieu Chapon.pptxSEO CAMP'us Paris 2022 - 6 Tips E-Commerce - Mathieu Chapon.pptx
SEO CAMP'us Paris 2022 - 6 Tips E-Commerce - Mathieu Chapon.pptx
 
Guide shopify & seo: fausse bonne idée?
Guide shopify & seo: fausse bonne idée?Guide shopify & seo: fausse bonne idée?
Guide shopify & seo: fausse bonne idée?
 
Petit dejeuner sf 180419 actualite seo sea
Petit dejeuner sf 180419   actualite seo seaPetit dejeuner sf 180419   actualite seo sea
Petit dejeuner sf 180419 actualite seo sea
 
Event sf 180419 changement de marque et de domaine
Event sf 180419 changement de marque et de domaineEvent sf 180419 changement de marque et de domaine
Event sf 180419 changement de marque et de domaine
 
Event sf 180419 gerer les contenus pagines
Event sf 180419 gerer les contenus paginesEvent sf 180419 gerer les contenus pagines
Event sf 180419 gerer les contenus pagines
 
Event sf 180419 les bonnes pratiques en netlinking
Event sf 180419 les bonnes pratiques en netlinkingEvent sf 180419 les bonnes pratiques en netlinking
Event sf 180419 les bonnes pratiques en netlinking
 
Amazon : au cœur de votre stratégie SEO 2019 - Philippe Yonnet - Petit déjeun...
Amazon : au cœur de votre stratégie SEO 2019 - Philippe Yonnet - Petit déjeun...Amazon : au cœur de votre stratégie SEO 2019 - Philippe Yonnet - Petit déjeun...
Amazon : au cœur de votre stratégie SEO 2019 - Philippe Yonnet - Petit déjeun...
 
Contenu et SEO : quelles tendances pour 2019 ? - Julien Callaou - petit déjeu...
Contenu et SEO : quelles tendances pour 2019 ? - Julien Callaou - petit déjeu...Contenu et SEO : quelles tendances pour 2019 ? - Julien Callaou - petit déjeu...
Contenu et SEO : quelles tendances pour 2019 ? - Julien Callaou - petit déjeu...
 
Comment privilégier l’expérience utilisateur (UX) au cœur de votre stratégie ...
Comment privilégier l’expérience utilisateur (UX) au cœur de votre stratégie ...Comment privilégier l’expérience utilisateur (UX) au cœur de votre stratégie ...
Comment privilégier l’expérience utilisateur (UX) au cœur de votre stratégie ...
 
Comment structurer ses campagnes adwords pour tirer le meilleur parti de l’au...
Comment structurer ses campagnes adwords pour tirer le meilleur parti de l’au...Comment structurer ses campagnes adwords pour tirer le meilleur parti de l’au...
Comment structurer ses campagnes adwords pour tirer le meilleur parti de l’au...
 
Actualités SEO SEA - Tiphaine Coupeau - Petit déjeuner 26-02-2019 Paris
Actualités SEO SEA - Tiphaine Coupeau - Petit déjeuner 26-02-2019 ParisActualités SEO SEA - Tiphaine Coupeau - Petit déjeuner 26-02-2019 Paris
Actualités SEO SEA - Tiphaine Coupeau - Petit déjeuner 26-02-2019 Paris
 
Comment optimiser votre site pour être visible sur les requêtes saisonnières ...
Comment optimiser votre site pour être visible sur les requêtes saisonnières ...Comment optimiser votre site pour être visible sur les requêtes saisonnières ...
Comment optimiser votre site pour être visible sur les requêtes saisonnières ...
 
Le futur du SEO : l’optimisation pour les moteurs de réponse (AEO) - petit dé...
Le futur du SEO : l’optimisation pour les moteurs de réponse (AEO) - petit dé...Le futur du SEO : l’optimisation pour les moteurs de réponse (AEO) - petit dé...
Le futur du SEO : l’optimisation pour les moteurs de réponse (AEO) - petit dé...
 
« Le temps de chargement n’existe pas ! » - petit déjeuner 13 décembre paris
« Le temps de chargement n’existe pas ! » - petit déjeuner 13 décembre paris« Le temps de chargement n’existe pas ! » - petit déjeuner 13 décembre paris
« Le temps de chargement n’existe pas ! » - petit déjeuner 13 décembre paris
 
Comment exploiter et atteindre la position 0 ou featured snippets de Google ...
Comment exploiter et atteindre la position 0 ou featured snippets de Google  ...Comment exploiter et atteindre la position 0 ou featured snippets de Google  ...
Comment exploiter et atteindre la position 0 ou featured snippets de Google ...
 
Actualité des moteurs de recherche et du référencement (SEO & SEA) - petit dé...
Actualité des moteurs de recherche et du référencement (SEO & SEA) - petit dé...Actualité des moteurs de recherche et du référencement (SEO & SEA) - petit dé...
Actualité des moteurs de recherche et du référencement (SEO & SEA) - petit dé...
 
La nouvelle Google Search Console - petit déjeuner 15-11-2018 Nantes
La nouvelle Google Search Console - petit déjeuner 15-11-2018 Nantes La nouvelle Google Search Console - petit déjeuner 15-11-2018 Nantes
La nouvelle Google Search Console - petit déjeuner 15-11-2018 Nantes
 
Comment tirer le meilleur parti possible du content marketing - petit déjeune...
Comment tirer le meilleur parti possible du content marketing - petit déjeune...Comment tirer le meilleur parti possible du content marketing - petit déjeune...
Comment tirer le meilleur parti possible du content marketing - petit déjeune...
 
Migration les pièges a éviter - petit déjeuner 15-11-2018 Nantes
Migration les pièges a éviter - petit déjeuner 15-11-2018 Nantes Migration les pièges a éviter - petit déjeuner 15-11-2018 Nantes
Migration les pièges a éviter - petit déjeuner 15-11-2018 Nantes
 

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

  • 2. Cedric Rambaud Consultant SEO Senior – Search Foresight
  • 3. Philippe Yonnet DG et fondateur – Search Foresight 3
  • 4. Confiez-nous vos projets ambitieux Plateforme e-commerce, Accompagnement SEA international, Migration & Refonte… Nos experts maîtrisent les problématiques les plus avancées. 4 PROJETS COMPLEXES PROBLEMATIQUES TECHNIQUES, CMS, MIGRATIONS, ORGANISATION PROJETS EXTREMES SITES A FORT TRAFIC, LEADERS, GRANDS COMPTES, FORTES VOLUMETRIES INTERNATIONAL SITES MULTILINGUES, SEO LOCAL, GESTION DES LANGUES
  • 5. SF vous partage sa passion du Search Chaque semaine, de nouvelles ressources à votre disposition en exclusivité 5 Des prises de parole chaque semaine Un accès en avant première aux web-conférences Search Foresight et aux contenus de nos prises de parole pour vous transmettre notre expérience Des contenus de référence Des contenus exclusifs chaque semaine : Newsletter, Articles, Case study, Etudes… Une communauté de passionnés Partagez avec une communauté d’experts du Digital, du Search, du Webmarketing… Des évènements pointus Echangez et networkez lors de nos évènements exclusifs : Meet-up, Barcamp, Petits-déjeuners…
  • 6. SF recrute https://www.search-foresight.com/agence-seo/nos-jobs/ Retrouvez-nous au job dating organisé à l’occasion du SEO Campus à 17h30 6
  • 7. Agence conseil en stratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics La problématique 7
  • 8. Oups j’ai fait mon site en full Angular JS ! Et je le regrette déjà 8 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 ?
  • 9. Un site full angular indexé Angular JS c’est compliqué, cela ne renvoie pas le même code qu’un site « standard » et les bots ne semblent pas comprendre ce qu’ils voient. Et pourtant…. 9 … un site full angular JS peut être indexé !
  • 10. Par contre, côté visibilité, c’est plus vraiment ça 10
  • 11. Ce que voit l’utilisateur Tout le contenu est accessible avec une navigation dans la sidebar de gauche. 11
  • 12. Ce que voit Googlebot 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> La rendition est parfaite sur fetch as Googlebot 12
  • 13. Ce que voit un bot ‘normal’ Le contenu n’est pas visible. Là où se trouvaient les contenus se trouvent maintenant des variables. Simulation via Browseo 13
  • 14. Agence conseil en stratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics Google et le javascript 14
  • 15. Une histoire d’amour En 2008 google nous dit : je peux crawler le flash et le javascript ! Cependant entre le discours et la réalité des faits il y avait alors un fossé ! Dès lors, les webmasters et SEO partaient tout de même 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 réponse penche plutôt vers le « Oui mais… » En 2016 Google met à jour ses guidelines concernant le javascript en indiquant qu’il supporte l’utilisation du javascript pour les titles, description et robots meta tags. 15 + = ?
  • 16. Google sait rendre le JS et CSS Google peut comprendre et rendre le CSS et le JS. En témoigne un exemple très simple : les sites responsives. Google doit avoir accès au CSS d’un site (à minima) pour comprendre qu’un site responsive est mobile friendly. Aussi, un ‘explorer comme Google’ dans la search console nous montre très clairement que Google « voit » ce que le navigateur « voit ». 16
  • 17. Et les liens brouillés alors ? Cela a bien évidemment pour conséquence que les liens « brouillés » en javascript ne le sont plus vraiment *à priori* ! Google peut lire par exemple : Les liens avec la fonction Onclick Les liens avec la fonction Onclick qui génère le lien (via l’appel à un script dans le header de la page) Les liens jquery faisant appel à un script dans le header de la page Les liens onclick avec un appel à un script externe 17 Exemple de liens lus par Googlebot
  • 18. S’il peut suivre les liens… Il peut aussi lire le contenu ! Cela impact donc également la lecture des contenus encapsulés dans du javascript et leur indexation. Google pourra indexer des pages avec du contenu généré dynamiquement en javascript ce qui peut être soit : Une bonne nouvelle : mon texte est intéressant et enrichit la page  peut-être un meilleur positionnement. Une mauvaise nouvelle : le contenu généré en javascript n’est pas intéressant et ne va pas dans le sens de ce que je voulais faire. 18
  • 19. Google peut tout lire ? NON. Google ne peut pas, ne sait pas tout lire : c’est le cas de l’AJAX par exemple. POURQUOI ? Parce que l’ajax ne nécessite aucune action pour être chargé  aucun moyen pour le moteur de « deviner » ce qu’il doit faire pour déclencher l’ajax ! En 2009 Google mettait en avant la technique des hash bang pour aider le crawl et l’indexation des contenus chargés en AJAX. En 2015 Google ne recommande plus cette technique parce qu’il nous dit pouvoir lire les contenus générés en AJAX. Malheureusement, dans les faits c’est loin d’être concluant. 19
  • 20. La méthode (obsolète) du hash bang En 2009, Google propose l’utilisation du hashbang (escaped fragment) pour mieux gérer l’AJAX. Principe : Utilisation habituelle du # (hash) pour afficher un élément d’une page côté client. Ajout du ! (bang) pour le rendre compréhensible par le moteur. Lorsqu’il rencontre une URL avec un hashbang (#!) le moteur va la crawler en remplaçant cet élément par un _escaped_fragment_ Puis il va indexer la page sous sa forme originale. 20
  • 21. La méthode HTML 5 (sympa) du pushstate() Il s’agit d’une fonction javascript directement incluse dans le HTML5. Concrètement, pushState() change le chemin de l’url qui apparait dans la barre d’adresse de l’utilisateur. Quel intérêt pour le SEO ? Les moteurs seront capables de lire ces URL et de les différencier des autres. Quand l’utiliser ? À chaque fois que l’on identifie un état qui correspond : - À l’équivalent d’une page HTML complète (90% / 100% différente dans son contenu de l’état précédent) - À une page suffisamment différente pour justifier « son bookmarkage » dans un favori, dans un lien externe, dans un retour en arrière dans l’historique Alors, on pousse l’url correspondant à cet état via la méthode pushstate après déclenchant de l’évènement ou de l’action conduisant à ce changement d’état. 21 window.history.pushState('','','t est/url/that-does-not-really- exist') Démonstration
  • 22. Du pushstate sur du scroll infini Implémentation sur une long scrolling page : https://webmasters.googleblog.com /2014/02/infinite-scroll-search- friendly.html 22
  • 23. Conséquence : les tabs et contenus cachés Ils peuvent ne pas être indexés, ou leur poids peut-être diminué 23 Attention : cela changera avec le « mobile first index »
  • 24. Agence conseil en stratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics Qu’est-ce qu’un framework javascript ?
  • 25. L’architecture traditionnelle des sites Les pages sont statiques
  • 26. Le « client side rendering » La magie se passe côté client (dans le navigateur) : utilisation de l’AJAX 26
  • 27. Le concept de SPA (single page application) Application web monopage Twitter est un site web de type SPA Problème : les moteurs de recherche sont construits pour associer des signaux à de multiples pages Créer un site web monopage pose donc des problèmes pour le référencement
  • 28. L’architecture version SPA (client side) 28
  • 29. Les principaux frameworks JS AngularJS Le plus connu, appartenant à l’écosystème Google Différences entre version 1 et version 2 (la V2 peut être utilisée en « middleware » et « en rendition hybride » https://angularjs.org/ EmberJS http://emberjs.com/ BackboneJS http://backbonejs.org/ 29
  • 30. Challenge n°1 pour les moteurs Un bot traditionnel de moteur de recherche télécharge le code HTML, et analyse le contenu présent dans ce code Le contenu généré en ajax ou en javascript est ignoré C’est encore vrai pour la plupart des moteurs de recherche Googlebot, avec son headless browser, fait exception Explorer une SPA
  • 31. Challenge n°2 Quoi indexer ? Le contenu change en fonction des interactions : Comment identifier tous les contenus possibles ? Si on « clique » partout, tout mérite-t’il d’être indexé ? Comment éviter que l’exploration d’un tel site demande un temps très 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 l’équivalent d’un site entier A quoi rattacher ces signaux ? Si la notion de page reliée à une url a disparu, comment continuer à utiliser l’algorithme habituel ? Quoi indexer ? Quels signaux prendre en compte ? A quoi les associer ?
  • 32. 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 » entièrement crawlable et indexable, pour Google Nous allons voir comment un peu plus loin Attention : on est proche des limites des possibilités actuelles du moteur mais attention : cela ne marchera qu’avec Google, attention pour les sites internationaux Mais les performances en termes de position ne sont pas toujours au rendez-vous Rendre le site explorable est juste un minimum syndical Conclusion : il est formellement déconseillé d'utiliser ces technologies dont la compatibilité SEO est partielle voire nulle et en plus, c'est même déconseillé parce que ce n'est pas une solution aussi logique et élégante que les développeurs et intégrateurs veulent bien le dire
  • 33. Agence conseil en stratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics Deux bonnes raisons (non SEO) pour ne pas utiliser cette approche 33
  • 34. Ce n'est pas compatible avec les principes de l'unobstrusive javascript Unobstrusive javascript : Javascript discret en français C’est une bonne pratique de codage de page web qui consiste à bien séparer le code HTML et Javascript pour limiter les inconvénients habituels provoqués par leur intrication Pb de maintenabilité Pb de compatibilité Pb d’accessibilité Et bien sûr : problèmes de SEO Exemple : Ce code n’est pas conforme : Il faut utiliser ce code plutôt Et <input type="text" name="date" onchange="validateDate(this);" /> <input type="text" name="date" id="datefield" /> document.getElementById( "datefield" ).addEventListener( 'change', function(){ do_something(); }, false );
  • 35. Et la compatibilité avec l’amélioration progressive ? La plupart des implémentations faites avec des frameworks javascripts ne sont pas complètement fidèles, voire pas du tout, avec les préceptes de l’amélioration progressive Quand on désactive le javascript : pas de fallback, le site n’est plus utilisable Avec des navigateurs exotiques ou anciens, le site peut montrer des bugs bloquants La lourdeur des pages en javascript (chargés avec la page ou dynamiquement) peut poser des problèmes de temps de rendition sur smartphone Et le « mobile first » ?
  • 36. Pourquoi c’est populaire chez les développeurs ? Cela transforme les sites web en vraies applications Un site web est vraiment un objet logiciel exotique pour la plupart des développeurs habitués à faire des logiciels classiques et à coder des logiciels en utilisant des langages comme le C, ou le Java Un seul langage permet de faire tout le site web Cela déporte certains problèmes côté client (navigateur) Cela permet des interfaces riches C’est moderne C’est plus efficient, on développe plus rapidement Quelques raisons invoquées régulièrement !
  • 37. Agence conseil en stratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics Auditer un site fait avec un framework javascript 37
  • 38. Tester une page avec "fetch as Google" https://support.google.co m/webmasters/answer/60 66468?hl=fr Si le test montre que Google ne parvient pas à « rendre » la page correctement : vous avez un problème
  • 39. Le concept de "headless browser" Un browser « headless » est un environnement logiciel, programmable ou pilotable en ligne de commande, qui est capable d’effectuer une rendition complète d’une page HTML en exécutant tout le code : HTML, CSS et Javascript Il est qualifié de « headless » car il ne dispose pas de GUI (d’interface utilisateur) Grâce à un headless browser, on peut donc simuler tout ce qui se passe dans un navigateur comme Chrome ou Firefox. Et donc tester le code généré en Ajax, ou par des framework Javascript Remarque : ce type de crawl crée de « fausses visites » dans vos outils de web analytics Un bot sans tête mais avec des yeux !
  • 40. PhantomJS et CasperJS PhantomJS 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 browser http://casperjs.org/
  • 41. Auditer avec Screaming Frog Screaming Frog est un crawler orienté SEO Il dispose depuis peu d’un 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 »
  • 42. Auditer un site avec Botify Même possibilité dans Botify depuis janvier 2017 https://www.botify.com/blog/breaking-news- botify-announces-javascript-crawl/ https://www.botify.com/blog/crawling- javascript-for-technical-seo-audits/
  • 43. Agence conseil en stratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics Comment rendre ces sites SEO Compliant ? 43
  • 44. Solution 1 : coder différemment Par exemple : amélioration progressive et jQuery
  • 45. Créer des snapshots HTML (soi même) Le principe : Le code javascript est exécuté via un headless browser côté server, afin de générer le HTML produit par le code javascript Ce code est « capturé » avant d’être envoyé, comme une page HTML normale, au navigateur de l’internaute Problème : la méthode fait perdre une partie de l’intérêt du « client side rendering », la page devient statique Souvent, l’arbitrage est d’envoyer les snapshots aux bots des moteurs de recherche uniquement Une méthode préconisée par Google pour l’Ajax
  • 46. Utiliser un serveur de prérendition tiers Prerender.io : https://prerender.io/ SEO 4 Ajax (Cocorico !) :https://www.seo4ajax.com/ Brombone : http://www.brombone.com/ Inutile de développer votre propre solution de prérendition
  • 47. Attention : les serveurs de rendition utilisent la méthode obsolète pour rendre l’ajax crawlable Soit la méthode des escaped fragments avec hash bangs Soit la méthode des escaped fragments avec balise meta <meta name="fragment" content="!"> Attention, cette méthode en HTML5 utilisant la méthode pushstate() est aussi obsolète que l’autre !!! Pour le moment : tout fonctionne correctement C’est compatible avec la plupart des moteurs de recherche qui comptent : Bing, Yandex… Mais demain ??? www.example.com/ajax.html#!key=value www.example.com/ajax.html?_escaped_fragment_=key=value
  • 48. Agence conseil en stratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics Frameworks javascript : The next generation 48
  • 49. ReactJS, HapiJS, Angular2 etc. 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 Des frameworks « isomorphes » capables d’une rendition hybride ou server side
  • 50. Agence conseil en stratégie digitale | SEO • SEM • CRO • Inbound Marketing • Analytics Conclusion 50
  • 51. Conclusion Compétences côté développeurs Compétences côté SEO Et dans tous les cas, c’est à réserver à des situations où le trafic SEO n’est pas stratégique pour le site : - On peut rendre les sites faits avec ces technologies crawlables et indexables - Mais si l’on veut atteindre des positions clés sur des requêtes concurrentielles, il vaut mieux compter sur un site web en server side rendering à l’ancienne Un casse tête qui n’est pas insoluble, mais qui demande de solides compétences techniques
  • 53. La question qui peut vous rapporter 1 Mug Quel est le nom anglais de la méthode recommandée pour bien séparer le HTML et le javascript ? 53
  • 54. Restons en contact Philippe Yonnet, DG et fondateur philippe.yonnet@search-foresight.com + 33 1 74 18 29 40 / + 33 6 99 60 21 49 Slideshare.net/S4sight @S4sight & @Cariboo_seo www.search-foresight.com 54