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

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

---

지금까지 우리가 사용하는 길고 복잡한 Facebook URL이 다음과 같이 보입니다.

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

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

이제 새 Twitter URL에도 #!기호가 있습니다. 예를 들어 Twitter 프로필 URL은 이제 다음과 같습니다.

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

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

---

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

이것은 Google에 페이지 색인 생성 방법 을 알려주는 데 사용되었습니다 .

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

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

---

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이 브라우저 기록에 있는지 확인합니다. 브라우저는 우리가 같은 페이지에 있지만 앵커 만 변경했음을 인식하므로 다시로드되지 않습니다. 이 동작 덕분에 브라우저에는 하나의 '페이지'에있는 것처럼 보이지만 뒤로 버튼을 고려하는 북마크 가능한 섹션이 많이있는 단일 자바 스크립트 애플리케이션을 가질 수 있습니다. 사용자가 다른 '상태'에 들어갈 때 애플리케이션은 앵커를 변경해야하며, 마찬가지로 사용자가 뒤로 버튼이나 북마크 또는 링크를 사용하여 앵커가 포함 된 애플리케이션을로드하는 경우 애플리케이션은 적절한 상태를 복원해야합니다.

따라서 앵커는 자바 스크립트 프로그래머에게 북마크 가능하고 색인 생성 가능하며 뒤로 버튼 친화적 인 애플리케이션을 만드는 메커니즘을 제공합니다. 이 기술의 이름은 단일 페이지 인터페이스 입니다.

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를 위해 매우 흥미, 일부 자바 스크립트 트릭 당신은 SPI 웹 사이트는 모든 웹 크롤러 (야후, 빙 ...) 호환 엔진 최적화 구축 할 수 있습니다, (내가 아는 한) 구글에 의해 지원됩니다.

The SPI Manifesto and demos do not use Google's format of ! in hashes, this notation could be easily added and SPI crawling could be even easier (UPDATE: now ! notation is used and remains compatible with other search engines).

Take a look to this tutorial, is an example of a simple ItsNat SPI site but you can pick some ideas for other frameworks, this example is SEO compatible for any web crawler.

The hard problem is to generate any (or selected) "AJAX page state" as plain HTML for SEO, in ItsNat is very easy and automatic, the same site is in the same time SPI or page based for SEO (or when JavaScript is disabled for accessibility). With other web frameworks you can ever follow the double site approach, one site is SPI based and another page based for SEO, for instance Twitter uses this "double site" technique.

---

I would be very careful if you are considering adopting this hashbang convention.

Once you hashbang, you can’t go back. This is probably the stickiest issue. Ben’s post put forward the point that when pushState is more widely adopted then we can leave hashbangs behind and return to traditional URLs. Well, fact is, you can’t. Earlier I stated that URLs are forever, they get indexed and archived and generally kept around. To add to that, cool URLs don’t change. We don’t want to disconnect ourselves from all the valuable links to our content. If you’ve implemented hashbang URLs at any point then want to change them without breaking links the only way you can do it is by running some JavaScript on the root document of your domain. Forever. It’s in no way temporary, you are stuck with it.

You really want to use pushState instead of hashbangs, because making your URLs ugly and possibly broken -- forever -- is a colossal and permanent downside to hashbangs.

---

To have a good follow-up about all this, Twitter - one of the pioneers of hashbang URL's and single-page-interface - admitted that the hashbang system was slow in the long run and that they have actually started reversing the decision and returning to old-school links.

Article about this is here.

---

I always assumed the ! just indicated that the hash fragment that followed corresponded to a URL, with ! taking the place of the site root or domain. It could be anything, in theory, but it seems the Google AJAX Crawling API likes it this way.

The hash, of course, just indicates that no real page reload is occurring, so yes, it’s for AJAX purposes. Edit: Raganwald does a lovely job explaining this in more detail.

---

Answers above describe well why and how it is used on twitter and facebook, what I missed is explanation what # does by default...

On a 'normal' (not a single page application) you can do anchoring with hash to any element that has id by placing that elements id in url after hash #

Example:

(on Chrome) Click F12 or Rihgt Mouse and Inspect element

then take id="answer-10831233" and add to url like following

https://stackoverflow.com/questions/3009380/whats-the-shebang-hashbang-in-facebook-and-new-twitter-urls-for#answer-10831233

and you will get a link that jumps to that element on the page

What's the shebang/hashbang (#!) in Facebook and new Twitter URLs for?

By using # in a way described in the answers above you are introducing conflicting behaviour... although I wouldn't loose sleep over it... since Angular it became somewhat of a standard....

참고URL : https://stackoverflow.com/questions/3009380/whats-the-shebang-hashbang-in-facebook-and-new-twitter-urls-for