PC用サイトとスマホ用サイトを自動で振り分ける方法
既存のPC用サイトとは別にスマホ用サイトを用意する場合は、サブドメインを使って分離すると分かりやすいでしょう。例えばPC用サイトのURLが https://www.example.com/ なら、スマホ用サイトは https://m.example.com/ で公開するなどです。その際、「スマホを使ってPC用サイトにアクセスされた場合」には、自動的にスマホ用サイトへ転送させたいこともあります。その場合には、アクセス者の環境に応じて適切なサイトへリダイレクトする方法が使えます。詳しくは、記事「PC版とスマートフォン版サイトを自動振り分けする方法」をご参照下さい。
スマホ用サイトが用意されていても、望めばPC用サイトを閲覧することもできると便利
ただし、スマホ利用者でもPCサイト側を閲覧したいユーザも居るでしょうから、強制的にスマホサイトへ転送するだけではなく、PCサイトを見たいユーザには転送しない仕組みも用意しておけると望ましいでしょう。その方法も上記の記事でご紹介しています。
link要素を使ったアノテーション・正規化の書き方
PC用サイトとスマホ用サイトの2つを用意した場合は、それぞれの関連を示す「アノテーション」と呼ばれる書き方を使っておきましょう。HTMLソースにこの記述を加えておくと、PC用とスマホ用とで同じ内容の2ページが別々に検索サイトに登録されてしまうのを防げます。■PC版ページから、モバイル版ページの存在を示す書き方
例えば、PC用ページのHTML内（head要素内）に以下のように記述しておくと、「このページのモバイル版」の場所を示すことができます。
<link rel="alternate" media="only screen and (max-width: 640px)" href="https://mobile.example.com/page1.html" />上記の場合は、
- ref属性値： 現在表示しているWebページの別バージョン(alternate)として、
- media属性値： 画面の横幅が640px以下向けのページが、
- href属性値： https://mobile.example.com/page1.html に用意されている
■モバイル版ページから、オリジナル版（PC版）ページの存在を示す書き方
また、上記のように記述した場合は、モバイル用WebページのHTML内（head要素内）には以下のように記述します。
<link rel="canonical" href="https://www.example.com/page1.html" />上記の場合は、
- rel属性値：現在表示しているページのオリジナル版(canonical)は、
- href属性値：https://www.example.com/page1.html ページである
※これらの記述には、必ず「今表示されているページに対応するページのURL」を指定します。面倒だからとトップページのURLを書いてはいけません。PCサイト内とスマホサイト内の各ページは、1対1で対応するように作る必要があります。このアノテーションの書き方については、Google Developersサイト内の解説にも詳しい情報がありますのでご参照下さい。
スマホ用サイトを作る際の注意点
今回は、スマホやタブレットなどのモバイル端末に対応したWebサイトを作成する際の注意点などを簡単にご紹介いたしました。昨今のスマホ普及度から考えると、もはや小型のモバイル端末を無視してのWebサイト運営はできないと言っても過言ではないでしょう。ぜひ、スマホにも対応したWebサイトを作ってみて下さい。【関連記事】
