代替テキスト（alt属性）とは？SEOへの影響や書き方を解説！

ブルーちゃん。Webページを作る時に、画像には代替テキストを付けるのがいいって聞いたんだけど、代替テキストって何かしら？

そうなのね！ぜひ詳しく教えてくれないかしら？

冒頭でも言った通り、代替テキストは「画像が表示されない、あるいは障害等で見ることができない場合に、画像の情報を提供するための説明」だよ。

Webページだけでなく、X（旧Twitter）やInstagram、エクセルの画像にも代替テキストを設定できるんだ。

画像が見られれば、代替テキストの出る幕はないからね～。

でも代替テキストはWebページを快適に楽しむために必要なものなんだよ。

具体的には以下のようなメリットがあるんだ～。

簡単に言うと、どんな人でもWebを利用できるようにすることだよ。

年齢や心身の状態を理由にWeb上の情報やサービスを受けられないということがないようにするのが目的なんだ。

代替テキストは画像の内容を説明するから、例えば視覚障害を持つ人にも理解してもらえるようになるよ。

スクリーンリーダーだね。このソフトを使えば、本文だけでなく代替テキストも読み上げてくれるんだよ。

アクセシビリティ向上とも関連するけど、代替テキストの設定はSEOにも影響があると言えるんだ。

そうそう。画像検索に出てくるということは、検索エンジンが内容を把握したってことなんだよ。

検索エンジンはクローラーを使って情報を収集しているんだけど、画像はうまく認識できないんだ。

代替テキストで説明を付ければ、画像情報を把握してもらえるから画像検索結果に出てきやすくなるし、Webページ全体のわかりやすさアップにもつながるよ～。

もちろん検索エンジンはコンテンツの質も重視するから、代替テキストを付けるだけでSEO効果が急上昇するわけではないよ。

でも間接的には影響があるから、横着せず書くようにしようね～。

代替テキストはHTMLの場合、<img>を使うよ。

例えば、「<img src="〇〇" alt="xx">」という形式だね。

1つ目の""内には画像情報を、そして2つ目の""に代替テキストを入力してね。

WordPressは画像のアップロード後にそれをクリックし、「添付ファイルの詳細」内の「代替テキスト」欄に書けばOKだよ～。

そうだと思って2つ例を用意したから、参考にしてみてよ。

良い例と悪い例はこんな感じかな。

画像の情報を正しく簡潔に表現していたからね。

猫なのに犬、みたいに、嘘の情報を書くのは論外だよ～。

そうだね。ビニールハウス内で撮られたものだよ。

代替テキストを書くとしたら、こんな感じかな。

果樹園や観光にまつわるサイトの、いちご狩りに関するページを想定したんだ。

要素の詰め込みは良くないけど、使う目的に沿ったものならある程度OKだと思うよ。

いちごとかけ離れた情報が載りすぎているからね。

あくまでも画像に関する内容を記述するのが鉄則だよ。

代替テキストの書き方はわかったかな？

そういうこと。さっきの例で触れられなかったところもあるから、それも含めてポイントを振り返っておこう。

さっきピンクちゃんが言っていた通り、画像の内容を具体的かつ簡潔に書くのが第1目標だよ。

その理由としては、長過ぎちゃうとスクリーンリーダーを使った時に画像の説明が延々と続くことになって、結果的にページ全体の理解がしにくくなってしまうんだ。

クローラーにとっても長すぎるテキストは把握しにくいみたいだから、SEOのためにも短めを心がけよう。

かといって短すぎると情報が乏しくなってしまうから、例えば動物が被写体なら、「何が」「何をしているのか」を押さえておくのがおすすめだよ。

SEO対策のためにキーワードをたくさん入れたくなるかもしれないけど、それはおすすめできないよ。

そうそう。さらに検索エンジンに関しては冗長な文の時よりも深刻で、スパム認定されてペナルティが課されてしまう可能性もあるんだよ。

そうなると検索結果の上位に上がるどころか下がってしまうことに繋がるから、いかにキーワードを詰め込むかよりも、いかにコンテンツの質を上げるかに注力しようね。

代替テキストは大事だけど、なんでもかんでも書けばいいってわけではないんだ。

記事の内容に関係ない、装飾目的で載せている画像には書く必要はないよ。

この場合、HTMLでは「alt＝」のあとの「""」内を空欄にすればOKだよ。

そうすれば、スクリーンリーダーに読み上げられることなくスルーしてくれるんだ。

これは特にスクリーンリーダーを考えた場合だけど、テキストの締めは「画像」じゃない方がいいと思うよ。

旅行記や写真で何かを説明するサイトみたいに写真を多用するページだと、「～の画像」が連呼されることになり、うるさく感じてしまうんだ。

そういうこと！画像の説明だから「～の画像」で締めくくりたくなるかもしれないけど、読み上げられることを想定してテキストを作るようにしようね。

画像が表示されているなら、テキストは出ないんだよ。

設定ができているか確認したい時は、画像を右クリックして「検証」を選択すればコードが出てくるから、altの部分を見るといいよ～。

altの前にtitle属性を付けるか、画像の下に直接テキストを書き込むかのどちらかかな。

title属性の場合はカーソルを画像に載せないと見られないから、スマホで見られることも想定するなら直接書き込んだ方がいいかもね。

代替テキストをまとめるとこんな感じだよ～。

どういたしまして。またいつでも聞いてね。