Blog d'un Éternel Geek

Technique SEO pour des applications single page

http://vivageek.com/data/images/seo/ajax.png

 

Le référencement est une épreuve que beaucoup de webmestres trouvent difficile et usante sur la longueur. Il faut soit beaucoup de patience pour arriver jusqu'au bout ou soit passer par des chemins détournés.

 

 

Personnellement, je pense que j'ai choisi l'option honnête et parcours long. D'une part, si je réussis, je n'aurai pas à avoir peur de me réveiller avec un blocus de mon blogue ou un courriel dénonçant des techniques SEO fallacieuses.

 

 

En surfant sur Internet, j'ai trouvé des explications intéressantes sur le sujet de l'indexation des pages simples contenant du JavaScript.

 

 

En effet, on sait que l'indexation de page HTML est simplifiée par exemple avec sitemap.xml, mais lorsqu'il s'agit d'AJAX, c'est une tout autre histoire et le bot n'affiche plus rien du contenu.

 

 

En effet, on sait que l'indexation de page HTML est simplifiée par exemple avec sitemap.xml, mais lorsqu'il s'agit d'AJAX, c'est une tout autre histoire et le bot n'affiche plus rien du contenu.

 

Dans ces cas, difficile de référencer notre plate-forme et encore moins ce qu'il s'y trouve.

 

En 2009, google avait émit certaines hypothèses afin de rendre AJAX exploitable :

 

  • Modifier légèrement les fragments d'URL pour les pages AJAX stateful
    Au lieu d'une URL comme : http://example.com/page?query#state, L'URL proposée qui pourrait être représenté dans les résultats de recherche serait alors: http://example.com/page?query#!state.
  • Utilisez un navigateur sans tête qui affiche un instantané HTML sur votre serveur web
    Le navigateur sans tête est utilisé pour accéder à la page AJAX et génère du code HTML basé sur l'état final dans le navigateurUn exemple d'un tel navigateur est HtmlUnit, un «navigateur open-source GUI-moins pour les programmes Java.
  • Autoriser les robots des moteurs de recherche à accéder à ces URL en échappant à l'état
    Dans l'exemple précédent, une telle URL serait http://example.com/page?query&[QUERYTOKEN]=state. Basé sur notre analyse des URL actuelles sur le web, nous proposons d'utiliser "_escaped_fragment_" plutôt que le jeton. L'URL proposée deviendrait alors http://example.com/page?query&_escaped_fragment_=state.
  • Montrer l'URL d'origine pour les utilisateurs dans les résultats de recherche
    Les moteurs de recherche peuvent vérifier que le texte indexables retourné à Googlebot est le même ou un sous-ensemble du texte qui est retourné aux utilisateurs.

 

Ces nombreuses solutions sont complétées par le graphique de Katharina Probst.

 

http://vivageek.com/data/images/seo/seogooglecrawl.png

 

L'idée serait donc simplement que si un moteur de recherche devait venir à travers votre application JavaScript alors vous avez la permission de rediriger le moteur de recherche vers une autre URL qui sert la version entièrement rendue de la page (Les moteurs de recherche actuels ne peuvent pas exécuter beaucoup JavaScript (certaines personnes spéculent que Google Chrome est né de la recherche Google souhaitant succès rendre chaque page Web pour récupérer le contenu AJAX)).

 

Comment redirigée les bots d'indexation ?

 

En utilisant Phantom.js

 

Phantom.js est un navigateur webkit sans tête. Nous allons mettre en place un serveur de node.js qui reçoit une URL, il saura pleinement rendre le contenu de la page. Ensuite, nous allons rediriger les robots collecteurs à ce serveur pour récupérer le contenu exact.

 

Vous aurez besoin d'installer node.js et phantom.js sur une boîte. Puis démarrer ce serveur ci-dessous. Il y a deux fichiers, l'un qui est le serveur Web et l'autre est un script phantomjs qui rend (interprète comme navigateur headless) la page.

 

Serveur web

 

// web.js
// Express is our web server that can handle request
var express = require('express');
var app = express();
var getContent = function(url, callback) {
var content = '';
// Here we spawn a phantom.js process, the first element of the
// array is our phantomjs script and the second element is our url
var phantom = require('child_process').spawn('phantomjs', ['phantom-server.js', url]);
phantom.stdout.setEncoding('utf8');
// Our phantom.js script is simply logging the output and
// we access it here through stdout
phantom.stdout.on('data', function(data) {
   content += data.toString();
});
phantom.on('exit', function(code) {
   if (code !== 0) {
     console.log('We have an error');
   } else {
     // once our phantom.js script exits, let's call out call back
     // which outputs the contents to the page
     callback(content);
   }
});
};
var respond = function (req, res) {
// Because we use [P] in htaccess we have access to this header
url = 'http://' + req.headers['x-forwarded-host'] + req.params[0];
getContent(url, function (content) {
   res.send(content);
});
}
app.get(/(.*)/, respond);
app.listen(3000);

 

 

Le script ci-dessous est phantom-server.js et sera en charge de rendre pleinement le contenu. phantomJS est utilisé pour interpréter le code client et renvoyer un contenu valorisé par les bots.

 

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++;   
}
}; 
// 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 > 5000) {    
          clearInterval(checkCompleteInterval);   
          console.log(page.content);    
          phantom.exit(); 
}
}
// Let us check to see if the page is finished rendering
var checkCompleteInterval = setInterval(checkComplete, 1);

 

Une fois que nous avons ce serveur et la course, nous rediriger simplement bots pour le serveur dans la configuration du serveur Web de notre client. Les contenus sont valorisés et nous avons réussi.

 

Redirection bots

 

Si vous utilisez Apache, nous pouvons modifier à .htaccess tels que les demandes de Google passent comme un proxy vers notre homme du milieu phantom.js serveur.

 

RewriteEngine on
RewriteCond %{QUERY_STRING} ^_escaped_fragment_=(.*)$
RewriteRule (.*) http://webserver:3000/%1? [P]

 

Nous pourrions également inclure d'autres RewriteCond comme user agent pour rediriger d'autres moteurs de recherche que nous souhaitons indexé.

 

Bien que Google ne sera pas utiliser _escaped_fragment_ moins que nous disons que ce soit, y compris à une balise meta; <meta name="fragment" content="!"> ou en utilisant #! URL dans nos liens.

 

Conclusion :

 

Référencer une application « Single Page » nécessite de combler l’absence de moteur JS dans les robots :

 

  • soit en reproduisant les comportements du client sur le serveur
  • soit en utilisant un composant qui émule le navigateur : PhantomJSZombieJSSlimerJS voire HtmlUnit
  • soit en utilisant une implémentation DOM légère, avec NodeJS : jsDOM

 

Avec les prochaines réformes google qui vise à suspendre le Javascript, il reste à voir si le référencement ne risque pas de prendre un coup supplémentaire. Il faudra alors je pense pour les personnes qui utilisent des plateformes tributaires d'AJAX de revoir leur copie ou de mettre rapidement en place des techniques compensant la perte d'indexation.

 

Merci de m'avoir lu, à bientôt.

 

Source






 Geek me     Je suis un Geek dans l'âme. 18 ans à silloner internet pour récolter des informations afin de comprendre son fonctionnement. Idéalement j'étudie également le comportement humain.

C'est afin de vous partager mes connaissances que j'ai ouvert ce blog alors je vous souhaite une bonne lecture.



À lire également


Écrire un commentaire

Votre adresse de messagerie ne sera pas publiée.

Quelle est la quatrième lettre du mot rxxev ? :