楽天GOLDトップページを「超強引に」モバイルフレンドリー化

楽天の「GOLDページのモバイルフレンドリー化」。

ざっくり結論を出すと、GOLDを辞めてRMS内で作成した方がいいだろうとなるけれど、
取り急ぎ、トップページだけ、モバイルフレンドリー化することとする。

GOLDでない既存のスマホサイトをコピーする超強引なやり方です。


１）スマホサイト（ http://www.rakuten.co.jp/●●店舗●●/）のソースをコピー。
※コピーは、safariの 開発メニュー→ユーザエージェントで確認。
Safariの開発メニューは、「環境設定」を開き「詳細」タブをクリック。「メニューバーに”開発”メニューを表示」をチェックボックスにチェックを入れると表示されます。

２）コピーしたソースをHTMLで保存する。
 ※但し、全く同一にならないよう修正する。

 例）スマホの保存場所は任意。今回はspフォルダで説明
PC ･･････ http://www.rakuten.ne.jp/gold/●●店舗●●/
スマホ ･･････http://www.rakuten.ne.jp/gold/●●店舗●●/sp/

３）headタグ内にaltenate、canonicalを設定する

PC
<link rel="alternate" media="only screen and(max-width:640px)" href="http://www.rakuten.ne.jp/gold/●●店舗●●/sp/">

スマホ
<link rel="canonical" href="http://www.rakuten.ne.jp/gold/●●店舗●●/"">

４）PCサイトのheadにリダイレクトするためのJavascriptを入れる

<script type="text/javascript">
<!--
if((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1)
|| navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
window.location.href = "http://www.rakuten.ne.jp/gold/●●店舗●●/sp/";
}
-->
</script>

※このスクリプトは、@caramuさんのサイトにお世話になりました。
http://urx3.nu/jlbr

５）チェック
 PC、スマホ画面で表示チェック
 最後にモバイルフレンドリーテスト
 https://www.google.com/webmasters/tools/mobile-friendly/?hl=ja

トップページ以外のGOLDページは、RMS内の表示にさせるか検討。


 Google自体は、ゆくゆくはレスポンシブ化が明らかに推奨されていので、今後各モール等どういう対処をするのか静観。