デバイスごとに最適化したページへリダイレクトさせたい
弊社サイトですが、日本語PCページ → https://nikkou-kinzoku.com/ 、
日本語スマホページ → https://nikkou-kinzoku.com/amp/、英語PCページ → https://nikkou-kinzoku.com/en/、英語スマホページ → https://nikkou-kinzoku.com/en/amp/ と同じ内容のものを4種類で出しています。将来的にはレスポンシブデザイン化して、日本語、英語の2種類にしたいところではありますが、本業の手すき時間に少しづつ触っているのでそう簡単にはいきません。
前からやりたかったことの一つが、PCユーザーがスマホページにアクセスした場合はPCページへ、スマホユーザーがPCページにアクセスした場合はスマホページへ自動転送(リダイレクト)させることです。検索したりChatGPTに聞いたりして、scriptを使うのが一番簡単にできるのかなと思ったのですが、スマホページをampで作っているためうまく動きませんでした。ChatGPTはこのamp-script使えばうまくいくよ、と言うのですがダメでしたね。次にphp化することもやりかけたのですが、現在.htmlの拡張子を.phpに変えることで本文内のリンク先をすべて変更しないといけないし、そもそもphpの言語自体よく理解できてないのでこれも断念。結局書式がとっつきにくいので敬遠していた.htaccessでいくことにしました。
いくつか問題はあったのですが、その都度ChatGPTに教えを乞うてなんとかうまくいきました。
問題点①:https://nikkou-kinzoku.com/ 直下にstyle.cssや問い合わせフォーム用のphpファイル、写真データをまとめたフォルダがあるのですがそれらまでリダイレクトされてしまった。
↓
.htmlの拡張子のみリダイレクトさせた。
問題点②:将来的なレスポンシブデザイン化に先駆けて問い合わせページのみレスポンシブデザイン化していた。スマホページから問い合わせしたい場合も/amp/下ではなく直下の問い合わせページにリンクさせていたのでこのページだけはリダイレクトから除かねばならなかった。
問題点③:英語PCページから英語スマホページへリダイレクトさせたかったのに、日本語PCページから日本語スマホページへリダイレクトさせるときの条件にも適合していたため、英語PCページから日本語スマホページへリダイレクトされてしまった。
↓
/en/ の場合は除外する条件追加。
<IfModule mod_rewrite.c>
RewriteEngine On
# 日本語のampページへPCユーザーがアクセスした場合正規ページにリダイレクト !-- .htmlのみ --!
RewriteCond %{HTTP_USER_AGENT} !Mobile|Android|Silk|iPhone|iPad [NC]
RewriteCond %{REQUEST_URI} ^/amp/(.+).html$ [NC]
RewriteRule ^amp/(.+).html$ /$1.html [R=301,L]
# 日本語の正規ページにモバイルユーザーがアクセスした場合、ampページにリダイレクト !-- .htmlのみ(toiawase.htmlを除く) --!
RewriteCond %{HTTP_USER_AGENT} Mobile|Android|Silk|iPhone|iPad [NC]
RewriteCond %{REQUEST_URI} ^/([^/]+).html$ [NC]
RewriteCond %{REQUEST_URI} !^/toiawase.html$ [NC]
RewriteCond %{REQUEST_URI} !^/en/ [NC]
RewriteRule ^([^/]+).html$ /amp/$1.html [R=301,L]
# 英語のAMPページにPCユーザーがアクセスした場合、正規ページにリダイレクト !-- .htmlのみ --!
RewriteCond %{HTTP_USER_AGENT} !Mobile|Android|Silk|iPhone|iPad [NC]
RewriteCond %{REQUEST_URI} ^/en/amp/(.+).html$ [NC]
RewriteRule ^en/amp/(.+).html$ /en/$1.html [R=301,L]
# 英語の正規ページにモバイルユーザーがアクセスした場合、モバイルページにリダイレクト !-- .htmlのみ(toiawase.htmlを除く) --!
RewriteCond %{HTTP_USER_AGENT} Mobile|Android|Silk|iPhone|iPad [NC]
RewriteCond %{REQUEST_URI} ^/en/([^/]+).html$ [NC]
RewriteCond %{REQUEST_URI} !^/en/toiawase.html$ [NC]
RewriteRule ^en/([^/]+).html$ /en/amp/$1.html [R=301,L]
</IfModule>
この記事が気に入ったらサポートをしてみませんか?