Seocamp2016 : javascript et indexation, où en est-on ?

Indexation et Javascript, où en est-on ?Seocamp’us Paris - 7 avril 2016 - Madeline Pinthon

@iProspectFR #seocamp

Qui suis-je ?Madeline PinthonConsultante SEO chez iProspectwww.canyouseome.com

• Diplômée d’Audencia Nantes• 4 ans chez l’annonceur (Agriaffaires)• 1 an chez iProspect

J’en profite pour remercier :• Mes collègues & clients• Les events SEO (teknseo, seocamp,

visibilite live camp, google black day)

• www.scripts-seo.com• Les SEO sur twitter, skype,…

@iProspectFR #seocamp

Comment se déroulera la conférence

L’évolution de la communication de GooglePoint Un

Des paroles aux actes (les tests)Point deux

Les outils utilesPoint Trois

Ce que dit Google

@iProspectFR #seocamp

Avant, il fallait désactiver le javascript

@iProspectFR #seocamp

La communication de Google évolue

Avril 2014Question : how does Google

handle content loaded via Javascript ?

VIDEO DE MATT CUTTS

Mars 2014Le JSON peut alimenter le knowledge graph

WEBMASTER

Mai 2014“we decided to try to understand pages by executing JavaScript.”

UNDERSTANDING WEB PAGES BETTER

2015

En bloquant les ressources, votre classement risque de ne pas être optimal

RAPPORT RESSOURCES BLOQUES

Octobre 2015

We are generally able to render and understand

your web pages like modern browsers.

DEPRECATING AJAX CRAWLING SCHEME

Octobre 2015GTM V2Lancement de AngularJS 2.0

LANCEMENT DE NOUVEAUX OUTILS

Janvier 2015

La nouvelle version comprend le JSON-LD

NOUVEL OUTIL DE TEST DES RICH SNIPPETS

Avril 2015Google doit interpréter les

CSS pour voir si un site est mobile-friendly

MOBILEGEDDON

Février 2016Accélerer le mobile…avec du JSON-LD

AMP

mars 2016

Message de John Mueller résumant les

recommandations de Google sur le Javascript.

SYNTHESE DES CONSEILS SUR

L’INDEXATION DU JS

@iProspectFR #seocamp

Les conseils de John

 Don't cloak to Googlebot. Use "feature detection" &

"progressive enhancement"

techniques to make your content available to all

users.

Avoid redirecting to an “unsupported browser”

page.

“

@iProspectFR #seocamp

Les conseils de John

 Use rel=canonical when serving content from

multiple URLs is required.“

@iProspectFR #seocamp

Les conseils de John

Avoid the AJAX-Crawling scheme on new sites. Consider migrating old

sites that use this scheme soon.

Remember to remove "meta fragment" tags

when migrating. Don't use a "meta fragment" tag if the "escaped fragment" URL doesn't serve fully

rendered content.

“

@iProspectFR #seocamp

Les conseils de John

Avoid using "#" in URLs (outside of "#!").

Googlebot rarely indexes URLs with "#" in them. Use "normal" URLs with

path/filename/query-parameters instead,

consider using the History API for navigation.

“

@iProspectFR #seocamp

Les conseils de John

 Use Search Console's Fetch and Render tool to test how Googlebot sees

your pages. Note that this tool doesn't support "#!"

or "#" URLs. “

@iProspectFR #seocamp

Les conseils de John

 Limit the number of embedded resources, in particular the number of

JavaScript files and server responses required to

render your page.

A high number of required URLs can result in

timeouts & rendering without these resources

being available 

“

@iProspectFR #seocamp

Les conseils de John

 Google supports the use of JavaScript to provide

titles, description & robots meta tags, structured data, and other meta-

data. “

@iProspectFR #seocamp

Les conseils de John

Finally, keep in mind that other search engines and web services accessing your content might not

support JavaScript at all, or might support a different subset. 

“

De la théorie à la pratique

@iProspectFR #seocamp

Réecrire les title

Lorsqu’on réécrit les balises title en javascript, est-ce pris en compte ?

Le DOM est pris en compte.Le title du code source n’est plus visible.

@iProspectFR #seocamp

Exemple

C’est bien le DOM qui est pris en compte, et non pas le code source.

Code source DOM

Google

@iProspectFR #seocamp

Modifier et/ou insérer des paragraphes

Lorsqu’on ajoute dynamiquement du contenu avec du javascript, ces contenus sont-ils indexés ?

Les pages peuvent se positionner sur les contenus injectés

@iProspectFR #seocamp

Sans JS

CFPJ : formation communication orale

@iProspectFR #seocamp

Avec JS

@iProspectFR #seocamp

Dans google…

@iProspectFR #seocamp

Autres tests…de 2013

http://www.klikki.com/blog/google-able-index-content-fetched-using-ajaxInjecter du contenu

Le contenu était bien indexé

@iProspectFR #seocamp

Injection d’un contenu bloqué

Injecter du contenu, en provenance d’une URL bloquée par le robots.txt

Le contenu était bien indexé

@iProspectFR #seocamp

Injection l’affichage demande un clic

Un contenu a été injecté mais il s’affiche après un clic

KO, le contenu n’avait pas été indexé

@iProspectFR #seocamp

D’autres tests en 2015

http://www.centrical.com/test/google-json-ld-and-javascript-crawling-and-indexing-test.html Plusieurs tests réalisés : injection avant et apres le chargement du DOM, en asyncrhone ou apres httpRequest.

Le contenu était bien indexé

@iProspectFR #seocamp

Les liens javascript

Des liens insérés en JS sont-ils crawlés ?

Les liens ont été crawlés.

@iProspectFR #seocamp

Sans JS

(Merci Walid, http://www.trafic-organique.com/javascript-seo.html )

@iProspectFR #seocamp

Avec JS

@iProspectFR #seocamp

Les redirections

Comment sont considérées les redirections javascript ?

Les redirections sont bien prises en compte…et assimilées à des 301

@iProspectFR #seocamp

Illustration dans search console

Malgré un code 200, Google voit la redirection.

@iProspectFR #seocamp

Les redirections avec temps d’attente ?Une redirection javascript qui se déclenche après un timer ?

Ca passe également ! Et elle peut également avoir le même effet qu’une 301.

@iProspectFR #seocamp

Encore des tests

http://searchengineland.com/tested-googlebot-crawls-javascript-heres-learned-220157

@iProspectFR #seocamp

Désindexer un contenu

Nous avons injecté dynamiquement une balise noindex.

Le contenu a-t-il été désindexé ?

OK, la page a disparu des SERP

@iProspectFR #seocamp

Mise en place simple d’un script qui injecte la meta robots

Sur www.canyouseome.com/page-c/, il n’y a aucune balise meta robots dans le code source.

Elle est par contre présente dans le DOM.

@iProspectFR #seocamp

Retirer une balise noindex

Nous avons mis un script pour retirer la balise meta robots :

KO, la page n’a pas été réindexée

@iProspectFR #seocamp

Résultat

Sur http://canyouseome.com/page-d/, la balise meta robots est présente dans le code source mais pas dans le DOM.

@iProspectFR #seocamp

Un site fait avec AngularJS s’indexe-t-il ?Le JavaScript utilisé dans Angular ou d’autres framework JS est complexe.Google a encore bien du mal l’interpréter.L’escaped fragment reste une manière efficace de donner le contenu à Google et d’indexer les pages.

Plusieurs tests à suivre : http://ng.jscrawlability.com/ (angular), http://react.jscrawlability.com/ (react)

En conclusion

@iProspectFR #seocamp

Quelques enseignements

• Le DOM prime. Ne vous fiez plus au code source.

• Si des instructions contradictoires sont données sur l’indexation (noindex), la négation l’emporte, JS exécuté ou code source (c’est un peu moins vrai pour le nofollow).

• Google ne fait pas d’interaction.

• Tant que le rendu est du html propre, il n’y a pas de problème d’indexation.

• Le javascript ne doit pas non plus être trop complexe. Il ne doit pas y avoir trop de fichiers à charger.

• Si vous ne voulez pas que le JS soit interprété : bloquez l’accès à Google (en passant par un domaine externe bloqué par un robots.txt par exemple)

@iProspectFR #seocamp

Un site doit-il passer sur un framework JS (type Angular)?

Le site a-t-il une certaine autorité ?

C’est une mauvaise

idée… (pour le moment)

Bing apporte-t-il une part conséquente de trafic ?

Etes-vous prêt à traverser une zone de turbulence ?

Les équipes techniques sont-elles sensibles au SEO ?

Oui

Non

Oui

Non

Oui

OuiOk (mais bon

courage !)

Oui (ou pas du tout)

Pas

spécia

lement

…

Votre site a-t-il beaucoup de pages ?

NonNon

@iProspectFR #seocamp

Ne négligez pas l’accessibilité

• Utilisez les sitemaps• Ajoutez des micro données• Le DOM et le rendu final doit être du HTML classique

Quels outils SEO pour exécuter le JS ?

@iProspectFR #seocamp

L’outil « explorer comme Google »

Google Search Console et l’outil Explorer comme Google (Affichage)

Les tests sont nécessaires mais pas suffisants !

@iProspectFR #seocamp

PhantomJS

Le meilleur outil…. PhantomJS.

Mais il faut aimer la technique !

@iProspectFR #seocamp

SEO Tools for excel

Excel seo tools et PhantomJS : http://seotoolsforexcel.com/phantomjs-cloud/

Il faut juste connaître le xpath.

@iProspectFR #seocamp

Un crawler qui exécute le JS ?

Pas de produit sur le marché actuellement…

(coucou Botify,onCrawl, etc.)

@iProspectFR #seocamp

Google Tag Manager

Peut devenir un CMS (réécrire des titres, injecter du contenu, etc.)

http://startup-metrics.fr/gtm-tips-3-javascript-seo-friendly-avec-google-tag-manager-le-cas-resultats-du-bac/

Merci ! (et bon appétit)

Rejoignez-nous, on recrute !

madeline.pinthon@iprospect.com