EC-CUBEのカスタマイズ・制作会社 強いネットショップ構築します｜EC-Orange
EC-CUBE カスタマイズ 静的表示でSEO対策
カスタマイズ：応用/動的ページの静的化
EC-CUBEのページはPHPを用いて動的に生成されています。
これはSEO的には不利になってしまうことがあるため、静的な表示に書き換えます。
楽天市場やYahoo!shoppingのようなショッピングモールではなく、
EC-CUBEなどで開発した独自構築型ECサイトは、集客の8割を検索エンジンに頼っているそうです。
つまり、SEO対策がとっても大事！ということ。
EC-CUBE No.1パートナー最新情報ブログにも動的ページに関する記事があります。動的ブロックを作成するには、PHP や データベースの知識が多少、必要になります。
システム開発でお悩みの方は、ネットショップ構築パッケージ EC-Orange にお問い合わせください
静的URL化とは
デフォルト設定の状態ですと、商品詳細ページのURLは
http://サーバ名/ec-cube/html/products/detail.php?product_id=xx
となっています。
これを下記のように、フォルダで区切られたような形に切り替えます。
http://サーバ名/ec-cube/html/products/detail/xx
パラメータの変更
システム設定＞パラメータ設定
から、商品一覧・商品詳細ページに関する値を変更します。
| パラメータ | 変更前 | 変更後 |
| LIST_P_HTML | URL_DIR . "products/list-p" | URL_DIR . "products/list/" |
| DETAIL_P_HTML | URL_DIR . "products/detail.php?product_id=" | URL_DIR . "products/detail/" |
mode_rewriteの確認
mode_rewriteとは、Apache側で要求されたURLを書き換えたり、 リダイレクトしたりしてくれるモジュールです。
これをオンにしておきます。
- httpd.confファイル
LoadModule rewrite_module modules/mod_rewrite.so
ファイル内に上記の記載があることを確認してください。
httpd.confの設定
EC-CUBEを
- /var/www/html/eccube/
にインストールしている場合、
以下の記述をhttpd.conf追記してください。
<Directory "/var/www/html/eccube/">
AllowOverride All
Options FollowSymLinks
</Directory>
.htaccessの編集
- htmlフォルダの.htaccessファイルに以下を追記してください。
RewriteEngine on
RewriteBase /ec-cube/html/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^products/detail/([0-9]+)? products/detail.php?product_id=$1 [L]
RewriteRule ^products/list/([0-9]+)? products/list.php?category_id=$1 [L]
RewriteRule ^mobile/products/detail/([0-9]+)_([0-9]+)? mobile/products/detail.php?product_id=$1&page=$2 [L]
RewriteRule ^mobile/products/list/([0-9]+)? mobile/products/list.php?category_id=$1 [L]
以上で設定終了です。
http://サーバ名/ec-cube/html/products/detail/xx
として商品詳細ページにアクセスできれば問題ありません。
もちろん旧アドレスでもアクセス可能です。
テンプレートの修正
を編集します。
- <li class="level<!--{$level}--><!--{if in_array($arrTree[cnt].category_id, $tpl_category_id) }--> onmark<!--{/if}-->"><a href="<!--{$smarty.const.URL_DIR}-->products/list.php?category_id=<!--{$arrTree[cnt].category_id}-->"<!--{if in_array($arrTree[cnt].category_id, $tpl_category_id) }--> class="onlink"<!--{/if}-->><!--{$arrTree[cnt].category_name|escape}-->(<!--{$arrTree[cnt].product_count|default:0}-->)< /a>
↓
- <li class="level<!--{$level}--><!--{if in_array($arrTree[cnt].category_id, $tpl_category_id) }--> onmark<!--{/if}-->"><a href="<!--{$smarty.const.LIST_P_HTML}--><!--{$arrTree[cnt].category_id}-->"<!--{if in_array($arrTree[cnt].category_id, $tpl_category_id) }--> class="onlink"<!--{/if}-->><!--{$arrTree[cnt].category_name|escape}-->(<!--{$arrTree[cnt].product_count|default:0}-->)</a>
また、静的URL化により、論理的なディレクトリ構造が変化したため、商品詳細ページの
- 「画像を拡大する」
- 「コメントを書き込む」
ボタンがリンク切れになっているはずです。
を修正します。
- 66行目付近
- <!--★拡大する★-->
- <a href="javascript:void(win01('./detail_image.php?product_id=<!--{$arrProduct.product_id}-->&image=main_large_image<!--{if $smarty.get.admin == 'on'}-->&admin=on<!--{/if}-->','detail_image','<!--{$arrFile.main_large_image.width+60}-->', '<!--{$arrFile.main_large_image.height+80}-->'))" onmouseover="chgImg('<!--{$TPL_DIR}-->img/products/b_expansion_on.gif','expansion01');" onMouseOut="chgImg('<!--{$TPL_DIR}-->img/products/b_expansion.gif','expansion01');">
- <img src="<!--{$TPL_DIR}-->img/products/b_expansion.gif" width="85" height="13" alt="画像を拡大する" name="expansion01" id="expansion01" />
- </a>
- <!--★拡大する★-->
- <a href="javascript:void(win01('<!--{$smarty.const.URL_DIR}-->products/detail_image.php?product_id=<!--{$arrProduct.product_id}-->&image=main_large_image<!--{if $smarty.get.admin == 'on'}-->&admin=on<!--{/if}-->','detail_image','<!--{$arrFile.main_large_image.width+60}-->', '<!--{$arrFile.main_large_image.height+80}-->'))" onmouseover="chgImg('<!--{$TPL_DIR}-->img/products/b_expansion_on.gif','expansion01');" onMouseOut="chgImg('<!--{$TPL_DIR}-->img/products/b_expansion.gif','expansion01');">
- <img src="<!--{$TPL_DIR}-->img/products/b_expansion.gif" width="85" height="13" alt="画像を拡大する" name="expansion01" id="expansion01" />
- </a>
- 260行目付近
- <!--{if count($arrReview) < $smarty.const.REVIEW_REGIST_MAX}-->
- <!--★新規コメントを書き込む★-->
- <a href="./review.php"
- onclick="win02('./review.php?product_id=<!--{$arrProduct.product_id}-->','review','580','580'); return false;"
- onmouseover="chgImg('<!--{$TPL_DIR}-->img/products/b_comment_on.gif','review');"
- onmouseout="chgImg('<!--{$TPL_DIR}-->img/products/b_comment.gif','review');" target="_blank
- <img src="<!--{$TPL_DIR}-->img/products/b_comment.gif" width="150" height="22" alt="新規コメントを書き込む" name="review" id="review" />
- </a>
- <!--{/if}-->
- 264、5行目を修正します。
- <!--{if count($arrReview) < $smarty.const.REVIEW_REGIST_MAX}-->
- <!--★新規コメントを書き込む★-->
- <a href="<!--{$smarty.const.URL_DIR}-->products/review.php"
- onclick="win02('<!--{$smarty.const.URL_DIR}-->products/review.php?product_id=<!--{$arrProduct.product_id}-->','review','580','580'); return false;"
- onmouseover="chgImg('<!--{$TPL_DIR}-->img/products/b_comment_on.gif','review');"
- onmouseout="chgImg('<!--{$TPL_DIR}-->img/products/b_comment.gif','review');" target="_blank
- <img src="<!--{$TPL_DIR}-->img/products/b_comment.gif" width="150" height="22" alt="新規コメントを書き込む" name="review" id="review" />
- </a>
- <!--{/if}--><
また、テンプレート上で、直接商品詳細へのリンクなどを書いている場合には、以下を修正してください。
item
</a>
↓
item
</a>
EC-CUBEのカスタマイズや、ECサイトの開発・構築でお困りなら、
ネットショップ構築パッケージEC-Orangeにお問い合わせください！
ページトップへ