it-swarm-ko.com

Facebook의 Shebang / hashbang (#!)과 새로운 Twitter URL은 무엇입니까?

나는 우리가 지금 사용하던 길고 회선이 많은 페이스 북 URL이 다음과 같이 보였다는 것을 알아 차렸다.

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

필자가 기억할 수있는 한, 올해 초에는 느낌표가없는 일반적인 URL 조각 형식의 문자열 (#로 시작)이었습니다. 하지만 지금은 Shebang 또는 hashbang (#!)입니다. 이전에는 쉘 스크립트 및 Perl 스크립트에서만 보았습니다.

새로운 트위터 URL에는 #! 기호가 추가되었습니다. 예를 들어 트위터 프로필 URL은 다음과 같습니다.

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

#!는 이제 새로운 Ajax 프레임 워크 나 새로운 Facebook 및 Twitter 인터페이스가 이제 거의 Ajaxified가 된 이후로 URL에서 특별한 역할을합니까? 내 URL에이 URL을 사용하면 웹 응용 프로그램에 어떤 이점이 있습니까?

735
BoltClock

이 기술은 현재 사용되지 않음 .

Google에 페이지 색인 생성 방법을 알려주는 데 사용됩니다.

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

이 기술은 HTML5와 함께 도입 된 JavaScript History API를 사용할 수있는 능력으로 대체되었습니다. www.example.com/ajax.html#!key=value와 같은 URL의 경우 Google은 www.example.com/ajax.html?_escaped_fragment_=key=value URL을 검사하여 비 AJAX 버전의 내용을 가져옵니다.

480
ceejayoz

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

https://en.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로드하십시오. 이제 Javascript 콘솔에서 다음을 입력하십시오.

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이 브라우저 기록에 있는지 확인하십시오. 브라우저는 우리가 같은 페이지에 있지만 앵커 만 변경한다는 것을 알기 때문에 다시로드하지 않습니다. 이 동작 덕분에 우리는 하나의 '페이지'에 있지만 뒤로 버튼을 존중하는 많은 북마크 가능한 섹션을 가지기 위해 브라우저에 나타나는 단일 자바 스크립트 애플리케이션을 가질 수 있습니다. 사용자가 다른 '상태'를 입력 할 때 응용 프로그램이 앵커를 변경해야하며, 사용자가 뒤로 버튼이나 책갈피 또는 링크를 사용하여 앵커가 포함 된 응용 프로그램을로드하는 경우에도 응용 프로그램은 해당 상태를 복원해야합니다.

앵커는 자바 스크립트 프로그래머에게 북마크 가능, 색인 가능 및 뒤로 버튼 친숙한 응용 프로그램을 만들기위한 메커니즘을 제공합니다. 이 기법의 이름은 다음과 같습니다. 단일 페이지 인터페이스 .

추신. 이 기술에 네 번째 이점이 있습니다. AJAX를 통해 페이지 내용을로드 한 다음 현재 DOM에 삽입하면 새 페이지를로드하는 것보다 훨씬 빠릅니다. 속도 증가 외에도 백그라운드에서 특정 부분을로드하는 것과 같은 또 다른 트릭은 프로그래머가 제어 할 수 있습니다.

p.p.s. 이 모든 것을 감안할 때 '뱅 (bang)'이나 느낌표는 Google의 웹 크롤러가 힌트를 제공하기 때문에 약간 다른 URL의 서버에서 똑같은 페이지를로드 할 수 있습니다. Ajax Crawling 를 참조하십시오. 또 다른 방법은 각 링크가 서버 액세스 가능한 URL을 가리키는 지 확인하고 눈에 잘 띄지 않는 Javascript를 사용하여 앵커가있는 SPI (으)로 변경하는 것입니다.

다시 핵심 링크가 있습니다 : 단일 페이지 인터페이스 선언

215
raganwald

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

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

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

#! 조합이 SEO에 매우 흥미 롭지 만, Google에서 지원하는 JavaScript 트릭을 사용하면 어떤 웹 크롤러 (Yahoo, Bing)와도 호환 될 수 있습니다.SPI web sites SEO. ..).

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

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

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

111
jmarranz

나는이 해쉬 뱅 (hashbang) 컨벤션을 채택하는 것을 고려한다면 매우 조심스럽게 될 것이다.

일단 hashbang하면 되돌릴 수 없습니다. 이것은 아마도 가장 어려운 문제입니다. Ben의 게시물은 pushState가 더 널리 채택 될 때 hashbang을 남겨두고 전통적인 URL로 돌아갈 수 있다는 점을 강조했습니다. 음, 사실은 그렇지 않습니다. 이전에 나는 URL이 영원하다는 것을 말했고, 색인을 생성하고 보관 처리했으며 일반적으로 보관했습니다. 추가하려면 멋진 URL이 변경되지 않습니다. 우리는 우리의 콘텐츠에 대한 모든 귀중한 링크로부터 자신을 연결 해제하고 싶지 않습니다. 어떤 시점에서 hashbang URL을 구현 한 경우 링크를 끊지 않고 변경하려면 도메인의 루트 문서에서 일부 JavaScript를 실행해야합니다. 영원히. 그것은 일시적인 것이 아니며, 당신은 그것에 매달려 있습니다.

당신은 정말로 hashbangs 대신에 pushState를 사용하십시오 . URL을 추악하게 만들거나 망가뜨릴 수 있기 때문에 - 영원히 - hashbangs는 거대하고 영구적 인 단점이 있습니다.

85
Jeff Atwood

이 모든 것에 대해 좋은 후속 조치를 취하기 위해, hashbang URL 및 단일 페이지 인터페이스의 선구자 중 하나 인 Twitter는 hashbang 시스템이 장기간에 느리며 실제로 결정을 되돌리고 다시 돌아 오는 것을 인정했습니다. 옛날 학교 링크.

여기에 대한 기사는 여기에 있습니다.

16
kingmaple

나는 항상 !가 다음과 같은 해시 조각이 URL에 대응하고 !가 사이트 루트 또는 도메인의 위치를 ​​차지한다고 지적했습니다. 이론적으로는 아무 것도 될 수 있지만, Google AJAX Crawling API는이 방법을 좋아합니다.

해시는 물론 실제 페이지를 다시로드하지 않음을 나타냅니다. 예, AJAX목적을위한 것입니다. 편집 : Raganwald는 더 자세히 설명해주는 멋진 일을합니다.

9
Alan H.