img（画像）タグとは・・・「HTML」で記述できるタグの１つで、ページ上で画像を表示したい時に利用します。
「HTML」とは、当ページのように、Webページを作成するために用いられる言語（技術）になります。
インターネット上に公開されているWebサイト（ページ）は、この「HTML」で作成されているのがほとんどです。
また、“ < ” と “ > ” で記述する「タグ」と呼ばれる特殊な記号で、記述されているのが特徴です。
「img（画像）タグ」とは、この「タグ」の一種で下記のように記述することができます。
上記を実行（ブラウザ表示）すると、下図のように画像が表示されます。
このように、Webページで画像を表示させるためのタグが、「img（画像）タグ」なのです。
今回の記事では、この「img（画像）タグ」の様々な使い方や、利用の際の注意点について、順に解説していきます。
※利用の際の注意点に関しては、主に「SEO」を考慮したものになります（SEOについては、こちらで解説しています→SEO対策とは）
以下、目次になります。
- HTMLの「img（画像）タグ」の様々な使い方
- 「img（画像）タグ」を利用する際の注意点
HTMLの「img（画像）タグ」の様々な使い方
当章では、「img（画像）タグ」の様々な使い方を解説していきます。
以下に、その項目を４つに分けてまとめましたので、順に解説していきます。
-
【画像の縦・横サイズの指定：「width・height属性」】
当項目は、画像の表示サイズの指定方法です。
サイズの単位としては、「ピクセル単位」又は「ブラウザの画面サイズに対する割合（％）」があります。
以下に、記述例を示します。
<img src=”img-ex-1.png” width=300 height=150 /><img src=”img-ex-1.png” width=20% height=30% />
上記の一つ目がピクセル単位で、二つ目がパーセント単位になっています。
なので、二つ目に関しては、ブラウザのサイズを変更したら画像サイズも変更されます。【以下、上記の表示例】
・「ピクセル単位」
・「ブラウザサイズに対する割合（％単位）」
-
【画像の説明文設定：「alt属性」】
当項目は、画像の説明文を設定する方法になります。
用途としては、ブラウザの設定等で画像が表示されない場合、画像の代わりにこの「説明文」が表示されます。
以下に、記述例を示します。
<img src=”img-ex-1.png” alt=”imgタグの表示例” />上記は、もし画像が表示されなかった場合、画像の代わりに表示されるのが ”imgタグの表示例” という文字列が表示されます（以下、例）
-
【枠線の設定：「border属性」】
当項目は、画像に枠線を表示させる設定方法です。
枠線の太さは、ピクセル単位で指定できます。
以下に、記述例を示します。
<img src=”img-ex-1.png” border=10 />上記を表示した場合は、以下になります。
-
【マウスオーバー時の表示テキスト：「title属性」】
当項目は、マウスオーバー時の表示テキストの指定方法です。
マウスオーバー時とは、マウスを画像の上にのせた時です。
この時、画像に関する説明等のテキストを表示させることが目的となります。以下に、記述例を示します。
<img src=”img-ex-1.png” title=”img（画像）タグの表示例” />上記は、マウスを画像の上にのせた時に、”img（画像）タグの表示例” と表示されます（以下）
以上です。
「img（画像）タグ」を利用するうえでの注意点
当章では、主に「SEO」の観点で、「img（画像）タグ」を利用する際の注意点をまとめています。
SEO対策をするさいに、画像の扱いには注意が必要です。
なぜなら、検索エンジンは、画像情報を「ただの点の集まり」としか認識しないのです。
なので、検索エンジンに対して「これは、●●●に関しての画像ですよ」という事を明確に指定しなければなりません。
そこで「SEO」的に、画像の扱いに関して注意すべき４つのポイントを順に解説していきます。
-
【alt属性に画像の情報を設定する】
上述している通り、alt属性には、画像の説明文を定義します。
これで、画像が表示されない場合の対策になるのですが、実はもう一つ重要なメリットがあります。それは、検索エンジンに「この画像は、●●●の画像である」と認識させる事ができるのです。
要は、alt属性に定義している文字列を参考にして、検索エンジンは画像情報を認識するのです。
例えば、以下の記述例
<img src=”img-ex-1.png” alt=”img(画像)タグ 扱い方の注意点” />検索エンジンは、上記を「img(画像)タグ 扱い方の注意点」に関する画像だと認識するのです。
SEO的には、alt属性に使用されているキーワードと、記事タイトル・本文の内容がマッチ・関連することも重要ですので、注意するようにしましょう（SEOにおいて、キーワードの扱い方についてはこちらで解説しています→【SEOに効果的なキーワード選定の５つのポイント】）
さらに、「alt属性」にキーワードを指定しておくと、そのキーワードで「Google画像検索」からのアクセスも期待できるようになります。
-
【ファイル名を、画像にマッチした意味のある名前にする】
検索エンジンは、alt属性だけじゃなく、ファイル名からも「その画像が、何の画像なのか？」を決める際の参考情報としています。
なので、ファイル名が全く意味のない数字の羅列等で定義されている場合は、「何の画像なのか」が、全く特定できません。
ダメな例・・・12345.jpgですので、ファイル名を決める際は、ちゃんと意味のある名前を付けるようにしましょう。
良い例・・・seo.jpg -
【単なる文字列を、画像で表現しない】
上図のように単に文字列だけの画像でも、ユーザビリティの向上を考えて、利用する場合は往々にしてあるでしょう。
特に、サイトタイトルだったり、グローバルメニューに表示させる文字列は、画像を用いている場合が多いです。
ですが、検索エンジン対策を考慮した場合は、このように「単に文字列のみの画像利用」は推奨されません。
なぜなら、上述している通り、検索エンジンは画像を「点の集まり」としか認識できず、画像に表記されている文字列を、そのまま認識することができないからです。
なので、なるべくなら、文字列を画像で表現することは控えてください。
特に、サイトタイトルやグローバルメニューは、「SEO」的にも非常に重要な箇所ですので注意してください。
-
【img（画像）リンクを使用する場合は、画像の「alt属性」を適切に設定する】
以降、解説に入る前に、「aタグ」や「アンカーテキスト」について理解していない方は、下記記事を見ておいてください。
・aタグ（アンカータグ）とは？aタグを使ってリンクを貼る手順をまとめてみた
・アンカーテキストとは？アンカーテキストを最適化する必要性と手順をまとめてみた下記のように、aタグの中に画像を利用する場合、検索エンジンは基本的に「alt属性」の値をアンカーテキストとして扱います。
<a href=”https://viral-community.com/seo.html” >
<img src=”img-ex-1.png” alt=”SEO対策” />
</a>上記であれば、検索エンジンから見たアンカーテキストは、「SEO対策」となります。
検索エンジン（クローラー）は、アンカーテキストの内容を「リンク先ページの内容」と解釈するので、アンカーテキストの内容は、（リンク先ページの内容を）正確に定義しておく必要があります（特に内部リンクです。外部リンクについては、基本的に「他人のサイト」へのリンクなので、特に注意する必要はないでしょう）
※クローラーについては、こちらで解説しています→クローラーとは？「Googlebot」にクローリングさせたい場合とさせたくない場合の対処法
SEO対策をする上で、ページ情報を正しく検索エンジンに伝えることは必要不可欠なので、もしaタグ内に画像を利用する場合は、必ずalt属性に正しい値を指定してください。
以上です。
まとめ
今回の記事では、「img（画像）タグ」の使い方と、「SEO」を考慮した場合に、注意すべき点について解説してきました。
サイトの運営者で、サイトのアクセス数を向上させていきたい場合は、「SEO」についての理解は必須です。
下記では、サイトの運営者が理解しておくべき「SEOの項目」について、網羅的にまとめていますので、ぜひ確認しておいてください。