【alt属性の取扱説明書】すべての人に優しいサイトを目指しましょう【SEO対策】

80%の完成度でもどんどん記事は公開するべきです。

私自身も、
不完全と自覚しつつも記事を公開しています。

とはいえ、
どこかのタイミングで記事やコードのテコ入れは必須です。

テコ入れの手始めとして、
過去記事の画像のalt属性を修正(追加)したので、

・alt属性ってなんなの？
・alt属性をいれる必要はあるの？
・alt属性はSEO対策に役立つの？

などについて説明をいたします。

画像を表示したい場合、

<img src="" alt="画像の説明文が入ります" />

こんなタグが必要になります。

alt=”画像の説明文が入ります”

部分の取扱説明書エントリーです。

そもそもimgタグのalt属性ってなに？

When using the img element, specify a short text alternative with the alt attribute. Note. The value of this attribute is referred to as “alt text”.
When an image contains words that are important to understanding the content, the alt text should include those words. This will allow the alt text to play the same function on the page as the image. Note that it does not necessarily describe the visual characteristics of the image itself but must convey the same meaning as the image.

参照元： W3C

ちゃんと公式の説明を読む癖をつけるのは大事です。

私なりに訳すると

img要素を使用するときは、alt属性（代替テキスト）をつかって画像を端的に記してねー！
ここで記された代替テキストは、alt属性として言及されるから、そこらへんよろしく！
画像の中にテキストがあって、そのテキストがないとその画像が何なのかわかりづらい場合、alt属性（代替テキスト）にそれらの文言を絶対に入れなさいよー！
そうすれば、代替テキストがその画像と同じ機能を持てますよー！
ちなみに、代替テキストで画像の姿形を記述するのは必要はないけど、どんな画像なのかをしっかりと説明できる代替テキストをいれないとダメよ！

*誤訳があったらご連絡ください。

ポイントはいくつかあります。

端的に記す

specify a short text alternative

とありますので、
あまり長々とalt属性にテキストをいれるのはやめましょう。

画像内にテキストがある時は、それを記す

When an image contains words that are important to understanding the content, the alt text should include those words.

画像の中にテキストがある場合は、
そのテキストをしっかりといれましょう。

あまりに長いテキストの場合は、
要約したものをいれましょう。

画像を説明するテキストは必須

must convey the same meaning as the image

どんな画像なのかについては、
しっかりとalt属性で説明をしましょう。

サンプル画像で説明

この画像であれば、

alt=”キューバの革命広場で寝そべっている男性”

でいいでしょう。

なんでalt属性をいれる必要があるの？

alt属性をいれなくても、
しっかりと画像は表示されます。

ではなんでalt属性というものがうまれたのでしょうか？

3つの視点からalt属性の必要性を説明します。

トラブルが起きた時の保険としての必要性

alt属性に記入されたテキストは、
画像が表示されなかった場合に、
画像の代わりとして表示されます。

インターネットの回線が途中で切れてしまったり、
速度制限のかかった端末からのアクセスがあった場合、
読者にどんな画像が挿入されているのかをしっかりと示す必要性があります。

視覚障害者への配慮の必要性

もっとも重視するべきなのはこの点です。

全盲利用者は、主に音声読み上げソフト（音声読み上げブラウザやスクリーン・リーダー）を用い、 HTMLのテキスト部分を音声化してインターネットを利用している。

参照:
視覚障害者のインターネット利用特性と問題分析

alt属性は上記の通り、
音声として視覚障害者に届けられます。

全ての人に開かれたブログ（サイト）を目指すためにも、
alt属性は必ず記入しましょう。

検索エンジン対策の必要性

検索エンジンのロボット（クローラー）は、
あなたのサイトを目に見える形で探索しているわけではありません。

あくまでもテキストの羅列としてあなたのサイトを理解するわけです。

画像があるのはわかるけど、
どんな画像なんかはわからない。

そんな状況は好ましくありません。

クローラーがあなたのサイトをしっかりと理解できる形にしましょう。

alt属性はSEO対策になるの？

おそらくあなたが一番気になっているのはここでしょう。

結論から言いましょう。

alt属性で劇的なSEO効果というのは現状ありません。

一昔前はalt属性を悪用するブラックハットSEOも流行りましたが、
現状ではそのような悪用はペナルティーをうけるおそれすらあります。

ただ、

全ての人に開かれたWeb

をGoogleが目指している以上、

回線速度の遅い地域に住む人や、
視覚障害を持つ人に優しくないサイトが高評価を受けることはありません。

alt属性をいれることは、
そこまで大変な作業ではありません。

サボらずにしっかりと記入しましょう！

カテゴリー: ブログ

執筆者: みーぷー