画像の代替テキスト（alt属性）とは？確認方法やSEO効果についても解説

SEO

画像の代替テキストは、Webページで画像が表示されない場合やスクリーンリーダー（音声読み上げ機能）を使用する際に、その内容を説明するテキストです。
代替テキストは、画像の意味やコンテキスト（文脈）を伝えるだけでなく、SEO（検索エンジン最適化）にも重要です。
この記事では、代替テキストの役割や作成方法、SEOへの影響などについてご説明します。

代替テキストの役割

画像の代替テキストは、alt（オルト）属性と言ってHTMLで画像を表示する際に使用されます。

役割は大きく分けると3つあります。

スクリーンリーダー（音声読み上げ機能）で使われる
視覚障がい者や高齢者などがスクリーンリーダー（音声読み上げ機能）を使用する際にalt属性が読み上げられるため、目が見えない方でも画像の内容を理解できます。
画像が表示されない場合に表示させる
検索エンジン（GoogleやBingなど）に画像の内容を理解してもらう

以上のことから、代替テキスト（alt属性）は、Webページの質を高めるために欠かせない要素です。

代替テキストがSEOに与える影響

代替テキスト（alt属性）は、検索エンジンが画像の内容を理解するための手がかりとなります。
適切な代替テキストを設定することで、ページ全体の関連性が高まり、検索エンジンのインデックスに正確に登録されやすくなります。

Googleのスターターガイドでは次のように明示しています。

最適化した画像をサイトに追加する

多くの人は視覚的に検索するため、画像がウェブサイトを発見するきっかけとなります。レシピブログの場合、たとえば「フルーツタルトレシピ」を検索し、さまざまなフルーツタルトの写真を見てブログを見つけます。

サイトに画像を追加する際には、ユーザーと検索エンジンがその画像を見つけて理解できるようにしましょう。

出典：Googleスターターガイド

わかりやすい代替テキストを画像に追加する

代替テキストとは、画像とコンテンツの関係を簡潔に説明するものです。何に関する画像なのかや、画像とページとの関係の背景を検索エンジンが理解するのに役立つため、適切な代替テキストを書くことは極めて重要です。

出典：Googleスターターガイド

上記の通り、代替テキスト（alt属性）は、SEO（検索エンジン最適化）においても、非常に重要な役割を果たします。

画像検索での上位表示：
代替テキストを設定することで、画像検索結果での上位表示が期待できます。
特に、関連するキーワードを含めた代替テキストは、ユーザーの検索キーワードと一致しやすくなります。

アクセシビリティの向上：
代替テキスト（alt属性）は視覚障がい者にとって重要な情報源です。適切な設定により、すべてのユーザーに対して情報を平等に提供でき、サイトの使いやすさが向上します。結果、SEOにもよい影響を与えます。

適切に設定することで、検索エンジンの理解を助け、画像検索でのトラフィックを増やすことができます。ぜひ、代替テキストを活用して、WebページのアクセシビリティとSEOを向上させてください。

画像の代替テキスト確認方法

まずはご自身のホームページで、alt属性が設定されているか確認してみましょう。
画像のalt属性を確認する方法はいくつかあります。
以下に一般的な手順を紹介します。

HTMLコードを直接確認

Webページのソースコードを表示し、<img>タグを探します。
代替テキストはalt属性に記載されています。

HTMLの例）
<img src=”image.jpg” alt=”犬がボールで遊んでいる”>

Webページのソースコードを表示する方法はいくつかあります。

右クリックのメニューで確認

表示したいウェブページを開く。
ページの空白部分を右クリックする。
メニューから「ページのソースを表示」を選択する。
ソースコードが表示されたら「img」を探してみましょう。

ショートカットキーで確認:

Windows: Ctrl + U
Mac: ⌘ Command + U（Safariの場合は⌘ Command + Option + U）

Chrome拡張機能「Alt＆Meta viewer」で確認

Chrome拡張機能「Alt＆Meta viewer」でalt属性を確認する方法

インストール
Chromeウェブストアにアクセス：
「Alt & Meta viewer」を検索し、インストールします。
Alt & Meta viewer
「Chromeに追加」を選択し、確認メッセージが表示されたら「拡張機能を追加」をクリックします。
使用方法
対象のページを開く：
alt属性を確認したいウェブページを表示します。
拡張機能アイコンをクリック: Chromeのアドレスバーの右側に表示される「Alt & Meta viewer」のアイコンをクリックします。
ポップアップメニューから「画像のAlt表示」を選択します。
結果の確認
ページ内の各画像に対して、設定されているalt属性が注釈として表示されます。alt属性が設定されていない場合は「設定なし」と表示されます。

Chromeなら、このツールを使うことでalt属性の設定漏れを簡単にチェックできてとても便利です。

WordPressの管理画面から確認

WordPressを使用している場合、管理画面のメニュー内、メディアライブラリ（「画像・動画」＞ライブラリ）から確認したい画像を選択すると、代替テキストの欄を確認できます。

最適な代替テキストの作成方法

具体的かつ簡潔に

alt属性は、画像の内容を具体的に説明する必要があります。

例えば、上の写真なら「ボールで遊んでいる犬」など、何が写っているのかを明確に伝えます。
写真のキャプションに「うちのワン子」という説明がありますが、キャプションと代替テキスト（alt属性）を同じにするのはNGです。

冒頭でご説明の通り、代替テキストは、視覚障がい者がスクリーンリーダー（音声読み上げ機能）を通してどんな画像がそのページにあるのかを知ることができます。
つまり、キャプションと代替テキストが同じ場合、写真の具体的な内容が想像できないのです。
そのため、画像が持つ重要な情報やコンテキスト（文章の前後関係など）を反映させることが大切です。

また、製品画像の場合は、製品名や特徴を含めるとより伝わりやすくなります。
さらに、「画像」や「写真」といった言葉や不要な情報は省きます。

以下ではalt属性の悪い例・良い例を具体的にご紹介します。

alt属性の悪い例

あいまいな表現
alt=”花”
alt=”子供たち”
どの花か分からない、子供の感情、状況が分からないなど、情報が不足しています。
キーワードの詰め込みすぎ
alt=”花、バラ、赤い花、庭”
不自然で、意味が伝わりにくいです。
無関係な情報
alt=”クリックして詳細を見る”
画像の内容を説明しておらず、ユーザーにとって無益です。

alt属性の良い例

具体的
alt=”美しい赤いバラの花が咲いている庭”
alt=”青空の下で遊ぶ子供たち”
画像の内容が明確で、視覚的な情報を伝えています。
関連するキーワードを含む
alt=”新鮮なオーガニック野菜の盛り合わせ”
画像の内容を具体的に説明し、SEOにも寄与します。
コンテキストを考慮した表現
alt=”2024年の春に咲いた桜の花”
時期や場所を含めることで、文脈が考慮され、より具体的な情報を提供しています。

悪いalt属性の例は情報の不足や不自然さがあるため避けるべきです。
一方、良いalt属性の例は画像の内容を具体的に説明し、アクセシビリティとSEOの両方に貢献します。

これらを意識することで、読み手がすぐに理解できるようになります。すべてのユーザーに対して情報を平等に提供し、コンテンツの質を高めることができるでしょう。

装飾などの画像にalt属性は不要

装飾的な画像に関しては、代替テキストは不要です。以下にその理由を説明します。

装飾的な画像の役割の場合
装飾的な画像は、主にビジュアル的な魅力を高めるために使用され、情報を伝える役割を持たないためです。
例えば、背景画像やデザイン要素などがこれに該当します。
アクセシビリティの向上
スクリーンリーダー（音声読み上げ機能）を使用しているユーザーにとって、単なる装飾の画像情報はむしろ邪魔になる可能性があります。
例えば背景画像が単なる装飾であり、情報を伝えない場合、alt属性は設定しない方がよいです。
この場合、alt属性を空にする（alt=””）ことで、スクリーンリーダーがその画像を無視し、ユーザーが重要なコンテンツに集中できるようになります。
情報を含む背景画像は上記に限らない
もし背景画像が重要な情報を提供する場合（例えば、インフォグラフィックや特定のデザイン要素が情報を伝える場合）は、その内容を説明するalt属性を設定することが重要です。
不要でも値を空白にしたalt属性を入れる
画像のタグ（<img>）にalt属性を入れるのはルールのため、「alt=””」のように値を空にして設定しましょう。