こんにちは。WEB制作してます、あむのです。
みなさんは、ブログを更新するとき、記事を更新するとき、サイトのコンテンツを更新するときなどに、画像をアップロードしますよね。
その時に、ちゃんと「代替テキスト」設定していますか？
htmlではaltと呼ばれているこの代替テキストですが、SEO対策に効果があったりします！
今回はalt属性について説明します。
代替テキスト（alt属性）とは？
alt属性とは、検索エンジンにテキスト情報で画像の内容を伝えたり、画像が何らかの原因で表示されない時に、画像の代わりとして表示するテキストのことです。
だから代替テキストって言うんですね。
検索エンジンは、画像だけでは、その画像に何が写っているのか、書かれているのか、何を表す画像なのかを把握することまではできません。
画像はただの「画像」として扱われてしまいます。
そこで、alt属性に画像を説明する言葉やタイトルを入れてあげると、検索エンジンがその画像のテキスト情報として理解してくれると言うわけです。
htmlでの書き方
画像のalt属性はimgタグの中に書きます。
<img src=”画像のURL” alt=”ブログのアイコン”>
と言うように書きます。
wordpressでの設定方法
①画像の追加やメディア欄を開き、altを設定したい画像を選択します。
②「代替テキスト」の欄に追加したいテキストを入力します。
③そのまま右上の×で画面を閉じれば設定完了。
alt属性を設定するときの注意
alt属性は、SEO対策に重要な役割がありますが、間違った記入をすると逆にSEOに悪影響を及ぼす恐れがあります。
alt属性は正しくつけましょう。
以下の説明の例として、この画像を使用します。
【上記画像にaltをつけるときの良い例】
alt=”学校給食の画像”
キーワードを詰め込みすぎない
alt属性は、検索エンジンに画像の内容を伝えるためのテキストです。
いくらSEOに効果があるからと言って、無理にキーワードを詰め込みすぎないようにしましょう。
【悪い例】
alt=”パン 学校給食 スープ トレイ”
長すぎるテキストはあまり良くない
altは長すぎると伝わりにくくなってしまい、逆にわかりにくくなってしまいます。
無駄な言葉を使わずに、できるだけ簡潔に記載しましょう。
画像の内容と違うテキストを書かない
画像の内容と違うテキスト、つまり嘘の内容は書かないようにしましょう。
例えば、写真の中にクラスメイトや教室はほとんど写っていませんが「クラスメイト」などと書いたりすることもあまり好ましくありません。
画像に写っている内容を正しく記載しましょう。
【悪い例】
alt=”給食 教室 クラスメイト 授業”
装飾目的の画像にはaltは不要
背景画像や文字下の飾りなど、記事やコンテンツに意味を持たない装飾としての画像にaltをつける必要はありません。
ただし、alt=””は必要です。「”」と「”」の間が空欄でも、alt=””の記述は忘れずにしましょう。
【例】
<img src=”画像のURL” alt=””>
これは、以下で説明するWEBアクセシビリティに関係します。
【WEB制作者向け】WEBアクセシビリティ準拠サイト制作での配慮としてのalt属性
※この項目はWEB制作者向けです。
知っていて損はないと思いますが、ブログ更新などには必要ないので読み飛ばしていただいて大丈夫です。
alt属性の役割は、ただ画像が表示されない時に現れる代替テキストというだけではありません。
WEB制作において、目の不自由な方へのWEBアクセシビリティに配慮した制作を心がけることがあります。
具体的には、目の不自由な方は音声読み上げのソフトを使用してWEBサイトを閲覧します。
その時に画像があると、その画像の説明としてalt属性のテキストを読み上げることになります。
通常にテキストとして書かれている中に画像がある場合は、そこに紛れて画像のaltのテキストを読むこともあります。
その状況を考えると、簡潔に、丁寧に画像の内容を説明している代替テキストのほうが、目の不自由な方にも、健常者にも誰にでもわかりやすくて良いですよね。
キーワードだけ（alt=”給食 パン 牛乳”）や全く違う内容（alt=”給食 クラスメイト”）などの記載だと、それが読み上げられてしまうことを考えると、画像の内容が伝わらず不便になることが想像できます。
また、装飾目的の画像の場合の空欄（alt=””）でも記述が必要な理由はこのアクセシビリティに関係します。
「空欄のalt=””」がない場合だと、ただ単に「画像」と読まれたり、画像のファイル名が読まれたりすることがあります。
それを防ぐためにも、説明するテキストがなくてもalt=””は忘れずに描くようにしましょう。
わかりやすく、簡潔な正しいテキストが大切
SEOで大切なのは、「誰にでもわかりやすい」ことです。
SEO対策としてこうした方が良い、ということではなく、サイトを利用する人が使いやすく、わかりやすいalt属性をつけることが大切です。
また、アクセシビリティとしての観点から見ても、altは重要です。
誰が見ても使いやすく、わかりやすいサイトを目指してより良いサイトづくりを行いましょう。
