読み込め - アプリ ドメイン facebook エラー




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

私はちょうど私たちが今このように見える長い、畳み込まれたFacebookのURLが気づいた:

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

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

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

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

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


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

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コンソールでこれを試してください。 Load 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'や感嘆符は、GoogleのWebクローラには、まったく同じページを若干異なるURLでサーバーから読み込むことができるというヒントです。 Ajaxクロールを参照してください。 もう1つの方法は、各リンクがサーバーアクセス可能なURLを指し示すようにし、控えめなJavascriptを使用してアンカーでSPIに変更する方法です。

ここで再びキーリンクがあります: Single Page Interface Manifesto


この手法は廃止予定です

これは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バージョンのコンテンツを取得します。


まず第一に、私はraganwaldによって引用されたThe Single Page Interface Manifestoの著者です

raganwaldが非常にうまく説明したように、FaceBookとTwitterで使用されているSingle Page Interface(SPI)アプローチの最も重要な側面は、URLにhash #を使用することです

キャラクター! Googleの目的のためにのみ追加されています。この表記は、AJAXで集中的に使用されているウェブサイトをクロールするためのGoogleの「標準」です。 Googleのクローラが#! URLを見つけたら 同じページ「状態」を提供する代替の従来のURLが存在するが、この場合にはロード時に存在することがわかる。

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

SPI宣言とデモでは、Googleの形式は使用されていません! この表記法は簡単に追加することができ、SPIのクロールはさらに簡単になります(UPDATE:now!記法が使用され、他の検索エンジンと互換性があります)。

このtutorial見ると、簡単なItsNat SPIサイトの例ですが、他のフレームワークのアイディアを選ぶことができます。この例は、どのWebクローラーに対してもSEO互換です。

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


ハッスバンURLとシングルページインターフェースの先駆者の1人であるTwitterは、ハッシュバングシステムが長期的には遅く、実際に決定を逆戻りして戻ってきたことを認めている古い学校のリンク。

これについての記事はこちらです。


私はいつも! 次のハッシュフラグメントがURLに対応していることが示されました! サイトのルートまたはドメインの代わりになります。 理論的には何でも構いませんが、Google AJAX Crawling APIはこのように思っています。

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





hashbang