Comment faire un SPA SEO crawlable?

Avant de commencer, assurez-vous de comprendre ce que google nécessite, en particulier l'utilisation de jolie et laid Url. Voyons maintenant la mise en œuvre:

Côté Client

Sur le côté client, vous n'avez qu'une seule page html qui interagit avec le serveur de manière dynamique via des appels AJAX. c'est ce SPA est d'environ. Tous les a balises dans le côté client sont créés dynamiquement dans mon application, nous allons voir plus tard comment faire de ces liens visibles à google bot sur le serveur. Chacun de ces a balise doit être en mesure d'avoir un pretty URL dans le href étiquette de manière à ce que google bot va analyser ça. Vous ne voulez pas le href partie pour être utilisé lorsque le client clique sur elle (même si vous ne voulez que le serveur afin de pouvoir l'analyser, nous le verrons plus tard), car on ne peut pas vouloir une nouvelle page se charge, uniquement pour faire un appel AJAX obtenir certaines données à afficher dans la partie de la page et de modifier l'URL via javascript (par exemple à l'aide de HTML5 pushstate ou avec Durandaljs). Donc, nous avons à la fois une href attribut de google ainsi que sur onclick qui fait le travail lorsque l'utilisateur clique sur le lien. Maintenant, depuis que j'utilise push-state je ne veux pas de # sur l'URL, donc un typique a balise peut ressembler à ceci:

<a href="http://www.xyz.com/#!/category/subCategory/product111" onClick="loadProduct('category','subCategory','product111')>see product111...</a>

"catégorie" et "sous-catégorie" aurait probablement d'autres expressions, telles que "la communication" et "téléphones" ou "ordinateurs" et "portables" pour l'un des appareils électroménagers en magasin. Évidemment, il y aurait beaucoup de différentes catégories et sous-catégories. Comme vous pouvez le voir, le lien est directement à la catégorie, sous-catégorie et le produit, et non pas comme des paramètres à une fonction spécifique de "stocker" de la page de http://www.xyz.com/store/category/subCategory/product111. C'est parce que je préfère le plus court et le plus simple des liens. Cela implique que j'ai il n'y aura pas une catégorie avec le même nom que l'un de mes "pages", c'est à dire "au sujet de".

Je ne vais pas aller dans la façon de charger les données via AJAX (le onclick partie), rechercher sur google, il y a beaucoup de bonnes explications. La seule chose importante ici que je veux mentionner, c'est que lorsque l'utilisateur clique sur ce lien, je veux que l'URL dans le navigateur de la manière suivante:

http://www.xyz.com/category/subCategory/product111. Et c'est l'URL n'est pas envoyé au serveur ! rappelez-vous, c'est un SPA où toutes les interactions entre le client et le serveur se fait via AJAX, pas de liens du tout! toutes les "pages" sont mis en œuvre sur le côté client, et les différentes URL de ne pas faire un appel vers le serveur (le serveur n'a besoin de savoir comment gérer ces URLs dans le cas où ils sont utilisés comme liens externes à partir d'un autre site sur votre site, nous le verrons plus tard sur le côté serveur de la partie). Maintenant, c'est géré à merveille par Durandal. Je le recommande vivement, mais vous pouvez aussi sauter cette partie si vous préférez d'autres technologies. Si vous choisissez, et vous êtes également à l'aide de MS Visual Studio Express 2012 pour le Web, comme moi, vous pouvez installer le Durandal Starter Kit, et là, dans shell.js, utiliser quelque chose comme ceci:

define(['plugins/router', 'durandal/app'], function (router, app) {
    return {
        router: router,
        activate: function () {
            router.map([
                { route: '', title: 'Store', moduleId: 'viewmodels/store', nav: true },
                { route: 'about', moduleId: 'viewmodels/about', nav: true }
            ])
                .buildNavigationModel()
                .mapUnknownRoutes(function (instruction) {
                    instruction.config.moduleId = 'viewmodels/store';
                    instruction.fragment = instruction.fragment.replace("!/", ""); //for pretty-URLs, '#' already removed because of push-state, only ! remains
                    return instruction;
                });
            return router.activate({ pushState: true });
        }
    };
});

Il ya quelques choses importantes à remarquer ici:

1. Le premier itinéraire (avec route:'') est pour l'URL qui n'a pas de données supplémentaires en elle, c'est à dire http://www.xyz.com. Dans cette page vous chargez des données générales à l'aide d'AJAX. Il y aura peut-être pas a balises à tous dans cette page. Vous souhaitez ajouter la balise suivante, de sorte que google bot de savoir quoi faire avec elle:
   
   <meta name="fragment" content="!">. Cette balise va faire google bot transformer l'URL de www.xyz.com?_escaped_fragment_= que nous allons voir plus tard.
2. Le "à propos de" la route est juste un exemple pour un lien vers d'autres pages vous pouvez sur votre application web.
3. Maintenant, la partie la plus délicate est qu'il n'existe pas de "catégorie" route, et il peut y avoir de nombreuses catégories différentes - dont aucun n'a un itinéraire prédéfini. C'est là que mapUnknownRoutes vient dans. Il cartes de ces inconnus itinéraires de "stocker" de l'itinéraire et supprime également toutes les '!' partir de l'URL dans le cas où c'est un pretty URL généré par google moteur de recherche. "Stocker" de l'itinéraire prend l'info dans le "fragment" la propriété et fait l'appel AJAX pour obtenir les données, de les afficher et de modifier l'URL en local. Dans mon application, je n'ai pas de charger une page différente pour chaque appel; j'ai seulement changer la partie de la page où ces données sont pertinentes et aussi changer l'URL en local.
4. Avis de la pushState:true qui indique Durandal utiliser push état Url.

C'est tout ce dont nous avons besoin dans le côté client. Il peut être mis en œuvre également avec hachés Url (dans Durandal, vous retirez simplement la pushState:true pour ça). La partie la plus complexe (au moins pour moi...) a été la partie serveur:

Côté Serveur

Je suis en utilisant MVC 4.5 sur le côté serveur avec WebAPI contrôleurs. Le serveur doit gérer 3 types d'Url: ceux générés par google - deux pretty et ugly et aussi un 'simple' de l'URL avec le même format que celui qui apparaît dans le navigateur du client. Voyons comment faire cela:

Des URLs propres et "simples" sont d'abord interprétée par le serveur comme s'il essayait de référence inexistante du contrôleur. Le serveur voit quelque chose comme http://www.xyz.com/category/subCategory/product111 et recherche un contrôleur nommé "catégorie". Ainsi, dans web.config j'ai ajouter la ligne suivante pour rediriger ces à une erreur de manipulation de contrôleur:

<customErrors mode="On" defaultRedirect="Error">
    <error statusCode="404" redirect="Error" />
</customErrors><br/>

Maintenant, cela transforme l'URL à quelque chose comme: http://www.xyz.com/Error?aspxerrorpath=/category/subCategory/product111. Je veux que l'URL sera envoyé au client qui va charger les données via AJAX, donc, l'astuce ici est d'appeler la valeur par défaut 'index' contrôleur comme si pas référence à n'importe quel contrôleur; je ne que par ajout un hash de l'URL avant tout la "catégorie" et "sous-catégorie "paramètres"; le haché URL ne nécessite pas de contrôleur spécial à l'exception de la valeur par défaut 'index' et le contrôleur des données est envoyé au client qui enlève le hachage et utilise les informations après le hachage pour charger les données via AJAX. Ici est le gestionnaire d'erreur du contrôleur de code:

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()
        {
            string [] parts = Request.RequestUri.OriginalString.Split(new[] { '?' }, StringSplitOptions.RemoveEmptyEntries);
            string parameters = parts[ 1 ].Replace("aspxerrorpath=","");
            var response = Request.CreateResponse(HttpStatusCode.Redirect);
            response.Headers.Location = new Uri(parts[0].Replace("Error","") + string.Format("#{0}", parameters));
            return response;
        }
    }
}

Mais ce que sur le Laid Url? Elles sont créées par google bot et doit retourner HTML qui contient toutes les données que l'utilisateur voit dans le navigateur. Pour cela, j'utilise phantomjs. Phantom est un navigateur sans faire ce que le navigateur est en train de faire sur le côté client, mais sur le côté serveur. En d'autres termes, le fantôme ne sait pas (entre autres choses) comment faire pour obtenir une page web via une URL, de l'analyser, y compris l'exécution de tout le code javascript dans celui-ci (ainsi que l'obtention de données via des appels AJAX), et vous redonner le HTML qui reflète les DOM. Si vous êtes à l'aide de MS Visual Studio Express vous nombreux à installer fantôme via ce lien.

Mais d'abord, quand un vilain URL est envoyée au serveur, nous devons rattraper; Pour cela, j'ai ajouté à la 'App_start dossier le fichier suivant:

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("?_escaped_fragment_=", "#");

                filterContext.Result = new RedirectToRouteResult(
                    new RouteValueDictionary { { "controller", "HtmlSnapshot" }, { "action", "returnHTML" }, { "url", url } });
            }
            return;
        }
    }
}

Cela s'appelle de " filterConfig.cs' aussi dans "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());
        }
    }
}

Comme vous pouvez le voir, 'AjaxCrawlableAttribute" les itinéraires laid Url à un contrôleur nommé "HtmlSnapshot", et voici ce contrôleur:

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("{0} {1}", Path.Combine(appRoot, "seo\\createSnapshot.js"), url),
                FileName = Path.Combine(appRoot, "bin\\phantomjs.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();
        }

    }
}

Les associés view est très simple, il suffit d'une seule ligne de code:

@Html.Raw( ViewBag.result )

Comme vous pouvez le voir dans le contrôleur, le fantôme charge un fichier javascript nommé createSnapshot.js sous un dossier que j'ai créé appelé seo. Voici ce fichier javascript:

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;
}
//Open the page
page.open(system.args[1], function () { });
var checkComplete = function () {
//We don't allow it to take longer than 5 seconds but
//don't return until all requests are finished
if ((new Date().getTime() - lastReceived > 300 && requestCount === responseCount) || new Date().getTime() - startTime > 10000 || checkLoaded()) {
clearInterval(checkCompleteInterval);
var result = page.content;
//result = result.substring(0, 10000);
console.log(result);
//console.log(results);
phantom.exit();
}
}
//Let us check to see if the page is finished rendering
var checkCompleteInterval = setInterval(checkComplete, 300);

Je tiens d'abord à remercier Thomas Davis de la page où j'ai obtenu le code de base à partir :-).

Vous remarquerez quelque chose de bizarre ici: phantom conserve re-chargement de la page jusqu'à ce que le checkLoaded() fonction renvoie la valeur true. Pourquoi est-ce? c'est parce que mon spécifiques SPA, plusieurs appel AJAX pour obtenir toutes les données et de les placer dans les DOM sur ma page, et le fantôme ne peut pas savoir quand tous les appels ont terminée avant de retourner me HTML reflet de la DOM. Ce que j'ai fait ici est après le dernier appel AJAX-je ajouter un <span id='compositionComplete'></span>, de sorte que, si cette balise existe je sais que le DOM est terminé. Je fais cela en réponse à la Durandal de compositionComplete événement, voir ici pour plus d'. Si cela ne se produit pas dans les 10 secondes que j'ai abandonner (il faut prendre seulement une seconde à ce que la plupart des). Le HTML retourné contient tous les liens que l'utilisateur voit dans le navigateur. Le script ne fonctionnera pas correctement car le <script> les balises qui n'existe pas dans le code HTML de capture instantanée ne font pas référence à l'URL. Ceci peut être changé dans le code javascript, fantôme de fichier, mais je ne pense pas que c'est necassary parce que le HTML snapshort est seulement utilisé par google pour obtenir la a liens et de ne pas exécuter javascript; ces liens ne référence à une URL jolie, et si fait, si vous essayez de voir l'instantané HTML dans un navigateur, vous obtiendrez des erreurs javascript, mais tous les liens ne fonctionnent pas correctement et vous orienter vers le serveur une fois de plus avec une jolie URL de temps à apprendre le travail entièrement la page.

Ce qu'il est. Maintenant que le serveur de savoir comment gérer à la fois beau et laid Url, avec push-de l'état activé à la fois serveur et client. Tous les vilains, les Url sont traités de la même manière à l'aide de fantôme, il n'ya donc pas besoin de créer un contrôleur séparé pour chaque type d'appel.

Une chose que vous pourriez préférer le changement n'est pas de faire une catégorie/sous-catégorie/produit d'appel, mais pour ajouter un "magasin" de sorte que le lien ressemblera à quelque chose comme: http://www.xyz.com/store/category/subCategory/product111. Cela permettra d'éviter le problème dans ma solution que toutes les Url non valide sont traités comme s'ils sont en fait les appels à l'index du contrôleur, et je suppose que ceux-ci peuvent être traitées puis à l'intérieur de "stocker" contrôleur sans l'ajout de la web.config je l'ai montré ci-dessus.

Voici un lien vers un screencast-enregistrement à partir de mon Ember.js la Formation de la classe, j'ai organisé à Londres, le 14 août. Elle définit une stratégie à la fois pour l'application côté client et pour vous application côté serveur, ainsi que donne une démonstration de la façon dont la mise en œuvre de ces fonctionnalités vous fournir votre code JavaScript Simple-Page-Application à la dégradation gracieuse, même pour les utilisateurs avec JavaScript désactivé.

Il utilise PhantomJS pour faciliter l'analyse de votre site web.

En bref, les étapes sont les suivantes:

• Ont une version hébergée de l'application web que vous souhaitez analyser, ce site a besoin d'avoir TOUTES les données que vous avez dans la production
• Écrire une application JavaScript (PhantomJS Script) pour charger votre site web
• Ajouter index.html ( ou “/“ ) à la liste des Url à analyser
  • Pop de la première URL ajouté à l'analyse de la liste
  • Chargement de page et de rendre son DOM
  • Trouver tous les liens sur la page chargée que les liens vers votre propre site (filtrage d'URL)
  • Ajouter ce lien à une liste de “crawlable” URL, si ce n'est pas déjà analysé
  • Stocker le rendu DOM vers un fichier sur le système de fichiers, mais se débarrasser de TOUS les script-tags première
  • À la fin, de créer un Sitemap.xml fichier avec analysées Url

Une fois que cette étape est terminée, c'est à votre backend pour servir la statique-la version de votre code HTML dans le cadre de la noscript tag sur cette page. Cela permettra à Google et autres moteurs de recherche de parcourir chaque page sur votre site web, même si votre application est à l'origine une seule page-app.

Lien vers la vidéo avec tous les détails:

http://www.devcasts.io/p/spas-phantomjs-and-seo/#

Vous pouvez utiliser http://sparender.com/ qui permet une Seule Page Applications pour être analysées correctement.