Category
Archives
Cocotiie
Trial And Error!やってみよう!の精神でWeb制作をしています。初心者の方にも伝わるよう、心がけています。少しでも誰かの助けになれれば嬉しいです。宜しくお願い致します。

2006年:Web制作に関する覚書きブログをはじめる。

2018年:Cocotiie(ココッティー)として運営開始。
テーマをSWELLにしてリニューアルしましたSWELLについて

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

明示的に指定

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

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

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

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

INDEX

アスペクト比を使う

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

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

#content img {
  aspect-ratio: 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 {
  height: auto;
}

まとめ

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

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

よかったらシェアお願いします
  • URLをコピーしました!
  • URLをコピーしました!

コメント ※ハンドルネームでお願いします

コメントする

INDEX