SEO対策 alt属性とは？書き方と設定方法・SEO効果について解説

alt属性とは、ホームページ（WEBサイト）に表示される画像の意味を説明するテキスト情報のことで、「オルト属性」と読み、「代替テキスト」「Altタグ」と呼ぶこともあります。

WEB画像のリンクが切れているために画像が表示されないときや、画像が表示できないブラウザでページを開いたとき、音声読み上げ機能を利用するときなどに、Alt属性に代替テキストを指定することで画像の代わりにテキストが表示されるようになります。

また、alt属性をhtmlソース上に記述することで検索エンジンのクローラーに画像の意味・内容を適切に伝えるため、SEO対策上の効果が見込めます。

Alt属性は

<img src=”画像のURL” alt=”画像の説明”>

このように記述します。

ネットワーク上の問題などが原因でページ内にある画像が表示されなかった場合、あらかじめalt属性が設定されていれば、「画像の代わりに記述した文字列を表示させる」ことができます。

以前に比べると画像が表示できないブラウザが使われることは多くはありませんが、ネット環境によっては画像を読み込むのに時間がかかる場合もあるため、alt属性で画像に関する説明を記述する意味は多いにあります。

また、画像の読み込みが遅い場合も、ユーザーがどのような内容の画像なのかを理解できるようになるため、アクセシビリティの向上にも大きな効果が期待できます。

以下のような状況の場合を想定してAlt属性を設定しておきましょう。

・ネットワーク環境が悪く通信速度が不安定で表示されない。
・サイト側のサーバーが混雑しており画像を読み込めない。
・画像を表示させない設定にしている。

パソコンやスマートフォンでWEBサイトを閲覧している視覚障害者の方は、主にスクリーンリーダーや音声ブラウザを使用してWEBサイトの情報を理解します。

スクリーンリーダーや音声ブラウザといった機能は、掲載されている文字情報を音声で読み上げることが可能ですが、テキスト以外の画像や動画などの情報は読み上げることができません。

そのような場合に必要になるのが、画像の内容を読み上げるための代替テキスト、つまりalt属性です。

alt属性が設定された画像は、スクリーンリーダーや音声ブラウザがその内容を読み上げてくれるため、「視覚障害者に対して適切な情報を提供する」ことが可能になります。

alt属性を入れることで画像検索でも表示される可能性が高まります。

画像検索で表示されるかどうかの判断基準は、alt属性の設定だけではないですが、Googleのミューラー氏は「alt属性のテキストは、画像検索で画像をより適切に理解するのに本当に役立つ。」と発言しています。

例えばアパレルや飲食など画像検索からの流入が多い業種・業界は、画像検索で自社商品の画像が表示されるようにaltを設定しましょう。

alt属性を最適化したことで、劇的に検索順位が上がることはありませんが、Googleが公開する検索エンジンスターターガイドにはalt属性に関するメリットが記載されています。

それは、画像にalt属性を設定することで、画像からリンクを張ったときに画像のaltテキストがリンクに対してアンカーテキストと同様に扱われるようになるということです。

WEBサイト内にイメージリンクと呼ばれる「a要素」を設定して画像からリンクを貼る場合、alt属性のテキストがリンクに対する「アンカーテキストの代わり」としての役割を担います。

そのため、「こちらをクリック」のようなテキストではなく、検索エンジンにリンク先のページ内容が理解されやすい、きちんと説明された適切なテキストを記述することが大切です。

検索エンジンのクローラーはhtmlを読み込む際に、テキストの内容は理解できますが、画像の内容・意味を正確に理解することはできません。

そのため、altタグで設定されているテキスト・前後のテキスト・画像ファイルの名前・画像サイトマップを読み込み、どういった画像なのかを判断しています。

この中で、一番クローラーに画像の内容を伝えることができるのが、画像の内容を指定したaltタグになります。

「altタグを設定することで大幅に順位上がるわけではない」ですが、クローラーに画像の意味を理解させることで、「ページ内にはテキストだけではなくテキストの内容を補足する画像での説明がある」ページだと判断されるためSEO対策上でも良い効果があります。

■　実際にaltタグを設定し検証を行った順位の結果

「Googleビジネスプロフィール　権限リクエスト」で6位前後の弊社メディアサイトの記事内の画像4枚に対して、altタグを設定して効果検証を行った結果、順位が2位程度上昇する結果となりました。
※ 同時期に関連記事を追加するなど順位上昇には別の要因も考えられる。

①【htmlでalt属性を設定する場合】

htmlでaltタグを記述する場合は以下のように記述します。

 <img src=”画像のURL” alt=”画像の説明”>

画像の説明の部分に「画像の内容を表すテキスト」
画像のURLの部分には「画像のアドレス」を指定します。

②【shopifyでalt属性を設定する場合】

shopifyでaltタグを記述する場合は以下のように記述します。

1.「商品管理」→「全ての商品」→altタグを設定したい商品を選択
2.「商品画像をクリック」→「代替テキストを追加する」をクリック
3.「altに入れるテキストを入力」→「代替テキストを保存する」

③【word pressでalt属性を設定する場合】

「artタグを設定したい画像をクリック」→「代替テキストの項目に入力」→「更新ボタン」

④【wixでalt属性を設定する場合】

「エディタからartタグを設定したい画像をクリック」→「設定アイコンをクリック」→「代替テキスト（SEO用）にテキストを入力」→「サイトを公開」

alt属性は、画像が表示されない場合や音声ブラウザで読み込みをおこなう際に、画像の意味をユーザーに伝える目的で設定するため、画像の内容と関係のないテキストや、分かりづらいテキストを入れてはいけません。

必ず画像の内容に合うテキストを入れるようにしましょう。

alt属性に入力する代替テキストは、画像の内容を「簡潔なテキストで記述」します。

検索エンジンやユーザーに分かりやすい簡潔な内容で書かれた代替テキストは、ユーザーの混乱を避け、ユーザビリティを向上させるといった効果が期待できます。

例えば、ある商品を紹介するページに設置した画像からリンクを貼る場合、a要素を設定する必要があります。その際は、alt属性のテキストに「商品はこちら」などの記述ではなく、「商品名」を記述した方が、検索エンジンやユーザーにリンク先の内容を分かりやすく伝えることができます。

検索結果における順位を上げることを目的に、alt属性に対して特定のキーワードだけを詰め込んだり、繰り返し記述したりすると、検索エンジンにマイナスの評価をされてしまう可能性があるため注意が必要です。

また、alt属性のテキストに含める文字数は決まっていませんが、極端に長くならないように、できるだけ簡潔で分かりやすい文言で記述することを意識することが大切です。

alt属性はアンカーテキストの役割をするため、バナーリンクなど画像がtitleやh要素である場合は、リンク先のサイトの内容や、バナーの内容を適切にクローラーに伝えるためにaltタグを設定してください。

その際バナーリンクのクリック先URLが採用ページであれば「このリンク先のページは採用ページになります。」ではなく、「採用ページ」とテキストを記述すれば問題ありません。

商品ページへのリンク、資料ダウンロードページへのリンク、別ドメインへのリンクなども同様です。

すべての画像にalt属性のテキストを記述する必要はありません。例えば、背景画像やラインマーカーなど、WEBサイト上のデザインや装飾を目的で使用している画像は、コンテンツ内で意味を持つ画像ではありません。

このような意味を持たない画像に対してもalt属性は記述しますが、alt属性のテキストを設定する必要はないため、「alt=””」といったように値は空白のままで記述します。

【例】

<img src=”img/flags.gif” alt=””>

検索エンジンの読み込みの精度が進化し続ける今、これまで以上にユーザーや検索エンジンに対して分かりやすく情報を伝え、使いやすいWEBサイトを実現させることが求められています。

alt属性（代替テキスト）の書き方の良い例と悪い例をこちらの画像を例題に説明します。

【alt属性の書き方　良い例】

<img src=”〇〇.png” alt=”豚骨ラーメン”>
<img src=”〇〇.png” alt=”豚骨ラーメン 大盛”>

このようにシンプルで具体的に画像の内容が記述されている。

【alt属性の書き方　悪い例】

<img src=”〇〇.png” alt=””>　⇒　altの設定が無い
<img src=”〇〇.png” alt=”麺類”>　⇒　altの内容が曖昧
<img src=”〇〇.png” alt=”麺類 ラーメン豚骨ラーメン チャーシュー麺　大盛ラーメン”>　⇒　altのキーワードを詰め込みすぎ
<img src=”〇〇.png” alt=”パスタ”>　⇒　altの内容とあっていない

内容が曖昧、キーワードを詰め込み過ぎている、内容とあっていないのは悪い例となります。キーワードの詰め込みや、関係の無いキーワードの詰め込みはペナルティの対象となる可能性があるため注意が必要です。

また、alt属性はスクリーンリーダーで読み上げられた場合に、画像の内容が伝わらないと意味がありません。

そのため、適切な内容をaltタグに記述することが重要ですが、画像としての意味をもたない装飾画像にもaltタグが設定されていると、スクリーンリーダーで読み上げられた際に突然、前後のテキストと関連の無い単語が読み上げられてしまうため注意してください。

Google chromeの拡張機能で「Alt＆Meta viewer」というツールを利用することで簡単にaltタグに設定されている代替テキストを確認することができます。

【方法】

▼ STEP 1
Google chromeに追加するためにAlt &amp; Meta viewer – Chrome ウェブストア
このページに行き、「Googleに追加」をクリックしてインストール

▼ STEP 2
Google chromeの右上に[alt]というアイコンが表示されるのでそちらをクリック。
これで設定されているalt属性を確認することができます。

alt属性は拡張機能をインストールしなくてもGoogle chromeの検証機能を使って確認することもできます。

【方法】

▼ STEP 1
alt属性を確認したいぺージを開いた状態でマウスを右クリック
※ winの場合はキーボードの「F12」をクリックでも開きます。

▼ STEP 2
右側にソースコードが表示されるので画像のコードをクリック
「alt=」と記述されている部分を確認します。

alt属性の役割とは？

クローラーに何の画像なのかを認識させるために設定する、代替テキストを指定するための属性になります。

alt属性のSEO効果は？

通常の検索結果で大幅に検索順位が上がるなどの効果はないため、直接的なSEO効果は無いと言われています。ただし、画像検索結果で表示されやすくなるといった効果はあります。

alt属性の確認方法は？

Googleの検証機能を使った確認方法と「Alt＆Meta viewer」等のGoogle拡張機能を使って確認することができます。

「alt」何を書く？

画像の内容を具体的に分かりやすく記述するようにしてください。

alt属性の略称は？

altは「alternate」の略となります。「altテキスト」「代替テキスト」「alternate text」「altタグ」と呼ばれます。

alt属性の長さは？何文字まで？

文字数の制限など長さの決まりはありません。ただし、スクリーンリーダーで読み上げられることも想定して簡潔に分かりやすく説明しましょう。

「aLT」なんて読む？

「オルト」と呼びます。

「代替え テキスト」と「alt属性」の違いは？

同じ意味となります。

今回紹介した「alt属性」はSEOに直接的に大きな効果を及ぼすことはないとされていますが、テキスト以外の画像コンテンツが表示されないときなどに、正しい情報を伝えられる、アンカーテキストの代わりとなってユーザーに有益な情報を提供するといった観点からみると、alt属性の役割や効果を知り、正しい使い方をすることは非常に重要な施策といえます。 

意味を持たない画像にはalt属性を設定する必要はありませんが、分かりやすく使いやすいページやWEBサイトを構築してアクセシビリティを向上させるためには、alt属性の設定を行うことが望ましいといえるでしょう。

以上、「alt属性の役割」や「SEO効果」、そして「正しい設定方法」についての解説でした。