HTMLслепки для индексации ajax-сайтов поисковиками

Интерфейсы сайтов на Ajax уверенно перешли от модного поветрия и стали атрибутом современности, прогресса, развития. Словом, всех тех важных символов, которые так любят писать о себе в пресс-релизах компании. Страшно оказаться "не в струе"! Да и преимуществ для посетителя сайта такие интерфейсы предоставляют немало. Но вот с индексацией поисковыми машинами все не так гладко. Подгружаемый "на лету" контент поисковые роботы ловят нестабильно. Как быть?

Возможно было бы использовать обычные ссылки, подгружая контент Ajax-ом. Если Javascript отключен на стороне клиента, пользователь все равно получит контент, да и поисковые роботы его распознают. Контент при этом может вызываться примерно таким кодом:

$(document).on('click', 'a.ajaxlinks', 'function(e) {
e.stopPropagation();
e.preventDefault();

var pageurl = $(this).attr('href');

$.ajax({
url: pageurl,
data: {
ajax: 1
},
success: function( resp ) {
$('#content').html(resp);
}
});
});

Но не всякая архитектура позволит реализовать такой механизм. Для сайтов на angularjs потребуется использовать предложенную Google методику HTML-snapshot (слепков), а поможет нам в этом вебкит PhantomJS.

Инсталлируем его на сервер:

yum install screen
npm instamm phantomjs
ln -s /usr/local/node_modules/phantomjs/lib/phantom/bin/phantomjs /usr/local/bin/phantomjs

Чтобы с его помощью запускать серверный скрипт server.js, который поможет нам делать HTML- слепки. Скрпит может быть, например, таким:

var system = require('system');

if (system.args.length < 3) {
console.log("Missing arguments.");
phantom.exit();
}

var server = require('webserver').create();
var port = parseInt(system.args[1]);
var urlPrefix = system.args[2];

var parse_qs = function(s) {
var queryString = {};
var a = document.createElement("a");
a.href = s;
a.search.replace(
new RegExp("([^?=&]+)(=([^&]*))?", "g"),
function($0, $1, $2, $3) { queryString[$1] = $3; }
);
return queryString;
};

var renderHtml = function(url, cb) {
var page = require('webpage').create();
page.settings.loadImages = false;
page.settings.localToRemoteUrlAccessEnabled = true;
page.onCallback = function() {
cb(page.content);
page.close();
};
// page.onConsoleMessage = function(msg, lineNum, sourceId) {
// console.log('CONSOLE: ' + msg + ' (from line #' + lineNum + ' in "' + sourceId + '")');
// };
page.onInitialized = function() {
page.evaluate(function() {
setTimeout(function() {
window.callPhantom();
}, 10000);
});
};
page.open(url);
};

server.listen(port, function (request, response) {
var route = parse_qs(request.url)._escaped_fragment_;
// var url = urlPrefix
// + '/' + request.url.slice(1, request.url.indexOf('?'))
// + (route ? decodeURIComponent(route) : '');

var url = urlPrefix + '/' + request.url;

renderHtml(url, function(html) {
response.statusCode = 200;
response.write(html);
response.close();
});
});

console.log('Listening on ' + port + '...');
console.log('Press Ctrl+C to stop.');

Затем запустим этот скрипт при помощи PhantomJS и утилиты Screen

screen -d -m phantomjs --disk-cache=no server.js 8888 http://example.com

И разумеется, надо будет настроить операционную систему (Nginx или Apache) для проксирования запросов на демон, который мы только что запустили.

server {
...

if ($args ~ "_escaped_fragment_=(.+)") {
set $real_url $1;
rewrite ^ /crawler$real_url;
}

location ^~ /crawler {
proxy_pass http://127.0.0.1:8888/$real_url;
}

...
}

Готово! Теперь HTML-слепки будут отдаваться не только поисковым роботам, но также подставляться при расшаривании в Facebook.


Удачи вам! Пару подсказок индексации сайтов на Ajax дала вам Веб-студия "АКРИТ". Разработка и продвижение сайтов на CMS «1С-Битрикс». Мы реализуем полный цикл работ - от разработки логотипа и фирменного стиля будущей компании, до ее продвижения на рынок, используя максимально эффективные современные технологии.

Назад в раздел