上のキャプチャのように、
固定された表示領域に、ボタンクリックで表示内容を切り替えたいことがあります。
こういった場合は、
jQueryプログラムを記述することによって、表示処理の振り分けが実現できます。
コピーページを使わずに同一ページ内で表示を切り替えた方が良い理由
通常、ボリュームがあるコンテンツページの一部の内容の表示を切り替えたい時は、
- コピーページを作って擬似的に同一ページ上の切り替えが起きているように見せる
- jQueryプログラムによって表示エリアを切り替える
の２つの方法があります。
では、どちらの方がお勧めなのでしょうか。
それは、ダントツでjQueryプログラムによる表示エリアの切り替えがお勧めです。
理由は、検索エンジンのサイト評価に関連するからです。
通常、コピーページの量産を行うと、
検索エンジンは「類似ページが同一サイト内で多数発生」と認識してしまいます。
これをjQueryを使って同一ページ上で表示を切り替えることによって、URLが固定となるため、検索エンジンが同一ページと認識し、「ボリュームが十分な有料コンテンツページ」と認識されるようになります。
せっかくWEBサイトを作るならば、サイトの評価は高評価であるほど良いです。
対策はできるところから始めていきましょう。
サンプルプログラム
ここでは、３つのボタンクリックアクションで、タイトルとテキスト本文の表示が切り替わるサンプルプログラムを紹介します。
HTML
CSS
jQuery
応用サンプルプログラム
応用として、ページ読み込み時のURLハッシュ値によって、最初に表示されるブロックを切り替えるサンプルプログラムを紹介します。
- 「http://●●.com/#page1」の時は「pmd_1」「area_1」を表示
- 「http://●●.com/#page2」の時は「pmd_2」「area_2」を表示
- 「http://●●.com/#page3」の時は「pmd_3」「area_3」を表示
ページのハッシュ値によって表示エリアを切り替えるjQueryサンプル
ハッシュ値以外のURLで表示を振り分けたい時は、以下の記事を参考にjQueryプログラムを条件分岐させてください。
