4つのタブがある/pets
ページがあるとしましょう:
Allタブには、すべてのペットが表示されますページの読み込み時。
他の3つのタブのそれぞれは、犬/猫/フクロウのリストをそれぞれ保持します-Ajaxでロードクリック時に。すべてのタブには、次のN個の結果を取得するための[さらに読み込む]ボタンもあります。
現在Googleによってインデックスされているページは/pets
です。私が望むのは、この概要ページにタブを付けておくだけでなく、3つの特定のペットページにもインデックスが付けられるようにすることです(特に、ペットの詳細ページへのリンクがあるため)。
私が考えていたこと:
/pets
ページを保持し、3つのタブを異なるURLにリンクすることでした:/pets/dogs
、/pets/cats
、および/pets/owls
実際にはリンクであるタブ。/pets
ページをタブとAjaxで保持することを考えましたが、さらに3つのペットタイプ専用のページ(ポイント1を参照)があります。次に、/pets/dogs
、/pets/cats
、および/pets/owls
への内部リンクを含む追加の「About」ページを作成して、クロールできるようにします。ただし、この場合、コンテンツが重複する危険性があるかどうかはわかりません。SEOのユーザーエクスペリエンスを犠牲にしたくないので、ソリューションに到達するのが難しくなります。
上記の2つのオプションのどちらがあなたに良いと思われますか?
または、そのようなタブ駆動のページの経験がある場合:他にどのようなソリューションを提案しますか?
これは最近直面している非常に一般的な問題です。これは次のように簡単に解決できます。
同じページ/ petsを持ちたいが/ pets/cats、/ pets/dogをインデックスを個別ににしたい場合は、理想的には別々に存在する必要があります。つまり、HTTPクライアントが別のURLで開く場合独立して応答する必要があります。
また、Ajaxまたはバックエンドを介して読み込まれるコンテンツは同じでなければなりません。つまり、誰かが検索結果から/ pets/dogsを開くか、/ petsのタブ(ajaxを介して)をクリックすることは、クローラーによるクローキングのペナルティを避けるために同じである必要がありますインデックス付け。
そのまさに、そのコンテンツのSEOインデックスを失うことなく、よりユーザーフレンドリーまたは単一ページのアプリケーションの動作がシミュレートされます
それが起こるためにクローラーを使用して、次のことを管理する1つのページのみを管理できます。
バックエンドの変更
1)アプリケーションレベルで、/ pets /、/ pets/dogs、/ pets/catsを呼び出すようにサーバーを構成します。 。 。単一機能
2)この関数は、この必要な情報/データを(解析されたタブの)同じビューに送信し、そのタブをアクティブに設定します。
例、
/ pets /を受信した場合、バックエンドは/ allのコンテンツを送信して表示し、クロール可能にし、すべてのタブをアクティブなタブとして設定する必要があります
/ pets/dogsを受信した場合、バックエンドは/ all/dogsのコンテンツを送信して表示し、クロール可能にし、dog tabをアクティブなタブとして設定する必要があります
。 。
フロントエンドの変更
ユーザーがフロントエンドからタブを選択した場合、それを履歴に追加し、必要な分析ピクセルを起動して、個別のページビュー(仮想ページビュー)を追跡する必要があります
if(history && history.pushState)
{
var pageUrl = $("#page-"+page).attr("href");
pageUrl = pageUrl.replace("https://","//").replace("http://","//");
history.pushState(null,null,pageUrl);
}
また、ajaxを介してページのコンテンツを変更し、選択したタブとしてタブを設定します。
これで、ユーザーがページを更新しても、ページの状態は変わらないはずです。これが、このコンセプト全体の仕組みです。