Was ist der shebang / Hash-Bang (#!) In Facebook und Twitter neue URLs für?

StackOverflow https://stackoverflow.com/questions/3009380

Frage

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

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

Soweit ich mich erinnern kann, früher in diesem Jahr war es nur ein normale URL-Fragment ähnliche Zeichenfolge (beginnend mit #), ohne das Ausrufezeichen. Aber jetzt ist es ein shebang oder Hash-Bang (#!), die ich habe bisher nur in Shell-Skripten und Perl-Skripte zu sehen.

Die neue Twitter URLs verfügen jetzt auch die #! Symbole. Ein Twitter-Profil-URL zum Beispiel sieht nun wie folgt aus:

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

Does #! jetzt eine besondere Rolle in URLs spielen, wie für einen bestimmten Ajax-Framework oder etwas, da die neuen Facebook-und Twitter-Schnittstellen sind jetzt weitgehend Ajaxified? Würde mit diesem in meiner URLs profitieren meine Web-Anwendung in irgendeiner Weise?

War es hilfreich?

Lösung

Diese Technik ist jetzt veraltet .

Das verwendet sagen, Google, wie zum Indizieren der Seite.

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

Diese Technik hat sich vor allem durch die Fähigkeit, verdrängt die JavaScript-History-API zu verwenden, die neben HTML5 eingeführt wurde. Für eine URL wie www.example.com/ajax.html#!key=value, wird Google die URL www.example.com/ajax.html?_escaped_fragment_=key=value überprüfen nicht-AJAX-Version des Inhalts zu holen.

Andere Tipps

Das Rautenzeichen / Zahlenzeichen / Textanker eine besondere Bedeutung in einer URL hat, identifiziert er normalerweise den Namen eines Abschnitts eines Dokuments. Die genaue Bezeichnung ist, dass der Text nach dem Hash ist der Anker Teil einer URL. Wenn Sie Wikipedia verwenden, werden Sie sehen, dass die meisten Seiten ein Inhaltsverzeichnis und Sie können mit einem Anker innerhalb des Dokuments springen Abschnitte, 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, dass Facebook und andere Javascript-getriebene Anwendungen (wie mein eigenes Holz und Steine ??) verwenden Anker ist dass sie wollen Seiten ein Lesezeichen (wie von einem Kommentar zu dieser Antwort) machen oder unterstützen die zurück-Taste ohne Neuladen der gesamten Seite vom Server .

Um Unterstützung bookmarking und die Zurück-Taste, müssen Sie die URL ändern. Wenn Sie die Seite Abschnitt jedoch ändern (mit so etwas wie window.location = 'http://raganwald.com';) auf eine andere URL oder ohne einen Anker anzugeben, wird der Browser die gesamte Seite von der URL geladen werden. Versuchen Sie, diese in Firebug oder Safari Javascript-Konsole. Last http://minimal-github.gilesb.com/raganwald. Jetzt in der JavaScript-Konsole ein: 

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

Sie werden die Aktualisierung der Seite vom Server sehen. Nun geben Sie: 

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

Aha! Keine Aktualisierung der Seite! Typ: 

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

Noch keine aufzufrischen. Verwenden Sie die Zurück-Taste, um zu sehen, dass dieser URLs im Browser Geschichte. Der Browser merkt, dass wir auf der gleichen Seite, aber nur um den Anker zu ändern, so dass es nicht neu geladen wird. Durch dieses Verhalten können wir eine einzige JavaScript-Anwendung haben, die angezeigt wird an den Browser auf eine ‚Seite‘ zu sein, aber viele Lesezeichen erstellt Abschnitte zu haben, die die Zurück-Taste respektieren. Der Antrag muss den Anker ändern, wenn ein Benutzer verschiedene ‚Zustände‘ eingibt, und ebenso, wenn ein Benutzer die Zurück-Taste oder ein Lesezeichen oder einen Link verwendet die Anwendung mit einem Anker enthalten zu laden, muss die Anwendung den entsprechenden Zustand wiederherzustellen.

So haben Sie es: Anker bieten Javascript-Programmierer mit einem Mechanismus zur Herstellung von Lesezeichen erstellt, Wende und Back-Taste freundlichen Anwendungen. Diese Technik hat einen Namen:. Es ist eine Einzelne Seite Schnittstelle

P. S. Es gibt eine vierte Vorteil dieser Technik: Laden Seiteninhalt durch AJAX und dann kann es in der aktuellen DOM Injektion viel schneller sein als eine neue Seite geladen wird. Neben der Geschwindigkeit zu erhöhen, weitere Tricks wie der Laden bestimmte Abschnitte im Hintergrund unter dem Programmierer der Kontrolle durchgeführt werden.

p.p.s. In Anbetracht all das ist der ‚Knall‘ oder Ausrufezeichen ein weiterer Hinweis auf Web-Crawler von Google, dass die exakt gleiche Seite vom Server zu einer etwas anderen URL geladen werden. Siehe Ajax Krabbeln . Eine andere Technik ist es, jeden Link Punkt zu einem Server-URL zugänglich zu machen und dann unaufdringlich Javascript verwenden Sie es in ein SPI mit einem Anker zu ändern.

Hier ist der Schlüssel Link wieder: Die Single-Seiten-Interface-Manifest

Zu allererst: Ich bin der Autor des The Single Seite Schnittstelle Manifest zitiert von raganwald

Wie raganwald sehr gut erklärt hat, ist der wichtigste Aspekt des Single-Seiten-Interface (SPI) -Ansatz in Facebook und Twitter ist die Verwendung von Hash-# in URLs

verwendet

Das Zeichen ! ist nur für Google Zwecke hinzugefügt, ist diese Schreibweise ein Google „Standard“ für die Crawling Website intensiv auf AJAX (in extremen Einzelseite-Schnittstelle Web-Site). Wenn Google-Crawler eine URL mit #! findet es weiß, dass eine alternative herkömmliche URL die gleiche Seite „Staat“ existiert Bereitstellung aber in diesem Fall auf der Ladezeit.

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

Das SPI-Manifest und Demos nicht verwenden Google-Format von ! in Hashes, diese Notation leicht hinzugefügt und SPI Crawling könnte könnte noch einfacher (UPDATE: jetzt Schreibweise verwendet wird und bleibt kompatibel mit anderen Suchmaschinen).

Werfen Sie einen Blick auf diese Tutorial , ist ein Beispiel eines einfachen ItsNat SPI-Website, aber Sie einige Ideen für andere Frameworks auswählen können, ist dieses Beispiel SEO kompatibel für jede Web-Crawler.

Das harte Problem jeden erzeugen (oder ausgewählt) „AJAX Seite state“ als einfaches HTML für SEO, in ItsNat sehr einfach und automatisch ist, ist die gleiche Stelle in der gleichen Zeit SPI oder Seite basierte für SEO (oder wenn JavaScript ist für die Zugänglichkeit deaktiviert). Mit anderen Web-Frameworks können Sie immer die doppelte Website Ansatz folgen, eine Seite ist SPI basiert und eine andere Seite auf Basis für SEO, zum Beispiel nutzt Twitter dieses „Doppel Website“ -Technik.

Um eine gute Follow-up haben über all das, Twitter - einer der Pioniere der Hash-Bang-URL und Einzelseiten-Schnittstelle - zugegeben, dass die Hash-Bang-System auf lange Sicht langsam war, und dass sie tatsächlich begonnen, die Entscheidung Umkehren und die Rückkehr zu dem alten Schule Links.

Artikel über dieses ist hier.

Ich habe immer angenommen, die ! nur angedeutet, dass das Hash-Fragment, das auf eine URL entspricht nachgearbeitet, wobei ! die Stelle des Site-Stammes oder Domäne nehmen. Es könnte alles in der Theorie, aber es scheint, die Google AJAX API Krabbeln es auf diese Weise mag.

Der Hash, natürlich, zeigt nur, dass keine wirkliche Neuladen der Seite auftritt, also ja, es ist für AJAX Zwecke. Edit:. Raganwald hat eine schöne Aufgabe dies genauer zu erklären

oben Antworten beschreiben genau, warum und wie es verwendet auf Twitter und Facebook, was ich verpasst ist Erklärung, was # tut standardmäßig ...

Auf einer ‚normale‘ (nicht eine einzige Seite Anwendung) können Sie mit hash auf jedes Element tun Verankerung, die ID, indem die Elemente ID in URL nach Hash #

hat

Beispiel:

(auf Chrome) Klicken Sie auf F12 oder rihgt Maus und Inspect element

dann id="answer-10831233" nehmen und zu URL hinzufügen wie folgt

https://stackoverflow.com/questions/3009380/whats-the-shebang-hashbang-in-facebook-and-new-twitter-urls-for#answer-10831233

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

Was ist der shebang / Hash-Bang (#!) in Facebook und Twitter neuer URLs für?

Durch die Verwendung von # in einer Art und Weise in den Antworten oben beschrieben Sie sind die Einführung Verhalten in Konflikt ... obwohl ich nicht locker drüber schlafen ... da Angular es so etwas wie ein Standard geworden ....

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top