超攻撃的ゴレイロ “じゅんぼ~” No.16

フットサルチーム『Passion』のゴレイロのメモ帳

ECサイトの商品ページのページ構成について<其の弐> ~全バリエーションと個別のページの場合~

同型の製品で色やサイズが複数ある場合でのページ構成についてです。

まずは、その構成パターンの一つ“全バリエーションと個別のページの場合”です。

 

 

 『全バリエーションと個別のページの場合』

 

色やサイズなど全バリエーションが掲載されたページと

色ごとサイズごとの個別のページの二つの顔を持つ場合です。

ここで重要になるのが個別のページの必要性です。

白・黒・赤の個別ページを作る目的がユーザーのためである場合以外、

SEOの観点からも時間の観点からも無駄でしかありません。

 

<例:白・黒・赤のTシャツの商品ページ>

まず、 全バリエーションの掲載されたページを作ります。

そして、各色の個別ページに全色のページに向けたタグを

<head></head>内に[ rel="canonical" ]タグを記述します。

つまり

<link rel="canonical" href="http://www.passion_no16.com/passion-tshirts/" />

という風に。

そうすることで、一つのページに個別ページを放り込む(?)ことになりますし、

重複コンテンツによるSEOのペナルティもないですし、

ユーザーにも一つのページだけで個別ページを見せることができます。

 

ですから、白・黒・赤全てに個別のURLが割り当てられています。

白なら http://www.passion-no16.com/passion-tshirts-white/ と、

黒なら http://www.passion-no16.com/passion-tshirts-black/ と、

赤なら http://www.passion-no16.com/passion-tshirts-red/ という具合に。

 

しかし、各ページは[ rel="canonical" ]により

http://www.passion-no16.com/passion-tshirts/ となっています。

 

つまり、 http://www.passion-no16.com/passion-tshirts/ が親ページであり、

ユーザーにはこの親ページだけが表示されます。

しかしながら、そこには白・黒・赤の個別ページである

子ページが存在しているのです。

その証拠に白の個別ページを最初表示させたならば

ブラウザのURL表示欄には

http://www.passion-no16.com/passion-tshirts-white/

と表示されています。

そのページでは、黒のページを表示させたとしても

URLは白のURLのままです。

f:id:junkichi16:20130127234411j:plain

黒い四角をクリックすれば黒のページが表示されます。

f:id:junkichi16:20130127235210j:plain

前述の通り先に白のページを表示させいるので、

URLは白のURLのままです。