크롤링 가능한 Ajax 콘텐츠. hashbang없이 SEO-ing. 내 길은 괜찮 니?

Question

나는 아약스에 따라 내 응용 프로그램을 구축하는거야, 내 URL은 뭔가 같다 :

는 구글의 제안에 대한 몇 가지 논의를 참조

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

후 : (#!) hashbang 것은, 그것은 나를 실현하기 어렵지 않다 그것은 최선의 해결책이 아니 었습니다. 몇 가지 이유가 있습니다 :

• 어쨌든 URL은 꽤 추합니다.
• 언젠가 Google (또는 다른 검색 엔진)이 hashbang 이외의 더 나은 솔루션을 제안한다면 그것은 끔찍한 일입니다. 나는 hashbang으로 나의 추악한 URL을 지켜야 만하거나 내 페이지에 대한 링크를 아직 생존시키기위한 js 코드를 작성해야한다.
• HTML5 pushState가 언젠가 인기를 얻게 될 것입니다. 위의 모든 것들에 대한

, 나는 그것을 내 방식을 결정 :

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

그리고 일부 jQuery 코드 대신 페이지 -의 아약스 내용을로드하는 것이 가능하게됩니다 : 내 탐색 링크는 다음과 같이 될 것입니다 일반 링크처럼 변경 : 크롤러가 내 페이지를 읽을 때

$(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 
*/ 

, 그것은 "HREF"속성에 URL을 따를 것이다, 난 그냥 구글 읽는 내 페이지의 정적이 아닌 JS 버전으로 제공 할 것입니다. 몇 일 후, 내 페이지가 & 사용자가이 같은 구글의 검색 결과에 내 페이지가 표시됩니다 색인 : 내 정상 아약스 버전으로 사용자를 리디렉션하는 사용자 JS 다시 갈거야

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

, 나는 현실에 의미 URL :

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

이것이 현재 제가 생각할 수있는 최선의 방법입니다. 제게 조언을 해주세요 : 제가 그런 식으로해야합니까, 아니면 더 잘 만들 수 있습니까? 모든 사람들에게 감사드립니다!

Answer 1

잠재 고객에 따라 어쨌든 HTML5 PushState를 사용하는 것이 좋습니다.

클라이언트가 HTML5 PushState를 지원하지 않으면 단순히 크롤러와 동일한 버전의 앱을 사용할 수 있습니다. 제 생각에는 페이지 새로 고침은 해시 된 URL만큼 나쁘지 않습니다. 사용자가 URL을 공유하므로 해시 된 URL이 다른 사용자에게 노출됩니다. 이 URL은 작동하지 않을 것입니다. Facebook 링크 공유 미리보기 또는 JavaScript를 지원하지 않는 다른 클라이언트를 가정 해 봅시다.

대신 HTML5 PushState와 함께 크롤러가 쉽게 사용할 수있는 앱만 사용합니다. PushState를 사용하면 클라이언트의 JavaScript 지원과 관계없이 항상 단일 URL을 노출합니다.

첫째, PushState가 지원되는지 여부를 감지 :

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

를 그런 다음 click-handler는 다음과 같이 보일 것입니다 : 검색 엔진이 귀하의 URL을 볼 때

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