グーグル（Google）

スマホサイトを別途に作成し、パソコンサイトとスマホサイトをJavaScriptで自動的に振り分ける方法はSEOに有効か？

2015.03.19
この記事は約4分で読めます。

パソコンとスマホのページを別々に作成し振り分ける方法パソコンとスマホのページを別々に作成し振り分ける方法がある。JavaScriptを使ったユーザーエージェントの切替で、スマホでの閲覧の場合は、別途に作成しておいたスマホのページに自動的にジャンプさせるというやり方だ。JavaScriptを挿入すれば簡単に作成できる。
しかし、SEO的にこの手法は好ましくないと言われている。理由は「重複コンテンツ問題」である。パソコンページもスマホページも文章的には同じ内容になるからである。またページ数が多いとメンテナンスも増える。パソコンページと同じだけスマホページが必要だからだ。買い物カゴのない情報サイトならJavaScriptによる分岐よりもレスポンシブデザインのほうがよい。
そうはいっても4月21日からGoogleはモバイル対応していないWEBサイトの検索順位を下げることを明言している。早急な対策が必要である。そこで、モバイルの順位低下対策としてJavaScriptのスマホページ振り分けは有効なのかどうかを実験してみることにした。

PCとスマホ切替のテストページ作成

PCとスマホ切替のテストページは「tohda.jp」に設置した。

スマホページとPCページ

PC用ページは「http://www.tohda.jp/pcsmp/」
スマホページは「http://www.tohda.jp/pcsmp/smp/」
PCページにスマホでアクセスすると自動的にスマホページにジャンプする設定にした。

PCページには
<script type=”text/javascript” src=”userAgent.js”></script>
という一行を挿入してある。

userAgent.jsの内容は

(function(){

var ua = navigator.userAgent.toUpperCase();
var url = document.location.pathname;
var spDir = ‘http://www.tohda.jp/pcsmp/smp/’;

(ua.indexOf(‘IPHONE’) != -1 || (ua.indexOf(‘ANDROID’) != -1 && ua.indexOf(‘MOBILE’) != -1))?
isSP() :
isPC();

function isSP(){
if(url.match(spDir)){
return false;
}else{
location.href = spDir;
}
}

function isPC(){
if(!url.match(spDir)){
return false;
}else{
location.href = ‘http://www.tohda.jp/pcsmp/’;
}
}

}());

とした。
このJavaScriptは「http://www.html5-memo.com/css3/pc_bunki/」の記事を参考に作成したものである。

WEBサーバ内のファイル構成配下のとおり
smppcftp.jpg

モバイルフレンドリーテストを実施

このテストページのPCページ「http://www.tohda.jp/pcsmp/」のほうで、Googleのモバイルフレンドリーテストを実施してみた。するとモバイルフレンドリーであるという表示になり、このページはGoogleBOTにはどのように見えているかというスマホ画面にはスマホページ「http://www.tohda.jp/pcsmp/smp/」の画面が表示されていた。

モバイルフレンドリーOKの表示

この結果から考察してみる。

  • PCページとスマホページを2つ作成して分岐（振り分け）することは本来のSEO的には重複コンテンツとなることから好ましいことではない。
  • しかし、急増しているスマホユーザーの閲覧の快適性を確保するためには、スマホ対応したページ表示が好ましい。そのため重複コンテンツ問題よりもモバイルフレンドリー性を優先するという判断をGoogleはしたのではないか。（ここは推測）
  • つまり、エージェント分岐によるスマホページ作成は、モバイルSEO対策としては悪くない対策である。

あくまで推測であるが、JavaScript利用によるスマホページへの振り分けという対策は、「あり」と判断したい。

なお、イチオシはやはりレスポンシブデザインによるページ生成であり、パソコンもスマホも同じURLで表示し、CSS側で可変幅対応のデザインを実装するという方法のほうがよい。WordPressならレスポンシブデザインのテーマもたくさん揃ってきているし、これから対応を考えるににはWordPressによるリニューアルも選択肢にいれることをおすすめする。