Ajax : optimiser le référencement et le crawl d'une application web monopage
Ce tutoriel explique en détail comment optimiser le SEO d'une page en AJAX. Il s'appuie sur le framework Durandal côté client, et le langage ASP.NET pour la partie serveur.
Il est possible de développer un site internet uniquement sur une seule page, avec du contenu chargé grâce à des appels AJAX qui modifient la page. On appelle ces sites des "applications web monopage" (en anglais "single-page application", ou "SPA"). Leurs particularités poussent à procéder à certaines optimisations pour leur référencement. Ce tutorial s'appuie sur le framework Durandal pour la partie client et le langage ASP.NET pour la partie serveur.
Pour développer correctement son site, il est recommandé de suivre les préconisations de Google à propos des SPA. Il faut utiliser deux systèmes d'URL différentes sur son site en fonction du visiteur : d'abord, un système d'URL "jolies", destinées aux visiteurs. Ce sont des URL optimisées pour le référencement qui provoqueront l'affichage du site sur une seule page avec les interactions AJAX. En parallèle, utilisez un système d'URL "moches", c'est-à-dire des URL brutes avec des paramètres. Ces URL seront présentes pour les robots des moteurs de recherche. Elles seront utilisées pour que le site produise une capture en HTML de la page correspondante avec le même contenu que voit le visiteur, mais sans l'utilisation du langage JavaScript. Le robot peut ainsi correctement voir la page. Vous trouverez des informations complémentaires sur un guide officiel de Google pour les développeurs.
Pour la mise en place de ce fonctionnement côté client, utilisez le framework Durandal qui est conçu pour créer des sites monopage. Pour la gestion des liens du site, il faut qu'ils disposent à la fois d'un attribut "href" avec l'URL vue par les robots et d'un code JavaScript qui va charger le contenu de la page correspondante pour les visiteurs. Cette forme de lien est possible grâce à la fonction "pushState" de HTML5, qui manipule l'historique du navigateur. Le framework Durandal est recommandé pour cette fonctionnalité, mais on peut utiliser d'autres frameworks :
<!-- Exemple de lien pour l'application -->
<a href="http://www.monsite.fr/#!/categorie/sousCategorie/produitX" onClick="chargerProduit ('categorie','sousCategorie','produitX')>Voir le produit X</a>
Le site aura bien entendu plusieurs catégories et sous-catégories. Le but est d'avoir dans ce cas l'URL suivante affichée sur le navigateur :
http://www.monsite.fr/categorie/sousCategorie/produitX
Pour réaliser cette opération, ouvrez le fichier "shell.js" de Durandal et insérez-y le code suivant :
define(['plugins/router', 'durandal/app'], function (router, app) {
return {
router: router,
activate: function () {
router.map([
{ route: '', title: 'Accueil', moduleId: 'vues/accueil', nav: true },
{ route: 'mentions-legales', moduleId: 'vues/mentionsLegales', nav: true }
])
.buildNavigationModel()
.mapUnknownRoutes(function (instruction) {
instruction.config.moduleId = 'vues/boutique';
instruction.fragment = instruction.fragment.replace("!/", ""); // Pour les URL "jolies", le caractère '#' sera déjà supprimé à cause du pushState ; il ne restera donc que le caractère '!'.
return instruction;
});
return router.activate({ pushState: true });
}
};
});
Ce code permet de gérer trois types de routes :
- Une route vide qui correspond à la page d'accueil du site : http://www.monsite.fr/ ;
- Une route spécifique qui indique une page gérée spécialement par l'application (ici les mentions légales du site) ;
- Une route inconnue. C'est ce cas qui est utilisé pour gérer les catégories et sous-catégories du site internet. La partie de l'URL non connue est récupérée dans le paramètre "fragment" et l'application détermine alors avec des appels AJAX le contenu à afficher.
Notez que les URL sont correctement affichées pour la partie client grâce au paramètre "pushState: true", qui indique à Durandal d'utiliser la fonction pushState. Dans votre application, pensez à ajouter sur la page d'arrivée la balise suivante :
<meta name="fragment" content="!">
Le contenu de cette balise correspond à ce qui suit l'URL du site. De cette manière, un robot transformera automatiquement l'URL "http://www.monsite.fr/!/categorie/sousCategorie/produitX" en "http://www. monsite.fr?fragment=categorie/sousCategorie/produitX".
Pour la partie serveur, on utilise le modèle MVC et le contrôleur "WebAPI". Il y a à ce moment-là trois types d'URL dans l'application : les URL "moches" pour les robots, les URL "jolies" qui vont être affichées dans le moteur de recherche, et les URL simples qui seront affichées dans le navigateur de l'internaute au moment où il a affiché une page du site.
Pour les URL simples et "jolies", le serveur va les référencer comme des URL menant vers un contrôleur qui n'existe pas. Dans le fichier "web.config", insérez les lignes suivantes pour que les erreurs soient redirigées vers un contrôleur spécial qui va les gérer :
<customErrors mode="On" defaultRedirect="Error">
<error statusCode="404" redirect="Error" />
</customErrors><br/>
Ce contrôleur découpe l'URL pour insérer le caractère "#" avant la catégorie et la sous-catégorie. Il redirige ensuite sur cette nouvelle URL. Le contrôleur par défaut du site est alors appelé. Il lit le contenu situé après le caractère "#" et affiche la page correspondante grâce à des appels AJAX. Voici le code du contrôleur de gestion des erreurs :
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using System.Web.Routing;
namespace eShop.Controllers
{
public class ErrorController : ApiController
{
[HttpGet, HttpPost, HttpPut, HttpDelete, HttpHead, HttpOptions, AcceptVerbs("PATCH"), AllowAnonymous]
public HttpResponseMessage Handle404()
{
//On découpe l'URL.
string [] parts = Request.RequestUri.OriginalString.Split(new[] { '?' }, StringSplitOptions.RemoveEmptyEntries);
string parameters = parts[ 1 ].Replace("aspxerrorpath=","");
var response = Request.CreateResponse(HttpStatusCode.Redirect);
//On ajoute ici le caractère "#" en reconstituant l'URL.
response.Headers.Location = new Uri(parts[0].Replace("Error","") + string.Format("#", parameters));
//On redirige sur cette nouvelle URL.
return response;
}
}
}
Pour gérer les URL "moches" utilisées par les robots, on utilise la bibliothèque PhantomJS. PhantomJS se comporte comme un navigateur sans affichage. Il fonctionne de la même manière qu'un navigateur classique mais sur un serveur. Il génère le contenu d'une page en exécutant les appels AJAX et obtient ainsi le code source de la page générée. On peut ensuite envoyer ce code au robot. Pour que l'application reconnaisse les URL "moches", ajoutez le script suivant dans le dossier "App_start" :
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.IO;
using System.Linq;
using System.Reflection;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;
namespace eShop.App_Start
{
public class AjaxCrawlableAttribute : ActionFilterAttribute
{
private const string Fragment = "_escaped_fragment_";
public override void OnActionExecuting(ActionExecutingContext filterContext)
{
var request = filterContext.RequestContext.HttpContext.Request;
if (request.QueryString[Fragment] != null)
{
var url = request.Url.ToString().Replace("?fragment=", "#");
filterContext.Result = new RedirectToRouteResult(
new RouteValueDictionary { { "controller", "HtmlSnapshot" }, { "action", "returnHTML" }, { "url", url } });
}
return;
}
}
}
Ce script est appelé dans le fichier "filterconfig.cs" situé également dans le dossier "App_start" :
using System.Web.Mvc;
using eShop.App_Start;
namespace eShop
{
public class FilterConfig
{
public static void RegisterGlobalFilters(GlobalFilterCollection filters)
{
filters.Add(new HandleErrorAttribute());
filters.Add(new AjaxCrawlableAttribute());
}
}
}
Le contrôleur "HtmlSnapshot" va afficher les vues au format HTML :
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace eShop.Controllers
{
public class HtmlSnapshotController : Controller
{
public ActionResult returnHTML(string url)
{
string appRoot = Path.GetDirectoryName(AppDomain.CurrentDomain.BaseDirectory);
var startInfo = new ProcessStartInfo
{
Arguments = String.Format(" ", Path.Combine(appRoot, "seocreateSnapshot.js"), url),
FileName = Path.Combine(appRoot, "binphantomjs.exe"),
UseShellExecute = false,
CreateNoWindow = true,
RedirectStandardOutput = true,
RedirectStandardError = true,
RedirectStandardInput = true,
StandardOutputEncoding = System.Text.Encoding.UTF8
};
var p = new Process();
p.StartInfo = startInfo;
p.Start();
string output = p.StandardOutput.ReadToEnd();
p.WaitForExit();
ViewData["result"] = output;
return View();
}
}
}
La vue associée au contrôleur ne comporte qu'une seule ligne de code :
@Html.Raw( ViewBag.result )
Dans le contrôleur, la bibliothèque PhantomJS charge un fichier "createsnapshot.js". Ce fichier devra comporter le code suivant :
var page = require('webpage').create();
var system = require('system');
var lastReceived = new Date().getTime();
var requestCount = 0;
var responseCount = 0;
var requestIds = [];
var startTime = new Date().getTime();
page.onResourceReceived = function (response) {
if (requestIds.indexOf(response.id) !== -1) {
lastReceived = new Date().getTime();
responseCount++;
requestIds[requestIds.indexOf(response.id)] = null;
}
};
page.onResourceRequested = function (request) {
if (requestIds.indexOf(request.id) === -1) {
requestIds.push(request.id);
requestCount++;
}
};
function checkLoaded() {
return page.evaluate(function () {
return document.all["compositionComplete"];
}) != null;
}
// Ouvre la page
page.open(system.args[1], function () { });
var checkComplete = function () {
// Le chargement doit prendre moins de 5 secondes, sinon on retourne une erreur.
if ((new Date().getTime() - lastReceived > 300 && requestCount === responseCount)
Lire aussi