JS history API pushState 함수로 주소 바꾸기

pushState를 사용하여 크롤링 가능하고 링크 친화적 인 AJAX 웹 사이트 만들기

by moz.com blog

• AJAX를 사용하여 콘텐츠를 페이지에로드하는 웹 사이트는 훨씬 빠르고 사용자 경험을 향상시킬 수 있습니다.
• 그러나 이러한 웹 사이트는 Google이 크롤링하기 어렵거나 불가능할 수 있으며 AJAX를 사용하면 사이트의 SEO가 손상 될 수 있습니다.

왜 지금 이것에 대해 이야기합니까

2011 년 초 트위터에서 명백한 내부 의견 불일치가 발생한 후 (참고 : 트위터 엔지니어 한 사람이 잘못 게시 한 게시물다음에 다른 사람이 현명한 반응을 보임) 그들은 끔찍한 URL을 모두 교체한 결정과 트위터를 훌륭한 구현의 모범으로 삼아서는 안되지만, 많은 똑똑한 웹 사이트 (Twitter 포함)가 사용할 계획을 살펴 보는 것은 우리 모두에게 가치가 있습니다.

일반적으로이 접근 방식이 더 자주 사용되지 않는 것에 놀랐습니다. 검색 엔진에서도 완전히 액세스 할 수있는 빠르고 사용자 친화적 인 웹 사이트를 만드는 것이 좋은 목표입니다.

기술이란 무엇입니까

그렇다면 - drumroll please(두구두구두구두구) - AJAX 생활을 더 쉽게 만들어 줄 새로운 기술은 무엇입니까? 'HTML5 History API’의 일부인 자바 스크립트 함수 window.history.pushState()입니다.

pushState() 함수는 기본적으로 지금까지 불가능했던 한 가지 일만합니다:사용자의 주소 표시 줄에 나타나는 URL의 경로를 변경합니다.

더 나아가기 전에 이 기능이 실제로 다른 작업을 수행하지 않는다는 것을 반복해서 이야기 할 가치가 있습니다. 서버를 추가로 호출하지 않고 새 페이지가 요청되지 않습니다. 물론 모든 웹 브라우저에서 사용할 수있는 것은 아니며 최신 표준을 좋아하는 브라우저 (자바 스크립트가 활성화 된 브라우저) 만 사용할 수 있습니다.

사실, 빠른 데모를 원하십니까? 대부분의 SEOmoz 방문자는 최신 브라우저를 사용하므로 이것이 효과가 있습니다. 페이지 URL을 보고 를 클릭하십시오. 주소가 변경 되었습니까? 새로운 페이지 URL은 실제 위치가 아니지만, 지금까지는 보고있는 페이지입니다.

SEOmoz 독자는 똑똑한 사람들입니다. 나는 이것이 귀중한 여러 가지 방법을 실현할 것으로 기대하지만,이 작은 기능이 나를 흥분시키는 이유는 다음과 같습니다.

• AJAX를 사용하여 페이지 컨텐츠를로드하면 속도 이점을 얻을 수 있습니다 (많은 웹 사이트에서 제공되는 코드의 일부만이 실제로 컨텐츠이며 대부분은 디자인 및 템플릿입니다)
• 페이지 URL은 페이지의 '실제’위치를 정확하게 반영 할 수 있으므로 주소 표시 줄에서 URL을 복사 / 붙여 넣기하여 링크에 연결 / 공유하는 데 아무런 문제가 없습니다 (페이지에 #fragment를 사용하는 페이지에 연결). 위치는 링크 주스를 오른쪽 페이지 / 콘텐츠로 전달하지 않습니다)
• #!를 사용하지 않으면 검색 엔진이 방문 할 특별한 '이스케이프 된 URL’에 대해 걱정할 필요가 없습니다.
• 웹의 좋은 품질의 URL (이전 게시물에서 설명한대로)에 기여하고 있다는 것을 쉽게 알도록 할 수 있습니다.

예제

pushState demo/example 페이지를 시작하여 이 모든 것이 실제로 어떻게 수행되는지 보여줍니다.

위의 이미지를 클릭하여 데모 사이트를 방문하십시오.

상단 네비게이션에서 도시 사이 페이지 탐색을 클릭하면 클릭 할 때마다 주요 콘텐츠 만로드되고 있음을 알 수 있습니다.
(페이지에서 Youtube 비디오를 재생하여 확인할 수 있습니다. 새 콘텐츠를로드 할 때 재생이 멈추지 않습니다…)

이 '실제’에 대한 많은 예를 보려면 새로운 '동적 뷰’중 하나를 사용하여 거의 모든 blogspot.com-hosted-blog를 살펴보고/view/sidebar를 URL 끝까지
예로, 이 블로그: http://n1vg.blogspot.com를 테마가 적용된 상태에서 볼 수 있습니다:http://n1vg.blogspot.com/view/sidebar

두 번째 링크의 왼쪽 열에있는 게시물을 클릭하면 매우 인상적인 속도로 콘텐츠가로드되는 것을 볼 수 있습니다. 그런 다음pushState()를 사용하여 URL을 업데이트합니다. 페이지를 다시로드하지 않았지만 브라우저는 여전히 각 콘텐츠에 대한 적절한 URL을 반영합니다.

기술자의 한마디

이 모든 소리가 마음에 들지만 기술 구현에 대해 깊이 느끼기 시작하면 개발자 또는 기술 중심의 친구들과 자유롭게 공유하십시오. (참조는이 게시물의 끝에 링크되어 있습니다.)

우리가 사용하는 중요한 기능에는 세 가지 매개 변수가 필요합니다:

window.history.pushState(data, title, url)

처음 두 매개 변수에 대해 걱정할 가치가 없습니다. 안전하게null로 설정할 수 있습니다. 이 게시물의 맨 위에 제시 한 간단한 예에서 함수는 단순히 다음과 같이 보입니다.

window.history.pushState('', '', 'test/url/that-does-not-really-exist')

이를 구현하기위한 워크 플로는 다음과 같습니다.

• 다른 작업을 수행하기 전에 사이트가 JS없이 작동하는지 확인하십시오. Google은 링크를 따라 가서 콘텐츠를 읽을 수 있어야합니다.
• 또한 완전히 렌더링 된 HTML 페이지가 아닌 특정 페이지에 대해 '콘텐츠’만 제공하려면 서버 측 프로세스를 만들어야합니다. 이것은 서버, 백엔드 설정에 따라 크게 달라집니다. 이 비트에 대해 궁금한 점이 있으면 아래 의견을 통해 문의하십시오.
• 관련 내부 링크 (탐색 요소 등)에 대한 클릭을 차단하도록 Javascript에 지시하십시오. 나는 jQuery 사용자이기 때문에click()함수에 의존합니다.
• Javascript는 클릭 한 링크의 속성 (아마도href)을보고 페이지에 적절한 내용을로드하려는 JS/AJAX를 사용합니다
• 마지막으로pushState()함수를 사용하여 콘텐츠의 “실제” 위치와 일치하도록 URL을 업데이트하여 모든 SEO 혜택을 누리십시오.

내부 링크를 '정상적으로’작동시킨 다음이 AJAX / HTML5 구현을 맨 위에 추가하면 '점진적 향상’의 이점을 활용할 수 있습니다:

최신 브라우저를 사용하는 사용자는 완전하고 빠르며 스파이스 한 경험을 얻을 수 있지만 검색 엔진에 대해서는 성능이 떨어지는 브라우저와 (이 경우에는 비판적으로) 사이트에 계속 액세스 할 수 있습니다.

이 코드를 구현하는 코드가 필요하면 위에서 공유 한 데모의 헤드 섹션을 살펴보십시오. 여기에는이 작업을 수행하는 데 필요한 모든 Javascript가 포함되어 있습니다.

이 작업을 수행하기위한 기본 코드는 다음과 같습니다.

// We're using jQuery functions to make our lives loads easier
$('nav a').click(function(e) {
    url = $(this).attr("href");

    //This function would get content from the server and insert it into the id="content" element
    $.getJSON("content.php", {contentid : url},function (data) {
        $("#content").html(data);
    });

    //This is where we update the address bar with the 'url' parameter
    window.history.pushState('object', 'New Title', url);

    //This stops the browser from actually following the link
    e.preventDefault();
}

중요한 경고

위의 코드는 개념 증명으로 작동하지만 데모처럼 원활하게 작동하려면 몇 가지 추가 작업이 필요합니다.

특히 사용자 브라우저의 '뒤로’버튼이 작동하기를 원할 것입니다. 이 코드 조각은 허용하지 않습니다. URL은 변경되지만 기록 페이지의 내용을 계속로드해야합니다. 이를 활성화하려면popState()함수가 필요합니다. URL 변경을 감지하여 페이지 내용을 가져 와서로드하는 데 필요한 모든 기능을 실행할 수 있습니다.

다시 한 번 데모 페이지의 헤드에서이를 확인할 수 있습니다.
http://html5.gingerhost.com.

자료 및 추가 자료

HTML5 History API를 다루는 많은 리소스가 있으므로 여가 시간에 세부 정보를 읽도록하겠습니다. 다음을 살펴볼 것을 제안합니다.

• Dive in HTML5: Chapter 11: Manipulating History for Fun & Profit(이 책 전체를 적극 추천합니다)
• Mozilla Developer Network: Manipulating the Browser History
• 마지막으로, 당신의 마음의 평화를 위해:Internet Explorer 10_will_support the HistoryAPI