トップページのみスマホ専用ページを作成した時の.htaccessファイルについて

未分類

すでにPCサイトがあるホームページについて、

トップページのみスマホ対応させる方法を色々調べながらやってみました。

☆ページを作成する時

スマホ用ページのmetaタグには

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

 

アノテーションタグでPCページとスマホ用のページを関連づけて、

検索Botに重複コンテンツ扱いされないようにする

 

PCページ

<link href=”https://testurl.com/sp/index.html” rel=”alternate”>

 

スマホ用のページ

<link href=”https://testurl.com/index.html” rel=”canonical”>

 

横幅の指定は%で作成

<img src=”image/0001.jpg” width=”100%” alt=”” >

 

 

アクセスした端末によってPCページorスマホ用ページに切り替えるために.htaccessを使用

こちらのサイトがとっても分かりやすかったです!

PC版とスマートフォン版サイトを自動で切り替える方法
PC用サイトにアクセスしてきたスマートフォン利用者を自動的にスマホ用サイトへ誘導できるように、アクセス者の端末(PC/SP)に応じて閲覧先を自動で切り替える機能の作り方をご紹介。閲覧者のユーザエージェント名(ブラウザや機種名)を判別し、「.htaccess」のmod_rewriteを使ってアクセス先を自動振り分けするこ...

 

トップページのみ切り替える場合の.htaccess

<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]

</IfModule>

 

最後は改行で終わらせる(1行分あける)

.から始まるのでいったん保存の際はhtaccess.txt等としてサーバーアップロードしてからファイル名を.htaccessに変更

今回はトップページなのでトップの階層に入れる。

.htaccessはその下の階層のファイルも全て対象。

最初、全てのページが/spにリダイレクトされる.htaccessをいれてしまい、リンク先spフォルダがないためリンク切れとなってしまい混乱しました(>_<)

 

 

 

コメント

タイトルとURLをコピーしました