sourcecode

해쉬방? 안 해쉬방?

copyscript 2023. 8. 2. 09:21
반응형

해쉬방? 안 해쉬방?

저는 새로운 웹사이트를 개발하고 있는데 AJAX를 최대한 활용하고 싶습니다.기본적으로, 저는 사용자들이 거의 절대로 홈페이지를 벗어나지 않고 팝업 창, 슬라이더, 섹션 등에 모든 것을 표시하기를 원합니다.

현재 우리의 기존 웹사이트는 이미 꽤 높은 순위를 차지하고 있기 때문에 저 또한 구글을 행복하게 유지하고 싶습니다.저는 구글의 AJAX 애플리케이션 크롤링 가능하게 만들기를 읽고 _excaped_fragment_를 통해 크롤러에 동일한 콘텐츠를 제공해야 한다는 것을 이해했습니다.

그 문제는
저는 이미 SEO 친화적인 URL을 제공하는 움브라코를 이용하여 이 웹사이트를 개발하고 싶습니다.

하지만 문제는 제가 Umbraco 코어를 해킹하지 않고 _excape_fragment_를 쉽게 구현할 수 있는 방법이 없다는 것입니다(적어도 제가 아는 바로는 그렇습니다). 그리고 아래에 올린 솔루션(답변)을 사용하면 Javascript가 없는 사용자들도 만족할 수 있을 것입니다.윈윈 상황?말해봐요! =)

갱신하다
어제 (현재 삭제된) 다른 사용자로부터 _excape_fragment_ 방식을 더 이상 사용하지 말 것을 제안하고 이를 생략할 것을 제안하는 답변이 있었습니다.이것이 사실입니까?구글은 실제로 콘텐츠를 보기 위해 AJAX를 실행할 것입니까?

감사해요.
마르코

는 @Daniel Pryden의 댓글에서 조언을 받아 답으로 이 글을 올립니다.

저는 이 문제에 대해 생각하고 생각했습니다. 구식 방식으로 웹사이트를 만들고 실제 페이지와 모든 것을 만든 후 다음 단계를 수행하는 것이 어떨까요.

  1. jQuery를 사용하여 홈페이지의 모든 내부 링크를 가로채고 해시(#)를 앞에 붙입니다.window.location.pathname따라서 해시 변경 이벤트를 트리거합니다.(3단계 참조)
  2. 홈페이지를 제외한 모든 페이지에 자바스크립트 리다이렉트를 추가하여 페이지를 다시 홈페이지로 리다이렉트하되,window.location.pathname해시(#) 뒤에 있습니다.예를 들어 Google은 http://www.domain.com/about-us.aspx 을 크롤링하지만 사용자가 페이지를 방문하면 http://www.domain.com/ #/about-us.aspx로 리디렉션됩니다.
  3. 홈페이지에서 jQuery BBQ 또는 유사한 플러그인을 사용하여 동적 콘텐츠를 로드할 수 있도록 페이지 로드 시간을 포함한 해시 변경 이벤트를 청취합니다.요청이 AJAX 콘텐츠인지 여부에 따라 부분 또는 전체 페이지 콘텐츠를 제공하도록 Umbraco를 구성할 수 있습니다.

이렇게 하면 Javascript가 없는 사용자는 완전한(반듯하게 생긴) 웹 사이트를 갖게 되고, Google은 문제 없이 모든 페이지를 탐색할 수 있지만 Javascript가 있는 사용자는 항상 홈페이지에 머물게 되며, 웹 사이트가 아닌 웹 앱을 보유한다는 멋진 개념이 달성될 것입니다.

HTML5 히스토리 세션 관리를 사용하는 것도 고려해 보셨습니까?

이렇게 하면 최신 브라우저에서 해시를 사용할 필요가 없으므로 사용자는 아무 것도 눈치채지 못합니다.

다음과 같은 작업을 수행할 수 있습니다.

편집: 업데이트된 예제.

function route(path) {
    $.get(path, function(data) {
        //parse data
    });
}

if (typeof history.pushState !== 'undefined') 
{
    $(window).bind('popstate', function(e)
    {
        route(window.location.pathname);
    });
    $('a').click(function(event) {
        event.preventDefault();
        history.pushState({},'',this.href);
    });
} else {
    $(window).bind('hashchange', function(e)
    {
        route(window.location.hash);
    });
    $('a').click(function(event) {
        event.preventDefault();
        $(this).attr('href', '/#'+$(this).attr('href'));
    });
}

jQuery BBQ를 사용하고 페이지 상단에 있는 js 기능을 사용하여 유효한 해시가 있는지 확인하고, 있으면 페이지로 리디렉션합니다.

언급URL : https://stackoverflow.com/questions/6756695/to-hashbang-or-not-to-hashbang

반응형