Google : Prise en charge de l'Ajax et de l'Angular JS

Agence Conseil en stratégie digitale

SEO, CRO, Inbound Marketing, Analytics

10ème

EDITION –

PETIT DÉJEUNER

SEARCH FORESIGHT

PARIS – 19 NOVEMBRE 2015

GOOGLE : PRISE EN CHARGE DE

L’AJAX ET DE L’ANGULARJS

1 GOOGLE & AJAX



/ En 2009 : Hashbang et escaped fragment

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.

- 3 - Search Foresight 2014 © Agence Conseil en Stratégie Digitale

GOOGLE ET L’AJAX

/ En 2015 : Fin du Hashbang

En 2015, Google ne recommande plus l’utilisation du hashbang.

POURQUOI ? Google indique être capable de crawler les pages qui utilisent du

Javascript pour générer du contenu.

La seule condition sine qua non est de ne pas bloquer l’accès au CSS et au JS au moteur.


GOOGLE ET L’AJAX

+ = ?

/ Faut-il laisser Google faire tout le travail ?

Réponse facile : OUI. // Réponse

intelligente : NON.

Google apprend encore à lire le

javascript, il trébuche et fait des erreurs.

Le laisser s’occuper seul de la lecture de

pages dynamiques c’est le pousser dans

ses retranchements.

Google recommande l’utilisation de

l’history API pushState() en HTML5 pour

s’assurer une meilleure explorabilité de

la part du moteur.


GOOGLE ET L’AJAX

« Si vous mettez du contenu dans un

tableau javascript qui s’affiche uniquement

lorsque l’on clique sur ‘…’, ce contenu ne

sera pas indexé par Google »

/ Fonctionnement du PushState() HTML5

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.


GOOGLE ET L’AJAX

/ PushState() HTML5 Exemple


GOOGLE ET L’AJAX

NB : exemple vidéo de l’application du pushstate(). Le ‘what’s this’ à droite ne change pas au clic sur le menu. L’URL

quant à elle est bien modifiée.

2 ANGULAR JS ET

FRAMEWORK JAVASCRIPT



/ De quoi parle-t-on ?

Framework javascript créés pour construire des SPA (single page application).

Application web via une seule page qui permet de ne pas charger de nouvelle page

pour une action.

Problème posé : le code HTML est encapsulé dans du Javascript. Le contenu est parfois

directement généré par du javascript.

Exemple de code HTML pour l’Angular JS :


ANGULAR JS

<a href="#" class="home" ng-click="active='home'">Home</a>

<a href="#" class="projects" ng-click="active='projects'">Projects</a>

<a href="#" class="services" ng-click="active='services'">Services</a>

/ Angular JS mais pas seulement

AngularJS est l’un des framework javascript les plus utilisés en ce moment mais il en existe

d’autres qui présentent les mêmes problématiques !


ANGULAR JS

/ Lecture par Google – 2 cas de figure

1er cas de figure : Google peut lire et interpréter le code et ainsi indexer

correctement les pages. Question en suspens : Sera-t-il capable d’explorer

ces pages à chaque fois ?

2e cas de figure : Google n’arrive pas à lire et interpréter le code et n’indexe

donc pas les pages. Question : Peut-on prévenir ce problème ?

Deux véritables façons de gérer cette problématique d’AngularJS :

1) Recetter notre site en Angular

2) Rendre un snapshot HTML à Google


ANGULAR JS

/ Recetter notre site

Pour bien recetter un site : il faut le crawler !

Un crawler normal tel que Screaming Frog ne sait pas lire et interpréter le Javascript.

Il faut alors crawler notre site avec un headless browser Fonctionne comme un navigateur,

mais en ligne de commande.

Un headless browser nous rendra ce qu’il voit. S’il voit bien ce que nous voulons (liens, etc.)

alors potentiellement Google aussi.

À l’inverse, s’il ne voit pas les liens, etc. alors peut-être que Google non plus.

Recette qui n’est pas 100 % viable et trop aléatoire.


ANGULAR JS

/ Rendre un Snapshot HTML à Google

C’est LA véritable façon de gérer un site fait en AngularJS.


ANGULAR JS

Le middleware créé vos snapshots puis..

Le middleware va

automatiquement télécharger

l’ensemble de vos pages à l’aide

d’un sitemap XML. Tous les appels

Ajax, le DOM, etc sont exécutés

via une simulation de navigateur.

Ensuite le middleware sauvegarde

le rendu dans une page HTML

statique SEO friendly.

… sert le Snapshot via un proxy

Quand Google voudra crawler

votre site, le middleware va alors

lui fournir le contenu HTML statique

grâce à un proxy. C’est la seule

étape qui nécessitera une attention

particulière afin de bien router les

snapshots au crawler de Google !

Vous êtes maintenant visible!

Google va maintenant voir une

page déjà chargée de ses

composants AJAX et JS ! Votre

page est en HTML pour le crawler

et peut maintenant s’indexer

correctement. On peut

maintenant travailler le SEO du

site.

/ Middleware ?

Utiliser son propre middleware. Eg : Un serveur avec Phantom JS qui génère des

snapshot de toutes nos pages + KPIs (res’time, meta, etc.).

Fastidieux et compliqué.

Utiliser un service open source comme Prerender.io qui fait tout ce travail de

rendering de façon efficace.


ANGULAR JS

OR

3 CONCLUSION



/ AJAX et ANGULARJS

Google peut mieux interpréter le javascript aujourd’hui.

La fin du hashbang ne signifie pas la prise en charge totale des contenus

dynamiques par Google.

L’utilisation de l’angularJS n’est pas recommandée, mais il existe des solutions

pour la rendre SEO friendly.

Tout cela nous amène à la nouvelle recommandation de Google : Codez

votre site en amélioration progressive.


CONCLUSION

/ L’amélioration progressive


CONCLUSION

Concevoir le site pour que

l’essentiel (le contenu) soit dans

du code simple, qu’il soit le

centre du développement du

site.

Viendront ensuite s’ajouter les

couches CSS et JS pour embellir

le contenu.

C’est LA méthode recommandée par

Google pour que le contenu d’un site

soit bien exploré et indexé Se

concentrer sur l’essentiel.

Merci


Internet

Google : Prise en charge de l'Ajax et de l'Angular JS