alt属性（altタグ）とは、Webページ上に設置する画像に説明文を付与するためのHTMLタグです。
作成したコンテンツを華やかにしてくれる画像ですが、altタグを設置していないページをちらほら目にします。
検索エンジンのクローラーは、コンテンツ内に画像があることは認識できても、どのような画像なのかを理解するのはあまり得意ではないと言われています。そのため、altタグを設置することで、どのような画像であるかをクローラーに伝え、画像に関する情報をインデックスしてもらえます。また、altタグを設置しておくと、Webブラウザで画像を表示できない場合、代替テキストが表示されます。
SEO対策にもなるaltタグの役割や設定方法、抑えておくべき注意点をご紹介します。
目次
alt属性（altタグ）とは
alt属性（altタグ）とは、Webページ内に画像を表示させる際、その画像に関する説明をテキストで付与させられる属性タグです。altタグで指定したテキストは、使っているブラウザやインターネット環境によって画像が表示できない場合、代替テキストとして表示されます。
検索エンジンのクローラーは、imgタグから「画像」であることは認識できるものの、どのような画像かを理解するのは得意ではありません。しかし、altタグを設定しておけば、クローラーに画像の内容をテキストで伝えることができます。
title属性やtitleタグとの違い
HTMLでページ内に画像を挿入する際は、imgタグを使用します。imgタグの中にはalt属性タグとtitle属性タグ、両方を利用できるのですが、この2つは何が違うのでしょうか？
alt属性は上記でもお伝えしましたが、「画像が表示されない場合の代替テキストになる、画像に関する説明文」として判別されます。一方、title属性は画像以外にも使える属性で、「情報を補足する」ために使われます。
例えば、<img src="画像URL" alt="綺麗な山" title="ある日の山の風景">というHTMLタグをページ内に設置したとします。
ブラウザが問題なく画像を表示できている状態で画像にカーソルを合わせると、titleタグに入力した「ある日の山の風景」というコメントが表示されます。画像が表示されている状態だと、altタグで入力した代替テキストは表示されません。一方で、ブラウザやインターネット環境によって画像が表示されない場合には、altタグで指定したテキストが表示されます。
titleタグにはヘッダー内に使う「ページタイトル（<head>～</head>）」のためのものと、上記に紹介した「各要素の補足情報を表示させるもの（要素内にtitle=""として記述）」の2つがあるので、使い方を間違えないようにしましょう。
alt属性の役割
画像にalt属性を与えることで得られる、2つの機能を詳しく説明します。
画像が表示されない場合の代替テキスト
ページ内の画像にaltタグを設置しておけば、使用しているブラウザやインターネット環境の不具合で画像が表示されない場合に、指定した代替テキストが表示されます。
そもそも、ページ内に画像を設置するのは、ユーザーがコンテンツを読む際に、想像しやすく情報を理解してもらいやすくするためです。しかし、altタグを設定していない状態で、画像が表示されなければ、そこに何があるのかユーザーには伝わりません。
代替テキストとなるaltタグを設置することで、ユーザーにどのような画像を見てもらいたかったか知らせることができます。
検索エンジンにどのような画像か理解してもらう
ページ内に画像を設置する場合、検索エンジンのクローラーはimgタグから画像があることは伝わるものの、altタグを設定していなければ、「どのような画像」なのか分かりません。
altタグを設置することで、クローラーは画像が何に関するものなのか、テキストから読み取れます。検索エンジンのデータベースに、より正しくページ情報をインデックスしてもらうためにもaltタグを設置しましょう。
SEO対策におけるaltタグ（属性）の役割
altタグを設置すると、画像が表示されない時に代わりの説明文が表示されるだけでなく、クローラーが画像の内容に関するテキストを取得できます。
さらに、altタグにキーワードが含まれていれば、画像検索の際に上位表示される可能性もあります。
altタグを設置することで、ユーザーやクローラーに役立つだけでなく、画像検索で上位表示させる役割もあることから、SEO対策としてもメリットにもなります。画像を挿入する際、altタグの役割を知らずそのまま未入力にしてしまうのはもったいないです。必ずaltタグを設定するようにしましょう。
altタグの正しい設定方法
altタグはユーザー、クローラーの両方に役立ち、さらにSEO効果もあることをお伝えしました。
そのaltタグは、どのように設置すれば良いのでしょうか？正しい設定方法をご紹介します。
HTMLでaltタグを記述する場合
ページ内に画像を挿入し、altタグを設定する場合は、以下を記述します。
<img src="画像URL" alt="代替テキスト">
「代替テキスト」部分に、「画像を簡単に説明するフレーズ」を入力します。
WordPressでalt属性を設定する場合
サイト運用のCMSとしてWordPressを使っている場合、画像のaltタグは「メディアの追加」から設定できます。
画像を挿入したい箇所を選んでメディアの追加を選択し、希望の画像を選びます。その際、画像の詳細情報として代替テキスト（alt属性）やタイトル（タイトル属性）を入力できます。
それぞれに適したテキストを挿入しておきましょう。
alt属性を確認する方法
alt属性を設定した後、正しく設定できているか確認する方法をご紹介します。
インターネットブラウザにChromeを使用し、デベロッパーツールを利用することで確認できます。
Chromeでaltタグを設定したページを開き、デベロッパーツールを表示させます（Windows OSならF12、またはCtrl＋Shift＋I、Mac OSの場合はoption+command+Iを押します）。表示されたソースコードから、該当するaltタグを設定した要素を選び、alt="〇〇"が設定されているか、確認しましょう。
alt属性（altタグ）の注意点
altタグを設定する際に、注意したいのがテキストの書き方です。
どのようなテキストを選べば良いのか、ポイントをご紹介します。
キーワードを詰め込み過ぎない
altタグで設定する代替テキストには、対策キーワードや関連キーワードを入れるとSEO効果があります。しかし、「SEO効果がある」と書くと、キーワードを詰め込み過ぎてしまう方が少なくありません。
altタグに設定するテキストは、キーワードを優先するのではなく、画像の説明であることが大切です。やってしまいがちな失敗が、キーワードを詰め込みすぎて意味の分からいテキストになってしまうことです。
画像の説明であることが前提で分かりやすく、かつ、対策キーワードや関連キーワードを入れられる場合のみ、挿入しましょう。
画像と関係のない言葉を入力しない
上記に説明させていただいた通り、altタグにキーワードを入れることでSEO効果が期待できます。しかし、画像と関係のないキーワードを入れても意味がありません。どのような画像なのか、理解できるフレーズを選ぶことが
重要です。
コンテンツは、対策キーワードを決め、ユーザーの検索意図を分析して作成します。挿入する画像も、必然的にキーワードに関係したものになるはずです。altタグに無理やり画像とは関係のない言葉を入れる必要はなく、画像を説明する自然なテキストを作成すれば対策キーワードや関連キーワードが含まれることでしょう。
画像リンクの場合はリンク先ページの情報を記載する
画像をコンテンツ内に設置し、他のページへのリンクボタンとして使う場合、altタグのテキストにはリンク先ページを説明するものを選びます。
altタグには、リンク先ページのタイトルや、要点を含んだ分かりやすいテキストを入れておきましょう。
コンバージョンにつながる資料請求や、問い合わせページへのリンクの場合、altタグ内のテキストとテキストの両方にこだわり、ユーザーがクリックしたくなるような、ボタンや画像を作りを心がけましょう。
まとめ
alt属性（altタグ）をコンテンツ内の画像に設定する重要性について解説しました。
alt属性を設定しておけば、画像検索で上位表示を狙えるだけでなく、SEO効果も期待できます。すでにコンテンツをいくつか作成し、画像を挿入しているものの、altタグを知らずに何も設定していないのであれば、altタグを加えましょう。
コンテンツSEOでもやってしまいがちなことですが、altタグに選ぶテキストにはキーワードを詰め込み過ぎないよう注意しましょう。また、altタグのテキストが画像と関係がないものでは意味がありません。画像がどのようなものか説明するフレーズで、可能な場合に限りキーワードを入れるよう意識しましょう。
自社サイト内を見直し、画像にaltタグを設定する際は、この記事で紹介した内容を踏まえ、適切なフレーズを選ぶようにしましょう。
