SEOに良いレスポンシブデザインをまとめる。

スマートフォンに最適化されたサイト構築の推奨方法

Google ウェブマスター向け公式ブログ: Google がお勧めするスマートフォンに最適化されたウェブサイトの構築方法によると、レスポンシブ・デザインはSEOに良いことがわかる。

レスポンシブ・ウェブデザインを使用すると、次のような利点があります。
* PC 用のページとモバイル用のページを単一の（同一の） URL とすることができるため、ユーザーにとってはシェアやリンクが容易であり、Google のアルゴリズムにとってはコンテンツを適切にインデックスできるようになります。
* ユーザーエージェントの異なる Googlebot ごとにページをクロールする必要がないため Google がより効率的にコンテンツを発見することができます。

レスポンシブ自体はSEOに良い、レスポンシブルを実現するためにいくつかの方法がある。Googleの文章から引用する。

1. レスポンシブ・ウェブデザインを使用しているサイト、すなわち、すべてのデバイスに単一の URL で同じ HTML を提供し、CSSを使用してデバイスごとにデザインを変更するサイトです。こちらが Google の推奨する設定方法となります。
2. すべてのデバイスに対し単一の URL で、ユーザーエージェントに応じてデスクトップ用かモバイル用かなどを判断して動的に異なる HTML と CSS を提供するサイト。
3. モバイル用のサイトとデスクトップ用のサイトを別々に構築しているサイト。

その中でもGoogleが推奨する設定を今回は取り上げる。

CSSでデバイスごとにデザインを変更する

動画学習サイト、dotinstallから重要だと思ったことをまとめる。

http://dotinstall.com/lessons/responsive_html

基本的な考え方

以下の文章をcssに書くことで、読み込ませることができる。小さい順に読み込ませることで、無駄をなくす。

例：タブレットの場合

common style を読み込む

smartphone style を読み込む

tablet style を読み込む

smartphone, commonstyle を上書きしていくことで、適用される。

/*
 SmartPhone: 320px - 480px;
 Tablet: 480px - 768px;
 PC: 768px -;
*/

/* common style */
body {


}
...
...

/* SmartPhone Setting */
/* writing smartphone's style */

/* Tablet Setting*/
@media all and (min-width: 480px) {
  /* writing tablet's style. */
}

/* PC Setting*/
@media all and (min-width: 768px){
  /* writing pc's style. */
}

また、HTML上に以下の文章を書くこと。CSSreset と横幅をデバイスに合わせる。

<meta name="viewport" content="width=device-width, initial=1.0">
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">

後は単純に3種類のコードを書くだけ。

以上。

レスポンシブ・デザイン難しそうだなぁと思ったけど、予想より簡単だった。新しい技術を学ぶのって少し億劫だけど、やってみるとたのしい。

怖がらずにいろいろやってみよう。