3

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

http://server.com/module/#function_name,param1,param2...etc

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

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

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

<a href="http://server.com/module/for-crawler/function-name/param1/param2/...">
Some text </a>

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

$(function(){
    $('a').live('click',function(e){
        var realURL = translateURL( $(this).attr('href') )
        loadContent( realURL );
        e.prevetnDefault(); 
        return false;
    })
})
/* -- the function translateURL will turn url like :
..... http://server.com/module/for-crawler/function-name/param1/param2/...
Into:
..... http://server.com/module/#function-name/param1/param2/...
    That's the real url I think all ajaxers are used to dealing with
*/

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

http://server.com/module/for-crawler/function-name/param1/param2/...

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

http://server.com/module/#function-name/param1/param2/...

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

4

1 に答える 1

4

視聴者によっては、とにかく HTML5 PushState を使用することをお勧めします。

クライアントが HTML5 PushState をサポートしていない場合は、クローラーと同じバージョンのアプリを使用するだけです。私の意見では、ページのリロードはハッシュ化された URL ほど悪くはありません。ユーザーは URL を共有するため、ハッシュされた URL が他のユーザーに公開されます。この URL は、Facebook のリンク共有プレビューや、JavaScript をサポートしていないその他のクライアントでは機能しません。

代わりに、HTML5 PushState と組み合わせて、クローラーに適したアプリのみを使用します。PushState を使用すると、クライアントの JavaScript サポートに関係なく、常に 1 つの URL を公開できます。

まず、PushState がサポートされているかどうかを検出します。

function supports_history_api() { return !!(window.history && history.pushState); }

次に、次のclick-handlerようになります。

$('a').live('click',function(e){
  var url = $(this).attr('href');
  e.preventDefault();
  loadContent( url );
  history.pushState({"url":url}, $(this).attr('title'), url);
  return false;
})
于 2012-05-31T18:32:53.903 に答える