SEO

【SEO】alt属性とは?適切な設定方法と書き方を種類別に徹底解説

Hirokuma
11分で読める
お気に入りに登録しませんか?
【SEO】alt属性とは?適切な設定方法と書き方を種類別に徹底解説

「alt属性って設定する意味あるの?」
「SEO効果を狙うにはどう書けばいい?」
「全ての画像に設定すべき?」

そんな疑問をお持ちではありませんか?

結論からお伝えすると、alt属性は全ての画像に設定すべきです。適切に設定することで、画像を見られないユーザーにも意味を伝えられ、検索エンジンにも画像の内容を理解させることができます。ただし、SEO効果を狙ってキーワードを詰め込みすぎると逆効果になります。

この記事では、alt属性の定義から5つのメリット、適切な書き方、種類別の設定例まで、わかりやすく解説します。

この記事でわかること

  • alt属性とは何か、その役割
  • alt属性を設定する5つのメリット
  • 適切なalt属性の書き方
  • 種類別のalt属性の設定例
  • alt属性の確認方法

alt属性(オルト属性)とは?

alt属性(オルト属性)とは?

alt属性(オルト属性)とは、Webサイトの画像に設定するテキスト(文字情報)のことです。HTMLのimg要素に記述します。

alt属性を適切に設定することで、何らかの事情で画像を見ることができないユーザーにも画像の意味を伝えられます。また、検索エンジンにも画像の意味を伝えられるため、一定のSEO効果を期待できます。

ただし、SEO効果を狙ってキーワードを詰め込みすぎると逆効果となるため注意が必要です。

alt属性を設定する5つのメリット

alt属性を設定する5つのメリット

メリット1:画像が表示されなくても画像の意味を正しく伝えられる

以下のような場合にalt属性に指定した文字列が表示されます。

  • 通信速度が不安定で画像が表示されない場合
  • ユーザーが画像を表示しない設定にしている場合
  • 画像のリンク切れ(パスが間違っている)があった場合

メリット2:読み上げソフトを使う時に画像の意味を伝えられる

スクリーンリーダーや音声読み上げブラウザを使う場合、画像にalt属性が設定されればその文字を読み上げてくれます。視覚に障害のあるユーザーにも画像の内容を伝えられます。

メリット3:検索エンジンに画像の意味を伝えられる

検索エンジンのクローラーはテキストの内容しか理解できず、画像そのものを理解することはできません。alt属性を適切に設定することで、検索エンジンにも画像の内容を理解させることができます。

メリット4:検索エンジンの画像検索に表示される

alt属性のテキストは、検索エンジンの画像検索アルゴリズムの一部で使われています。

Google検索セントラルでも「ファイル名とaltテキストを最適化すると、Google画像検索のような画像検索プロジェクトが画像を適切に理解しやすくなります」と説明されています。

メリット5:リンク画像のaltはアンカーテキストの役割を果たす

テキストの代わりに画像にリンクを設定する場合、alt属性はアンカーテキストの役割を果たします。検索エンジンがリンク先の内容を理解するためにも重要です。

全ての画像に適切なalt属性を設定すべき

全ての画像に適切なalt属性を設定すべき

意味のある画像のalt属性

「内容を表すテキスト」を設定します。

画像の内容を正確に表現するalt属性を設定することで、音声読み上げソフトや検索エンジンに画像の意味を分かりやすく伝えられます。

意味のない画像のalt属性

「空白」(alt=””)を設定します。

装飾目的(罫線や背景など)など意味を持たない画像については、空白を設定します。空白を設定しておけば、音声読み上げソフトでスキップしてくれます。

注意点として、alt属性自体が無い場合に画像名を読み上げてしまうソフトもあるため、必ず空白を設定しましょう。

alt属性の設定方法

alt属性の設定方法

HTMLで記述する場合

img要素のalt属性に画像の説明を記述します。

購買サイクルのイメージ図

WordPressで設定する場合

  1. メディアライブラリに画像をアップロード
  2. 「代替テキスト」欄に記述
  3. 「投稿に挿入」ボタンを押す

適切なalt属性の書き方

適切なalt属性の書き方

書き方1:文章に続けて読み上げても違和感のないテキストにする

テキスト→画像のalt属性→テキストが続けて読み上げられるため、文章の間に読み上げられて違和感のないテキストが最も良いです。

表現に迷ったら、文章と続けて読み上げてみて、違和感のないテキストを採用しましょう。

書き方2:装飾画像のalt属性は「空」にする

装飾目的の画像(ライン画像、背景画像、箇条書きのアイコンなど)は、alt属性を「空白」に設定します。

注意点として、alt属性自体を消すのではなく、値を空にします(alt=””)。

書き方3:画像の内容を簡潔に分かりやすく表現する

Google検索セントラルでも「ファイル名とaltテキストは短くてわかりやすいものにするのが最善です」と説明されています。

画像が表示されなかったとしても「どんな画像かイメージできる内容」がベストです。

避けるべきこと

  • 画像ファイル名をそのまま入れる
  • ページタイトルを流用する
  • 関係のない言葉を詰め込む

書き方4:コンテンツと重複しないalt属性を設定する

キャプションを設定しているなら、alt属性にはキャプションと重複しない内容を記述します。

altとキャプションの使い分け例

  • キャプション:うちのタロもこんなに大きくなりました
  • alt属性:公園で嬉しそうに笑うゴールデンレトリバー

SEO効果を狙った不適切な設定は逆効果

SEO効果を狙った不適切な設定は逆効果

Google検索セントラルでは「altテキストにキーワードを並べたり、文章全体をコピー&ペーストしたりする」のは避けるべきと明記されています。

キーワードを詰め込みすぎない

キーワードを詰め込んでしまうと画像の内容が分かりにくくなるだけでなく、Googleにスパム行為と認識されかねません。

悪い例
「実践ガイド、無料、プレゼント、SEO、コンテンツマーケティング、セミナー、売上アップ」

文章全体をコピペしない

ページにある文章を全てコピー&ペーストして設定するのはペナルティになる可能性もあります。

【種類別】alt属性の良い例

【種類別】alt属性の良い例

装飾画像・意味を持たない画像

alt属性を空に設定します(alt=””)。「ライン画像」などのテキストを入れたり、alt属性自体を設定しないのは避けましょう。

文字情報を含む画像

その文字をalt属性に入れます。

例:alt=”「バズ部が教えるコンテンツマーケティング101」を公開しました”

リンクを設定している画像

リンク先ページの内容が分かるテキストを設定すると効果的です。

例:alt=”お問い合わせ・資料請求はこちら”

グラフ画像

グラフの意味を説明する文章を別途置き、alt属性はシンプルな説明で済ませます。

例:alt=”当サービスの男女比グラフ”
本文:当サービスの男女比は、男性が65%、女性が35%となっている。

alt属性が適切に設定されているか確認する方法

alt属性が適切に設定されているか確認する方法

方法1:Google Chromeの検証機能を使って確認

  1. alt属性を確認したいページを開く
  2. ページ上で右クリックをして「検証」を選択
  3. alt属性を確認したい画像の上で、もう一度右クリックをして「検証」を選択
  4. 該当部分のimgタグが表示されるので、「alt=”○○”」の内容を確認

方法2:Google Chromeの拡張機能を使って一括確認

「Alt & Meta viewer」を使えば、無料でページ内のaltを簡単な操作で確認できます。

  1. chromeウェブストアにアクセス
  2. 「Alt & Meta viewer」を検索して追加
  3. Chromeブラウザ右上の「Alt」アイコンをクリック
  4. 「画像のAlt表示」を選択
  5. ページ内のalt属性が一括確認でき、altが設定されていない数も教えてくれる

よくある質問(FAQ)

よくある質問(FAQ)

Q. alt属性は全ての画像に設定すべき?

A. はい、全ての画像に設定すべきです。意味のある画像には内容を表すテキストを、装飾画像には空白(alt=””)を設定します。alt属性自体がないと音声読み上げソフトで画像名を読み上げてしまう場合があります。

Q. alt属性の文字数に制限はある?

A. 厳密な制限はありませんが、「短くてわかりやすいもの」が推奨されています。画像の内容を簡潔に表現し、長文にならないようにしましょう。

Q. alt属性にキーワードを入れてもいい?

A. 画像の内容と関連があれば入れても問題ありません。ただし、SEO目的でキーワードを詰め込むのは逆効果です。Googleにスパムと認識される可能性があります。

Q. WordPressで一括設定する方法はある?

A. メディアライブラリで各画像の「代替テキスト」欄から設定できます。過去の画像も編集可能です。プラグインを使った一括確認・修正も可能です。

まとめ:alt属性はユーザーのために設定する

まとめ:alt属性はユーザーのために設定する

この記事では、alt属性の定義から適切な書き方まで解説しました。

重要ポイント:

  • alt属性は全ての画像に設定すべき
  • 意味のある画像には内容を表すテキスト、装飾画像には空白を設定
  • 検索エンジンは画像そのものを理解できないため、alt属性で内容を伝える
  • キーワードの詰め込みや文章のコピペは逆効果
  • 画像が表示されなくても「どんな画像かイメージできる内容」がベスト

適切な書き方のポイント:

  1. 文章に続けて読み上げても違和感のないテキストにする
  2. 装飾画像のalt属性は「空」にする
  3. 画像の内容を簡潔に分かりやすく表現する
  4. コンテンツと重複しないalt属性を設定する

次のステップ:

  • 自サイトの画像にalt属性が設定されているか確認する
  • 装飾画像にはalt=””を設定する
  • 意味のある画像には簡潔で分かりやすいテキストを設定する
  • キーワードの詰め込みがないか見直す

alt属性は、上位表示させるためのテキストではなく、ユーザーのために設定するものです。書き方に迷ったら、音声読み上げソフトを使うユーザーに向けて、分かりやすい言葉を選びましょう。Googleはユーザーのためになるコンテンツを評価するため、ユーザーに親切なコンテンツを目指せば結果は後からついてきます。