Facebookのシバン/ハッシュバング（＃！）と新しいTwitterのURLは何ですか？

私たちが慣れ親しんでいる、長く複雑なFacebookのURLが次のようになっていることに気づきました。

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

私が思い出せる限り、今年の初め#は感嘆符のない通常のURLフラグメントのような文字列（で始まる）でした。しかし、今ではシバンまたはハッシュバン（#!）になっています。これは、以前はシェルスクリプトとPerlスクリプトでしか見られなかったものです。

新しいTwitterの URLは今も備えています#!シンボルを。たとえば、TwitterプロフィールのURLは次のようになります。

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

ない#!新しいFacebookやTwitterのインターフェイスは現在、主にAjaxifiedされているので、今、特定のAjaxフレームワークや何かのためのように、URL内のいくつかの特別な役割を果たしていますか？
これをURLで使用すると、Webアプリケーションに何らかの利点がありますか？

この手法は現在推奨されていません。

これは、ページのインデックス作成方法をGoogle に指示するために使用されていました。

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

この手法は、HTML5とともに導入されたJavaScript History APIを使用する機能に取って代わられました。のようなURLの場合www.example.com/ajax.html#!key=value、GoogleはURL www.example.com/ajax.html?_escaped_fragment_=key=valueをチェックして、コンテンツの非AJAXバージョンをフェッチします。

octothorpe / number-sign / hashmarkはURLで特別な意味を持ち、通常はドキュメントのセクションの名前を識別します。正確な用語は、ハッシュに続くテキストがURLのアンカー部分であることです。ウィキペディアを使用すると、ほとんどのページに目次があり、次のようなアンカーを使用してドキュメント内のセクションにジャンプできます。

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

https://en.wikipedia.org/wiki/Alan_Turingページを識別しEarly_computers_and_the_Turing_test、アンカーです。Facebookや他のJavascript駆動アプリケーション（私のWood＆Stonesなど）がアンカーを使用する理由は、ページをブックマーク可能に（その回答に関するコメントで示唆されているように）したり、ページ全体をサーバー。

ブックマークと戻るボタンをサポートするには、URLを変更する必要があります。ただし、ページの部分（などwindow.location = 'http://raganwald.com';）を別のURLに変更したり、アンカーを指定しない場合、ブラウザはURLからページ全体をロードします。FirebugまたはSafariのJavaScriptコンソールでこれを試してください。をロードしhttp://minimal-github.gilesb.com/raganwaldます。次に、JavaScriptコンソールで次のように入力します。

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

サーバーからページが更新されます。今タイプ：

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

ああ！ページの更新はありません。タイプ：

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

まだ更新されていません。[戻る]ボタンを使用して、これらのURLがブラウザの履歴にあることを確認してください。ブラウザは同じページにいることを認識していますが、アンカーを変更しているだけなので、リロードされません。この動作のおかげで、ブラウザからは1つの「ページ」上にあるように見える単一のJavaScriptアプリケーションを作成できますが、「戻る」ボタンを尊重するブックマーク可能なセクションが多数あります。ユーザーが異なる「状態」を入力すると、アプリケーションはアンカーを変更する必要があります。同様に、ユーザーが戻るボタン、ブックマーク、またはリンクを使用してアンカーを含むアプリケーションをロードした場合、アプリケーションは適切な状態を復元する必要があります。

アンカーは、JavaScriptプログラマーに、ブックマーク可能、インデックス付け可能、戻るボタンに対応したアプリケーションを作成するためのメカニズムを提供します。この手法には名前があります。これは、単一ページインターフェイスです。

psこの手法には4番目の利点があります。AJAXを介してページコンテンツを読み込んでから現在のDOMに挿入する方が、新しいページを読み込むよりもはるかに高速です。速度の増加に加えて、バックグラウンドで特定の部分をロードするなどのトリックは、プログラマーの制御下で実行できます。

ppsこれらすべてを踏まえると、「bang」または感嘆符は、まったく同じページをサーバーからわずかに異なるURLでロードできるというGoogleのWebクローラーへのさらなるヒントです。Ajax Crawlingを参照してください。別の手法は、各リンクがサーバーからアクセス可能なURLを指すようにし、次に控えめなJavaScriptを使用して、それをアンカー付きのSPIに変更することです。

ここでも重要なリンクです：シングルページインターフェイスマニフェスト

まず第一に、私はraganwaldが引用したThe Single Page Interface Manifestoの作者です

raganwaldが非常によく説明したように、FaceBookとTwitterで使用されているシングルページインターフェイス（SPI）アプローチの最も重要な側面は、#URL でのハッシュの使用です。

この文字!はGoogleの目的でのみ追加されます。この表記は、Ajaxが集中しているWebサイト（極端なシングルページインターフェイスWebサイト）をクロールするためのGoogleの「標準」です。GoogleのクローラーがURLを検出#!すると、同じページの「状態」を提供する別の従来のURLが存在することを認識しますが、この場合は読み込み時です。

#!組み合わせにもかかわらず、SEOにとって非常に興味深いものであり、Googleでのみサポートされています（私の知る限り）。JavaScriptトリックを使用して、任意のWebクローラー（Yahoo、Bing ...）と互換性のあるSPI WebサイトSEOを構築できます。

SPIマニフェストとデモでは!、ハッシュ形式のGoogleの形式を使用していないため、この表記を簡単に追加でき、SPIクロールがさらに簡単になります（更新：表記が使用され、他の検索エンジンとの互換性が維持されます）。

このチュートリアルをご覧ください。これはシンプルなItsNat SPIサイトの例ですが、他のフレームワークについていくつかのアイデアを選ぶことができます。この例は、どのWebクローラーでもSEO互換です。

難しい問題は、任意の（または選択された）「AJAXページ状態」をSEOのプレーンHTMLとして生成することです。ItsNatは非常に簡単かつ自動で、同じサイトが同時にSPIまたはSEOベースのページにあります（またはJavaScriptが無効になっている場合）アクセシビリティのため）。他のWebフレームワークでは、ダブルサイトアプローチに従うことができます。1つのサイトはSPIベースで、別のページはSEOベースです。たとえば、Twitterはこの「ダブルサイト」手法を使用しています。

このハッシュバン規則の採用を検討している場合は、非常に注意が必要です。

一度ハッシュバングすると、戻ることはできません。これはおそらく最も厄介な問題です。ベンの投稿は、pushStateがより広く採用されれば、ハッシュバングを残して従来のURLに戻ることができるという点を提唱しました。まあ、実際には、それはできません。先ほど、URLは永久に存在するものであると述べましたが、URLはインデックスに登録されてアーカイブされ、通常は保持されます。さらに、クールなURLは変更されません。私たちは、コンテンツへのすべての貴重なリンクから切り離されたくありません。いつでもハッシュバングURLを実装している場合、リンクを壊さずにURLを変更したいのは、ドメインのルートドキュメントでJavaScriptを実行することだけです。永遠に。それは決して一時的なものではなく、行き詰まっています。

あなたは本当にあなたのhashbangsの代わりにpushStateを使いたいのです。なぜなら、あなたのURLを醜くそしておそらく壊す-永遠に-は、ハッシュバングの巨大で永久的な欠点です。

これらすべてについて適切なフォローアップを行うために、ハッシュバングURLとシングルページインターフェイスのパイオニアの1人であるTwitterは、ハッシュバングシステムが長期的には低速であり、実際に決定を覆し、古い学校のリンク。

これに関する記事はこちらです。

私は常に、サイトのルートまたはドメインに代わって、!続くハッシュフラグメントがURLに対応していることを示していたと想定し!ていました。理論的には何でもかまいませんが、Google AJAXクロールAPIはこの方法で気に入っているようです。

もちろん、ハッシュは実際のページのリロードが発生していないことを示しているだけなので、AJAXの目的のためです。編集：Raganwaldはこれをより詳細に説明する素敵な仕事をしています。

上記の回答は、TwitterやFacebookで使用される理由と使用方法をよく説明して#います。

「通常の」（単一ページのアプリケーションではない）hashでは、ハッシュの後に要素IDをURLに配置することで、IDを持つ任意の要素にアンカーできます。#

例：

（Chromeの場合）F12またはまたはRihgt MouseをクリックしますInspect element

次に、id="answer-10831233"次のようにURLに追加します

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

ページのその要素にジャンプするリンクが表示されます

Facebookのシバン/ハッシュバング（＃！）と新しいTwitterのURLは何ですか？

#上記の回答で説明されている方法で使用すると、競合する動作が導入されます...私はその上で睡眠を失うことはありませんが... Angularはやや標準になったので...