it-swarm.com.de

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

Mir ist gerade aufgefallen, dass die langen, verschlungenen Facebook-URLs, die wir bisher verwendet haben, folgendermaßen aussehen:

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

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

Die neues Twitter URLs enthalten jetzt auch das #! Symbole. Eine Twitter-Profil-URL sieht beispielsweise jetzt so aus:

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

Hat #! spielen nun eine besondere Rolle in URLs, etwa für ein bestimmtes Ajax-Framework oder so etwas, da die neuen Facebook- und Twitter-Oberflächen nun weitgehend Ajaxified sind? Würde die Verwendung in meinen URLs meiner Webanwendung in irgendeiner Weise zugute kommen?

738
BoltClock

Diese Technik ist jetzt veraltet .

Mit diesem Befehl wird Google mitgeteilt, wie die Seite indiziert werden soll.

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

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

480
ceejayoz

Das Oktothorpe/Nummernzeichen/Hashmark hat eine besondere Bedeutung in einer URL, es identifiziert normalerweise den Namen eines Abschnitts eines Dokuments. Der genaue Begriff lautet, dass der auf den Hash folgende Text der Anker Teil 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, wie zum Beispiel:

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

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

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

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

Sie werden sehen, wie die Seite vom Server aktualisiert wird. 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 Schaltfläche Zurück, um festzustellen, ob diese URLs im Browserverlauf enthalten sind. Der Browser merkt, dass wir uns auf derselben Seite befinden, aber nur den Anker wechseln, sodass er nicht neu lädt. Dank dieses Verhaltens können wir eine einzelne Javascript-Anwendung haben, die für den Browser auf einer "Seite" erscheint, aber viele mit Lesezeichen versehene Abschnitte hat, die die Schaltfläche "Zurück" berücksichtigen. Die Anwendung muss den Anker ändern, wenn ein Benutzer verschiedene "Zustände" eingibt. Wenn ein Benutzer die Schaltfläche "Zurück" oder ein Lesezeichen oder einen Link verwendet, um die Anwendung mit einem Anker zu laden, muss die Anwendung den entsprechenden Zustand wiederherstellen.

Da haben Sie es also: Anker bieten Javascript-Programmierern einen Mechanismus, mit dem sie lesezeichenfähige, indexierbare und rücktastenfreundliche Anwendungen erstellen können. Diese Technik hat einen Namen: Es ist ein Single Page Interface .

p.s. Diese Technik hat 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 gibt es weitere Tricks Das Laden bestimmter Teile im Hintergrund kann unter der Kontrolle des Programmierers erfolgen.

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

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

215
raganwald

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

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

Der Charakter ! wird nur für Google-Zwecke hinzugefügt. Diese Notation ist ein "Google-Standard" für das intensive Crawlen von Websites auf AJAX (in den extremen Websites mit Single Page Interface). Wenn der Crawler von Google eine URL findet mit #! Es ist bekannt, dass eine alternative konventionelle URL existiert, die den gleichen Seiten- "Status" hat, in diesem Fall jedoch bei Ladezeit.

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

Das SPI Manifest und die Demos verwenden nicht das Google-Format ! in Hashes kann diese Notation leicht hinzugefügt werden und SPI crawlen könnte noch einfacher sein (UPDATE: now! -Notation wird verwendet und bleibt kompatibel mit anderen Suchmaschinen).

Schauen Sie sich das an Tutorial , 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 jedes Web Crawler.

Das schwierige Problem ist, einen beliebigen (oder ausgewählten) "AJAX-Seitenstatus" als einfaches HTML für SEO zu generieren. ItsNat ist sehr einfach und automatisch. Dieselbe Site ist zur selben Zeit SPI oder Seite basierend auf SEO (oder wenn JavaScript für Barrierefreiheit deaktiviert ist). Mit anderen Web-Frameworks können Sie immer den Double-Site-Ansatz verfolgen, wobei eine Site auf SPI) und eine andere Seite auf SEO basiert, z. B. Twitter verwendet diese "Double Site" -Technik.

111
jmarranz

Ich wäre sehr vorsichtig , wenn Sie darüber nachdenken, diese Hashbang-Konvention zu übernehmen.

Sobald Sie einen Haschbock haben, können Sie nicht mehr zurück. Dies ist wahrscheinlich das schwierigste Problem. In Bens Beitrag wurde der Punkt hervorgehoben, dass wir Hashbangs hinter uns lassen und zu traditionellen URLs zurückkehren können, wenn PushState weiter verbreitet ist. Tatsache ist, dass Sie das nicht können. Früher habe ich festgestellt, dass URLs für immer sind, sie werden indiziert und archiviert und im Allgemeinen aufbewahrt. Außerdem ändern sich coole URLs nicht. Wir möchten uns nicht von allen wertvollen Links zu unseren Inhalten trennen. Wenn Sie zu einem beliebigen Zeitpunkt Hashbang-URLs implementiert haben, können Sie diese ändern, ohne die Verknüpfungen zu unterbrechen, indem Sie im Stammdokument Ihrer Domain JavaScript ausführen. Für immer. Es ist in keiner Weise vorübergehend, Sie stecken fest.

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

86
Jeff Atwood

Um dies alles gut nachvollziehen zu können, gab Twitter - einer der Pioniere von Hashbang-URLs und Single-Page-Interfaces - zu, dass das Hashbang-System auf lange Sicht langsam war und dass sie tatsächlich begonnen haben, die Entscheidung umzukehren und zu zurückzukehren Old-School-Links.

Artikel dazu hier.

16
kingmaple

Ich habe immer das ! hat nur angegeben, dass das nachfolgende Hash-Fragment einer URL entspricht, mit ! an die Stelle des Site-Stammverzeichnisses oder der Domain treten. Theoretisch könnte es alles Mögliche sein, aber es scheint, als würde es der Google AJAX Crawling API so gefallen.

Der Hash zeigt natürlich nur an, dass kein wirkliches Neuladen der Seite stattfindet, also ja, es ist zu AJAX) Zwecken. Edit: Raganwald macht einen tollen Job, um dies genauer zu erklären.

9
Alan H.