Wofür ist der Shebang / Hashbang (#!) In Facebook und neue Twitter-URLs?

743

Ich habe gerade bemerkt, dass die langen, verschlungenen Facebook-URLs, die wir jetzt gewohnt sind, so aussehen:

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

Soweit ich mich erinnern kann, war es Anfang dieses Jahres nur eine normale URL-fragmentähnliche Zeichenfolge (beginnend mit #) ohne Ausrufezeichen. Aber jetzt ist es ein Shebang oder Hashbang ( #!), den ich bisher nur in Shell-Skripten und Perl-Skripten gesehen habe.

Die neuen Twitter- URLs enthalten jetzt auch die #!Symbole. Eine Twitter-Profil-URL sieht jetzt beispielsweise folgendermaßen aus:

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

Spielt #!jetzt eine besondere Rolle in URLs, wie für ein bestimmtes Ajax-Framework oder so, da die neuen Facebook- und Twitter-Schnittstellen jetzt weitgehend Ajaxified sind?
Würde die Verwendung in meinen URLs meiner Webanwendung in irgendeiner Weise zugute kommen?

BoltClock
quelle
130
Hmm. Musste nachschlagen, was shebangwar ... en.wikipedia.org/wiki/Shebang_%28Unix%29
JYelton
32
FWIW, es sind nicht nur Shell- und Perl-Skripte, sondern alle Skripte, die auf einem Unix-ähnlichen System ausgeführt werden. Das #! Zeile sagt der Shell, was der Interpreter für dieses Skript ist ... natürlich hat mein Kommentar nichts mit Facebook oder Twitter zu tun
Bluesmoon
3
Danke, Hacker News! (als Kommentar hinterlassen, damit ich meine Frage nicht
stoße
15
Der Hashbang wird aus den falschen Gründen verherrlicht, er bricht Best Practices und zerstört die Chance auf fortschreitende Verbesserung und anmutige Verschlechterung. Bitte verwenden Sie die anderen Lösungen da draußen.
Balupton
2
Beachten Sie, dass pro Oktober 2015 Google die Hash - Bang veraltet sie eingeführt im Jahr 2009 ! Für neue Anwendungen sollten Sie dies also nicht mehr für SEO tun müssen. Derzeit gibt es oben auf den Spezifikationsseiten von Google nur eine subtile weiße Bemerkung: "Diese Empfehlung ist ab Oktober 2015 offiziell veraltet."
Bart

Antworten:

483

Diese Technik ist jetzt veraltet .

Diese verwendet , um Google zu sagen , wie zum Indizieren der Seite.

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

Diese Technik wurde größtenteils durch die Möglichkeit ersetzt, die neben HTML5 eingeführte JavaScript-Verlaufs-API zu verwenden. Bei einer URL wie www.example.com/ajax.html#!key=valueüberprüft Google die URL www.example.com/ajax.html?_escaped_fragment_=key=value, um eine Nicht-AJAX-Version des Inhalts abzurufen.

ceejayoz
quelle
16
Sind Sie sicher, dass das alles ist? Ich finde oft, dass das Laden der Seite an einer Shebang-URL auf Facebook hängt (auch nach vielen Neuladungen), aber wenn Sie das #! Manuell entfernen, funktioniert es. Ganz zu schweigen davon, dass Sie häufig "1,5 URLs" erhalten (dh die alte URL bleibt erhalten und nur der neue Teil hinzugefügt wurde (dh photo.php? Id = ... zweimal, aber mit unterschiedlichen IDs). Ganz zu schweigen davon " #! "wird auch zu Facebook-Mail-URLs hinzugefügt, die wahrscheinlich nicht indizierbar sind (und auch nicht indizierbar sein sollten). Auf jeden Fall finde ich den Shebang äußerst ärgerlich, da er der Grund für so viele Seitenfehler auf meiner langsamen Seite zu sein scheint Home Line.
Pedery
11
Dass Facebook Fehler hat, macht diese Fehler nicht zur Schuld von zwei Zeichen in der URL. Wenn die Site richtig codiert ist, um sie zu verstehen und zu generieren, sind crawlbare AJAX-URLs sehr praktisch. Viele andere Dinge auf Facebook sind ebenfalls fehlerhaft.
Ceejayoz
15
@Pedery: Ich habe dieses Problem bisher nur bei Facebook gesehen. Ich bin damit einverstanden, es treibt mich die ganze Zeit die (Nicht-Facebook-) Wand hoch.
BoltClock
5
Bei Suchmaschinen wird die Seite durch eine indizierbare AJAX-URL nicht mehr indiziert als durch eine indizierbare Nicht- AJAX-URL. Facebook nutzt dieses URL-Format nicht nur für Google, sondern macht auch Seiten, auf die über AJAX auf Facebook zugegriffen wird, mit Lesezeichen versehen, wenn dies sonst nicht der Fall wäre.
Ceejayoz
13
Für einige interessante Vorbehalte lesen Sie auch diesen Artikel: isolani.co.uk/blog/javascript/BreakingTheWebWithHashBangs
Michael Stum
215

Das Octothorpe / Nummernzeichen / Hashmark hat in einer URL eine besondere Bedeutung. Es identifiziert normalerweise den Namen eines Abschnitts eines Dokuments. Der genaue Begriff ist, dass der Text nach dem Hash der Ankerteil einer URL ist. Wenn Sie Wikipedia verwenden, werden Sie feststellen, dass die meisten Seiten ein Inhaltsverzeichnis haben, und Sie können mit einem Anker zu Abschnitten innerhalb des Dokuments springen, z.

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

https://en.wikipedia.org/wiki/Alan_Turingidentifiziert die Seite und Early_computers_and_the_Turing_testist der Anker. Der Grund, warum Facebook und andere Javascript-gesteuerte Anwendungen (wie meine eigenen Wood & Stones ) Anker verwenden, besteht darin, dass sie Seiten mit Lesezeichen versehen möchten (wie durch einen Kommentar zu dieser Antwort vorgeschlagen) oder den Zurück-Button unterstützen möchten, ohne die gesamte Seite von neu zu laden Server .

Um Lesezeichen und die Schaltfläche "Zurück" zu unterstützen, müssen Sie die URL ändern. Wenn Sie jedoch den Seitenteil (mit so etwas wie window.location = 'http://raganwald.com';) in eine andere URL ändern oder keinen Anker angeben, lädt der Browser die gesamte Seite von der URL. Versuchen Sie dies in der Javascript-Konsole von Firebug oder Safari. Laden http://minimal-github.gilesb.com/raganwald. Geben Sie nun in der Javascript-Konsole Folgendes ein:

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

Sie sehen die Seitenaktualisierung vom Server. Geben Sie nun Folgendes ein:

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

Aha! Keine Seitenaktualisierung! Art:

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

Immer noch keine Aktualisierung. Verwenden Sie die Zurück-Schaltfläche, um festzustellen, ob sich diese URLs im Browserverlauf befinden. Der Browser bemerkt, dass wir uns auf derselben Seite befinden, aber nur den Anker ändern, damit er nicht neu geladen wird. Dank dieses Verhaltens können wir eine einzelne Javascript-Anwendung haben, die dem Browser als auf einer 'Seite' angezeigt wird, aber viele mit Lesezeichen versehene Abschnitte enthält, die die Schaltfläche "Zurück" berücksichtigen. Die Anwendung muss den Anker ändern, wenn ein Benutzer verschiedene "Status" eingibt. Wenn ein Benutzer die Schaltfläche "Zurück" oder ein Lesezeichen oder einen Link verwendet, um die Anwendung mit einem enthaltenen Anker zu laden, muss die Anwendung den entsprechenden Status wiederherstellen.

Da haben Sie es also: Anchors bieten Javascript-Programmierern einen Mechanismus, mit dem sie Lesezeichen-, Index- und Back-Button-freundliche Anwendungen erstellen können. Diese Technik hat einen Namen: Es handelt sich um eine Einzelseitenschnittstelle .

ps Diese Technik bietet einen vierten Vorteil: Das Laden von Seiteninhalten über AJAX und das anschließende Einfügen in das aktuelle DOM kann viel schneller sein als das Laden einer neuen Seite. Zusätzlich zur Geschwindigkeitssteigerung können weitere Tricks wie das Laden bestimmter Teile im Hintergrund unter der Kontrolle des Programmierers ausgeführt werden.

pps Angesichts all dessen ist das Knall- oder Ausrufezeichen ein weiterer Hinweis für den Webcrawler von Google, dass genau dieselbe Seite unter einer etwas anderen URL vom Server geladen werden kann. Siehe Ajax Crawling . Eine andere Technik besteht darin, jeden Link auf eine vom Server zugängliche URL zu verweisen und ihn dann mit unauffälligem Javascript in eine SPI mit einem Anker zu ändern.

Hier ist noch einmal der wichtigste Link: Das Single Page Interface Manifesto

Raganwald
quelle
14
"Eine Anwendung ohne diese Optimierung kann jedoch weiterhin gecrawlt werden, wenn der Webcrawler sie indizieren möchte." Nicht wirklich. Der Hash wird nicht an den Server gesendet.
Chris Broadfoot
7
Nur zur Information: self.document.location.hashliefert den Wert dieses Hashs
Kevin
12
Der Hash wird nicht an den Server gesendet. Guter Fang!
Raganwald
36
Diese gesamte Antwort, abgesehen von dem einzigen Absatz "pps", ist überflüssig.
Leichtigkeitsrennen im Orbit
21
@imaginonic: Ich bin spät dran, aber so perfekt verarbeitet es auch ist, 90% davon berühren den #!Aspekt meiner Frage überhaupt nicht . Deshalb sagte er, es sei überflüssig. Die Anzahl der Upvotes hier ist wahrscheinlich auf den hohen Traffic zurückzuführen, als meine Frage zu Hacker News kam, zusammen mit der bloßen Länge dieser Antwort.
BoltClock
111

Zuallererst: Ich bin der Autor des von raganwald zitierten Manifests The Single Page Interface

Wie Raganwald sehr gut erklärt hat, ist der wichtigste Aspekt des in FaceBook und Twitter verwendeten SPI-Ansatzes (Single Page Interface) die Verwendung von Hash #in URLs

Das Zeichen !wird nur für Google-Zwecke hinzugefügt. Diese Notation ist ein Google-Standard für das Crawlen von Websites, die AJAX-intensiv sind (auf den extremen Websites mit nur einer Seitenoberfläche). Wenn der Crawler von Google eine URL findet #!, weiß er, dass eine alternative herkömmliche URL vorhanden ist, die denselben "Status" der Seite liefert, in diesem Fall jedoch die Ladezeit.

Trotz #!Kombination ist für SEO sehr interessant, wird nur von Google unterstützt (soweit ich weiß), mit einigen JavaScript-Tricks können Sie SPI-Websites SEO-kompatibel für jeden Webcrawler (Yahoo, Bing ...) erstellen.

Das SPI-Manifest und die Demos verwenden nicht das Google-Format für !In-Hashes. Diese Notation kann leicht hinzugefügt werden und das SPI-Crawlen kann noch einfacher sein (UPDATE: Jetzt wird die Notation verwendet und bleibt mit anderen Suchmaschinen kompatibel).

Schauen Sie sich dieses Tutorial an , es ist ein Beispiel für eine einfache ItsNat SPI-Site, aber Sie können einige Ideen für andere Frameworks auswählen. Dieses Beispiel ist SEO-kompatibel für jeden Webcrawler.

Das schwierige Problem besteht darin, einen beliebigen (oder ausgewählten) "AJAX-Seitenzustand" als einfaches HTML für SEO zu generieren. In ItsNat ist dies sehr einfach und automatisch. Dieselbe Site ist gleichzeitig SPI oder eine Seite, die für SEO basiert (oder wenn JavaScript deaktiviert ist) für die Zugänglichkeit). Mit anderen Web-Frameworks können Sie immer dem Double-Site-Ansatz folgen. Eine Site basiert auf SPI und eine andere Seite auf SEO. Beispielsweise verwendet Twitter diese "Double-Site" -Technik.

jmarranz
quelle
3
Was ist mit dem Prinzip der progressiven Verbesserung? Die Website sollte nicht aufgrund von deaktiviertem JavaScript abstürzen. Und glauben Sie mir, Javascript ist nicht nur in veralteten Browsern deaktiviert, sondern auch von vielen sicherheitsbewussten Benutzern, die keine zufällige JS ausführen möchten.
Roman Royter
88

Ich wäre sehr vorsichtig, wenn Sie erwägen würden, diese Hashbang-Konvention zu übernehmen.

Sobald Sie Hashbang haben, können Sie nicht mehr zurück. Dies ist wahrscheinlich das schwierigste Problem. In Bens Beitrag wurde darauf hingewiesen, dass wir, wenn pushState weiter verbreitet ist, Hashbangs hinter uns lassen und zu herkömmlichen URLs zurückkehren können. Tatsache ist, dass Sie nicht können. Früher habe ich gesagt, dass URLs für immer sind, sie werden indiziert und archiviert und im Allgemeinen beibehalten. Außerdem werden coole URLs nicht geändert. Wir möchten uns nicht von allen wertvollen Links zu unseren Inhalten trennen. Wenn Sie zu irgendeinem Zeitpunkt Hashbang-URLs implementiert haben, möchten Sie diese ändern, ohne Links zu unterbrechen. Sie können dies nur tun, indem Sie JavaScript im Stammdokument Ihrer Domain ausführen. Für immer. Es ist in keiner Weise vorübergehend, Sie bleiben dabei.

Sie möchten wirklich pushState anstelle von Hashbangs verwenden , da es ein kolossaler und dauerhafter Nachteil von Hashbangs ist, Ihre URLs hässlich und möglicherweise für immer kaputt zu machen.

Jeff Atwood
quelle
Ich denke, Ihre Kritik an Hashbangs ist berechtigt, aber wenn Sie nur pushState als Ersatz verwenden, verlieren wir die Möglichkeit, Inhalte innerhalb einer einzelnen Seiten-App basierend auf der URL zu laden. Dann können URLs nicht freigegeben werden.
Luke
Ich hatte ein ähnliches Problem in meiner Arbeit - wir haben Page.js (das pushState verwendet) für die Navigation auf einer Seite verwendet, wo wir zuvor Hasher und Crossroads (Hash-bashed) verwendet haben. Infolgedessen mussten wir Pfade wie retten /blah#foo/feep/baz?stuff=nonsense. Das neue Pfadäquivalent wäre /blah/foo/feep/baz?stuff=nonsense(Anmerkung # ersetzt durch /). Ich habe das einfach getan, indem ich eine Route in meinem Setup hatte, die abfing /blahund überprüfte, ob sie eine hat, wenn ja, den Inhalt dieses Hash nach einem Schrägstrich anhängt. Gerettet.
Gert Sønderby
16

Um ein gutes Follow-up zu haben, gab Twitter - einer der Pioniere der Hashbang-URLs und der Single-Page-Oberfläche - zu, dass das Hashbang-System auf lange Sicht langsam war und dass sie tatsächlich damit begonnen haben, die Entscheidung umzukehren und zu zurückkehren Old-School-Links.

Artikel darüber ist hier.

Kingmaple
quelle
9

Ich habe immer angenommen, dass das !gerade angegebene Hash-Fragment einer URL entspricht !und den Platz des Site-Stamms oder der Domain einnimmt. Theoretisch könnte es alles sein, aber es scheint, dass die Google AJAX Crawling API es so mag.

Der Hash zeigt natürlich nur an, dass kein echtes Neuladen der Seite stattfindet, also ja, es ist für AJAX-Zwecke. Edit: Raganwald macht einen schönen Job und erklärt dies genauer.

Alan H.
quelle
-2

Die obigen Antworten beschreiben gut, warum und wie es auf Twitter und Facebook verwendet wird. Was ich verpasst habe, ist die Erklärung, was #standardmäßig funktioniert ...

In einer "normalen" Anwendung (keine einzelne Seitenanwendung) können Sie mit hashjedem Element mit ID verankern , indem Sie diese Element-ID nach dem Hash in die URL einfügen#

Beispiel:

(auf Chrome) Klicken Sie auf F12oder Rihgt MouseundInspect element

Geben Sie hier die Bildbeschreibung ein

dann nimm id="answer-10831233"und füge der folgenden URL hinzu

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

und Sie erhalten einen Link, der zu diesem Element auf der Seite springt

Wofür ist der Shebang / Hashbang (#!) In Facebook und neue Twitter-URLs?

Wenn Sie #auf eine Weise verwenden, die in den obigen Antworten beschrieben ist, führen Sie widersprüchliches Verhalten ein ... obwohl ich nicht den Schlaf verlieren würde ... seit Angular wurde es zu einem Standard ...

Matas Vaitkevicius
quelle
2
Raganwalds Antwort enthält die Erklärung, die Sie verpasst haben. Trotzdem sehe ich nicht, wie die Frage von einem Tutorial zur Funktionsweise von # profitiert. Bei der Frage wird davon ausgegangen, dass der Leser bereits mit URL-Fragmenten vertraut ist und dass die Funktionalität hier ohnehin nicht wirklich relevant ist, mit Ausnahme Ihrer Bemerkung zu widersprüchlichem Verhalten .
BoltClock
@BoltClock Hallo BoltClock, aber ohne zu erklären, was das Standardverhalten ist, das besagt, dass "es zu Konflikten kommt", gibt dem Leser keine Vorstellung davon, was auf dem Spiel steht, welche Art von Funktionalität möglicherweise verloren geht ... Ich möchte nur nette Antworten mit Bildern geben, wenn Ich sehe, dass etwas fehlt, das so vollständig ist, wie ich es machen kann ...
Matas Vaitkevicius