読者です 読者をやめる 読者になる 読者になる

器用貧乏です。はげたかです。日記です。

どうも、はげたかです。今まで器用貧乏に生きてきました。ジェネラリスト・フルスタックエンジニアを目指しています。

今日の一言:カテゴリ分けをしっかりしたらPVあがるかな?

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

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

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

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

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

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

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

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

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

基本的な考え方

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

例:タブレットの場合

  1. common style を読み込む
  2. smartphone style を読み込む
  3. 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種類のコードを書くだけ。

以上。

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

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

ぐだぐだの文章ですみません。。。

メモ

コンテンツを消したいときは、

display: none;

でおk.jqueryとかで消す必要はない。

レスポンシブWebデザイン入門 ~マルチデバイス時代のWebデザイン手法~

レスポンシブWebデザイン入門 ~マルチデバイス時代のWebデザイン手法~