Crawlable Ajax-контент. SEO-ин без хэшбанга. Мой путь в порядке?

Question

Я собираюсь создать свое приложение на основе ajax, и мои URL-адреса примерно такие:

http://server.com/module/#function_name,param1,param2...etc

После ссылки на некоторые обсуждения о предложении Google: hashbang (#!), Мне нетрудно понять, что это было не лучшее решение. Есть несколько причин:

• Во всяком случае, URL довольно уродливый.
• Это ужасно, если когда-нибудь Google (или некоторые другие поисковые системы) предложат лучшее решение, чем hashbang. Я должен сохранить свой уродливый URL с помощью hashbang или написать некоторый js-код, чтобы сделать ссылку на мою страницу еще живой.
• HTML5 pushState когда-нибудь будет популярен.

Для всего вышеперечисленного, я решил сделать это по-своему: мои навигационные ссылки будут выглядеть так:

<a href="http://server.com/module/for-crawler/function-name/param1/param2/...">
Some text </a>

И некоторый код jQuery сделает его способным загружать контент ajax вместо смены страницы, как обычная ссылка:

$(function(){
    $('a').live('click',function(e){
        var realURL = translateURL( $(this).attr('href') )
        loadContent( realURL );
        e.prevetnDefault(); 
        return false;
    })
})
/* -- the function translateURL will turn url like :
..... http://server.com/module/for-crawler/function-name/param1/param2/...
Into:
..... http://server.com/module/#function-name/param1/param2/...
    That's the real url I think all ajaxers are used to dealing with
*/

Когда сканер читает мою страницу, он будет следовать за URL-адресом в атрибуте "href", и я предоставлю ему статическую не-js версию моей страницы только для чтения Google. Через несколько дней моя страница будет проиндексирована, и пользователь увидит мою страницу с результатами Google, например:

http://server.com/module/for-crawler/function-name/param1/param2/...

Я снова собираюсь использовать js, чтобы перенаправить пользователя на мою обычную версию ajax, то есть на реальный URL:

http://server.com/module/#function-name/param1/param2/...

Это лучший подход, о котором я могу думать в данный момент. Пожалуйста, дайте мне советы: я должен сделать это таким образом, или я могу сделать это лучше? Спасибо всем, ребята!

Answer 1

В зависимости от вашей аудитории, я бы предложил использовать HTML5 PushState в любом случае.

Если клиент не поддерживает HTML5 PushState, пусть он просто использует ту же версию вашего приложения, что и сканеры. По моему мнению, перезагрузка страницы не так плоха, как хешированный URL. Поскольку пользователи делятся URL-адресами, ваш хешированный URL-адрес становится доступным для других пользователей. Этот URL не будет работать, скажем, для предварительного просмотра ссылок на Facebook или любого другого клиента, который не поддерживает JavaScript.

Вместо этого я бы использовал приложение, удобное для сканирования, в сочетании с HTML5 PushState. С PushState вы всегда будете предоставлять один URL, независимо от поддержки JavaScript вашего клиента.

Сначала определите, поддерживается ли PushState:

function supports_history_api() { return !!(window.history && history.pushState); }

Тогда ваш click-handler будет выглядеть примерно так:

$('a').live('click',function(e){
  var url = $(this).attr('href');
  e.preventDefault();
  loadContent( url );
  history.pushState({"url":url}, $(this).attr('title'), url);
  return false;
})