webdevqa.jp.net

FacebookのShebang / hashbang(#!)と新しいTwitterのURLは何ですか?

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

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

思い出すことができる限り、今年の初めには感嘆符のない、通常のURLフラグメントのような文字列(#で始まる)でした。しかし今やそれはShebangかhashbang(#!)で、以前はシェルスクリプトとPerlスクリプトでしか見たことがありません。

新しいTwitter のURLにも#!シンボルが追加されました。たとえば、TwitterのプロファイルURLは、次のようになりました。

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

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

735
BoltClock

このテクニックは 非推奨になりました

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

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

このテクニックは、HTML5と一緒に導入されたJavaScript History APIを使うことができることから、ほとんど取って代わられました。 www.example.com/ajax.html#!key=valueのようなURLの場合、GoogleはURL www.example.com/ajax.html?_escaped_fragment_=key=valueを調べて、AJAX以外のバージョンのコンテンツを取得します。

480
ceejayoz

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に挿入するほうが、新しいページをロードするよりもはるかに高速です。速度の向上に加えて、バックグラウンドで特定の部分をロードするなどのその他のトリックは、プログラマの制御下で実行できます。

p.p.s.これらすべてを考慮すると、 'bang'または感嘆符は、まったく同じページをわずかに異なるURLでサーバーからロードできることをGoogleのWebクローラーにさらに示唆するものです。 Ajax Crawling を参照してください。もう1つの方法は、各リンクがサーバーアクセス可能なURLを指すようにしてから、目立たないJavascriptを使用してアンカー付きのSPIに変更することです。

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

215
raganwald

まず第一に:私はraganwaldによって引用されたシングルページインターフェースマニフェストの作者です

Raganwaldが非常によく説明しているように、FaceBookとTwitterで使われているSPI(Single Page Interface)アプローチの最も重要な側面は、URLでハッシュ#を使うことです。

文字!は、Googleの目的のためだけに追加されています。この表記は、AJAXを頻繁に使用するWebサイトをクロールするためのGoogleの「標準」です(極端なシングルページインターフェイスWebサイト)。 Googleのクローラが#!のURLを見つけると、同じページの「状態」を提供する従来の代替URLが存在することを認識していますが、この場合はロード時に発生します。

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

SPIマニフェストおよびデモでは、ハッシュにGoogleの!の形式を使用していません。この表記は簡単に追加でき、SPIクロールはさらに簡単にできます(UPDATE:now!表記を使用し、他の検索との互換性を維持)エンジン)。

この チュートリアル を見てください。これは単純なItsNat SPIサイトの例ですが、他のフレームワーク用にいくつかのアイデアを選ぶことができます。この例SEOは、あらゆるWebクローラーと互換性があります。

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

111
jmarranz

あなたがこのハッシュバング規約を採用することを考えているなら、私は 非常に慎重に になるでしょう。

ハッシュバングしたら、戻ることはできません。これはおそらく最も難しい問題です。 Benの記事では、pushStateがより広く採用されればハッシュバングを取り残して従来のURLに戻ることができると主張しています。実は、そうではありません。 URLは永遠に続くと先に述べましたが、それらは索引付けされ、アーカイブされ、一般的に取り残されています。それに加えて、クールなURLは変わりません。私たちは私たちのコンテンツへのすべての貴重なリンクから自分自身を切断したくはありません。ハッシュバングURLを実装している場合は、リンクを壊さずにそれらを変更したい場合は、ドメインのルートドキュメントでJavaScriptを実行するしかありません。永遠に。一時的なものではありません。

hashbangs の代わりにpushStateを使用することをお勧めします。URLを醜く、場合によっては壊すことは、ハッシュバングにとっては巨大で永続的な欠点です。

85
Jeff Atwood

ハッシュバングルURLとシングルページインタフェースのパイオニアの1人であるTwitterは、これらすべてについての良いフォローアップをするために、ハッシュバングシステムは長期的には遅く、実際には決定を覆してに戻ってきたことを認めました。オールドスクールのリンク.

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

16
kingmaple

私はいつも!は単に続くコードがURLに対応することを示していると仮定し、!はサイトのルートまたはドメインの代わりになります。理論的には何でも構いませんが、Google AJAX Crawling APIはこのように気に入っているようです。

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

9
Alan H.