画像のないimgタグのSEO対策

画像のない<img>のSEO対策です。

問題

画像のない<img>を配置して、alt属性がないと警告を受ける。画像には、alt属性を付けましょう…。

だが、alt属性をを付けるとalt属性の文字列が表示されてしまう。alt属性の文字列が画面上に表示されるのは困る。

※<img>は、background-imageを指定して背景画像を表示している

解決策

<img>ではなく、<div>を指定する。背景画像は、background-imageで指定する。ラベルを指定する場合は、aria-label属性で指定する。

<div aria-label='thumbnail' style='background-image:url(data:image/png;base64, ... );'></div>