alt属性は、画像の内容をテキストで説明するHTML属性で、通信環境が悪いときの代替表示や音声読み上げソフトへの対応、SEO対策など幅広い役割を担っています。しかし、title属性との違いや正しい書き方まで理解している方は少ないのではないでしょうか。
本記事では、alt属性の基本的な意味から設定するメリット、HTMLやWordPressでの書き方、書く際の注意点、確認方法まで、実務にそのまま使える形で解説します。
alt属性とは
alt属性とは、HTMLのimgタグに記述する属性のひとつで、画像の内容をテキストで説明するために使います。オルト属性と読み、alternative（代替）を略した言葉で、代替テキストと呼ばれることもあります。
検索エンジンやスクリーンリーダーは、画像データを見ただけではそこに何が写っているかを判断できません。そのため、alt属性というテキスト情報を画像とセットで持たせることで、その画像が何を表しているかを伝える仕組みになっています。
WordPressをはじめ多くのCMSでは、画像をアップロードする際にalt属性を入力する欄が標準で用意されており、ホームページ制作において一般的に設定される項目のひとつです。
alt属性とtitle属性の違い
alt属性とtitle属性は、どちらも画像に関連する情報を記述するHTML属性ですが、役割は異なります。
alt属性は画像の代替テキストとして機能し、画像が表示されない場合やスクリーンリーダーで読み上げられる際に使われる情報です。一方title属性は、画像にカーソルを合わせたときにツールチップとして表示される補足説明で、通常のブラウザ表示では画面上に見えません。
SEOにおける役割にも違いがあります。alt属性は検索エンジンが画像の内容を理解するための直接的な手がかりとなり、画像検索での表示にも影響します。対してtitle属性は、検索エンジンへの直接的な影響は限定的とされており、あくまで訪問者向けの補足情報という位置づけです。
似た名前のタグですが、alt属性は画像の代わり、title属性は画像の補足という役割の違いを押さえておくと、使い分けに迷うことがなくなります。
alt属性を設定するメリット
alt属性を設定すると、訪問者にとっての使いやすさが向上するだけでなく、検索エンジンからのSEO評価も高まりやすくなります。ここでは、alt属性を設定するメリットを紹介します。
画像が表示されない環境でも内容が伝わる
スマートフォンで電波状況が悪い場所からアクセスした場合や、通信速度に制限がかかっている環境では、画像の読み込みに失敗することがあります。
この状態でも、alt属性を設定しておけば、画像の代わりにテキストが表示されるため、訪問者はその画像で何を伝えようとしているかを把握できます。特に、写真やイラストがないと意味が伝わりにくいページでは、代替テキストの有無がそのままユーザー体験の差につながります。
読み込みエラーによって内容の理解が中断されることを防げるという点で、alt属性は基本的な設定のひとつといえます。
音声読み上げソフトで内容を理解できる
視覚に障がいのある方や、画面の文字が見えづらい高齢の方の中には、ページ内容を音声で確認できるスクリーンリーダーを使ってホームページを閲覧している方がいます。
スクリーンリーダーはテキストを読み上げることはできますが、画像そのものの内容までは説明してくれません。alt属性を設定しておくと、その画像が何を表しているかがテキストとして読み上げられるため、画像を目で見ることができない訪問者でも、ページ全体の情報を漏れなく理解できるようになります。
誰にとっても使いやすいホームページを目指すうえで、alt属性はアクセシビリティを支える要素のひとつです。
SEO効果が期待できる
Googleは画像認識技術によってある程度画像の内容を判断できるものの、完全に正確というわけではなく、alt属性のテキスト情報を判断材料として活用しています。
alt属性を適切に設定すると、その画像が何を表しているかをGoogleに正確に伝えられるため、ページ全体の内容がより詳しく評価されやすくなります。Googleは、ページタイトルに対して情報が充実しているページを検索結果で上位に表示する傾向があるため、alt属性による情報の補完はSEOにおいてプラスに働きます。
画像を多用するホームページほど、alt属性の設定状況がSEOに与える影響も大きくなります。
画像検索からの流入が期待できる
alt属性は、通常の検索結果だけでなく、Googleの画像検索の順位にも影響します。
画像検索は文字だけの検索結果に比べて視覚的に情報を判断しやすいため、商品写真やサービス写真を多く扱うネットショップや店舗ビジネスのホームページでは、有効な集客経路のひとつになります。alt属性に画像の内容を的確に記述しておくことで、狙ったキーワードで画像検索に表示される可能性が高まり、通常の検索結果とは別の入り口から訪問者を集めることができます。
写真の点数が多いホームページほど、この効果を実感しやすくなります。
alt属性の書き方
alt属性の書き方は、HTMLに直接記述する方法と、WordPressの管理画面から設定する方法の2通りがあります。コードを触らない担当者の方でも、WordPressなら管理画面上で入力するだけで設定が完了します。
HTMLタグでの書き方
HTMLでalt属性を記述する場合は、imgタグの中に次のような形で追加します。
<img src="画像のURL" alt="画像の内容">src属性で画像のファイルを指定し、alt属性にはその画像が何を表しているかをテキストで入力します。alt属性の値は必ずダブルクォーテーションで囲む必要があり、記述を誤るとタグ自体が正しく認識されなくなります。
画像のURLに誤りがあれば表示が崩れてすぐに気づけますが、alt属性は見た目上の変化がないため、コーディング後に見直す作業が欠かせません。
WordPressでの書き方
WordPressの場合、コードを直接編集する必要はありません。
管理画面から画像をアップロードすると、右側のメディア詳細欄に「代替テキスト」という入力欄が表示されるので、そこにalt属性として設定したい内容を入力します。
注意したいのは、同じ画像ファイルを複数のページで使い回した場合でも、alt属性は画像ひとつにつき1つしか設定できない点です。ぺーじごとに固有のalt属性をつけたい場合は、同じ画像であっても、掲載するページごとに個別にアップロードし、それぞれの内容に合ったalt属性を入力する必要があります。
alt属性を書くときの注意点
alt属性は、正しく設定して初めて効果を発揮します。書き方を誤ると、訪問者に情報が伝わりにくくなったり、SEO面でマイナスに働いたりすることもあるため、注意点を押さえておく必要があります。
画像の内容を端的で具体的に書く
alt属性には、画像が何を表しているかを、できるだけ短く具体的な言葉で書くことが基本です。
例えば犬の写真であれば、「犬」とだけ書くのではなく、「砂浜を走るゴールデンレトリバー」のように、状況が伝わる表現にすると、訪問者にも検索エンジンにも意図が正確に伝わります。
また、alt属性の文末を「〜の画像」とする書き方もよく見かけますが、これも避けた方が良い表現です。alt属性はもともと画像に対して設定するものなので、そこに改めて「画像」という言葉を加える必要はありません。例えば犬の写真であれば、「犬の画像」ではなく「砂浜を走る犬」のように、画像だと分かる言葉を省いて内容そのものを書く方が、簡潔で伝わりやすくなります。
キーワードを詰め込みすぎない
alt属性に上位表示を狙うキーワードを不自然に詰め込む書き方は、キーワードスタッフィングと呼ばれるSEOスパムの一種とみなされます。
画像の説明とは関係のないキーワードを並べたり、同じ言葉を繰り返し記述したりすると、Googleからの評価が下がり、該当ページ全体のSEO効果が損なわれる恐れがあります。alt属性はあくまで画像の内容を説明するための項目であり、検索順位を上げるための場所ではありません。
ページ本文の内容と関連した画像に、自然な説明文としてalt属性を設定することが、結果的にSEOにも良い影響を与えます。
装飾目的の画像には設定しない
ホームページで使用するすべての画像にalt属性が必要というわけではありません。
ページ上部に戻るボタンのアイコンなど、情報を伝える役割を持たない装飾目的の画像には、alt属性を設定する必要はないとされています。装飾か情報かの判断に迷った場合は、スクリーンリーダーで読み上げる必要があるかどうかを基準に考えると分かりやすいでしょう。
装飾画像にalt属性を入れてもSEOへの直接的なマイナスにはなりませんが、スクリーンリーダーを利用している訪問者にとっては不要な読み上げが増え、ページの内容が分かりにくくなる原因になります。
alt属性の確認方法
alt属性を正しく設定できているかは、公開後に見た目だけでは判断できません。確認する方法には、誰でもすぐに試せる方法と、専用のツールを使う方法の2通りがあります。
ソースコードで確認する
alt属性は、ブラウザの「ページのソースを表示」機能を使えば、簡単に確認できます。
確認したいページ上で右クリックし、表示されたメニューからソースコードを開きましょう。ソースコード内でCtrl+F（Macの場合はCommand+F）を押してブラウザ内検索を起動し、「alt」と入力すると、alt属性が記述されている箇所がハイライトされます。
imgタグの中に「alt=””」という記述があれば、その画像にalt属性が設定されていることが分かります。かっこの中身が空になっている場合や、alt=の記述自体が見当たらない場合は、alt属性が未設定の状態です。
特別なツールを追加せずに確認できるので、まずはこの方法で自社サイトの状況を把握するとよいでしょう。
Chrome拡張機能で確認する
より効率的に確認したい場合は、Google Chromeの拡張機能「Alt & Meta viewer」が便利です。
インストールすると、ページ上の画像にカーソルを合わせるだけで、設定されているalt属性やtitle属性がツールチップとして表示されるようになります。ソースコードを毎回開いて検索する手間がなく、ページ内の画像を一つずつ素早くチェックできる点がメリットです。
自社サイトの確認だけでなく、競合サイトがどのようにalt属性を設定しているかを調べる際にも活用できるため、複数ページを継続的にチェックする場合は導入しておくと作業効率が上がります。
まとめ
alt属性は、画像の内容をテキストで伝えるHTML属性で、title属性とは役割も表示のされ方も異なります。
通信環境が悪いときの代替表示や音声読み上げソフトへの対応など、訪問者にとっての使いやすさを支えるだけでなく、検索エンジンが画像の内容を理解する手がかりにもなり、SEOや画像検索からの流入にも影響します。
設定する際は、画像の内容を端的かつ具体的に書き、キーワードの詰め込みや装飾画像への設定は避けることが大切です。HTMLタグやWordPressから設定でき、ソースコードやChrome拡張機能で設定状況を確認できます。
