1. ホーム > 
  2. Webサイト集客 > 
  3. SEO(検索エンジン最適化) > 
  4. Googleアルゴリズム > 
  5. スマホサイト作成方法別の検索エンジン最適化

スマホサイト作成方法別の検索エンジン最適化

スマホサイトの作成方法のパターンと、それぞれのメリット・デメリット、検索エンジンへの最適化方法をご紹介。スマホサイト作成は時間もコストもかかります。レスポンシブが常に正解なわけではありませんので注意しましょう。

  • 2015/9/23
  • 2013/5/12

スマートフォンサイトの作成を行う方法は3種類あります。

  • レスポンシブウェブデザインを使用する方法
    表示される画面の幅によってコンテンツの配置などが変わり、アクセスしたデバイスに最適化されて表示させる方法です。古いスマホでも問題なく表示させることが容易なので多くの機種で動作確認をする必要がないメリットがあります。
  • ビューポートとメディアクエリで、ページを表示しているデバイスの画面幅に応じたレイアウトを行います。
  • 別のURLでスマートフォン専用サイトを作成する方法
    スマホ専用のサイトをPC版のサイトとは別に作成、ユーザーエージェントなどを使い、ブラウザ側で表示を切り替える方法です。
  • 同じURLを使ってスマートフォン専用サイトを作成する方法
    別のURLで作成する方法と同様に、スマホ専用サイトを別に作成する方法です。表示の切り替えはサーバー側で行うのが一般的な方法です。

レスポンシブウェブデザインを使う方法以外は、ユーザーエージェントなどを使って、ユーザーがアクセスに使っているデバイスを振り分けます。

Googleはレスポンシブウェブデザインを推奨していますが、レスポンシブ以外の方法でも、検索エンジンはサポートしていますので、Webサイトの状況によって選択すれば問題はありません。

スマホサイト作成方法別のメリットとデメリット

検索エンジンに対してどう最適化するのかという観点から、それぞれのスマホサイト作成方法のメリットとデメリットをまとめました。

レスポンシブウェブデザイン

メリット

  • PC版サイトもスマホ版サイトも1つのソースコードで実現しますので、何か修正をしたい場合でも1枚のファイルを修正すればよいので、メンテナンス性に優れています。
  • アクセスしたデバイスがスマホなのかPCなのかに関係なくページを表示しますので、検索エンジンに対しても特別な設定を行う必要がありません。

デメリット

  • 1つのソースコードですべてのデバイスへの対応を行いますので、各デバイスごとに表示させる内容を細かく制御するのが難しくなります。
  • すでにレスポンシブウェブデザイン以外の方法でスマホサイトを運営している場合、大掛かりなリニューアル時でもない限り、実現するための時間やコストがかなり必要です。

スマホ専用サイトを別に作成する方法

メリット

  • PC版サイトとスマホ版は別々のHTMLソースになりますので、スマホ版のみに表示させる情報を設定するといった細かい制御が行いやすくなります。
  • スマホサイトはPCでの表示を想定する事なく、デバイスごとの表示最適化が行えます。

デメリット

  • PC版とスマホ版で同じ内容のページが作成されてしまいますので、検索エンジンに対してスマホ版のサイトがあるという事を通知しておく設定が必要です。
    設定方法を間違えてしまうと重複コンテンツが発生してしまい、ページの評価に影響してしまう可能性があります。
  • PC版サイト、スマホ版サイトは別々のHTMLソースになりますので、グローバルメニューなど共通部分の修正は両方のHTMLソースで行う必要があるなど、Webサイトの修正の手間が二重にかかります。

スマホサイトを検索エンジンに最適化する方法

そのページがスマホ用のページなのかどうか、検索エンジンが正しく判別するためには、指定された方法で検索エンジンに対するシグナルを送る必要があります。

PC版とスマホ版では「まったく同じコンテンツを掲載している」という状態なので、何も設定をせずにいるとPC版とスマホ版が別々にインデックスされ、重複コンテンツとして扱われてしまいます。

ここでご紹介する例では、以下のようなURLになっていると仮定してご説明します。

  • PC版ページ
    http://samplesite.com/sample.html
  • スマホ版ページ
    http://samplesite.com/sp/sample.html

PCとは別のURLでスマホサイトを公開する場合

PC版のページの<head>セクション内に、以下のコードを記述します。
これは「http://samplesite.com/sp/sample.htmlに、このページのスマホ版ページがあります」という事をGoogleに伝えるためのタグです。

<link rel="alternate" media="only screen and (max-width: 640px)" href="http://samplesite.com/sp/sample.html" />

次にスマホサイトの同一ページの<head>セクション内に、以下のコードを記述します。

これは「このページはhttp://samplesite.com/sample.htmlと同じ内容のページです」という事を伝えています。

<link rel="canonical" href="http://samplesite.com/sample.html" />

またスマホでPC版ページにアクセスした場合、スマホ版ページへリダイレクトする設定を行っておきましょう。

リダイレクトを設定するときには、必ず同じコンテンツを掲載しているページへリダイレクトさせるようにしてください。スマホでのアクセスをすべてTOPページにリダイレクトさせているWebサイトがありますが、これは間違いです。

このような「間違ったリダイレクト」は、モバイルフレンドリーアルゴリズムで低い評価を受けてしまい、スマホでの検索結果の順位が下がってしまう可能性があります。

モバイルフレンドリーアルゴリズムについては、モバイルフレンドリーアップデートとその対策のページをご覧ください。

PCと同じURLでスマホサイトを公開する場合

PCサイトとスマホサイトを同じURLで公開する場合には、サーバー側でアクセスしたデバイスに応じて適切なページを返すよう設定します。

Googleから見るとスマホサイトが用意されているのかどうかが分かりませんので、アクセスしたデバイスによってコンテンツが変化するという事を伝えるために、HTTP varyレスポンスヘッダをサーバーから返すように設定を行います。

HTTP varyレスポンスヘッダを設定しておくことで、キャッシュと呼ばれる一時的にページのコピーを保管しておく場所に適切なページの内容を保存しておくことができるようになります。

そもそも「キャッシュ」とは、元のサーバーにアクセスしなくてもすぐにページを表示できるようにする仕組みです。
仮にPCサイトがキャッシュに保存されている時に、スマホからアクセスすると、キャッシュされているPCサイトがスマホに対して返されてしまう可能性があります。

そういったことを防ぐために、HTTP varyレスポンスヘッダの設定をしておく必要があります。

HTTP varyレスポンスヘッダの追加はテクニカルな内容ですので、サーバーの管理者やプログラマの方に相談をして対応をしましょう。

スマホサイト作成時は読みやすさ・使いやすさに注意

パソコンでWebサイトを作成している時は気にならなくても、実際にスマホでページを見てみると、フォントサイズが小さすぎて読みにくかったり、ボタン同士がくっつきすぎてタップしにくかったりといった問題に気づくことがあります。

Googleのスマホサイト作成のガイドラインでは、フォントサイズは16ピクセルを基本とし、タップするボタンなどの周囲は最低でも32ピクセル以上離すことを推奨しています。

また、タップすることが多いボタンなどは、48ピクセル以上のサイズを推奨しています。

あくまでも、ユーザーの使いやすさという観点からのガイドラインですので、厳密に守らないと検索順位が下がるといったようなことはありませんが、ユーザーにストレスをかけないように、スマホサイトに表示する各要素は、気持ち大きめのサイズで作成しておくと良いでしょう。

おすすめなスマホサイトの作成方法

これからスマホサイトを作成しようと考えている方には、別のURLでスマホサイトを公開する方法をおすすめしています。

PCサイトとスマホサイトで別々のHTMLを作成する必要はありますが、一度完成したWebサイトは大幅なリニューアルでもしない限り、そうそうメニューの修正などはしないはずnなので、メンテナンス性はそれほど問題にならないと思っています。

それよりも、PCサイトとスマホサイトでコンテンツの表示方法を変えたりするのが楽ですので、デメリットよりもメリットの方が大きいと思っています。
適切な設定を行えば検索エンジン対策もまったく問題はありません。

また、必要なコストも最低限で済むことも大きなメリットです。
レスポンシブウェブデザインで作成した場合、PCサイトもリニューアルを行わなければならず、サイト制作コストが高くなって制作にかかる時間も長くなってしまうのです。

コストと時間、それに見合った成果が期待できるかを考慮に入れて、スマホサイトの作成方法を判断するようにしましょう。

Webデザイン・プログラムスキルを身につけたい方におすすめしたいスクール

私もWebスキルを身につけるためにスクールに通いましたが、正直言って「趣味の講座レベルのスクール」が多く、実践的なスキルを身につける事ができるスクールは多くありません。

ただ全くの未経験ではWebを仕事にする事が難しいのも事実。そこでWebの実践的なスキルを身につけられるスクールをご紹介します。

スクールの価格は安くありませんので、まずは無料体験レッスンや無料カウンセリングで体験してみて、良さそうだなと思ったら本格的に取り組む方法をおすすめします。

Webスク(6か月のガッチリ型)

半年間、オンラインとオフラインのカリキュラムで「即戦力」と呼ばれるような人材になるためのスクール。業界の企業を見学するオフィスツアーやIT企業の人事担当との交流会など、現実的なキャリア形成のイメージを作れる機会があるのが良いです。

無料体験レッスンでは、キャリア形成の相談もできます。

WebCamp(1か月の集中型)

こちらは1ヶ月の短期集中型。と言っても、最初のカウンセリングを通してカリキュラムは個人ごとのオーダーメイドなので、自分の都合で学べるのが良いです。

このご時世、直接Web制作に携わらない部署の人もWebに関する知識は必要なので、社会人の方の受講も多いです。

CodeCamp(2〜6か月のカスタマイズ型)

現役エンジニア・デザイナーからマンツーマン指導が受けられるスクールです。内容的には他のスクールにひけはとらないにもかかわらず、オンラインのみなので価格が安いのが良いです。

新卒などの社内研修でも利用されているので、社員のスキルギャップに悩んでいる方にも良いかもしれません。

「役にたった」と思ったらシェアお願いします