問題タブ [hashbang]

ホームページからWebサイト上の他のURIをライトボックス（AJAX）に開くWebサイトを構築しています。状態の変化を管理するためのフォールバックとして、HTML5プッシュ状態とハッシュバングを使用したいと思います。

今、私はURLをクロール可能にし、Facebookで共有可能/好感を持たせたいと思っています。

ユーザーブラウザがHTML5プッシュ状態をサポートしている場合、問題ありません。URLを共有でき（例http://myserver/example:)、Facebookは静的コンテンツで適切なOGメタを見つけます。

ただし、ユーザーがHTML4ブラウザーを使用している場合は、のようなURLになりますhttp://myserver/#!/example。とにかく彼にFacebookで共有してもらいたい...

これで、Facebookは_escaped_fragment_置換メソッドをサポートしているように見えます。そのため、リクエストをからhttp://myserver/?_escaped_fragment_=/example にリダイレクトするだけhttp://myserver/example で、誰もが満足するはずです…</ p>

だから私は私のhtaccessに書き換え条件を追加しました：

私の問題は、Facebookで動作させることができないことです。Facebookのリンターでは、ハッシュバンの後のURLの一部が常にパーセントエスケープ http://myserver/%2Fexampleされ、404に到達するようなURLになります:-(

FacebookをだましてURLのこの部分をエスケープしないようにする方法を知っている人はいますか？apache mod_rewrite側で何かを行うことはできますか？

私は他の有効なajaxクロール可能/好感の持てるURL戦略にもオープンです;）

私のウェブサイトは次のように設定されています。ページが読み込まれると、テンプレート内の jQuery アニメーションが再生され、完了すると、ページのコンテンツを取得するための Ajax 呼び出しがさらに行われます。ここで、 http://com-address/#!page のようなハッシュバンを展開したいと考えています。また、ページの読み込み時にもアニメーションを保持する必要があります。しかし、このセットアップの問題は次のとおりだと思います。Web クローラーがページにアクセスすると、アニメーションが完了するのを待たずに Ajax 呼び出しを行います。読み込まれたコンテンツを含むページの状態が必要です (私の場合、アニメーションが完了した後に取得されます)。

上記のシナリオを考えると、どちらの方法が優れているか:

1. フロー全体を変更し、ページ コンテンツをプリエンプティブに読み込み、アニメーションが再生されるまで非表示にします。

2. URL に hash-bang または _escaped_fragment が見つかった場合のみ:

   を。手順 1 に従います。

   b. アニメーションなしのコンテンツでページをロードします。

3. Webクローラーに関する私の仮定は正しくなく、現在の流れをそのままにしておきます。

ヘッズアップのアドバイスはありますか？

編集

@kdzwinel、テキストブラウザに関するヒントをありがとう！

考え直して、オプション 2(a) を使用します。これは、クローラーがフラグメント化された URL を使用してリソースにアクセスしたときに、ページ上の完全な結果コンテンツを取得する必要があるためです。また、ユーザーがフラグメント化された URL に直接移動した場合、アニメーションのユーザー エクスペリエンスも損なわれません (ページの読み込みとアニメーションの開始の間に動的コンテンツ フラグメントのコンテンツを削除することにより)。

また、他のすべてのシナリオでは、古いフロー (アニメーション化してから Ajax 経由で取得) を継続します。これは、ユーザーが既に Web サイトにアクセスしており、フラグメント化された URL を持つアンカーを使用してスムーズに/シームレスにナビゲートしようとしているため、ページを更新したくないためです。 （クリックイベントをバインドしてアニメーションを開始します）。

私はウェブデザインのコースを取っています。私と他の多くの学生は、私たちの仕事を ajax 化することに本当に興味を持っています。私たちの先生はデザインと HTML だけに興味があるので、手伝うことはできません。

正しい用語を使用したいと思います。そうでない場合は、訂正してください。ajax 化とは、ナビゲート時に Web ページの特定の部分のみを更新することを意味します。

たとえば、3 つのサブページで構成される Web ページがあるとします。

1: index.html

2:プロジェクト.html

3: contact.html

リンクを使用する場合:

• Content-div のみをリロードする必要があります。

• メニューは、どのメニューポイントがアクティブであるかを更新する必要があります (ここでは太字のタグで示されています)。それが複雑すぎる場合は、メニューのリロードが機能する可能性があります。

• フッターはまったく再読み込みしないでください。

• タイトルを更新する必要があります。

• URL を更新する必要があります。

• URLがきれいであることを本当に望んでいます。つまり、 /#projects.htmlまたは/#/projects.htmlではなく、単純な/projects.htmlまたは/projects です。

• ブックマークと戻るボタンの機能は非常に重要です。

これはまったく可能ですか？ここで私を助けてくれた人に、私は永遠にめちゃくちゃ感謝しています！:-D jQuery Address および History プラグイン、 History.js、およびその「要点」を試しました (そしてハッキングしました) 。それを機能させることができませんでした。私はスタックオーバーフローとグーグルをトロールしましたが、これらのことを説明したり、簡単な解決策を持っている人を見つけることができないようです.

最新の Web ブラウザを対象としたソリューションで問題ありません。IE 関係者と JavaScript を使用しない関係者が単純な html バージョンを入手できれば、それは素晴らしいことですが、絶対に必要というわけではありません。

助けてください - どんな助けでも非常に感謝しています! ありがとう！:-)

私はbackbone.jsを初めて使用し、javascriptを構造化するというアイデアが好きです。しかし、私はそれがツイッターが根絶しようとしているシバンに依存していることを読んだ。

だから私の質問は、これが原因でbackbone.jsを使用すべきではないかということです。

私は、この主題に関する Google のドキュメントと数え切れないほどのブログ投稿に目を通しましたが、日付とソースによっては、矛盾する情報がいくつかあるようです。この貧しい農民にあなたの知恵を注いでください。そうすれば、すべてがうまくいくでしょう。

視聴者の大部分がインターネット接続が不十分なアフリカ諸国から来ており、クライアントが適切なインフラストラクチャを購入する余裕がない場合、無料でウェブサイトを構築しています。そのため、すべてを静的な html ファイルとして提供することにしました。JavaScript が使用可能な場合は、ユーザーがナビゲーション リンクをクリックした場合に、ページ コンテンツを DOM に直接ロードして、ページ全体のロードによるオーバーヘッドを防ぎます。

クライアント側のルートは次のようになります。

//domain.tld/#!/page

私の最初の質問は; Googlebot はそれを次のように翻訳しますか:

//domain.tld/_escaped_fragment_/pageまたは//domain.tld/?_escaped_fragment_=/page？

私は php で単純なサーバー側ルーターを作成しました。これは、googlebot 用に要求されたページを構築します。私の計画は、にリダイレクト//d.tld/_escaped_fragment_/pageすることでした//d.tld/router/page。

しかし、Google の「Fetch as Googlebot」を使用すると (初めて追加する可能性があります)、ページ上のリンクを認識しないようです。「成功」を返すだけで、メイン ページの html が表示されます (更新: Fetch as Googlebot を//d.tld/#!/pageポイントすると、_escaped_fragment_ マジックを実行せずにメイン ページのコンテンツが返されます)。これは私の2番目の質問に私を導きます:

ハッシュバン リンクを使用する場合、Googlebot がクロールするために特定の構文に従う必要がありますか?

私のリンクは HTML で次のようになります。

Update1: それで、Fetch as Googlebot に//d.tld/#!/pageアクセス ログにこれが表示されるように依頼"GET /_escaped_fragment_/page HTTP/1.1" 301 502 "-" "Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)"すると、設定した 301 に従っていないようで、代わりにメイン ページが表示されます。代わりに 302 を使用する必要がありますか? これは私が使用しているルールです:RedirectMatch 301 /_escaped_fragment_/(.*) /router/$1

更新 2: 計画を変更しました。JavaScript 以外のフォールバック戦術の一部として googlebot を説明します。これで、すべてのリンクがルーターを指し、javascript を使用して onLoad に/router/page変更されました。/#!/page/誰かが他の人を助けるかもしれない素晴らしい解決策を持っている場合に備えて、私は質問を少し開いたままにしています.

重複の可能性:
Facebook のシバン/ハッシュバン (#!) と新しい Twitter URL は何ですか?

Twitter や about.me などの一部の Web サイトで/#!/という表現が使用されている理由が気になります。

いくつかの例: http://twitter.com/#!/search/programmer http://about.me/search/#!/tag/programmer

フレームワークやプログラミング言語など、それを使用するための特定のテクノロジーがあるかどうかを知りたいです。

重複の可能性：
Facebookのシバン/ハッシュバン（＃！）と新しいTwitterのURLは何ですか？

Twitterがそのリンクをどのように機能させるのか疑問に思いました。

ソースコードを見ると、リンクは/＃！/ i / connectまたは/＃！/ i / Discoverのように実行されていますが、load（'connect'）のようにJavaScript関数がアタッチされていません。または何か、そしてそれはページのリロードを必要としないこと。ページの内容を変更するだけです。

このページを見ましたが、それらのファイルはすべて存在している必要があり、そのうちの1つに直接移動することはできませんでした。Twitterにはこれらのファイルはそれぞれ存在せず、他の方法で処理されていると思います。でも、間違っていたら訂正してください。

この効果を再現する方法はありますか？もしそうなら、これを行う方法についてのチュートリアルはありますか？

＃を＃！に変更して、サイトをクロール可能にしようとしています。リンクをクリックするとページは正常に機能しますが、URLから直接ハッシュを呼び出すためのスクリプトを修正できません。

これは私が持っているものです

頭

体

fooをクリックすると、コンテンツは正常に読み込まれますが、www.foo.com /＃！fooを使用してサイトを呼び出すと、コンテンツが読み込まれません。

誰かが私を導くことができますか？

問題

＃を使用してサイトを稼働させました。URLとPathJSはうまく機能しています。誰かがハッシュバンを含む適切なURL構造をすでに含んでいるURLにリンクされている場合、それはうまく機能します。

私が抱えている唯一の問題は、ユーザーがURLにハッシュバンが含まれていないページにアクセスしたときに、ハッシュバンを追加してからページをリロードするか、PathJSをトリガーして適切なURL構造を検出し、私が言ったことを実行する必要があることです。に。

例

訪問http://twitter.com/googleすると、そのURLが傍受され、に変更されてからhttp://twitter.com/#!/google、適切なコンテンツが読み込まれます。

私は ajax に基づいてアプリケーションを構築します。私の URL は次のようなものです。

Google の提案であるハッシュバン (#!) に関するいくつかの議論を参照した後、それが最善の解決策ではないことを理解するのは難しくありません。いくつかの理由があります:

• とにかく、URLはかなり醜いです。
• いつか Google (または他の検索エンジン) がハッシュバン以外のより良い解決策を提案するとしたら、それは恐ろしいことです。醜い URL をハッシュバンで保持するか、ページへのリンクを有効にする js コードを作成する必要があります。
• HTML5 の pushState はいつか普及するでしょう。

上記のすべてについて、私は自分のやり方で作ることにしました: 私のナビゲーションリンクは次のようになります:

また、一部の jQuery コードは、通常のリンクのようにページを変更する代わりに、ajax コンテンツをロードできるようにします。

クローラーがページを読み取るとき、「href」属性の URL に従います。Google が読み取れるように、静的な非 js バージョンのページを提供します。数日後、私のページがインデックスに登録され、Google の結果に私のページが次のように表示されます。

ユーザー js を再度使用して、ユーザーを通常の ajax バージョン、つまり実際の URL にリダイレクトします。

それが現時点で私が考えることができる最善のアプローチです。アドバイスをお願いします。そのようにするべきですか、それとももっと良くできますか? みんなありがとう！