![代替テキスト(alt属性)とは?SEOへの影響や書き方を解説!のアイキャッチ画像](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/374c8a5735584b76a5ff9f0777c57776/Group%20629.png?w=1200&fm=webp)
SEO
更新日: 2024/6/3
代替テキスト(alt属性)とは?SEOへの影響や書き方を解説!
![character_balloon](/media/character/pink_question_left.png)
ブルーちゃん。Webページを作る時に、画像には代替テキストを付けるのがいいって聞いたんだけど、代替テキストって何かしら?
代替テキストは、「画像が表示されない、あるいは障害等で見ることができない場合に、画像の情報を把握するための説明」を指すよ。
![character_balloon](/media/character/blue_normal_right.png)
ユーザビリティが向上するだけでなく、SEOにもある程度効果があると言われているんだ~。
![character_balloon](/media/character/blue_smile_right.png)
![character_balloon](/media/character/pink_smile_left.png)
そうなのね!ぜひ詳しく教えてくれないかしら?
おっけ~。書き方やポイントも併せて紹介するね。
![character_balloon](/media/character/blue_confidence_right.png)
代替テキストとは?
![代替テキスト(alt属性)とは?SEOへの影響や書き方を解説!の画像_2枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/50a0930d5b9d4d27836313ab89452ad4/01%20%E4%BB%A3%E6%9B%BF%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%81%A8%E3%81%AF.png?w=1200&fm=webp)
![character_balloon](/media/character/blue_up_left.png)
冒頭でも言った通り、代替テキストは「画像が表示されない、あるいは障害等で見ることができない場合に、画像の情報を提供するための説明」だよ。
![character_balloon](/media/character/blue_confidence_left.png)
Webページだけでなく、X(旧Twitter)やInstagram、エクセルの画像にも代替テキストを設定できるんだ。
いろんな媒体で代替テキストが使われているのね……。
![character_balloon](/media/character/pink_surprised_right.png)
普段あまり気にしていなかったわ。
![character_balloon](/media/character/pink_question_right.png)
![character_balloon](/media/character/blue_question_left.png)
画像が見られれば、代替テキストの出る幕はないからね~。
代替テキストを付けるメリット
![代替テキスト(alt属性)とは?SEOへの影響や書き方を解説!の画像_4枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/320061772c044f448f717dc90bdd74df/02%20%E4%BB%A3%E6%9B%BF%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%82%92%E4%BB%98%E3%81%91%E3%82%8B%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88.png?w=1200&fm=webp)
![character_balloon](/media/character/blue_smile_left.png)
でも代替テキストはWebページを快適に楽しむために必要なものなんだよ。
![character_balloon](/media/character/blue_down_left.png)
具体的には以下のようなメリットがあるんだ~。
1.Webアクセシビリティの向上
2.画像が表示されなくても内容がわかる
3.画像検索で表示されやすくなる
Webアクセシビリティって何?
![character_balloon](/media/character/pink_question_right.png)
![character_balloon](/media/character/blue_normal_left.png)
簡単に言うと、どんな人でもWebを利用できるようにすることだよ。
![character_balloon](/media/character/blue_confidence_left.png)
年齢や心身の状態を理由にWeb上の情報やサービスを受けられないということがないようにするのが目的なんだ。
![character_balloon](/media/character/blue_smile_left.png)
代替テキストは画像の内容を説明するから、例えば視覚障害を持つ人にも理解してもらえるようになるよ。
確かWebページ上の文章を読み上げてくれるツールがあるのよね?
![character_balloon](/media/character/pink_normal_right.png)
![character_balloon](/media/character/blue_up_left.png)
スクリーンリーダーだね。このソフトを使えば、本文だけでなく代替テキストも読み上げてくれるんだよ。
間口を狭めないためにも、代替テキストは必要不可欠なのね!
![character_balloon](/media/character/pink_smile_right.png)
SEOとの関係性
![代替テキスト(alt属性)とは?SEOへの影響や書き方を解説!の画像_6枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/43b1e7af5d68409280581a5e06bbf818/03%20SEO%E3%81%A8%E3%81%AE%E9%96%A2%E4%BF%82%E6%80%A7.png?w=1200&fm=webp)
![character_balloon](/media/character/blue_normal_left.png)
アクセシビリティ向上とも関連するけど、代替テキストの設定はSEOにも影響があると言えるんだ。
メリットにも「画像検索で表示されやすくなる」って書いていたものね。
![character_balloon](/media/character/pink_normal_right.png)
![character_balloon](/media/character/blue_confidence_left.png)
そうそう。画像検索に出てくるということは、検索エンジンが内容を把握したってことなんだよ。
![character_balloon](/media/character/blue_sigh_left.png)
検索エンジンはクローラーを使って情報を収集しているんだけど、画像はうまく認識できないんだ。
![character_balloon](/media/character/blue_smile_left.png)
代替テキストで説明を付ければ、画像情報を把握してもらえるから画像検索結果に出てきやすくなるし、Webページ全体のわかりやすさアップにもつながるよ~。
視覚情報はパッと目に付きやすいから、画像検索の上位にあがればサイト訪問者が増えそうね!
![character_balloon](/media/character/pink_happy_right.png)
![character_balloon](/media/character/blue_worry_left.png)
もちろん検索エンジンはコンテンツの質も重視するから、代替テキストを付けるだけでSEO効果が急上昇するわけではないよ。
![character_balloon](/media/character/blue_up_left.png)
でも間接的には影響があるから、横着せず書くようにしようね~。
代替テキストの書き方を解説!
![character_balloon](/media/character/blue_normal_left.png)
代替テキストはHTMLの場合、<img>
を使うよ。
![character_balloon](/media/character/blue_smile_left.png)
例えば、「<img src="〇〇" alt="xx">
」という形式だね。
![character_balloon](/media/character/blue_confidence_left.png)
1つ目の""内には画像情報を、そして2つ目の""に代替テキストを入力してね。
WordPressの場合はどうするの?
![character_balloon](/media/character/pink_question_right.png)
![character_balloon](/media/character/blue_smile_left.png)
WordPressは画像のアップロード後にそれをクリックし、「添付ファイルの詳細」内の「代替テキスト」欄に書けばOKだよ~。
どちらもそこまで難しそうではないわね!
![character_balloon](/media/character/pink_happy_right.png)
でも実際にどうやって書くかが問題ね……。
![character_balloon](/media/character/pink_worry_right.png)
![character_balloon](/media/character/blue_down_left.png)
そうだと思って2つ例を用意したから、参考にしてみてよ。
代替テキストの具体例1
![代替テキスト(alt属性)とは?SEOへの影響や書き方を解説!の画像_10枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/ba16fb438f4044ee8aca6761581f8777/04%20%E4%BB%A3%E6%9B%BF%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%81%AE%E5%85%B7%E4%BD%93%E4%BE%8B1%20%E6%96%87%E5%AD%97%E7%84%A1%E3%81%97.png?w=1200&fm=webp)
猫がご飯を食べている画像だと、どうなるのかしら?
![character_balloon](/media/character/pink_normal_right.png)
![character_balloon](/media/character/blue_normal_left.png)
良い例と悪い例はこんな感じかな。
1.良い例:「猫」
2.さらに良い例:「ご飯を食べている猫」
3.悪い例:「犬」
3.悪い例:「猫 ご飯 食事 可愛い ペット」
私が最初に何気なく言った内容でいいのね!
![character_balloon](/media/character/pink_confidence_right.png)
![character_balloon](/media/character/blue_normal_left.png)
画像の情報を正しく簡潔に表現していたからね。
![character_balloon](/media/character/blue_angry_left.png)
猫なのに犬、みたいに、嘘の情報を書くのは論外だよ~。
代替テキストの具体例2
![代替テキスト(alt属性)とは?SEOへの影響や書き方を解説!の画像_12枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/ef03c9e07b9240eab30a79bfa1fcef08/05%20%E4%BB%A3%E6%9B%BF%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%81%AE%E5%85%B7%E4%BD%93%E4%BE%8B2%20%E6%96%87%E5%AD%97%E7%84%A1%E3%81%97.png?w=1200&fm=webp)
真っ赤ないちごが実っている画像はどうなるのかしら?
![character_balloon](/media/character/pink_question_right.png)
![character_balloon](/media/character/blue_smile_left.png)
そうだね。ビニールハウス内で撮られたものだよ。
![character_balloon](/media/character/blue_down_left.png)
代替テキストを書くとしたら、こんな感じかな。
1.良い例1:「葉から伸びる真っ赤ないちご」
2.良い例2:「真っ赤ないちごが摘み放題のいちご狩り」
3.悪い例1:「真っ赤ないちごの画像」
3.悪い例2:「今シーズンのいちご狩りは〇月〇日から×月×日までを予定しています。ご来場の際は事前予約が必要です。電話番号は……」
良い例の2つ目はどういうこと?
![character_balloon](/media/character/pink_question_right.png)
![character_balloon](/media/character/blue_normal_left.png)
果樹園や観光にまつわるサイトの、いちご狩りに関するページを想定したんだ。
![character_balloon](/media/character/blue_confidence_left.png)
要素の詰め込みは良くないけど、使う目的に沿ったものならある程度OKだと思うよ。
でも悪い例2はやりすぎなのね。
![character_balloon](/media/character/pink_sad_right.png)
![character_balloon](/media/character/blue_worry_left.png)
いちごとかけ離れた情報が載りすぎているからね。
![character_balloon](/media/character/blue_up_left.png)
あくまでも画像に関する内容を記述するのが鉄則だよ。
代替テキストを書く時のポイントは?
![character_balloon](/media/character/blue_smile_left.png)
代替テキストの書き方はわかったかな?
そうね、写真の情報をシンプルに伝えることを意識すればいいんだなって思ったわ。
![character_balloon](/media/character/pink_normal_right.png)
あと、そのサイトの特色に合わせることも大事なのね。
![character_balloon](/media/character/pink_confidence_right.png)
![character_balloon](/media/character/blue_down_left.png)
そういうこと。さっきの例で触れられなかったところもあるから、それも含めてポイントを振り返っておこう。
1.具体的&簡潔を意識する(+正確性)
2.キーワードは詰め込まないようにする
3.装飾用の画像には不要
3.「~の画像」はNG
代替テキストのポイント1.具体的&簡潔を意識する
![character_balloon](/media/character/blue_up_left.png)
さっきピンクちゃんが言っていた通り、画像の内容を具体的かつ簡潔に書くのが第1目標だよ。
![character_balloon](/media/character/blue_sigh_left.png)
その理由としては、長過ぎちゃうとスクリーンリーダーを使った時に画像の説明が延々と続くことになって、結果的にページ全体の理解がしにくくなってしまうんだ。
わかりにくいだけでなく、煩わしくなってしまいそうね。
![character_balloon](/media/character/pink_sad_right.png)
![character_balloon](/media/character/blue_confidence_left.png)
クローラーにとっても長すぎるテキストは把握しにくいみたいだから、SEOのためにも短めを心がけよう。
![character_balloon](/media/character/blue_normal_left.png)
かといって短すぎると情報が乏しくなってしまうから、例えば動物が被写体なら、「何が」「何をしているのか」を押さえておくのがおすすめだよ。
代替テキストのポイント2.キーワードは詰め込まないようにする
![character_balloon](/media/character/blue_angry_left.png)
SEO対策のためにキーワードをたくさん入れたくなるかもしれないけど、それはおすすめできないよ。
さっきと同じように、スクリーンリーダーを使っている人は困ってしまうものね。
![character_balloon](/media/character/pink_worry_right.png)
「犬、柴犬、黒、かわいい、子犬……」なんて続けられたらブラウザバックしてしまいそうだわ。
![character_balloon](/media/character/pink_angry_right.png)
![character_balloon](/media/character/blue_scared_left.png)
そうそう。さらに検索エンジンに関しては冗長な文の時よりも深刻で、スパム認定されてペナルティが課されてしまう可能性もあるんだよ。
![character_balloon](/media/character/blue_normal_left.png)
そうなると検索結果の上位に上がるどころか下がってしまうことに繋がるから、いかにキーワードを詰め込むかよりも、いかにコンテンツの質を上げるかに注力しようね。
代替テキストのポイント3.装飾用の画像には不要
![character_balloon](/media/character/blue_worry_left.png)
代替テキストは大事だけど、なんでもかんでも書けばいいってわけではないんだ。
![character_balloon](/media/character/blue_normal_left.png)
記事の内容に関係ない、装飾目的で載せている画像には書く必要はないよ。
急に関係ない内容が読み上げられたら混乱してしまうものね。
![character_balloon](/media/character/pink_sad_right.png)
![character_balloon](/media/character/blue_smile_left.png)
この場合、HTMLでは「alt=」のあとの「""」内を空欄にすればOKだよ。
![character_balloon](/media/character/blue_confidence_left.png)
そうすれば、スクリーンリーダーに読み上げられることなくスルーしてくれるんだ。
代替テキストのポイント4.「~の画像」はNG
![character_balloon](/media/character/blue_normal_left.png)
これは特にスクリーンリーダーを考えた場合だけど、テキストの締めは「画像」じゃない方がいいと思うよ。
![character_balloon](/media/character/blue_sigh_left.png)
旅行記や写真で何かを説明するサイトみたいに写真を多用するページだと、「~の画像」が連呼されることになり、うるさく感じてしまうんだ。
「~の猫」「~なサラダ」のように被写体で締めくくればいいのね。
![character_balloon](/media/character/pink_normal_right.png)
![character_balloon](/media/character/blue_smile_left.png)
そういうこと!画像の説明だから「~の画像」で締めくくりたくなるかもしれないけど、読み上げられることを想定してテキストを作るようにしようね。
代替テキストが表示されない?確認・表示方法を解説
ブルーちゃん、代替テキストを入力したのに表示されないわ?
![character_balloon](/media/character/pink_question_right.png)
![character_balloon](/media/character/blue_normal_left.png)
画像が表示されているなら、テキストは出ないんだよ。
あらそうなの。設定が間違っているのかと思ったわ。
![character_balloon](/media/character/pink_surprised_right.png)
![character_balloon](/media/character/blue_confidence_left.png)
設定ができているか確認したい時は、画像を右クリックして「検証」を選択すればコードが出てくるから、altの部分を見るといいよ~。
通常時でも表示させたい時はどうすればいいの?
![character_balloon](/media/character/pink_question_right.png)
![character_balloon](/media/character/blue_up_left.png)
altの前にtitle属性を付けるか、画像の下に直接テキストを書き込むかのどちらかかな。
![character_balloon](/media/character/blue_smile_left.png)
title属性の場合はカーソルを画像に載せないと見られないから、スマホで見られることも想定するなら直接書き込んだ方がいいかもね。
新聞で、写真の下に短い分が書かれているようなイメージね!
![character_balloon](/media/character/pink_confidence_right.png)
![character_balloon](/media/character/blue_smile_left.png)
代替テキストをまとめるとこんな感じだよ~。
まとめ
◆代替テキストとは、画像が表示されない、あるいは障害等で見ることができない場合に、画像の情報を提供するための説明
◆アクセシビリティ向上やSEO対策に効果がある
◆具体的かつ簡潔に。キーワードの詰め込みはご法度!
Webサイトをより快適に利用してもらうために大切なのね。
![character_balloon](/media/character/pink_confidence_right.png)
今日は教えてくれてありがとう!
![character_balloon](/media/character/pink_smile_right.png)
![character_balloon](/media/character/blue_happy_left.png)
どういたしまして。またいつでも聞いてね。
![character_balloon](/media/character/blue_writer.png)
ブルー
SEOやエンジニアリングマーケティングが得意。非常にめんどくさがりで、動きたくないがために自分でコードを書いて自作のMAを組んだりする。自動化のためなら努力は惜しまない。