alt属性の正しい書き方とSEO効果を解説｜初心者でもわかる実装方法

TMS編集部

「Webサイトの画像にalt属性を設定した方が良いと聞いたけど、どう書けばいいのかわからない…」
「alt属性ってSEOに効果があるの？具体的にどんなメリットがあるの？」

このような疑問を抱いている方も多いのではないでしょうか。

実は、alt属性は単なるHTML要素の一つではなく、ユーザビリティとSEOの両面で重要な役割を果たすものです。

この記事では、alt属性の基本概念から正しい書き方、実装方法、さらにはSEO効果まで、Webサイト運営者が知っておくべき情報を詳しく解説します。

正しいalt属性の活用法を理解することで、アクセシビリティの向上とSEO対策を同時に実現できるでしょう。

SEO対策の概要について知りたい方は、こちらの記事をご覧ください。

2019.11.08

SEOとは？検索順位が確定する仕組みや具体的な対策方法を紹介

１．alt属性とは？

まずはalt属性とは何かについて解説します。

（１）代替テキストとしての機能

alt属性の最も基本的な機能は、画像が表示できない場合に代替情報を提供することです。

インターネット接続が不安定な環境や、画像ファイルが破損している場合でも、alt属性に設定されたテキストが表示されるため、ユーザーは画像の内容を理解できます。

特にモバイル環境では通信制限により画像の読み込みを無効にしているユーザーも多く、そのような場合でもalt属性があることで情報を正確に伝えることが可能です。

また、古いブラウザや特殊な環境では画像がサポートされていない場合がありますが、そのような場合にalt属性がサイトの情報を完全に伝える唯一の手段となるケースもあります。

（２）HTML標準での必須性

alt属性はHTML標準において必須の属性と定義されており、画像要素には必ず設定するよう推奨されています。

W3C（World Wide Web Consortium）のHTML仕様では、imgタグ（画像）にはalt属性の記述が義務付けられており、これを省略すると正しいHTML記述とはいえません。

特に現代のブラウザでは、alt属性が設定されていない画像に対して警告を表示したり、開発者ツールでエラーとして検出したりする機能も実装されています。

適切なWebサイト制作を行うためにも、alt属性が必要だと考えて良いでしょう。

（３）アクセシビリティへの貢献

alt属性は、Webアクセシビリティの向上において重要な役割を果たしています。

例えば、視覚障がい者が使用するスクリーンリーダーなどの支援技術では、alt属性のテキストを音声で読み上げることで、画像の内容をユーザーが理解するのに役立ちます。

これにより、視覚的な情報にアクセスできないユーザーでも、Webサイトの情報を完全に理解することが可能です。

特に多様性が求められる現代の中でアクセシビリティの向上は必須です。

alt属性は単なるSEO対策ではなく、あらゆる人に有益な情報を提供するために必要な属性と考えましょう。

２．alt属性の効果とメリット

alt属性を適切に設定することで得られるメリットを紹介します。

順に見ていきましょう。

（１）画像が表示されない場合にもユーザー体験を向上させる

alt属性を設定しておくことで、画像が表示できない場合にもユーザーは画像の意味や内容を理解できます。

例として、Apple Storeの商品ページのalt属性を見てみましょう。

画像は読み込めていませんが、その代わりにalt属性のテキストが表示されており、そこに13インチMac Bookの画像があることが理解できるでしょう。

このように、alt属性があることで、画像が表示できない場合であっても、ユーザーが画像の内容についての情報を得ることができます。

特にECサイトでは商品画像が表示されない場合、alt属性に商品名や特徴が記載されていれば、ユーザーは商品の詳細を理解できるはずです。

最近はデータ通信量の節約のためにユーザーが画像表示をOFFにしているケースもあるので、必要な情報を提供するためにもalt属性は重要となります。

なお、ユーザー体験を向上させるメリットや改善させる際の着目ポイントについては、以下の記事でも詳しく解説しています。

2025.01.30

UX改善とは？改善のポイントや成功事例を紹介

（２）スクリーンリーダーへ対応させることができる

スクリーンリーダーとは視覚障がい者の方向けの機能で、Webコンテンツの内容を読み上げる音声機能が実装されています。

スクリーンリーダーは画像を読み込んで説明することはできませんが、alt属性にテキストがあればそれを画像に代わりに読み上げることが可能です。

これにより、視覚的な情報にアクセスできないユーザーでも、Webサイトの情報を完全に理解することができるようになります。

適切なalt属性の設定は、全てのユーザーが平等に情報にアクセスできる「ユニバーサルデザイン」の実現に直結するものです。

近年では企業の社会的責任の観点からもアクセシビリティ対応が重視されており、alt属性の適切な設定は企業価値を上げる意味でも重要といえるでしょう。

（３）画像検索での上位表示を狙うことができる

alt属性は検索エンジンが画像の内容を理解するための重要な手がかりにもなります。

現在の検索エンジン技術では、画像の視覚的内容を完全に認識・理解することは困難で、alt属性のテキスト情報を読み込んで画像を理解しています。

そのため、alt属性を設定する際に適切なキーワードを含めておくことで、Google画像検索などでの上位表示を狙うことが可能です。

特に商品画像やサービス紹介画像では、関連するキーワードを自然に含めたalt属性を設定することで、画像検索を経由した流入数の増加が期待できるでしょう。

（４）アンカーテキストの役割を与えることができる

画像がリンクとして機能している場合、alt属性はアンカーテキストの役割を果たします。

テキストリンクのアンカーテキストと同様に、alt属性のテキストは検索エンジンにリンク先ページの内容を伝える重要な情報となります。

例えば、商品画像から商品詳細ページへのリンクでは、alt属性に「○○商品の詳細ページ」のような説明を記載することで、検索エンジンがリンクの意図を正確に理解できます。

これにより、リンク先ページの検索順位向上にも寄与し、サイト全体のSEO効果を高めることが可能です。

３．alt属性の書き方と実装方法｜具体例で解説

alt属性の効果を最大化するためには、正しい書き方と実装方法を理解することが重要です。

以下のようなポイントを押さえておきましょう。

順にご説明します。

（１）基本的な書き方とHTMLマークアップ

HTMLでalt属性を設定する基本的な書き方は、imgタグ内にalt=”説明文”として記述します。

このように、src属性で画像ファイルを指定し、alt属性で画像の内容を説明するテキストを設定するのが基本的な形です。

ただし、alt属性にも良い書き方と悪い書き方があるので、その点についても理解しておきましょう。

基本的にaltには必要な情報だけをわかりやすく伝えることを意識し、画像を見ることができないユーザーでも同等の情報を得られるような記述を心がけましょう。

反対に悪い書き方の例のように、キーワードを詰め込んだり、画像の内容と一致していない説明、無意味な情報を入れることは避けることが大切です。

（２）WordPressでalt属性を付与する場合

WordPressでは、メディアライブラリから画像を挿入する際に簡単にalt属性を設定できます。

実際にスクリーンショット付きで説明します。

簡単なのはWordPressに画像をアップロードする際、またはメディアライブラリで画像を選択する際に「代替テキスト」の欄にalt属性として表示したいテキストを入力する方法です。。

また、既に投稿に挿入されている画像のalt属性を変更したい場合は、画像をクリックして編集メニューから「代替テキスト」を編集することができます。

その他、WordPressの「テキスト編集画面」、Gutenbergエディターの場合は「コードエディター」を使用して、altを書き換えることも可能です。

HTML編集画面で任意の画像部分を表示させ、img srcに続くalt=””を見つけて、””の間にテキストを入力するだけです。

なおWordPressのテーマによっては、alt属性が自動的にファイル名から生成される場合がありますが、これは適切なalt属性とは言えないため、必ず手動で適切な内容に変更することをおすすめします。

（３）効果的なalt属性の記述パターン

画像の種類や目的によって、効果的なalt属性の記述パターンは異なります。

例えば商品画像の場合は「商品名や色、サイズ」など、ユーザーが知りたい基本情報を含めた記述を心がけましょう。

次に人物の画像を挿入する場合はその人の名前や役職、情景などを含めた記述をするのがおすすめです。

コンテンツにグラフやチャートを入れる場合は、データの概要や傾向を簡潔に説明すると良いでしょう。

これらのパターンを参考に、画像の内容と目的に最適なalt属性を記述することで、ユーザビリティとSEO効果を最大化できるでしょう。

４．alt属性が正しく設定されているか確認する方法

alt属性を設定した後は、それが適切に機能しているかを確認することが重要です。

複数の確認方法を活用することで、サイト全体のalt属性の品質を向上させることができます。

ツールの特徴や目的に応じて、自社に最適な方法で確認を行うようにしましょう。

（１）ブラウザの開発ツールを使う

ChromeやFirefoxなどの主要ブラウザに搭載されている開発ツールで、alt属性の設定状況を詳細に確認できます。

まずは、ブラウザでWebページを開き、F12キーを押して開発ツールを起動しましょう。

次に「要素」タブでHTMLソースを確認することで、各画像のalt属性の内容を直接確認できます。

また、開発ツールの「Console」タブでは、alt属性が設定されていない画像に対して警告メッセージが表示されることがあるので、そこからalt属性の設定漏れに気づくことも可能です。

（２）Lighthouseを使った自動診断

Google Lighthouseは、Webサイトのパフォーマンスやアクセシビリティを自動診断できる無料ツールです。

Chromeブラウザの開発ツールに組み込まれており、「Lighthouse」タブから簡単にアクセシビリティ診断を実行できます。

Lighthouseのアクセシビリティ監査では、alt属性が設定されていない画像や、不適切なalt属性が設定されている画像を自動的に検出し、具体的な改善提案を提供してくれます。

診断結果は100点満点のスコアで表示され、alt属性の問題がある場合は該当する項目と改善方法が詳細に説明されるため、初心者でも理解しやすい形で改善点を把握できるでしょう。

（３）スクリーンリーダーでの動作確認

より詳しく確認したい場合は、実際にスクリーンリーダを使用してalt属性の読み上げを聞いてみましょう。

Windowsを使っている方はNVDA、MacではVoiceOverという名称の機能を使えば、無料のスクリーンリーダーを利用できます。

実際の読み上げを聞くことでalt属性の設定の有無だけでなく、説明の内容が適切かどうかもチェック可能です。

スクリーンリーダーでの確認により、alt属性が長すぎて聞き取りにくい、または短すぎて情報が不足しているといった問題を発見することができ、より実用的な改善につなげることができるでしょう。

５．alt属性を設定する際の注意点

alt属性を設定する際には、いくつかの重要な注意点があります。

具体的には、以下のような点が挙げられます。

これらの注意点を理解し、適切に対応することでalt属性の効果を最大化し、ペナルティのリスクを回避しましょう。

（１）装飾用の画像の場合は空のaltを使用する

画像を装飾のためだけに使用する場合には、alt属性を空にしておきましょう。

例えば、デザインのアクセントとして使用する画像、テキストが続くのを阻止するための画像は内容的な意味を持たず、スクリーンリーダーで読み上げる必要がありません。

そのため、特にaltを使用せずにそのままにしておいても問題はないでしょう。

このように空のalt属性を設定することで、スクリーンリーダーはその画像を無視し、ユーザーにとって不要な情報の読み上げを避けることができます。

ただし、装飾的に見える画像でも何らかの情報価値を持つような場合は、alt属性の設定が必要です。

（２）title属性と混同しない

alt属性とtitle属性は全く異なる目的で使用される属性であるため、混同しないようにしましょう。

title属性はマウスオーバー時に表示される補足情報として機能し、主に追加的な説明やツールチップとして使用されます。

一方、alt属性は画像が表示できない場合の代替テキストとして機能し、画像の内容そのものを説明する役割を担います。

使い分けの例を紹介するので、適切にタグを使えるようにしておきましょう。

スクリーンリーダーではtitle属性が読み上げられないことが多く、SEO効果も限定的です。

そのため画像の説明にはalt属性を使用し、title属性は補完的な情報を記述するなどして使い分けしましょう。

（３）無理にキーワードを詰め込まない

alt属性にSEO効果を期待してalt属性に無関係なキーワードを詰め込む行為は、「キーワードスタッフィング」というスパム行為と判定される可能性があります。

例えば、「安い」「格安」「激安」「おすすめ」などの形容詞を羅列したり、画像の内容と関係のないキーワードを挿入したりする行為は避けるべきです。

alt属性の本来の目的は画像の内容を正確に説明することです。

この定義と矛盾するような記述は、ユーザビリティとSEOの両方に悪影響を与えます。

（４）長文にしない

alt属性は簡潔でわかりやすい説明にとどめることが重要です。

過度に長い文章を無理に入れ込むのはやめましょう。

スクリーンリーダーで読み上げる際に時間がかかりすぎると、ユーザーに情報が正確に伝わらない可能性があるからです。

alt属性には明確な文字数制限があるわけではありませんが、一般的には100文字以内、短くても20文字程度が適切とされています。

altはあくまで画像の説明の役割なので、長々と文章を入れ込む必要はなく、重要な情報を優先的に書きましょう。

上記の例のように情報を絞ることでユーザーに伝わりやすく、聞き取りやすいalt属性のタイトルを作ることができます。

６．alt属性についてよくある質問

alt属性の設定に関して、多くのWebサイト運営者が抱く疑問をまとめました。

これらの質問への回答を通じて、より実践的なalt属性の運用方法を理解できるでしょう。

（１）altは日本語と英語のどちらで設定すれば良いですか？

alt属性の言語は、Webサイトのメインターゲットユーザーに合わせて設定します。

つまり日本国内向けのWebサイトであれば日本語で、海外向けサイトであれば英語やターゲット地域の言語で記述するのが適切です。

多言語サイトの場合は、各言語版ページでそれぞれの言語に対応したalt属性が必要となります。

SEOの観点からも、サイトのメイン言語と一致させることで検索エンジンからの評価が高まり、ターゲットユーザーの検索クエリにマッチしやすくなるでしょう。

（２）長すぎるaltは良くないと聞きましたが、何文字程度が目安ですか？

alt属性の文字数は、一般的に100文字以内に収めることが推奨されています。

これは、スクリーンリーダーでの読み上げ時間とユーザビリティを考慮した目安です。

ただし、文字数よりも重要なのは、画像の内容を正確かつ簡潔に説明できているかどうかです。

必要な情報が100文字を超える場合は、最も重要な要素をalt属性に記載し、詳細な説明は画像周辺のテキストで補完するなどして対応しましょう。

（３）CMSだと自動的にaltが生成されますか？

多くのCMSには自動alt生成機能が搭載されていますが、現時点ではその品質はあまり高くありません。

例えば、WordPressでは画像のファイル名からalt属性が自動生成できる機能がありますが、「IMG_001.jpg」のようなファイル名では意味のあるalt属性になりません。

AI技術を活用した自動alt生成ツールも登場していますが、現時点では画像の文脈や目的を完全に理解することは難しいでしょう。

そのため、仮に自動生成機能を使ったとしても最終的には人の目でチェックをし、画像の意味を正確に説明できているか確認が必要です。

まとめ

alt属性は、単なるHTML要素ではなく、ユーザビリティとSEOの両面で重要な役割を果たすWebサイトの基本要素です。

適切なalt属性の設定により、全てのユーザーが平等に情報にアクセスできる環境を構築でき、同時に検索エンジンでの評価向上も期待できます。

画像の内容を簡潔かつ正確に説明し、装飾画像には空のalt属性を使用し、キーワードの詰め込みを避けるといった基本原則を守ることで、効果的なalt属性を実現できるでしょう。

ブラウザの開発ツールやLighthouseを活用した定期的な確認により、サイト全体のalt属性品質を継続的に向上させることが可能です。

alt属性の設定を含めたSEOにお悩みなら、TMS Partners株式会社へご相談ください。

TMS Partners株式会社はalt属性はもちろん、包括的な検索順位改善やWeb広告の運用などにも対応しています。

お問い合わせはこちら

TMS編集部

TMS編集部

京都のWebコンサルティング・制作会社TMS Partners株式会社のコラム編集部です。中小企業/個人事業主が取り組みやすいWebマーケティングや、SEO、Web広告、マーケティングオートメーションのknow-howをお届けします。