30日間無料!PDF出力も可能なオフィスソフト!
オフィスソフト「Kingsoft Office 2010」

2016年12月03日

ページがモバイル フレンドリーではありません。(レスポンシブ ウェブ デザインにするために )

しばらくほったらかしにしていた自分のサイトを検索したところ、検索エンジン上で「ページがモバイル フレンドリーではありません。」と表示された。
原因を調べたところ「レスポンシブ ウェブ デザインにしなければならない。」ということがわかった・
要は、ユーザーのデバイス(パソコン、タブレット、モバイル、非視覚的ブラウザ)に関係なく、同じ URL で同じ HTML コードを配信しても、画面サイズに応じて、つまり「レスポンシブ」にレンダリングを変えることができるサイトにしろということらしい。






レスポンシブ ウェブ デザインにするためには



その1

meta name="viewport" を使用する

ページがすべてのデバイスに対応していることをブラウザに知らせるには、ドキュメントのヘッダーに次のメタタグを追加します。

<metaname="viewport"content="width=device-width, initial-scale=1.0">



その2

また、レスポンシブな画像には、<picture> 要素を指定します。

レスポンシブ デザインにする理由

レスポンシブ ウェブ デザインをおすすめする理由は以下のとおりです。

  • URL が 1 つなので、ユーザーによるコンテンツの共有やリンクが簡単になります。
  • 対応するパソコン用ページやモバイル用ページが存在することを Google のアルゴリズムに伝える必要がなく、ページへのインデックス プロパティの割り当てが正確に行われます。
  • 同じコンテンツのページをいくつも維持管理する手間が省けます。
  • モバイルサイトでよくある誤りに陥る可能性を抑えることができます。
  • ユーザーをデバイスごとに最適化したページにリダイレクトする必要がないため、読み込み時間を短縮できます。ユーザー エージェントに基づくリダイレクトはエラーが発生しやすく、ユーザー エクスペリエンスを損なうおそれがあります(詳しくは、ユーザー エージェントを正しく検出するをご覧ください)。
  • Googlebot がサイトをクロールするために必要なリソースを節約できます。同じコンテンツのページが複数存在すると、別々の Googlebot ユーザー エージェントが複数回クロールしてすべてのバージョンを取得する必要があります。一方、レスポンシブ ウェブ デザインの場合は、1 つの Googlebot ユーザー エージェントがページを一度クロールするだけで済みます。Google によるクロールの効率が上がると、サイト内のより多くのコンテンツがインデックスに登録され、適切な間隔で更新されることにつながります。



posted by tsbs at 20:12| Comment(0) | TrackBack(0) | web メンテナンス | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス: [必須入力]

コメント: [必須入力]

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック