altタグとは、HTMLの <img>
タグに記述する属性で、画像が表示されない場合に代替テキストとして表示されます。
このタグは、視覚障碍者の方々がスクリーンリーダーを使用してWebサイトを閲覧する際に画像の内容を理解する助けとなるだけでなく、検索エンジンのクローラーが画像の内容を認識するためにも役立ちます。
また、altタグは画像検索での上位表示においても役に立ちます。ただ、画像SEO以外には役に立たないことをGoogleは公言しているため注意しましょう
この記事では、altタグの基本的な知識から、SEO効果を高めるための書き方、そして具体的な記述例までご紹介します。altタグを効果的に活用することで、Webサイトの価値を高め、より多くのユーザーに情報を届けることができるようになります。
altタグの前提知識
alt属性(タグ)とは?
altタグとは、HTMLで画像を表示させる際に用いる <img>
タグに記述する属性の一つで、Alternative(代替)の略です。
Webサイトに画像を埋め込む際に、<img src="画像のURL" alt="代替テキスト">
のように記述します。この alt="代替テキスト"
の部分がaltタグです。基本的な書き方は以下の通りです。
<img src="画像のURL" alt="代替テキスト">
このaltタグで設定したテキストは、画像が表示されない場合に代替テキストとして表示されます。そのため、altタグは「代替テキスト」と呼ばれることもあります。そもそも、画像が表示されないケースとしては以下のケースが挙げられます。
- ユーザーのインターネット回線が遅い、または不安定な場合
- ユーザーが画像の読み込みをブロックしている場合
- 画像ファイルが破損している、または存在しない場合
- ユーザーが視覚障碍者で、スクリーンリーダーを使用している場合
こうしたケースにおいてaltタグは機能するようになります。
alt属性の記述例
alt属性は、画像が表示されない場合に表示されるテキストで、Webアクセシビリティ向上に役立ちます。 画像の役割を具体的に、簡潔な言葉で説明しましょう。
例1:商品画像
<img src="shirt.jpg" alt="メンズ向けの赤いチェック柄シャツ">
例2:人物画像
<img src="profile.jpg" alt="山田太郎さんのプロフィール写真">
例3:グラフ
<img src="graph.png" alt="2023年度の売上推移を示したグラフ">
例4:装飾画像
<img src="decoration.svg" alt="">
画像にalt属性を設定するSEO効果
alt属性を設定するというのは正直細かい作業に思われるかもしれません。しかし、altタグを設定することの意味は、小さくありません。そこで、ここではaltタグを設定する2つの意味について解説していきます。
意味①|ユーザーの利便性を向上してくれる
altタグで設定したテキストは、画像が表示されない際に代替テキストとして表示されます。そのため、altタグは、画像が表示されない場合に画像の意味をユーザーに伝えることで、ユーザビリティを向上させる役割を果たします。
GoogleのLizzi Sassman(リジー・サスマン)氏も、altタグが「読者の手助け」になると述べています。
引用元:English Google SEO office-hours from March 2023|海外SEO情報ブログ
alt
は、スクリーンリーダーでサイトに訪問しているかもしれない読者の手助けにもなるだけではなく、ページのそのほかのコンテンツにその画像が関連していることを説明する機会も与えます。
視覚に障がいのある方がスクリーンリーダーを使ってWebサイトを閲覧する場合、altタグで設定されたテキストが読み上げられます。そのため、altタグを設定することで、視覚に障がいのある方にもWebサイトの内容を理解してもらうことができます。
また、画像が表示されない状況では、健常者のユーザーにとっても、画像の意味をテキストで伝えることができるため、コンテンツの理解を促進するのに役立ちます。
意味②|クローラーに画像の意味を伝える
altタグに画像の内容を記述することで、クローラーは画像の意味を認識することができます。
altタグを適切に記述することで、クローラーが画像の意味をより正確に理解するのに役立ちます。その結果、画像検索の結果に表示されやすくなる可能性があります。
Google は、OCR を使って画像から文字を普通は抽出できます。それでも、
引用元:English Google SEO office-hours from March 2023|海外SEO情報ブログalt
の文字によってその情報を提供したほうがいいです。そうすれば、画像の内容をより適切に理解できます。
alt属性を設定するメリット
alt属性を設定することで、WebサイトのSEO効果を高めることができます。alt属性は、画像の内容を検索エンジンのクローラーに伝える役割を果たします。クローラーは、alt属性の情報に基づいて画像を理解し、検索結果に表示します。
alt属性を設定することで得られるSEO効果は、主に以下の4つです。
効果①|画像検索への上位表示
alt属性を適切に設定することで、画像検索での上位表示を狙うことができます。画像検索は、Googleなどの検索エンジンで画像を検索する機能です。
ただ、Google公式が言うように、「alt
属性の主要な使い道は画像検索のため」のものであり、通常のSEOでは使っていないことを公言しています。
あの場面で私が言ったことから飛躍しているような気がする。ページの一部として
引用元:Googleはalt属性を画像検索だけに使いウェブ検索には使っていない⇐ホント?|海外SEO情報ブログalt
属性のテキストを Google は見ている(alt
属性を検索できるしスニペットでも見つけられる)。alt
属性のテキストはページ上のほかのテキストのようなものだ。しかしalt
属性の主要な使い道は画像検索のためだ(文字どおりimg
タグの中での話になる)。
効果③|視聴覚障害の方への利便性向上
alt属性は、視覚障害者の方が使用するスクリーンリーダーにとっても重要な情報源です。スクリーンリーダーは、Webサイトのテキストを読み上げることで、視覚障害者の方でもWebサイトを閲覧できるようにするソフトウェアです。
alt属性を設定することで、スクリーンリーダーが画像の内容を正確に読み上げることができます。これにより、視覚障害者の方でもWebサイトの内容を理解することができます。
効果④|ネット環境の悪い状況でも画像の意味がわかる
alt属性は、画像の読み込みが遅い場合や、画像が表示されない場合でも、ユーザーに画像の内容を伝えることができます。
例えば、ユーザーが低速なインターネット回線を使用している場合、画像の読み込みに時間がかかることがあります。alt属性を設定することで、画像が表示されるまでの間、ユーザーはalt属性のテキストで画像の内容を把握することができます。
効果的なaltタグへの記述のコツ
altタグを効果的に記述することで、Webサイトのアクセシビリティ向上とSEO効果の向上に繋がります。
効果的なaltタグ記述のコツは以下の通りです。
コツ①|簡潔で正確な説明をする
altタグでは、画像の内容を簡潔かつ正確に説明することが重要です。altタグは、画像が表示されない場合に代替テキストとして表示されます。そのため、ユーザーが画像の内容を理解できるような説明を心がけましょう。
例えば、犬の画像に「犬」と記述するだけでなく、「柴犬の子犬」のように具体的な説明を加えることで、ユーザーはより多くの情報を得ることができます。
コツ②|適切なキーワードを盛り込む
altタグに適切なキーワードを含めることで、SEO効果を高めることができます。狙っているキーワードがあれば記事との関連性が高いコンテンツと認識され、画像検索などでもヒットするチャンスが上がります。
ただ、その際には自然な形で、画像の内容に関連するキーワードを含めるようにしましょう。例えば、カフェのWebサイトでコーヒーの画像にaltタグを設定する場合、「コーヒー」だけでなく、「ハンドドリップコーヒー」や「スペシャルティコーヒー」のような具体的なキーワードを含めることができます。
コツ③|意味のない画像のaltタグは空にする
装飾目的の画像など、Webサイトの内容に直接関係のない画像のaltタグは空にするか、非常に短い記述で済ませましょう。altタグを空にするには、alt=""
のように記述します。
意味のない画像にaltタグを設定しても、SEO効果は期待できません。
altタグの確認方法
altタグが正しく設定されているかを確認することは、WebサイトのアクセシビリティとSEO効果を高める上で重要です。altタグの確認方法はいくつかありますが、ここでは代表的な2つの方法を紹介します。
方法①|ソースコードを確認する
altタグは、Webページのソースコードで確認することができます。Google ChromeなどのブラウザでWebページを表示し、右クリックから「ページのソースを表示」を選択すると、ソースコードが表示されます。
ソースコード内で <img>
タグを探し、alt=""
の部分を確認することで、altタグの内容を確認できます。
方法②|拡張機能を利用する(Alt & Meta viewer)
Webブラウザの拡張機能を利用することで、altタグを簡単に確認することができます。
Google Chromeの拡張機能「Alt & Meta viewer」をインストールすると、Webページに表示されている画像のaltタグを一覧で確認することができます。
- Chromeウェブストアで「Alt & Meta viewer」を検索し、インストールする。
- altタグを確認したいWebページを開く。
- ブラウザのツールバーにある「Alt & Meta viewer」のアイコンをクリックする。
- ページに表示されている画像のaltタグが一覧で表示される。
まとめ
altタグは、画像が表示されない場合に表示される代替テキストであり、Webサイトのアクセシビリティ向上とSEO効果向上の両方に貢献します。altタグを効果的に活用するには、画像の内容を簡潔かつ正確に記述し、適切なキーワードを含めることが重要です。
altタグを設定することで、視覚障碍者の方にもWebサイトの内容を理解してもらうことができ、検索エンジンにも画像の内容を正しく伝えることができます。
altタグの確認方法としては、ソースコードを確認する方法と拡張機能を利用する方法があります。
altタグを適切に設定し、Webサイトの品質を高めましょう。