この記事の目的
今やビジネスにおいてコンピュータ・情報・通信などを中心とする「IT用語」に対する知識は欠かせません。
あまり馴染みがない各分野のIT用語を、なるべく専門用語を使わずに解説していきます。
この記事の対象読者
Web制作を始めたばかりの人。
自社のWebマーケティングを任された人。
専門用語についていろいろ知りたい人。
Webマーケティングを行なっているが、言葉の定義を再確認したい人。
など、Webに限らずDXに携わるすべての方に。
imgタグとは
imgタグとは「image」の略で、ブラウザ上で画像を表示する際に使用するHTMLタグです。本記事ではimgタグの基本的な使い方と、SEOを意識した使用法について解説します。
imgタグの基本的な使い方
imgタグはsrc属性で表示する画像ファイルを指定します。指定方法は相対パスまたは絶対パスでファイルの場所を記載します。なおsrc属性は必須属性です。
<img src=”画像のURI(相対パスor絶対パス)” alt=”画像の補足説明（代替テキスト）”>
上記の例を見るとsrc属性の後ろにalt属性があります。
alt属性はimgタグを使用する場合に、画像の補足説明として指定します。
画像が読み込まれないときに代替テキストとしてalt属性に記述したテキストが表示されるほか、自動音声読み上げにもalt属性のテキストが読み上げられます。
また検索エンジンが画像を認識する際には、alt属性のテキストを読み取り画像を認識します。
SEOを意識したimgタグの使い方のポイント
imgタグでサイズを指定する
画像の大きさを指定する場合は、imgタグに「width」属性と「height」属性を追加します。widthは幅、heightは高さを指定できます。
<img src=”画像.jpg” width=”150″ height=”100″>
画像の大きさはCSSでも調整可能ですが、imgタグ上でwidthとheightを明示的に指定することで、レイアウトシフトを防ぐことが出来ます。
レイアウトシフトとは、WEBサイトを閲覧中に画像などの要素が遅れて読み込まれ、レイアウトがずれる現象です。コンテンツを見ている最中にレイアウトがずれるので、ユーザーどこまで読んだかわからなくなったり、意図しないリンクのクリックなど、ユーザーの利便性の低下に繋がるため、Googleはレイアウトシフトをページエクスペリエンスの指標にしています。
widthとheightをimgタグで指定すれば、ブラウザが事前に画像のサイズを認識できるため、レイアウトシフトを防止可能です。
imgタグに画像の内容を説明したalt属性を記述する
検索エンジンは、imgタグのalt属性の説明文を読み取って画像をインデックスします。
alt属性にキーワードが含まれていれば、検索エンジンがキーワードと画像の関連性を認識しやすくなります。さらに画像検索では、キーワードと関連性の高いalt属性の画像が順番に表示されます。ちなみにalt属性は、日本語も使用可能です。
imgタグを使用する場合はalt属性とセットで運用するのが基本的な使い方です。
装飾目的の画像はalt属性を空にする
alt属性を使用する際に気をつけるべきポイントとして、装飾目的などの意味を持たない画像のalt属性は空します。意味を持たない画像において、alt属性の本来の役割である、「画像が読み込まれないとき」、「自動音声読み上げ」いずれの場合も不要となります。この場合、alt属性を省略するのではなく、以下のようにalt属性を空にしてください。
<img src=”画像のURI alt=””>
alt属性に空文字列を指定すると、「コンテンツの重要な要素ではない」ことを明示します。逆にalt属性を省略してしまうと、HTML5の仕様で、「コンテンツの重要な要素である」ことを示します。
画像リンクにはalt属性を指定する
画像をリンクとして使用する場合は、検索エンジンはalt属性のテキストをアンカーテキストのとして読み取り、リンク先ページを認識します。
できるだけファイルのサイズを削減する
画像のファイルサイズが大きいと、読み込みに時間がかかり、ページの表示速度が低下します。Googleはページの表示速度をSEOの指標にしているため、できるだけファイルサイズを落としたほうがSEOに効果的です。ファイルサイズと画質はトレードオフの関係ですが、不必要にファイルサイズの大きい画像は最適化したほうが良いでしょう。
PageSpeed Insightsを使うと、ファイルサイズ削減の余地がある画像を指摘してくれます。
CSSで画像を指定しない
CSSのbackgroundプロパティやcontentプロパティで指定した画像は、Googleにインデックス登録されません。したがって画像は基本的にはimgタグで設定し、CSSで設定する画像は背景や装飾目的の画像のみにします。
まとめ
imgタグのSEO対策では、alt属性の使い方が特に重要です。altタグには「音声読み上げ時に読まれて適切かどうか」、「検索エンジンに伝わるかどうか」を意識して設定すると良いと思います。
