PCとスマートフォンの表示の自動振り分け

スマートフォン用ウェブサイトには特別なサーバは不要で、PC用と同じウェブサーバにアップロードするだけで公開できます。PC用サイトのURLがhttp://www.example.com/なら、スマートフォン用はhttp://m.example.com/などのURLで公開すると良いでしょう。

閲覧手段に応じて自動振り分け

閲覧手段に応じて自動振り分け

PC用とスマートフォン用を同じURLで公開し、アクセス者の端末に応じてPC用かスマートフォン用かに自動で振り分けたい場合には、サーバ側の機能(.htaccessなど)を使う必要があります。その場合には、それらの設定を利用できるサーバで公開する必要があります。


 
スマートフォン向けサイト(右側)が用意されていても、望めばPC用サイト(左側)を閲覧することもできる

スマートフォン向けサイト(右側)が用意されていても、望めばPC用サイト(左側)を閲覧することもできる

スマートフォン上であっても、(スマートフォン用ではなく)PC用ウェブサイトを閲覧したいと思うユーザも居るでしょう。そのため、強制的にスマートフォン版だけを見せるのではなく、PC版を見たいユーザにはPC版が閲覧できるような仕組みを用意しておきましょう。

詳しくは、記事「PC版とスマートフォン版サイトを自動振り分けする方法」をご参照下さい。


 

link要素を使ったアノテーション・正規化の書き方

PC用サイトとモバイル用サイトの2つを用意した場合、それぞれの関連を示す方法(アノテーション)が用意されています。これによって、同じコンテンツの2ページが両方とも検索サイトに別々に登録されてしまうのを防げます。

PC版ページから、モバイル版ページの存在を示す:
例えば、PC用ウェブページのHTML内(head要素内)に以下のように記述しておくと、「このページのモバイル版」の場所を示すことができます。
<link rel="alternate" media="only screen and (max-width: 640px)" href="http://mobile.example.com/page1.html" />
上記の場合は、
  • 画面の横幅が640px以下の場合用として、
  • http://mobile.example.com/page1.html ページが用意されている。
ということを示します。
画面の横幅に関しては「640px」でなくても自由に設定できます。

モバイル版ページから、オリジナル版(PC版)ページの存在を示す:
また、上記のように記述した場合は、モバイル用ウェブページのHTML内(head要素内)には以下のように記述します。
<link rel="canonical" href="http://www.example.com/page1.html" />
上記の場合は、
  • 現在表示しているページのオリジナル版が、
  • http://www.example.com/page1.html ページである。
ということを示します。

※注:上記の記述では、「PC版のトップページ」や「モバイル版のトップページ」を示してはいけません。必ず、「今表示されているページに対応するページ」を指定するようにします。異なるデバイス用ページの情報を示すアノテーションの書き方については、Google Developersサイト内の解説もご参照下さい。

スマートフォン対応サイトを作る際の注意点

今回は、スマートフォンやタブレットなどのモバイル端末に対応したウェブサイトを作成する際の注意点を簡単にご紹介いたしました。もはや小型モバイル端末を無視してのウェブサイト運営はできません。ぜひ、スマートフォンなどのモバイル端末に対応したウェブサイトを作成してみて下さい。

【関連記事】



※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。