userAgentによるページ振り分け

Question

お世話になっております。
かつて外注で作成した自社楽天サイトなのですが、ipadで開くとスマホページが表示され、大変みづらいという指摘がありました。
弊社トップページurl
https://www.rakuten.ne.jp/gold/auc-jce/
この中に、

if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
	location.href = 'https://www.rakuten.ne.jp/gold/auc-jce/smp/';
}

こういう設定があるのですが、どういじったらいいのかわかりません。
また、一般的には、どのような設定が推奨されるのか、あるいは、サイト構築自体に問題点があるのかとも思い、質問させていただきます。

Accepted Answer

ECマスターズの田中です。

いただいたの中で、
お客様がページ閲覧のために使われているソフトの種類によって
表示するページの判断が行われており、
iPad上で閲覧した場合はPCページが表示されるはずなのですが、
正常に動作していないケースがあるようですね。

ページを出し分けするにあたり、一番の基準となるのは
閲覧に使われている機器の画面の横幅ですので、
この横幅を基準に出し分けを行うように改変していただくのはいかがでしょうか。

具体的には、
if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) { 
この一行を
if ( window.parent.screen.width < 768 ) {
にご変更いただく形になります。

768pxは、iPad系列の中で一番狭い横幅となりますので、
iPadより横幅が狭い機器で見た場合に、
スマートフォン用ページを表示させる設定になります。

PC・スマートフォン用ページを別々に作成される構造自体は
他のウェブサイトでもよく見られるため、
特に問題はないと思います。

この構造を引き続きご利用される場合は、
タグを利用して、
「このページはスマートフォン用のトップページで、PC用とほぼ同一の内容である」
旨をGoogleに伝えておくことをオススメします。

たとえば、PC用ページのとの間に

を、スマートフォン用ページのとの間に

をご記載いただく形になります。

また、RMSのトップページ切替設定を利用して、
出し分けを完全に楽天のシステムに任せてしまうのも
有効な方法であると思います。
https://navi-manual.faq.rakuten.net/design/000009546?l-id=TopRMSmenuNavi
スマートフォン用トップページを
https://www.rakuten.ne.jp/gold/店舗様URL/index_sp.html
に移す必要があるため、ページ構造によっては作業が困難な場合もございますが、
選択肢の１つとしてご検討いただければと思います。

Answer

さっそくのご回答ありがとうございます。
試してみます。
また分からないことがでましたら、質問させていただきます。
重ね重ね、ありがとうございます。