huskycyan

webデザインを中心に学習したことを日記として残しています。

webの授業・htaccess

htaccessと言うファイルを使ってPC用サイトとスマートフォン用サイトを振り分ける方法を教わった。PCサイトとスマートフォンサイトの2つを作った場合はそれぞれをデバイスによって振り分けることができる。
PC専用サイトとスマートフォン専用サイトは最近ではgoogleは推奨していないため将来性はあまりないようである。googleはレスポンシブサイトを推奨しているため多分すたれる技術だと思う。
しかしwebの世界は何が伸びるかわからない。スマートフォンサイトがこんなに伸びるなんて10年前は思いもしなかった覚えておいて損はないだと思う。

またhtaccessの記述は新しくなるためこまめにチェックが必要のようだ。
古いhtaccessの場合googleクローラーに古いデーターを置いていると判断され検索順位が下がってしまうらしい。

記述方法
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} (iPhone|Android.*Mobile|Windows.*Phone) [NC]
RewriteCond %{QUERY_STRING} !mode=pc
RewriteRule ^$ /〇〇/〇〇/sp/ [R,L]

Header set Vary User-Agent
</IfModule>

※ /〇〇/〇〇/sp/はスマートフォン用サイトを置くパス。
※この場合sp内のフォルダにスマートフォンのindexを置く。
※/〇〇/〇〇/sp/の前はドメイン名、記述する必要はない。

以上のコードを.htaccessと名前のファイル名を付けて作りPC用サイトのindexに置いておく。
前につくドットが重要忘れないようにする。

以下をpcサイトのhead内に記述
<link rel="alternate" media="only screen and (max-width: 640px)"
 href=" /〇〇/〇〇/sp/" >

※ /〇〇/〇〇/sp/はスマートフォン用サイトを置くパス。

以下をスマートフォンサイトのhead内に記述
<link rel="canonical" href="/〇〇/〇〇 >

※ /〇〇/〇〇はPC用サイトを置くパス。

注意スマートフォンからPC専用サイトに行く方法

リンクの最後に?mode=pcと記述する。

<a href="aaa/aaa/index.html?mode=pc">