スマホ訪問時にXMLサイトマップを元にモバイル用へ切替

こんにちは。ワニタです。
スタッフブログでここ何回か紹介をしていました、ネットショップのスマホ対応についての話題です。e-shopsカートSのハイブリッドCMS機能を利用して、スマートフォン対応をしている方や「別々のURL」にてモバイル対応をしている方への参考情報を紹介します。

今からでも間に合う【スマホ対応】の近道。でもご紹介いたしましたが、webサイトがスマホに対応したことを検索エンジンに伝える方法として、googleは3つのやり方を紹介していました。

ハイブリッドCMS機能を利用した作業のながれ(おさらい)

その中で「別々のURL」という方法は、PC用URL毎にモバイル端末用コンテンツのURLを用意するやり方です。e-shopsカートSでは、この「別々のURL」に対応するためにハイブリッドCMS機能を利用した設定をご案内しており、以下の様な流れで手続きを行います。

  1. ネットショップ開業CMSプランをご契約する
  2. PC用ホームページデータをサーバにアップロードする
  3. e−shopsカートS管理画面ハイブリッドCMS設定で、PC用自動生成ページを停止する
  4. モバイル対応用xmlサイトマップ(e−shopsカートS管理画面にて入手)をアップロードする
  5. Google Search Consoleでサイトマップの追加をする

手順4でアップロードするxmlサイトマップには、PC用ページのURLとモバイル端末用のURLの関連が含まれています。このxmlサイトマップをGoogleに登録することで、ネットショップのスマートフォン対応がGoogleに伝わります。

Google以外からの訪問でもスマホページに切り替えたい場合には・・・

Google検索をスマートフォンで利用すると、モバイル端末用のURLが検索結果として使われます。また、「スマホ対応」というメッセージも表示されます。
これにより、Google検索からの訪問は、上記の作業をすることでPC閲覧時にはPC用ページの表示、スマホ閲覧時にはモバイル対応用ページの表示となります。ところが、Google検索以外の訪問では、端末を判定してページを切り替えることができません。

Google検索以外からの訪問に対しても、端末を判定してページを切り替えるJavascriptを作成しましたので、ご紹介いたします。

端末判定によるページ切替の前提条件

このJavascriptは、以下のような条件で動作します。

  • Googleの紹介するモバイル対応「別々のURL」を利用しているサイト
  • PC用ページとモバイル用ページの対応をXMLサイトマップでアップロードしている
  • XMLサイトマップでは、以下例のように<loc>…</loc>の次に、モバイル対応用のアドレスを指定する要素を記述している
 <loc>PC用ページURL</loc>
 <xhtml:link rel="alternate" media="only screen and (max-width: ???px)" href="モバイル対応用URL" />
 その他指定
 </url>
 

e-shopsカートSのネットショップ開業CMSプランをご利用中で、ハイブリッドCMS機能を利用し、PC用ページは自作ページを公開しつつスマホ用には自動生成ページを公開している場合、こちらの記事(Googleウェブマスターツールでモバイル対応を伝える手順)で案内している手続きを行っていれば前提は問題なく満たしています。

スマホで閲覧時の挙動

このjavascriptを利用した場合の挙動は以下のようになります。

  1. PC用ページにスマートフォンでアクセスがある
  2. xmlサイトマップに、PC用ページに対応するモバイル対応用URLがある
  3. 「スマートフォン用向けページに移動しますか? キャンセル・OK」の選択が表示される
  4. 「OK」をクリックするとモバイル対応用URLに遷移する「キャンセル」をクリックするとPC用ページに留まる(手順4の操作から24時間は、選択が表示されず、選択に従った振る舞いとなります)

なお、本記事で紹介する方法は、端末(UserAgent)を判定したうえでxmlサイトマップの情報からページを切り替えています。
javascriptの記述や編集については弊社サポートの対象外となりますので、ご質疑を頂いても回答いたしかねます。お恐れ入りますがご了承くださいませ。

※ワニタ環境での事例となります。
Javascriptの競合などにより、期待する挙動とならない可能性もあります。

では、手順をご紹介します。

モバイル用ページ切替の対応手順

  • こちらからJavascriptをダウンロードする
  • ダウンロードしたファイルをサーバにアップロードする
  • 全てのPC用の<head>内に以下コードを追加する
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 <script src="/tosmpage.js"></script>
 

/tosmpage.js をアップロードしたJavaScriptのパスに変更して下さい。
JQueryを既に利用している場合には、1行目は不要です。2行目をJQuery読み込み以降に記述して下さい。

ご参考

必要に応じて、ダウンロードしたjavascriptの以下箇所等を編集して下さい。

  • xmlサイトマップのパス
  • 選択を非表示にする日数

以上です。お役に立てていただけたら幸いです。

カテゴリー: 機能利用例紹介