私が取り組んでいるウェブサイトの主要部分には 4 つのページがあり、それらを切り替えるためのタブがあります。4 つのタブ間の切り替えを (jQuery を使用して) フェード トランジションにしたい。それはそれでいいのですが、SEO にはそれぞれを別のページとして考えてもらいたいのです。また、技術的には同じページであっても、URL にリンクして適切なコンテンツを表示できるようにしたいと考えています。
Facebook はこれを行っており (facebook.com/#!/another-string-here)、写真などを切り替えることができるため、JavaScript クエリ文字列のように機能します。
これにより、すぐに切り替えることができ、それにリンクすることができますが、それぞれが独自のページとして機能します。
これを行うための推奨される方法はありますか?
更新私が見つけた最高のものはSammyJSです-実装されていませんが、それが最良の答えのようです: http://sammyjs.org/
という名前のベース ページがあり、そのページにと(簡略化のため) のservices2 つのタブがあるとします。したがって、ドメインがの場合、[デザイン] タブをクリックすると、ハッシュ URL は のようになり、開発の場合も同様になります。私はあなたがそれを行う方法を知っていると仮定しています。designdevelopmentexample.comhttp://example.com/services#!/design
検索エンジンにタブを認識させるには、各ページの静的バージョンを作成します。したがって、 に 1 つ、http://example.com/services/designに 1 つあることになりhttp://example.com/services/developmentます。各タブのhref属性は実際にはこれらの静的ページを指しますが、onclick ハンドラーを各タブにアタッチして、ハッシュ バージョンに移動させます。
このように、JavaScript が有効なクライアントは、ハッシュ タグとフェード効果を含むページの Ajaxy バージョンを取得しますが、JavaScript が有効でないクライアント (Web クローラーを含む) は、通常の静的リンクを表示し、全員が勝ちます。
記録として、これは Facebook が行うことと似ています。彼らはさらに一歩進んで、HTML5history.pushState()をサポートするブラウザーで HTML5 の新しい機能を使用し、ハッシュ タグの必要性を完全に取り除きます。(詳細については、この質問を参照してください。)
サーバーにはハッシュタグが送信されず、ほとんどの検索エンジン (Google など) は JavaScript を実行しないため、両方の方法 (Facebook の方法と SEO) を持つことは不可能です。
単純にフェード効果が必要な場合は、URL にハッシュ タグがある場合、たとえば#fade、jquery が不透明度を 0 に設定し、読み込みを待ってフェードインするように設定できます。フェードアウトを取得するには、リンクe.preventDefault()またはその関数にイベントリスナーを設定return falseし、不透明度をフェードアウトします。フェードが完了すると、JavaScript がlocation.href="site"ハッシュを持つ新しいページに変更されます。#fade