【実例付き】alt属性とは？検索エンジンやAIに最適化させる記述方法
alt属性は、画像に設定するテキストですが、アクセシビリティ・SEO・AI検索など多岐に影響する重要な要素です。しかし、「花の写真なら『花』と書けばいいのか」とか「『菜の花 植物 人気 ナノハナ』のようにターゲットキーワードを並べたほうが効果が高いのでは」と迷うこともあると思います。そこで、alt属性の役割からメリット、正しい書き方のポイント、実際の良い例・悪い例まで分かりやすく解説します。実例を挙げて詳しく解説しますので、自社のWEBサイトの改善に役立ててください。
alt属性とは
alt属性とは、WEBページの画像がどのような内容なのかを説明する短いテキストのことです。例えば、動物園で撮影したシロクマの写真であれば「氷の上を歩くシロクマ」や「動物園で泳ぐシロクマ」のように、内容が伝わるように記述します。
このテキストは何らかの理由で画像が読み込めない時に代わりに表示されたり、視覚障害のある方が使う音声読み上げソフトで利用されます。また、検索エンジンやAIが画像の内容を正確に把握する手助けにもなるため、WEB担当者は正しい方法で記述するようにしてください。
alt属性設定のメリット
ここでは、alt属性のメリットを分かりやすく解説します。重要性や意味を理解することで、ユーザーや検索エンジン、AIに評価されるWEBサイトづくりに役立つはずです。
画像が読み込めない場合の備え
WEBサイトを見ているとき、回線でエラーが生じるなどして画像が読み込まれないことがあります。その際、alt属性を設定しておくと、代わりに設定したテキストが表示されます。
例えばalt属性のテキストに「カフェオレのペットボトル」と入れておけば、正しく読み込まれなかった際、このテキストが表示されます。テキストが表示されれば、ユーザーがカフェオレの写真を見られなくても、どんな写真かを知ることができます。
画像検索で表示されやすい
Googleなどの検索エンジンは画像の内容を理解しているわけではなく、主にalt属性に書かれたテキストを読み取ることで、何が写っているのかを把握します。そのため、写真・イラストなどの内容を適切に説明するalt属性を設定しておくと、検索エンジンが正しく理解できるようになります。
そして、ユーザーが画像検索した際に、検索結果の画面に自社のものが表示される可能性が高まります。例えば「ABC公園で咲いていた向日葵」と記述していたら、「向日葵」「ひまわり」「ABC公園 花」などの関連キーワードで検索をしたユーザーに、その画像が表示されやすくなります。
関連記事:画像SEO（画像検索最適化）とは？SEOに有効な画像の設定ポイントを解説
alt属性の記述ポイント
alt属性は設定するだけでは十分ではなく、どのように書くかが大切です。不適切な記述では、写真・イラストなどの内容がユーザーや検索エンジンに正しく伝わらず、本来の効果を十分に発揮できません。そこで、alt属性を書くポイントを解説します。
簡潔かつ具体的に書く
al属性のテキストでは、短い文章で正確に内容を伝えることが大切です。長すぎる説明は分かりにくくなるためです。しかし「イラスト」「写真」といった曖昧な表現だけでは、何が写っているのか伝わりません。例えば「犬」よりも「芝生の上でボールをくわえるゴールデンレトリバー」のように、特徴を具体的かつ簡潔に表現してください。必要な情報だけを過不足なく伝えることを意識することで、検索エンジンに正しく情報が伝わります。
キーワードは自然に含める
検索で上位に表示させたいターゲットキーワードをalt属性に含めることは、画像検索などでは有効ですが、不自然に単語を詰め込むのは避けてください。
例えば、「靴・ランニングシューズを買う。おすすめの靴・ランニングシューズはこちら」のようにキーワードを無理やり並べると、検索エンジンからスパム（不正行為）と判定される恐れがあり、さらに音声読み上げソフトを利用するユーザーにとっても不快な体験になります。写真やイラストなどの内容を正確に説明する文章の中で、そのキーワードが必要な場合のみに含めるのがポイントです。
前後の文脈に合わせる
Alt属性のテキストは、その写真やイラストなどがどのような目的でそのページに置かれているのかという前後の文脈に合わせることが重要です。
例えば、まったく同じ「東京の写真」を使う場合でも、東京観光を紹介する記事であれば「東京の人気観光スポット」と記述すべきですが、不動産会社が都心の住環境について解説する記事であれば「東京都心の街並み」などが適切です。このように、周囲のコンテンツを補うようにその画像ならではの情報を記載してください。
【実例】alt属性の書き方
alt属性の書き方を理解していても、実際に書こうとすると「これで合っているのか」と迷うことも多いものです。そこでここでは、よくある間違いと、その改善例を比較しながら実践的な書き方を解説します。これらを見比べることで、alt属性の記述方法を具体的に理解できます。
ファイル名をそのまま記述している
悪い例.「IMG_1234」
良い例.「赤井薔薇の花束」
altにファイル名「IMG_1234」を入れてしまうと検索エンジンに情報が伝わりません。alt属性には、写真やイラストを見られない人でも内容がイメージできるように、何が写っているのかを簡潔かつ具体的に記述してください。
例えば、薔薇の花束の写真であれば、ファイル名ではなく「赤いバラの花束」のように記述しますし、自転車の写真であれば「公園に停められた赤いクロスバイク」や「ヘルメットを着用して自転車に乗る男性」のように、内容が具体的に伝わる表現を心掛けます。
キーワードを詰め込んでいる
悪い例.「ケーキ, スイーツ, 誕生日, デザート, チョコレート, 人気, おすすめ, ギフト」
良い例.「イチゴとチョコレートで飾られた誕生日ケーキ」
Alt属性は、写真やイラストの内容を伝えるためのテキストです。そのため、関連する単語を羅列するのではなく、画像を見て何が写っているのかを自然な文章で書くようにします。単語だけを並べても写真やイラストの様子はイメージできず、アクセシビリティの向上にもつながりません。
画像を見られない人が情景を思い浮かべられるよう、例えば「イチゴとチョコレートで飾られた誕生日ケーキ」や「テーブルの上にあるミネラルウォーターのペットボトル」のように、内容を簡潔かつ具体的に表現することを心掛けてください。
内容が抽象的すぎる
悪い例.「写真」
良い例.「会議で資料を見ながら打ち合わせをする3人の社員」
「写真」「画像」「イラスト」といった説明だけでは伝わりません。画像の種類ではなく、「誰が」「何をしているのか」といった情報を含めることで、画像を見られない人にも内容が正しく伝わります。例えば「会議で資料を見ながら打ち合わせをする3人の社員」や「カフェでノートパソコンを使って仕事をする女性」のように、状況や行動まで記述すると、より正確に伝えられます。
長すぎる説明
悪い例.「弊社のサービスは創業20年以上の実績があり、全国対応で多くのお客様から高い評価をいただいています。詳しくはお問い合わせください」
良い例.「担当者がお客様へサービス内容を説明している様子」
alt属性は画像の代替テキストであり、広告文や商品説明を書く場所ではありません。長文になると内容が伝わりにくくなるため、写真やイラストそのものを簡潔に説明することが重要です。サービスの魅力や詳細は本文で伝え、「担当者がお客様へサービス内容を説明している様子」のようにalt属性には画像の内容だけを記述してください。
前後の文脈に合っていない
悪い例：「東京タワー」
良い例：「東京タワーを望む人気の観光スポット」
同じ写真やイラストでも、ページのテーマによって適切なalt属性は変わります。例えば、東京観光を紹介する記事であれば「東京タワーを望む人気の観光スポット」、オフィス街を紹介する記事であれば「東京タワー周辺のオフィス街の風景」といったように、前後の文脈に合わせて記述することが大切です。画像そのものだけでなく、そのページでどのような役割を果たしているかも意識してください。
装飾画像にも説明を書いている
悪い例：「青色の波線の装飾」
良い例：「alt=””（空のalt属性）」
見出しの区切りやデザイン目的で配置されている装飾には、内容を説明する必要はありません。例えば、ページの途中で話題が変わる際に、装飾で段落を区切るなどのことが該当します。その装飾に説明を書いてしまうと、スクリーンリーダーが不要な情報まで読み上げてしまい、かえってユーザーの負担になります。意味を持たない装飾は、alt=””と設定して読み飛ばせるようにしてください。
画像内の重要な文字を説明していない
悪い例：「夏のセールバナー」
良い例：「夏のセール開催中 最大50％OFF」
画像内の文字が重要な情報である場合は、その内容をalt属性に含めることが大切です。例えば「最大50％OFF」など、キャンペーン内容や期間のお知らせなど、画像を見ないと重要な情報をえられない場合、文字情報として適切に伝えるようにしてください。ただし、本文にも同じ内容が記載されている場合は、重複しないよう簡潔にまとめることがポイントです。
商品名だけを書いている
悪い例：「ワイヤレスイヤホンX100」
良い例：「ブラックのワイヤレスイヤホンX100をケースに収納した状態」
ECサイトでは「ワイヤレスイヤホンX100」のように、商品名だけをalt属性に設定しているケースがあります。しかし、それだけでは画像の内容は十分に伝わりません。商品の色や形状、状態など、その写真で何を見せているのかが分かるように記述し、ユーザーにも検索エンジンにも内容をわかりやすく伝えてください。
例えば「ブラックのワイヤレスイヤホンX100をケースに収納した状態」や「ホワイトカラーのワイヤレスイヤホンC700を耳に装着している様子」のように、商品の色や使用シーン、どのような状態で写っているのかまで含めて記述すると内容がより具体的に伝わります。
alt属性のよくある質問
ここではalt属性のよくある質問をとりあげ解説します。基本を押さえておくことで、alt属性の設定で迷う場面が減り、SEOやアクセシビリティに配慮した、質の高いWEBサイト運営につながります。
Q.同じ画像を複数ページで使う場合、alt属性も同じでよいですか？
Answer）必ずしも同じである必要はありません。alt属性は画像だけでなく、そのページで画像がどのような役割を果たしているかを考慮して記述します。同じ写真でも、ページごとに伝えたい内容が異なるのであれば、alt属性もそれに合わせて調整したほうが適切です。
Q.リンク画像のalt属性はリンク先の内容を書くべきですか？
Answer）リンク画像の場合は、「画像そのもの」よりも「リンクの役割」が伝わる内容が望ましいです。例えば、PDFダウンロードボタンであれば「会社案内PDFをダウンロード」、検索ボタンのアイコンであれば「サイト内検索」のように、クリックした結果が分かる内容にすると、スクリーンリーダー利用者にとって分かりやすいです。
Q.AIが画像を理解できるなら、将来的にalt属性は不要ですか？
Answer）現時点では不要になる可能性は低いと考えられます。AIによる認識は進歩していますが、このページで何を伝えたいものなのかという制作者の意図までは完全には判断できません。alt属性はアクセシビリティだけでなく、画像の意味を制作者自身が明確にする役割もあるため、今後も重要なHTML要素であり続けると考えられます。
Q.AIが生成した画像にもalt属性は必要ですか？
Answer）必要です。画像がAIで生成されたかどうかは関係なく、ページ上で意味を持つ画像であればalt属性を設定します。重要なのは制作方法ではなく、ユーザーにどのような情報を伝えているかです。
まとめ
alt属性は、画像が表示されない場合の代替テキストという役割だけでなく、スクリーンリーダーによるアクセシビリティの向上や、検索エンジン・AIに画像の内容を正確に伝えるためにも重要な要素です。設定する際は、画像の内容を簡潔かつ具体的に説明し、ページ全体の文脈に合わせて自然な文章で記述するようにしてください。今回紹介したポイントや実例を参考に、すべての画像に適切なalt属性を設定し、ユーザーにも検索エンジンにも分かりやすいWEBサイトを目指してください。
