htmlでimgタグのaltやseoについてまとめ

2019年6月22日2019年7月16日

htmlで画像を表示するimgタグはシンプルなのですが、細かいところをみると色々知っておかないといけないことがあります。

この記事でコーディングに必要なimgタグの知識についてまとめました。

imgタグのaltを埋めるルール

imgタグにはalt属性を指定できます。画像を表す内容をaltに埋め込むのですが、僕は以下のルールでalt属性を埋め込んでいます。

• 画像に表示されているテキストを入れる
• 画像の上にhタグがあって、画像に文字がないならそのhタグの中身を入れる
• アイコンや模様など、どうしてもaltを入れれない記号の様な画像は、altを省略（基本はcssのbackground-imageとかでやるようにしている）

もし、altに対してのコーディング規約があるならそれに従いますが、それがなければaltタグは上記の様に自分は設定しています。

また、alt属性は音声読み上げブラウザだとaltの中身がそのまま読み上げられるため、それのためのにもalt属性は必要です。

altとseoの関係について

Google公式はaltについて以下のようにアナウンスしています。

この属性を使用するのは、ユーザーがスクリーン リーダーのようなサポート技術を使ってサイトを閲覧する場合に、alt 属性の内容が画像についての情報を提供するためです。
もう 1 つの理由は、画像をリンクとして使用する場合、その画像の alt テキストが、テキストリンクのアンカー テキストと同様に扱われることです。ただし、テキストリンクで同じ目的を果たせる場合は、サイトのナビゲーションに画像を使いすぎることはおすすめしません。最後に、画像のファイル名と alt テキストを最適化すると、Google 画像検索のような画像検索プロジェクトが画像を適切に理解しやすくなります。

検索エンジン最適化（SEO）スターター ガイド

これをまとめると、

• alt属性は画像の内容についての情報を設定すべし
• aタグの中にimgタグがあった場合は、altがアンカーテキストになるためSEO的に重要

特にaltがアンカーテキストになるのはSEO的に重要度が高いため、画像をリンクにする場合は必ずaltタグを設定する必要があります。

imgタグの遅延読み込み

場合によってimgタグを遅延読み込みしなければならない場合があります。その時は以下の2種類の方法で対応します。

• シンプルに遅延読み込みだけしたい時：decoding="async"を指定する
• ローディングモジュールなどがあり、遅延読み込みを操作したい時：javascriptによる遅延読み込みモジュールを実装する

僕も最近知ったのですが、decoding="async"というものをimgタグに設定できるらしく、これを使えばOK。

<img decoding="async" src="画像URL">

簡単ですね。

が、アニメーションの都合で遅延読み込みを制御したい時は遅延読み込み用のモジュールを作る必要があります。

僕は、だいたいecho.jsで対応しています。バニラjsで動作してくれて、ソースファイルも軽量なのでいい感じです。

decoding属性かecho.jsのだいたいこのどちらかで対応することが多いです。（場合によっては遅延読み込みのモジュール作ることも）

imgタグのPCとSPの切り替え

imgタグにはブラウザサイズで読み込み画像を変えることができるsrcsetがあるのですが、これはIE11に対応していないので今使うのに現実的じゃないかなと〜。

参考：Can I Use

遅延読み込みとかも挙動がどうなるか怪しいので、srcsetでは基本実装しないようにしています。

画像を分けるなら、PCとSPでdisplay:noneをそれぞれに設定するのが現実的かなと思っています。

まとめ

僕がコーディングするときのimgタグ周りの内容をまとめました。htmlを納品する際はこのページの内容に準拠してimgタグを設定します。