ブログやWebサイトで画像を使おうとすると必ずalt属性(代替テキスト)というものと出会います。
画像にalt属性を設定することでSEOの効果を高めてくれたりするので、alt属性というものが、そもそも、どんな役割をしているものなのかを理解して書きましょう。
alt属性ってなに？どんな役割をするの？と疑問に思われている方のご参考になればと思います。
目次
代替テキスト alt属性とは？
alt属性(代替テキスト)は、画像の内容を語句や文章で表したものです。
この画像に設定されたalt属性は以下のような場面で使用されています。
- 音声読み上げソフトを使用して、WEBページを閲覧した際に画像をalt属性のテキストで読み上げる。
- 画像がリンクになっている場合、alt属性のテキストがリンクテキストになる。
- Googleなどの検索エンジンのクローラーがWEBページを巡回する際に、画像のalt属性で内容を取得している。
- 画像表示をオフにした閲覧環境などでalt属性のテキストが表示される。
HTMLのコードでは以下のようになっています。
<img src="" alt="ここに画像の内容となる語句や文章を入れます">画像が代替テキストに置き換わった場合でも、簡潔で伝わる内容を書かなくてはなりません。
SEO効果を高めるalt属性
alt属性を画像に書いておくことでSEOに効果的だと言われています。
では、alt属性を書くことでなぜSEO効果を高めることができるのかを詳しく見ていきましょう。
なぜ、alt属性を書くとSEOの効果が上がるの？
先にご紹介したalt属性が使用される場面が大きく関わってきます。
簡単にもう一度、alt属性が使用される場面をおさらいしておきます。
- 音声読み上げソフトを使ったWEBページ閲覧をした際の画像内容テキスト
- 画像リンクのテキスト
- 検索エンジンが画像内容を取得する際のテキスト
- 画像表示がされない環境下でのテキスト
以上のような場面でalt属性が使用されています。
なぜ、alt属性を書くとSEOの効果が上がるといわれているのでしょうか。
GoogleのWEBサイト品質ガイドライン
最大手検索エンジンのGoogleが以下のように品質ガイドラインで明言しています。
検索エンジンではなく、ユーザーの利便性を最優先に考慮してページを作成する。
ユーザーの利便性とは、WEBサイトに訪れたユーザーに如何ににストレスなく、WEBサイトを使用してもらえるかということです。
そしてまた、ユーザーとは一般的にPCやスマートフォンを使用してWEBサイトを訪れるユーザーも入れば、特定の条件下でWEBサイトを訪れるユーザー(画像が表示できないユーザーや音声読み上げソフトを使用してWEBサイトに訪れるユーザー)もいます。
特定の条件下でWEBサイトに訪れたユーザーでもストレスなく、WEBサイトを使用してもらうためにもalt属性が必要不可欠なのです。
利便性の向上を行っていれば、検索エンジンに評価され、検索順位が上がってくるということです。
こういったことから、alt属性を書くと利便性が向上し、SEOの効果を高めることができると言われています。
alt属性の書き方
具体的にalt属性の書き方について見ていきましょう。
ただ、画像を見て内容をalt属性に書けばいいというわけでもありません。
問題:皆さんならどんなalt属性の書き方をしますか？
一つ皆さんにも分かりやすいように、例をあげて紹介していきます。
皆さんなら以下の画像を見て、どのようなalt属性の書き方をしますか？
上記の画像をみて、内容を判断するのですが想定される語句をあげてみたいと思います。
- ビジネス
- 会議
- 社内風景
- 男女
などなど、他にもいっぱいあると思います。
結論から言ってしまえば、上記の想定される語句の全てが正解です。
「ん？どういうこと？答えになってないじゃん」と思われたかもしれません。なぜ、全てが正解なのか、どういうことなのかをご説明いたします。
答え:前後の文章を踏まえて、伝えたい内容をalt属性に書いてください
上記の画像を見て、様々な語句が思い浮かぶと思いますが、前後の文章から判断して、その画像の内容をalt属性に書いてください。
例えば、採用情報のページで上記の画像を掲載したとしましょう。社内の魅力をアピールするページです。その場合、「男女」というalt属性は正しくありません。
「会議」「社内風景」などがalt属性には該当すると思います。
ただ画像を見て内容を判断して、alt属性を書くのではなく、前後の文章を踏まえて画像の内容を判断してalt属性に書くようにしてください。
WEBページというものは、文章で構成されています。文章の中で突然、突拍子もない語句が表示されればユーザーは理解ができません。これは画像でも同じことです。画像の内容はalt属性で判断されます。
文章の流れを考えて、alt属性を書くのが良いです。
alt属性は簡潔に書く
画像の内容をalt属性に長々と語句を書くのはNGです。
<img src="" alt="笑顔の男女4人組が会議をしている"><img src="" alt="会議 社内風景 ビジネス">上記のように、簡潔でなく長々とalt属性に書くのは、やめるようにしてください。ユーザーが分かりにくくなってしまうためです。
<img src="" alt="社内風景">このように、分かりやすい語句をalt属性に書くようにしましょう。
装飾用の画像は空のalt属性にする
画像にalt属性を書きましょうと言ってきましたが、例外があります。
それは、WEBサイトなどに使われている装飾用の画像です。
装飾用の画像を使う際には、空のalt属性を書くようにしてください。
<img src="" alt="">alt属性の中身に何も書かずに、画像の掲載を行います。空のalt属性にすることで、装飾用の画像だと判断され、検索エンジンなどにも影響することがなくなります。
読み上げソフトの場合は、読み上げされません。
最後に
WEBサイトで画像を使う際は、alt属性を必ず書くようにしましょう。alt属性は簡潔に前後の文章を踏まえて、内容を書くようにしてください。
SEO効果も高めることができますので、画像と言ったらalt属性というくらいの認識でも問題ありません。
alt属性とは一体なんだろう、alt属性ってどうやって書けばいいのと疑問に思われていた方のご参考になればと思います。
