画像にwidthとheightを書いてSEO対策をする

PageSpeed Insightで、「画像要素で幅と高さを明示的」「widthとheightが明示的に指定されていない」と叱られました。サイズを記載する事はSEOの観点から見ても重要だそうです。あれ？レスポンシブデザインでは書かなくても良いのでは？

ザックリ説明すると、下記の理由があるようです。

横と縦の値を書かないと、レイアウトシフトと言って、情報の読み込みと精査が終わるまで、画像のスペースの確保に迷っていまい、時間がかかる事、スペース確保とスペースの確定の誤差が出て、画面がガクガクとなる。表示スピードが落ちるのでSEOにも良くない。

では、どうすれば良いのでしょうか？ネット上にある、様々な情報を踏まえてご紹介します。

アスペクト比を使う

アスペクト比とは、横縦の比率の事です。こちらのサイトなら一発でイメージできると思います。

WordPressやWebデザインなど紹介 O…

アスペクト比計算ツール（縦横比/16:9/4:3/3:2/2:1/黄金比） | WordPressやWebデザインなど紹介 Ocadweb アスペクト比計算ツール（縦横比/16:9/4:3/3:2/2:1/黄金比）は、画像サイズを16:9や3:2、4:3、黄金比などアスペクト比を簡単に計算をしてくれるツール。写真サイズを入力す…

画像を３対２で表示する例です。比率は任意です。対象をimgにしてしまうと、ロゴも全てが対象になってしまうので、私の場合は#contentとしました。ご自身のソースコードを確認し、#contentの部分は書き換え又は削除して下さい。

#content img {
  aspect-ratio: auto 3 / 2;
  width: 100%;
}

アスペクト比を使用する際は、サイト構築前に比率をしっかり検討する必要がありますね。全てが同じ比率になるので、見た目は美くしいサイトになりると思いますが、ちょっとやりにくかもしれません。

html+CSSで解決

まず、htmlにwidth=”auto” や、height=”auto”といった、autoや%は使用できません。具体的な数字を書く必要があります。

CSSにautoは使用できるので、height: auto;とします。レスポンシブデザインなのに、サイズはどうすれば良いのでしょう？デスクトップ版のサイズで良い様です。

<img src="sample.jpg" width="1200" height="675" alt="サンプル画像">
と書いて、CSSを加える

img {
  width: 100%; /* or max-width: 100%; */
  height: auto;
}

まとめ

とりあえず、どちらの手法でも　PageSpeed Insightで、「画像要素で幅と高さを明示的」「widthとheightが明示的に指定されていない」と表示される事は無くなりました。

これから作るサイトは、面倒でも個々の画像にサイズを入れた方がデザインを維持しやすいかもしれません。既存のサイトはアスペクト比で大まかに調整する方が楽？？