Référencement avancé pour les sites JavaScript : pages instantanées

Alors que JavaScript s’intègre de plus en plus au HTML sur le Web, les référenceurs doivent développer une compréhension de la façon de rendre les sites JavaScript consultables.

Nous avons couvert certaines approches SEO de base pour JavaScript dans un article précédent. Cependant, un sujet complexe mérite un traitement approfondi. Jetons donc un coup d’œil aux détails derrière le # popup ! / approche instantanée pour les sites JavaScript.

Avez-vous même besoin de faire cela?

Les moteurs de recherche traitent chaque jour de plus en plus de JavaScript. Cependant, cela ne signifie pas que votre site AngularJS sera indexé et classé. Les moteurs analysent maintenant du JavaScript, mais l’indexation complète de tous les états des applications Web JavaScript semble encore loin. Si votre JavaScript s’exécute dans le navigateur et extrait le contenu de la base de données, les moteurs ne le verront probablement pas.

Pré-rendu des pages d’instantanés et publication spécifique au bot

C’est peut-être l’approche la plus populaire pour les problèmes de référencement JavaScript côté client. Le flux de base est le suivant :

1. Détectez les robots des moteurs de recherche soit en regardant l’URL si vous avez utilisé # ! (“hashbang”) ou simplement en vérifiant l’agent utilisateur de la requête.
2. Si le bot est détecté, redirigez la requête vers le moteur de rendu de votre choix, tel que PhantomJS. Ce moteur doit attendre que tout le contenu AJAX soit chargé.
3. Une fois chargé, récupérez la source de la page rendue et envoyez-la au bot.

Ironiquement, il s’agit d’une forme de camouflage : soumettre un contenu spécifique à des bots, souvent un non-non en SEO. Cependant, ce type de cloaking est considéré comme “éthique” puisque le contenu est pratiquement le même que ce que les utilisateurs verraient. Par conséquent, les moteurs de recherche sont d’accord avec cela.

Google a une spécification de suivi AJAX complète qui couvre les écrous et les boulons. L’idée de base est que l’on ajoute le #! identifiant de vos URL ou inclure le code HTML [meta name=”fragment” content=”!”] balise à l’en-tête de la page. Cela alerte Google que la page utilise des fragments d’URL et les amène à indexer la page.

Comme je l’ai mentionné dans mon article précédent, History.pushState est une autre option pour créer des URL AJAX indexables. PushState a des problèmes, notamment le fait qu’il ne prend pas en charge IE 9, qui est toujours un navigateur assez populaire.

Problèmes potentiels avec le pré-rendu

Il y a quelques points à garder à l’esprit si vous décidez d’opter pour le pré-rendu :

• Détection de robots. Assurez-vous que vous servez tous les bots, pas seulement Googlebot (c’est-à-dire Bingbot, et al).
• Moment de l’instantané. Tenez compte du fait que vos éléments JavaScript peuvent prendre un certain temps pour s’afficher via PhantomJS. Vous devrez peut-être créer un délai pour permettre à tout le contenu de se charger avant de mettre la page en cache. Sinon, votre page d’instantané peut être incomplète ou partiellement rendue.
• Temps de chargement de la page. De même, si vous exécutez le processus de page d’instantané au moment de la demande d’URL du bot, la page peut se charger lentement. La vitesse de chargement de la page est un facteur de classement SEO de plus en plus important, donc si votre page semble se charger lentement pour le bot, elle peut être affectée négativement. C’est pourquoi il est souhaitable de mettre les pages en cache à l’avance. Cela a l’avantage supplémentaire de faire apparaître votre site plus rapidement pour les moteurs que pour les utilisateurs.
• Le traitement par lots. Si vous avez de nombreuses pages, vous souhaiterez peut-être exécuter le processus d’instantané à une heure précise en dehors des heures de bureau ou sur votre propre serveur. Le processus peut nécessiter beaucoup de ressources.

Vérification des pages d’instantanés

Puisque vous utilisez la détection de robots, il est plus difficile de vérifier que votre processus fonctionne réellement. Une façon de vérifier votre travail consiste à utiliser la fonctionnalité “Rechercher comme Google” dans Google Webmaster Tools. Entrez l’URL d’une page d’instantané (elle peut être différente de l’URL en direct affichée aux utilisateurs) dans GWT et vérifiez si Google peut l’extraire correctement. Cela nécessite une page en direct, alors planifiez en conséquence.

Récupérer comme Google prend actuellement en charge # ! mais pas URL pushState. Si vos URL semblent statiques, tout ira bien.

Services de pré-représentation

Construire une capacité de pré-rendu complète peut ne pas être trivial. Pour un site plus important, cela peut impliquer la configuration d’un serveur de mise en cache, d’une base de données pour le contenu, d’un service de mise en cache des appels, d’un planificateur et d’un utilitaire d’administration. Heureusement, plusieurs entreprises ont proposé des solutions pour traiter tout ou partie de l’approche de pré-rendu. Plusieurs que je connais incluent:

• Prerender.io. Prerender.io exécute un service qui fonctionne avec PhantomJS pour héberger et servir des pages d’instantanés. Ils éliminent le casse-tête lié à l’exécution de votre propre serveur de pré-rendu. Leur prix est raisonnable en fonction du nombre de pages hébergées et de la fréquence à laquelle les instantanés sont pris.
• Brombone.com. Brombone exécute un service similaire dans lequel des pages d’instantané peuvent être générées en fonction de l’horodatage de l’URL dans le plan du site ou peuvent être planifiées de manière personnalisée.
• Instantanés Ajax. AjaxSnapshots propose un service de pré-rendu avec de belles options de configuration. Pour le moment, leur site Web répertorie le prix comme gratuit (du moins pour le moment), donc c’est à peu près tout.

Recherche payante et pages de destination

Les sites JavaScript ont des difficultés avec la recherche payante ainsi qu’avec le référencement. Par exemple, AdWords détermine le niveau de qualité en fonction, entre autres, du contenu que le bot AdWords voit sur la page. Une approche consiste à fournir la page d’instantané à Google AdsBot (une liste complète des robots d’exploration et des agents utilisateurs de Google est disponible ici).

De plus, si vos produits ou le contenu de vos produits se trouvent dans une application à une seule page, il peut être difficile de forcer cet état via l’URL de destination de la recherche payante. Création # ! Ou les URL d’apparence statique sont à peu près une exigence ici.

Étant donné que les pages de destination de recherche payante doivent souvent être hautement personnalisées pour bien convertir, à long terme, il peut être préférable de créer des pages dédiées à vos campagnes PPC, laissant votre expérience Web JavaScript de base aux utilisateurs et au référencement.

conclusion

Les sites gourmands en JavaScript sont là pour rester. Bien qu’il ne soit pas trivial de créer un site JavaScript qui fonctionne bien en SEO, il est encore plus difficile d’essayer de réparer un site existant qui a été construit sans penser au SEO. Jusqu’à ce que les cadres et les outils soient améliorés pour faciliter l’intégration des exigences SEO, les référenceurs devront travailler en étroite collaboration avec les développeurs pour s’assurer que le SEO est pris en compte. Faire en sorte que SEO et JavaScript vivent en harmonie n’est peut-être pas facile, mais cela en vaut la peine.

Merci à Vladimir Katz, ingénieur senior chez Huge, pour sa contribution à ce post.

Image de la page d’accueil via Flickr.