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

トップページのみスマホ専用ページを作成した時の.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を使用

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

https://allabout.co.jp/gm/gc/386483/3/

 

トップページのみ切り替える場合の.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フォルダがないためリンク切れとなってしまい混乱しました(>_<)

 

 

 

未分類カテゴリの最新記事