Facebook 및 새 Twitter URL의 shebang / hashbang (#!)은 무엇입니까?

방금 우리가 사용했던 길고 복잡한 Facebook URL은 다음과 같습니다.

http://www.facebook.com/example.profile#!/pages/Another-Page/123456789012345

내가 기억할 수있는 한 올해 초 #느낌표가없는 정상적인 URL 조각과 같은 문자열 (로 시작 )이었습니다. 그러나 지금은 shebang 또는 hashbang ( #!)이며 이전에는 쉘 스크립트와 Perl 스크립트에서만 보았습니다.

새로운 트위터의 URL은 이제 기능 #!문자. 예를 들어 Twitter 프로필 URL은 다음과 같습니다.

http://twitter.com/#!/BoltClock

않는 #!새로운 페이스 북과 트위터 인터페이스가 이제 크게 Ajaxified 때문에 지금은 특정 아약스 프레임 워크 또는 뭔가 같은 URL을 몇 가지 특별한 역할을 재생?
내 URL에 이것을 사용하면 어떤 식 으로든 웹 응용 프로그램에 도움이됩니까?

이 기술은 더 이상 사용되지 않습니다 .

이것은 하는 데 사용되는 페이지 방법 인덱스에 구글을 말한다.

https://developers.google.com/webmasters/ajax-crawling/

이 기술은 대부분 HTML5와 함께 도입 된 JavaScript History API를 사용하는 기능으로 대체되었습니다. 와 같은 URL의 www.example.com/ajax.html#!key=value경우 Google은 URL www.example.com/ajax.html?_escaped_fragment_=key=value을 확인하여 AJAX 이외 버전의 콘텐츠를 가져옵니다.

octothorpe / number-sign / hashmark는 URL에 특별한 의미가 있으며 일반적으로 문서의 섹션 이름을 식별합니다. 정확한 용어는 해시 뒤의 텍스트 가 URL 의 앵커 부분이라는 것입니다. Wikipedia를 사용하면 대부분의 페이지에 목차가 있으며 다음과 같이 앵커가있는 문서 내의 섹션으로 이동할 수 있습니다.

https://ko.wikipedia.org/wiki/Alan_Turing#Early_computers_and_the_Turing_test

https://en.wikipedia.org/wiki/Alan_Turing페이지를 식별하고 Early_computers_and_the_Turing_test앵커입니다. Facebook 및 기타 Javascript 기반 응용 프로그램 (예 : 내 Wood & Stones )이 앵커를 사용하는 이유 는 페이지에서 전체 페이지를 다시로드하지 않고 페이지를 책갈피 가능 (응답에 대한 의견에서 제안한대로)하거나 뒤로 단추 를 지원하기 를 원하기 때문입니다. 서버 .

북마크 및 뒤로 버튼을 지원하려면 URL을 변경해야합니다. 그러나 페이지 부분 (와 같은 window.location = 'http://raganwald.com';)을 다른 URL로 변경하거나 앵커를 지정하지 않으면 브라우저는 URL에서 전체 페이지를로드합니다. Firebug 또는 Safari의 Javascript 콘솔에서 시도하십시오. 로드 http://minimal-github.gilesb.com/raganwald. 이제 자바 스크립트 콘솔에서 다음을 입력하십시오.

window.location = 'http://minimal-github.gilesb.com/raganwald';

서버에서 페이지를 새로 고칩니다. 이제 다음을 입력하십시오.

window.location = 'http://minimal-github.gilesb.com/raganwald#try_this';

아하! 페이지 새로 고침이 없습니다! 유형:

window.location = 'http://minimal-github.gilesb.com/raganwald#and_this';

여전히 새로 고침이 없습니다. 뒤로 단추를 사용하여 이러한 URL이 브라우저 히스토리에 있는지 확인하십시오. 브라우저는 우리가 같은 페이지에 있지만 앵커를 변경하기 만하면 다시로드되지 않습니다. 이 동작 덕분에 브라우저에 하나의 '페이지'에있는 것처럼 보이지만 뒤로 버튼을 존중하는 책갈피 가능한 섹션이 많은 단일 Javascript 애플리케이션을 가질 수 있습니다. 응용 프로그램은 사용자가 다른 '상태'를 입력 할 때 앵커를 변경해야하며, 마찬가지로 사용자가 뒤로 단추 나 책갈피 또는 링크를 사용하여 앵커가 포함 된 응용 프로그램을로드하는 경우 응용 프로그램은 적절한 상태를 복원해야합니다.

앵커는 Javascript 프로그래머에게 책갈피 작성 가능하고 색인 작성 가능하며 뒤로 단추 친화적 인 응용 프로그램을 만들 수있는 메커니즘을 제공합니다. 이 기술의 이름은 단일 페이지 인터페이스 입니다.

ps이 기법에는 네 번째 이점이 있습니다. AJAX를 통해 페이지 컨텐츠를로드 한 다음 현재 DOM에 삽입하는 것이 새 페이지를로드하는 것보다 훨씬 빠릅니다. 속도 증가에 더하여, 백그라운드에서 특정 부분을 로딩하는 것과 같은 추가 트릭은 프로그래머의 제어하에 수행 될 수있다.

pps이 모든 것을 감안할 때, 'bang'또는 느낌표는 Google 웹 크롤러에게 서버에서 약간 다른 URL로 동일한 페이지를로드 할 수 있다는 추가 힌트입니다. Ajax 크롤링을 참조하십시오 . 또 다른 기술은 각 링크가 서버 액세스 가능한 URL을 가리 키도록하고 눈에 거슬리지 않는 자바 스크립트를 사용하여 앵커가있는 SPI로 변경하는 것입니다.

주요 링크는 다음과 같습니다 . 단일 페이지 인터페이스 선언

우선 : 저는 raganwald가 인용 한 The Single Page Interface Manifesto의 저자입니다.

raganwald가 잘 설명했듯이 FaceBook과 Twitter에서 사용되는 SPI (Single Page Interface) 접근 방식의 가장 중요한 측면은 #URL에서 해시 를 사용하는 것입니다

이 문자 !는 Google 목적으로 만 추가되며이 표기법은 AJAX에 집중된 웹 사이트 (극단의 단일 페이지 인터페이스 웹 사이트)를 크롤링하기위한 Google "표준"입니다. Google 크롤러에서 URL을 찾으면 #!동일한 페이지 "상태"를 제공하지만이 경우로드 시간에 대체 URL이 존재한다는 것을 알게됩니다.

#!조합 에도 불구하고 SEO에는 매우 흥미롭지 만 Google에서만 지원합니다 (아시 아는 한), 일부 JavaScript 트릭을 사용하면 모든 웹 크롤러 (Yahoo, Bing ...)와 호환되는 SPI 웹 사이트 SEO를 작성할 수 있습니다.

SPI 선언 및 데모는 Google 형식의 !해시를 사용하지 않으므로이 표기법을 쉽게 추가 할 수 있으며 SPI 크롤링이 훨씬 쉬워 질 수 있습니다 (UPDATE : 이제! 표기법이 사용되며 다른 검색 엔진과 호환됩니다).

이 자습서를 살펴보면 간단한 ItsNat SPI 사이트의 예이지만 다른 프레임 워크에 대한 아이디어를 선택할 수 있습니다.이 예는 모든 웹 크롤러와 SEO 호환됩니다.

어려운 문제는 "AJAX 페이지 상태"를 SEO에 대한 일반 HTML로 생성하는 것입니다. ItsNat에서 매우 쉽고 자동적이며 동일한 사이트가 SEO에 대한 SPI 또는 페이지 기반의 같은 시간에 있습니다 (또는 JavaScript가 비활성화 된 경우) 접근성을 위해). 다른 웹 프레임 워크를 사용하면 이중 사이트 접근 방식을 따를 수 있습니다. 한 사이트는 SPI 기반이고 다른 페이지는 SEO를 기반으로합니다. 예를 들어 Twitter는이 "이중 사이트"기술을 사용합니다.

이 해시 방 컨벤션 채택을 고려하고 있다면 매우 신중할 것 입니다.

해시 방을 마치면 돌아갈 수 없습니다. 아마도 가장 어려운 문제 일 것입니다. Ben의 포스트는 pushState가 더 널리 채택되면 해시 뱅을 남겨두고 전통적인 URL로 돌아갈 수 있다고 지적했다. 사실, 당신은 할 수 없습니다. 이전에 URL은 영구적이며 색인이 생성되고 보관되며 일반적으로 유지됩니다. 또한 멋진 URL은 변경되지 않습니다. 우리는 콘텐츠에 대한 모든 귀중한 링크에서 자신을 분리하고 싶지 않습니다. 언제든지 해시 방 URL을 구현 한 경우 링크를 끊지 않고 URL을 변경하려면 도메인의 루트 문서에서 일부 JavaScript를 실행해야합니다. 영원히. 그것은 결코 일시적인 것이 아니며, 당신은 그것에 붙어 있습니다.

URL을 못 생겼거나 깨뜨릴 수있게하는 것은 해시 뱅 (hashbang )의 거대하고 영구적 인 단점이기 때문에 hashbangs 대신 pushState 를 사용 하려고합니다 .

해시 방 URL 및 단일 페이지 인터페이스의 개척자 중 하나 인 트위터는이 모든 것에 대해 잘 조사하기 위해 해시 방 시스템이 장기적으로 느리고 실제로 결정을 취소하고 구식 링크.

이것에 관한 기사는 여기입니다.

나는 항상 !방금 표시된 해시 조각이 !사이트 루트 또는 도메인을 대신 하여 URL에 해당 한다고 가정했습니다 . 이론적으로는 무엇이든 될 수 있지만 Google AJAX Crawling API는이 방법을 좋아합니다.

물론 해시는 실제 페이지 다시로드가 발생하지 않음을 나타내므로 AJAX 목적입니다. 편집 : Raganwald는 이것을 자세하게 설명하는 멋진 일을합니다.

위의 답변은 트위터와 페이스 북에서 왜 그리고 어떻게 사용되는지 잘 설명합니다. 내가 놓친 것은 #기본적으로 무엇을하는지 설명하는 것입니다 ...

'일반'(단일 페이지 응용 프로그램 아님) hash에서는 해시 후 url에 해당 요소 id를 배치하여 id가있는 모든 요소에 고정 할 수 있습니다#

예:

(크롬에)를 클릭 F12하거나 Rihgt Mouse및Inspect element

다음 id="answer-10831233"과 같이 URL 을 가져 와서 추가하십시오.

/programming/3009380/whats-the-shebang-hashbang-in-facebook-and-new-twitter-urls-for#answer-10831233

페이지의 해당 요소로 이동하는 링크가 나타납니다.

Facebook 및 새 Twitter URL의 shebang / hashbang (#!)은 무엇입니까?

#위의 답변에 설명 된 방식으로 사용 하면 충돌하는 동작을 소개합니다 ... 수면을 풀지 않더라도 Angular는 다소 표준이되었습니다.