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

743

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?

BoltClock
źródło
130
Hmm Musiałem sprawdzić, co shebangbyło ... en.wikipedia.org/wiki/Shebang_%28Unix%29
JYelton
32
FWIW, to nie tylko skrypty powłoki i perla, ale każdy skrypt działa w systemie uniksowym. #! linia mówi powłoce, czym jest interpreter tego skryptu ... oczywiście, mój komentarz nie ma nic wspólnego z facebookiem lub twitterem
bluesmoon
3
Dzięki, Hacker News! (pozostawiając jako komentarz, więc nie mam pytania, nie widzę potrzeby)
BoltClock
15
Hashbang jest uwielbiony ze wszystkich niewłaściwych powodów, łamie najlepsze praktyki i niszczy szansę na stopniowe ulepszanie i pełną gracji degradację. Skorzystaj z innych dostępnych rozwiązań.
balupton,
2
Pamiętaj, że w październiku 2015 r. Google wycofało hashbang wprowadzony w 2009 roku ! W przypadku nowych aplikacji nie powinieneś już tego robić dla SEO. W tej chwili na górze stron ze specyfikacjami Google jest tylko subtelna uwaga: „To zalecenie jest oficjalnie nieaktualne od października 2015 r.”.
Bart

Odpowiedzi:

483

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.

ceejayoz
źródło
16
Czy jesteś pewien, że to wszystko? Często stwierdzam, że ładowanie strony zawiesza się na shebang URL na Facebooku (nawet po wielu przeładowaniach), ale jeśli ręcznie usuniesz # !, to działa. Nie wspominając o tym, że często otrzymujesz „1,5 URL-a” (tzn. Stary URL pozostaje i po prostu dodano do niego nową część (tj. Photo.php? Id = ... dwa razy, ale z różnymi identyfikatorami). Nie wspominając o tym, że „ #! ”jest również dodawany do adresów URL na Facebooku, które prawdopodobnie nie są (i nie powinny) być indeksowane. W każdym razie shebang jest bardzo denerwujący, ponieważ wydaje się, że jest to przyczyną tak wielu błędów stron na moim powolnym linia domowa
Pedery
11
To, że Facebook ma błędy, nie czyni tych błędów winą dwóch znaków w adresie URL. Jeśli witryna jest poprawnie zakodowana, aby ją zrozumieć i wygenerować, przeszukiwalne adresy URL AJAX są bardzo przydatne. Wiele innych rzeczy na Facebooku również nie działa.
ceejayoz
15
@Pedery: Widziałem tylko ten problem z Facebookiem. Zgadzam się, cały czas podjeżdża mnie do ściany (innej niż Facebook).
BoltClock
5
Jeśli chodzi o wyszukiwarki, posiadanie indeksowalnego adresu URL AJAX nie powoduje, że strona jest indeksowana, podobnie jak indeksowalny URL inny niż AJAX. Facebook używa tego formatu adresu URL nie tylko dla korzyści Google - sprawia też, że strony, do których można uzyskać dostęp za pośrednictwem AJAX na Facebooku, można zaksięgować, gdy inaczej by nie były.
ceejayoz
13
Aby zapoznać się z kilkoma interesującymi zastrzeżeniami, przeczytaj również ten artykuł: isolani.co.uk/blog/javascript/BreakingTheWebWithHashBangs
Michael Stum
215

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

Raganwald
źródło
14
„Jednak aplikacja bez tej optymalizacji jest nadal dostępna do indeksowania, jeśli robot indeksujący chce ją zindeksować”. Nie całkiem. Hash nie zostanie wysłany na serwer.
Chris Broadfoot
7
tylko dla informacji: self.document.location.hashpodaje wartość tego skrótu
Kevin
12
Hash nie zostanie wysłany na serwer. Dobry chwyt!
raganwald
36
Cała odpowiedź oprócz pojedynczego akapitu „pps” jest zbędna.
Wyścigi lekkości na orbicie
21
@imaginonic: Jestem późno, ale jak doskonale spreparowane, jak to jest, 90% z nich nie dotyka w #!aspekcie moje pytanie w ogóle . Dlatego powiedział, że jest zbędny. Liczba głosów tutaj jest prawdopodobnie spowodowana dużym ruchem, kiedy moje pytanie dotarło do Hacker News w połączeniu z samą długością tej odpowiedzi.
BoltClock
111

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”.

jmarranz
źródło
3
Co z zasadą stopniowego ulepszania? Witryna nie powinna ulec awarii z powodu wyłączenia JavaScript. I zaufaj mi, javascript jest wyłączany nie tylko w nieaktualnych przeglądarkach, ale także przez wielu świadomych bezpieczeństwa użytkowników, którzy nie lubią wykonywać losowego JS.
Roman Royter
88

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.

Jeff Atwood
źródło
Myślę, że twoja krytyka hashbangów jest słuszna, ale użycie po prostu pushState jako zamiennika oznacza, że ​​stracilibyśmy możliwość ładowania treści w ramach jednej strony aplikacji na podstawie adresu URL. Dlatego nie można udostępniać adresów URL.
Łukasz
Miałem podobny problem w mojej pracy - zabraliśmy się za Page.js (który używa pushState) do nawigacji jednostronicowej, gdzie wcześniej używaliśmy Hashera i Crossroads (bazujące na haszowaniu). W rezultacie musieliśmy ratować ścieżki takie jak /blah#foo/feep/baz?stuff=nonsense. Nowy ekwiwalent ścieżki to /blah/foo/feep/baz?stuff=nonsense(uwaga # zastąpiona przez /). Zrobiłem to po prostu przez ustawienie trasy w mojej konfiguracji, która przechwytywała /blahi sprawdzała, czy ma ona, a jeśli tak, dołączającą zawartość skrótu po ukośniku. Uratowano
Gert Sønderby,
16

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.

kingmaple
źródło
9

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.

Alan H.
źródło
-2

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

wprowadź opis zdjęcia tutaj

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 ...

Matas Vaitkevicius
źródło
2
Odpowiedź raganwalda zawiera wyjaśnienie, o którym mówiłeś, że tęskniłeś. Mimo to nie widzę korzyści z samouczka na temat tego, jak działa # - pytanie zakłada, że ​​czytelnik jest już zaznajomiony z fragmentami adresów URL, a ta funkcjonalność i tak nie jest tutaj tak naprawdę istotna, z wyjątkiem twojej uwagi na temat konfliktu zachowania .
BoltClock
@BoltClock Cześć BoltClock, ale bez wyjaśnienia, co jest domyślnym zachowaniem, mówiąc, że „będzie konflikt”, nie daje czytelnikowi żadnego pojęcia, o co toczy się gra, jaka funkcjonalność jest potencjalnie tracona ... Po prostu lubię dawać ładne odpowiedzi ze zdjęciami, jeśli Widzę, że brakuje czegoś, co jest tak kompletne, jak to tylko możliwe ...
Matas Vaitkevicius