Do czego służy shebang / hashbang (#!) Na Facebooku i nowe adresy URL na Twitterze?

Właśnie zauważyłem, że długie, zwinięte adresy URL Facebooka, do których jesteśmy przyzwyczajeni, wyglądają tak:

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

O ile pamiętam, na początku tego roku był to zwykły ciąg podobny do fragmentu adresu URL (zaczynając od #), bez wykrzyknika. Ale teraz jest to shebang lub hashbang ( #!), które wcześniej widziałem tylko w skryptach powłoki i skryptach Perla.

Te nowe Twitter URL teraz również posiadają #!symbole. Na przykład adres URL profilu na Twitterze wygląda teraz tak:

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

Czy #!teraz odgrywa jakąś szczególną rolę w adresach URL, na przykład dla pewnego frameworku Ajax lub czegoś takiego, ponieważ nowe interfejsy Facebooka i Twittera są teraz w dużej mierze Ajaxified?
Czy użycie tego w moich adresach URL w jakikolwiek sposób przydałoby się mojej aplikacji internetowej?

Ta technika jest teraz przestarzała .

Ten używany do poinformować Google, jak indeksować strony.

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

Ta technika została w większości zastąpiona przez możliwość użycia JavaScript History API, który został wprowadzony wraz z HTML5. W przypadku adresu URL takiego jak www.example.com/ajax.html#!key=valueGoogle sprawdzi adres URL, www.example.com/ajax.html?_escaped_fragment_=key=valueaby pobrać wersję treści inną niż AJAX.

Oktororpe / number-sign / hashmark ma specjalne znaczenie w adresie URL, zwykle identyfikuje nazwę sekcji dokumentu. Dokładny termin jest taki, że tekst następujący za skrótem jest zakotwiczoną częścią adresu URL. Jeśli używasz Wikipedii, zobaczysz, że większość stron ma spis treści i możesz przeskakiwać do sekcji w dokumencie za pomocą kotwicy, takich jak:

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

https://en.wikipedia.org/wiki/Alan_Turingidentyfikuje stronę i Early_computers_and_the_Turing_testjest kotwicą. Powodem, dla którego Facebook i inne aplikacje JavaScript (jak mój własny Wood & Stones ) używają kotwic, jest to, że chcą, aby strony były znaczące (jak sugeruje komentarz do tej odpowiedzi) lub obsługują przycisk Wstecz bez ponownego ładowania całej strony z serwer .

Aby obsługiwać zakładki i przycisk Wstecz, musisz zmienić adres URL. Jeśli jednak zmienisz część strony (z czymś podobnym window.location = 'http://raganwald.com';) na inny adres URL lub bez określenia kotwicy, przeglądarka załaduje całą stronę z adresu URL. Wypróbuj to w Firebug lub Safari w konsoli Javascript. Obciążenie http://minimal-github.gilesb.com/raganwald. Teraz w konsoli Javascript wpisz:

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

Odśwież stronę zobaczysz z serwera. Teraz wpisz:

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

Aha! Brak odświeżania strony! Rodzaj:

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

Wciąż brak odświeżania. Użyj przycisku Wstecz, aby sprawdzić, czy te adresy URL znajdują się w historii przeglądarki. Przeglądarka zauważa, że ​​jesteśmy na tej samej stronie, ale po prostu zmieniamy kotwicę, więc nie można jej ponownie załadować. Dzięki takiemu zachowaniu możemy mieć pojedynczą aplikację JavaScript, która wydaje się być w przeglądarce na jednej „stronie”, ale ma wiele zakładek, które można podziwiać przy użyciu przycisku Wstecz. Aplikacja musi zmienić kotwicę, gdy użytkownik wejdzie w inne „stany”, i podobnie, jeśli użytkownik użyje przycisku Wstecz, zakładki lub linku, aby załadować aplikację z dołączoną kotwicą, aplikacja musi przywrócić odpowiedni stan.

A więc masz to: kotwice zapewniają programistom Javascript mechanizm tworzenia aplikacji umożliwiających tworzenie zakładek, indeksowanie i dostosowywanie do przycisków. Ta technika ma nazwę: jest to interfejs jednostronicowy .

ps Czwarta zaleta tej techniki: ładowanie zawartości strony przez AJAX, a następnie wstrzykiwanie jej do bieżącej DOM może być znacznie szybsze niż ładowanie nowej strony. Oprócz zwiększenia prędkości, inne sztuczki, takie jak ładowanie niektórych części w tle, mogą być wykonywane pod kontrolą programisty.

pps Biorąc to wszystko pod uwagę, „huk” lub wykrzyknik to kolejna wskazówka dla robota Google, że dokładnie ta sama strona może zostać załadowana z serwera pod nieco innym adresem URL. Zobacz indeksowanie Ajax . Inną techniką jest umieszczenie każdego linku w adresie URL dostępnym na serwerze, a następnie użycie dyskretnego Javascript, aby zmienić go w SPI z kotwicą.

Oto kolejny kluczowy link: Manifest interfejsu pojedynczej strony

Po pierwsze: jestem autorem Manifestu interfejsu pojedynczej strony, cytowanego przez raganwalda

Jak bardzo dobrze wyjaśnił raganwald, najważniejszym aspektem podejścia opartego na interfejsie pojedynczej strony (SPI) stosowanym w FaceBook i Twitter jest użycie skrótu #w adresach URL

Znak !jest dodawany tylko do celów Google, notacja ta jest „standardem” Google do indeksowania witryn intensywnie korzystających z AJAX (w ekstremalnych witrynach z interfejsem Single Page Interface). Gdy robot Google znajdzie adres URL #!, wie, że istnieje alternatywny konwencjonalny adres URL zapewniający ten sam „stan” strony, ale w tym przypadku czas ładowania.

Pomimo tego, że #!kombinacja jest bardzo interesująca dla SEO, jest obsługiwana tylko przez Google (o ile wiem), dzięki niektórym sztuczkom JavaScript możesz budować strony internetowe SPI SEO kompatybilne z dowolnym robotem indeksującym (Yahoo, Bing ...).

Manifest SPI i wersje demonstracyjne nie używają !haszującego formatu Google , notację tę można łatwo dodać, a indeksowanie SPI może być jeszcze łatwiejsze (AKTUALIZACJA: teraz! Notacja jest używana i pozostaje kompatybilna z innymi wyszukiwarkami).

Spójrz na ten samouczek , jest przykładem prostej witryny ItsNat SPI, ale możesz wybrać kilka pomysłów na inne frameworki, ten przykład jest zgodny z SEO dla dowolnego robota sieciowego.

Trudnym problemem jest wygenerowanie dowolnego (lub wybranego) „stanu strony AJAX” jako zwykłego HTML dla SEO, w ItsNat jest bardzo łatwy i automatyczny, ta sama strona jest w tym samym czasie SPI lub strona oparta na SEO (lub gdy JavaScript jest wyłączony dla dostępności). W przypadku innych frameworków internetowych możesz zawsze stosować podejście podwójnej strony, jedna strona jest oparta na SPI, a druga strona dla SEO, na przykład Twitter stosuje tę technikę „podwójnej strony”.

Byłbym bardzo ostrożny, jeśli zastanawiasz się nad przyjęciem tej konwencji hashbangu.

Po hashbangu nie możesz wrócić. To prawdopodobnie najtrudniejszy problem. Wpis Bena podkreśla, że ​​kiedy pushState jest szerzej stosowane, możemy porzucić hashbangi i wrócić do tradycyjnych adresów URL. Faktem jest, że nie możesz. Wcześniej oświadczyłem, że adresy URL są wieczne, są indeksowane i archiwizowane i ogólnie przechowywane. Aby dodać do tego fajne adresy URL się nie zmieniają. Nie chcemy odłączać się od wszystkich cennych linków do naszych treści. Jeśli zaimplementowałeś hashbangowe adresy URL w dowolnym momencie, to chcesz je zmienić bez zrywania linków, jedynym sposobem na to jest uruchomienie JavaScript w dokumencie głównym swojej domeny. Na zawsze. To nie jest w żaden sposób tymczasowe, utkniesz z tym.

Naprawdę chcesz używać pushState zamiast hashbangów , ponieważ sprawianie , by twoje adresy URL były brzydkie i prawdopodobnie uszkodzone - na zawsze - jest kolosalnym i trwałym minusem hashbanga.

Aby dobrze sobie z tym wszystkim poradzić, Twitter - jeden z pionierów hashbangowego adresu URL i interfejsu pojedynczej strony - przyznał, że system hashbang był na dłuższą metę powolny i że faktycznie zaczęli cofać decyzję i wracać do linki oldschoolowe.

Artykuł na ten temat znajduje się tutaj.

Zawsze zakładałem, że !właśnie wskazałem, że następujący po nim fragment skrótu odpowiada adresowi URL, !zajmując miejsce katalogu głównego witryny lub domeny. Teoretycznie może to być wszystko, ale wygląda na to, że Google AJAX Crawling API lubi to w ten sposób.

Hash, oczywiście, wskazuje tylko, że nie następuje prawdziwe przeładowanie strony, więc tak, to dla celów AJAX. Edycja: Raganwald wykonuje cudowną robotę, wyjaśniając to bardziej szczegółowo.

Odpowiedzi powyżej dobrze opisują, dlaczego i jak są używane na Twitterze i Facebooku, brakowało mi wyjaśnienia, co #domyślnie…

W „normalnej” (nie aplikacji na jednej stronie) możesz wykonać zakotwiczenie hashdo dowolnego elementu, który ma identyfikator, umieszczając go w url po haszowaniu#

Przykład:

(Chrome) Kliknij F12lub Rihgt MouseiInspect element

następnie weź id="answer-10831233"i dodaj do adresu URL, jak poniżej

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

a otrzymasz link, który przeskakuje do tego elementu na stronie

Do czego służy shebang / hashbang (#!) Na Facebooku i nowe adresy URL na Twitterze?

Używając #w sposób opisany w powyższych odpowiedziach wprowadzasz konfliktowe zachowania ... chociaż nie przespałbym się nad tym ... odkąd Angular stał się czymś standardowym ...