altタグ(alt属性)

alt属性（altタグ）とは？

alt属性（altタグ）とは、ウェブサイト上にある画像についての情報を記述するHTMLタグのimg要素の属性の1つです。alt属性の読み方は「オルト属性」と読みます。

alt属性（altタグ）は、初心者向けにテキストブラウザを利用しているユーザーや、ホームページに設定した画像・写真が表示されない環境にあるユーザーのためにHTMLタグのimg要素に画像内容を説明する「画像の代わりとなるテキスト情報」を設定します。「画像の代わりとなるテキスト」の事を「代替テキスト」と呼びます。

検索エンジンは「画像がある」ことは分かりますが、「その画像は何の画像なのか？」は判断がつきません。
その為、大事な画像（img要素）にはalt属性（altタグ）を設定し適切なaltテキストで知らせる必要があります。

alt属性（altタグ）の書き方

alt属性（altタグ）は、HTMLタグのimg要素（画像）の説明文です。
altの記述する場所は、<img>要素内に記述します。以下のhtmlソース例をご確認ください。

htmlソース例

alt属性（altタグ）の使用例

上記画像の赤枠「SEO Pack」部分の画像に対して、alt属性（altタグ）を設定しています。
altに設定する文字は、画像の説明文を入れますので、長々と記述してはいけません。簡潔な説明文を追加するようにしましょう。

alt属性（altタグ）の設定例

さて、webサイトを制作する際に、具体的に画像に対してどのようにalt属性値を設定すると良いか設定例をご紹介します。
次の画像は、「SEO Packの内部修正サービスお申込み」を表す画像の内容となっています。alt属性は、画像が確認出来ない場合などに、テキスト情報で画像の意味を伝える必要がある為、altに設定するテキストの内容は「SEO Packの内部修正サービスお申込み」などが適切です。

また、具体的に画像を説明するalt属性を設定する際に、「赤色のタイトなロングスカート」など簡潔に画像を説明する事ができるのなら色や特徴も含めたaltテキストにすると良いでしょう。

なお、画像にリンクが設定されている場合、設定したalt属性は「アンカーテキスト」の役割も果たします。

Googleの画像検索に表示される可能性も

突然ですが、webページ中で使用している画像は、Googleの画像検索で表示される可能性があります。

Googleの画像検索において画像を表示させ、更に、サイトへ流入を獲得するために重要なポイントの1つが「画像にalt属性を設定する」事となります。

画像SEOは、画像の内容をGoogleに理解してもらう事から始まりますが、画像で検索する検索ユーザーも視野に対策を進める事でSEO効果が期待できます。

alt属性（altタグ）とtitle属性の違い

altは画像の代替テキストと説明してきましたが、alt同様に画像に設定する事ができる属性としてtitle属性があります。title属性は、補足的な情報を設定する為の属性ですが、マウスカーソルを合わせると一般的な場合、吹き出し（ツールチップ）で表示されます。このような補足情報を設定するtitle属性は、画像の他、リンクなどにも設定する事ができます。
さて、alt属性（altタグ）とtitle属性がありますが、画像にはどちらを設定すべきでしょうか。先に説明したようにtitle属性は「補足的な情報」を設定するのに対し、alt属性（altタグ）は「画像の内容を説明するもの」となります。したがって、画像の内容を説明する代替テキストには「alt」を設定しましょう。

alt属性とSEO対策

よく見かける誤ったalt属性の利用方法が「alt属性のテキストに、特定のキーワードを過剰に詰め込む事」ですが、これはSEOスパムになる可能性があります。

以前、キーワード出現率がSEO対策で重要視された際に、alt属性にSEOキーワードを詰め込む手法が流行りましたが、現在ではペナルティになる危険性がありますので、心あたりのある方は早急に見直しすることをお勧めします。

<alt>は「画像が表示されない時の代わりのテキスト」ですので、一般の検索ユーザーには通常見えていない部分です。
検索ユーザーに見えない部分にテキストを詰め込む行為（隠しテキスト）は、サイトの評価を下げる可能性がありますので注意しましょう。SEO Packでは、alt以外にも、SEO PackのSEO事例や実験で得られたノウハウをチェックシートにして公開しております。以下は、SEO Packユーザーに提供しているSEOチェックシートの一部です。

重要なテキストは、画像にしない

HTMLタグのimg要素にaltを設定していても、検索するユーザーの環境によっては確認できない場合があります。
サイトにとって重要なテキストコンテンツは、画像にせずテキスト（HTML）で、記述しましょう。

altは空にしても良い

ここまで重要な画像にはaltを設定する事を解説してきましたが、「altは空にしても良い」ケースがあります。
それは装飾用の画像などが該当します。

上記のようにalt属性の記載の中身だけ空にしておくと、スクリーンリーダーではファイル名も読み飛ばされるので装飾用画像の場合は空にしておくと親切です。

文字を画像化する場合は「文字色と背景色のコントラスト比に配慮」

また、Webアクセシビリティの観点から言うと、文字色と背景色の「コントラスト比」を意識する事が期待されています。色の区別や文字の判別が出来ない可能性のある方に配慮すると、少なくとも4.5:1のコントラスト比があることが推奨されているようです。

WebAIMなど、コントラストを確認できる無料ツールもいくつかあるので画像にalt属性を設定する事の他、コントラスト比にも注意してみましょう。

altは、ユーザーのために設定しよう

altは、検索ユーザーに役に立つ情報を検索エンジンが提供するための手がかりや、画像を確認できないユーザーに役立つ情報を提供するSEOの重要な要素の1つです。
SEO対策やwebマーケティングのためだけではなく画像を見ることの出来ないユーザーのために、HTMLタグのimg要素にalt属性を適切に設定しましょう。

SEO Pack 費用・料金とご契約期間

必要な対策を必要な分だけ。SEO Packは余計なメニューが無いから高品質なSEO対策を低価格でご提供しています。