HTML&CSS SEO

imgタグとbackground-imgについて考える

皆さんは画像を配置するときにimgタグとbackground-imgどちらを使用しますか?
似たような要素ですが、どちらを利用すればよいか考えたいと思います。

SEO的に考える

まず、SEO的にimgタグとbackground-imgで違いがあるのかということですが、これはやはり違いがあるようです。

<img>タグ

htmlに記述し文書構造を表し、画像がコンテンツ内で意味を持つものとして定義できます。
また、altタグに代替のテキストを指定できます。

background-img

それに対しbackground-imgはcssに記載。cssはあくまでもhtmlのデザインを整えるもの。飾りつけになります。

googleのインデックスにも登録されませんので、SEO的にはimgタグを使用した方が有利なようです。

どのように使い分けるのが良いのか?

SEO的にはimgタグを使用した方が良いことが分かりましたが、ではimgタグとbackground-imgをどのように使い分けるのか。

私が以前ネットで調べてなるほどと思ったのが、「デザインの飾りつけの画像、またはalt属性に記入する言葉が思いつかないものはbackground-imgを使う。」というものでした。

ワンコ
ワンコ

こういったカードの画像などはもちろんimgタグです。

たとえば↑のようなタイトルがあったとしたら。(簡易的なものなので、画像じゃなくてborderで実装できそうですが。。。)
右と左の丸をつけたこの部分はただの飾りつけなので、background-imgを使う。
imgタグで実装した場合、alt属性にも何を入れていいんだか分からないですよね。

ということで、imgタグとbackground-imgの使い分けは、文書の中で必要な画像か、飾りつけか。
で決めたら良さそうです。

メインビジュアルの画像について

上の項でさんざんbackground-imgは飾りの部分と書きましたが、メインビジュアル(ヒーロー画像)の部分についてはその限りではないようです。

何社かのWeb制作会社様の制作実績を10サイトくらい確認したところメインビジュアルについては、
img:background-img 、 4:6 くらいの比率でbackground-imgを使用しているところが多かったように思います。

これはなぜなのか、個人的に考えてみました。

・メインビジュアル部分は、コーディングが複雑になりがちなので、スマホとPCで画像の置き換えが簡単なbackground-img を使用している。
・メインタイトルやその他のテキスト画像など、様々な要素があり、そこまでSEO意識しなくても大丈夫と思い背景として実装している。

これはあくまでも私が思ったことなので、別の理由があるかもしれません。
ただ、個人的にもメインビジュアルの部分はbackground-imgで実装しています。
理由はやはり、実装が楽だからです。
imgタグでやろうとすると、position: absoluteやpictureタグなど使用しないといけないものが増えますので、やはりbackground-imgが楽ですね。

まとめ

以上 imgタグとbackground-imgについて考えるでした。
二つの違いを意識してコーディングをしていきましょう。

-HTML&CSS, SEO
-, , ,