alt属性とは？基礎知識や設定方法をわかりやすく解説

alt属性とは、画像表示の代替となるテキスト情報です。ユーザーだけでなく、検索エンジンも画像を認識する際に使用されるため、alt属性（代替テキスト）を適切に記述しておくことは重要なポイントになります。

ここでは、alt属性の基本から応用まで、詳しく解説していきます。

＼SEOで成果につなげる！資料ダウンロードはこちらから／

alt属性の基本

alt属性（オルト属性）とは、HTMLのimg要素の中に記述される、画像の代替となるテキスト情報です。テキストブラウザや音声読み上げブラウザでは、画像ではなくalt属性に記載された内容がテキストとして表示、または読み上げられることになります。

従って、そうした「画像が閲覧できない環境下でも、その情報が正しく理解される」ような代替テキスト情報がalt属性には記述されなければなりません。

また、alt属性は検索エンジンが画像を認識する際にも参考にします。

よくaltタグと呼ばれることもありますが、imgタグに付与する属性のため、その呼び方は誤りです。

alt属性の設定方法

alt属性の設定方法について確認していきましょう。WordPressで投稿する場合は、画像をアップロードした後に、「代替テキスト」でalt属性を設定することができます。

代替テキスト（alt属性）の良い例と悪い例

代替テキスト（alt属性）について、実際の画像を例にして、良い例・悪い例をご紹介します。

代替テキスト（alt属性）の良い例

代替テキスト（alt属性）は、画像に沿った内容を入れることが大切です。わかりやすく簡潔な表現で説明するようにしましょう。

良い例1：<img src=”rabbit.png” alt=”うさぎ”>
良い例2：<img src=”rabbit.png” alt=”寝ているうさぎ”>

代替テキスト（alt属性）の悪い例

意味を持つ画像に対して、画像の内容とテキストが合致していなかったり、代替テキストがなかったりするのは、代替テキスト（alt属性）の悪い例になります。キーワードを乱用するテキストも、NGですので気をつけましょう。

悪い例1：<img src=”rabbit.png” alt=”猫や犬”>
悪い例2：<img src=”rabbit.png” alt=””>
悪い例3：<img src=”rabbit.png” alt=”うさぎ もふもふ かわいい 白い 抱っこ セーター”>

代替テキスト（alt属性）の注意点

良い例と悪い例を踏まえて、代替テキスト（alt属性）の注意点をまとめました。一つずつ確認していきます。

画像の内容を正確に記述する

代替テキスト（alt属性）では、画像について、なるべく正確に記述すること。例えば、花の画像の場合、「黄色い花」なのか、「風に揺れている花なのか」など、対象の状態まで表現しましょう。

簡潔に記述する

代替テキスト（alt属性）は、簡潔な記述を心がけましょう。スパムと見なされるような長文にならないようにしてください。

キーワードの詰め込みはNG

「花・ひまわり・夏」など、関連するキーワードをただ羅列するのはNGです。キーワードの乱用で、Googleによるペナルティを受ける可能性があります。

「～画像」と記載しない

代替テキストの中に、「～の画像」という用語を含める必要はありません。あくまでも画像の内容を適切、かつ簡潔に表現することが大切です。

＼SEOで成果につなげる！資料ダウンロードはこちらから／

alt属性とtitle属性の違い

alt属性と混同しやすいものとして、「title属性」という用語があります。

alt属性とtitle属性には、どういった違いがあるのでしょうか。

alt属性は、画像そのものを表現するもので、画像以外には設定ができません。一方のtitle属性は、画像に対して、補足の説明を加えるものです。

一般的なブラウザでは、画像の上にカーソルをのせると、吹き出しが表示されることがあります。その吹き出しに画像の補助的説明が表示されているのが、title属性です。title属性は画像だけではなく、テキストなどすべての要素に設定できるのが特徴です。

title属性として現れているテキストをalt属性だと勘違いしてしまい、「alt属性がきちんと表示されない」と誤解することはよくあります。両者の違いをしっかりと把握しておきましょう。

alt属性の最適化のコツ

alt属性の最適化についてどのようなコツがあるのか、確認していきましょう。

alt属性の評価

alt属性のテキスト情報が、そのページの検索順位に影響することはほぼありません。

alt属性内の文字列はページの評価に加点されていないか、していたとしても微々たるものでしかありません。むしろ、特定のキーワードを繰り返し記述することは検索エンジンスパムと判定される可能性を高めますので推奨されません。

一方で、画像検索最適化においてはalt属性のテキストは重要です。検索エンジンは、ページ内の画像を認識する際にalt属性や、画像前後のテキストなどのテキスト情報を参考にしており（2019年4月開催Webmaster Conference OkinawaでのGary Illyes氏の発言を参考）、端的に画像の内容を表すalt属性の設定は、検索エンジンが画像内容を認識する助けとして効果があるようです。

とはいえ、先ほどお伝えしたようにalt属性の正しい記述はアクセシビリティの観点からも、検索エンジンに情報を正しく伝えるためにも重要なことですので、SEO上の効果があるなしに関わらず正しく記述することが必要になります。

この記事もチェック！

代替テキストとは？SEOに効果的な画像・動画のalt属性の書き方について

代替テキスト(alt属性)とは、ページ内に設定した画像や動画が表示されなかったり、音声で読み上げるブラウザを使用したりする際、画像などの代わり...

画像にリンクを設定する際のalt属性の働き

画像コンテンツに対しリンクを設定する場合、alt属性はアンカーテキストの代わりとしての役割をもちます。

その際「○○へのリンクのボタン」のように記述する必要はなく、例えば「会社概要」「採用情報」、また商品ページに画像でリンクする場合には商品名をそのままalt属性に設定するなど、テキストリンクで記述するのと同様の記述をします。

alt属性を設定しなくてもいいケース

すべての画像にalt属性を設定する必要はありません。

例えば、ラインマーカーなどはサイトのデザイン上の要素でしかなく、サイトコンテンツの中で意味をもつものではありません。そのためラインマーカーなどに関してはalt=””と空白のままで構いませんが、HTML 4.01以降alt=””という記述は必須になりました。

alt属性のまとめ

alt属性の設定は、画像検索を意識したSEOなどでとても重要です。ただ、実務となると「数が多くて対応できない」や「この記述で問題ないか」とご不安になることもあると思います。

他にも、「そもそもこのサイトは画像検索からの流入も狙えるのか」とお考えになることもあるかと思います。もしお困りでしたら弊社のコンサルタントがサポートいたします。

ナイルでは、集客だけではなく成果につなげるためのSEOコンサルティングが可能です。自社でSEOを実施するインハウスSEOに向かうためのサポートもできますので、ぜひ一度、ご相談ください。

ナイルのSEOコンサルティングサービスはこちらで紹介しております！ナイルのSEOコンサルティングサービスはこちらで紹介しております！