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

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?

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.

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

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.

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.

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.

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.

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

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