営業時間:9:00~19:00|休日:土日祝日

altアイキャッチ画像

alt属性とは?事例を交えたダメな書き方と正しい書き方

altアイキャッチ画像

alt属性は書いたほうがいいのか?事例を交えて書き方を解説

記事の著者:ワイエスウェブテック代表者

画像のalt属性<img src=”abcdef.jpg” alt=”何を書けばいい??“>と悩んでいる方が多いそうです。

 

img要素のalt属性は、Googleなどの検索エンジンで大変厳しい目で見られています。

 

書いたほうがいいのか、空白のほうがいいのかお伝えします。

さらには、書く場合の注意点を把握するために、事例を交えてimg要素のalt属性について解説していきます。

本件img要素(画像)のalt属性の説明に使用する素材として、弊所トップページ上部に設置している以下の画像を使用します。

 

alt属性とは何かを知ろう

alt属性の難しい話

難しい話になります。こんなのいいや!という場合には、次の引用内容の簡潔な説明に進んでください。

img要素を使用するときは、簡潔なテキストによる代替をalt属性に指定する。注記: この属性の値は「ALT テキスト」ともいう。
画像がコンテンツを理解するために重要な文字を含むとき、代替テキストにはそれらの文字を含めなくてはならない。これにより、代替テキストはページ上で画像と同じ役割を果たすことができる。 代替テキストは、画像自体の視覚的な特徴を説明する必要はないが、画像と同じ意味を伝えなければらないことに注意する。

参照元:W3CWorkingGroupNoteより

1.1.1 非テキストコンテンツ

参照元:WCAG2.0 達成基準の達成方法

引用内容の簡潔な説明

alt属性は、使用用途が定義されており、画像の意味を知るために、画像と同じ意味を持つ文字(代替テキスト)で説明することにより、代替テキストは画像と同じ役割を果たすことができるということです。

Googleの画像認識レベルについて

GoogleはAIによる画像認識レベルが非常に向上しています。

例えば、新型コロナウィルスの画像は認識しており、『新型 コロナ』などのテキストで表示できるくらいすごいレベルに達していると言えます。

 

一方、弊所トップページの画像をGoogle検索をすると、『happy』とでます。

 

このことから、一般的によく見かけるようになった画像は検索エンジンでも認識するが、ほとんどのケースは画像認識ができないので、基本的にはW3CやWCAG2.0の基準などに準じて、alk属性に記述したほうが良いということになります。

 

弊所ホームページ、トップページのアイキャッチ画像は、Google・Bingどちらの検索エンジンも加工画像の意味を認識できていませんので、alt属性にテキストを書いています。

alt属性に記述するか空白か

alt属性はSEO対策目的ではない

まず、alt属性は、画像が表示されないときに画像に代わって文字で画像を説明し(代替テキスト)、かかる目的は、ユーザーのためであって、SEO効果を上げるためのものではないことを認識しておきましょう

 

書いたほうが良い or 空白が良いのか

では、alt属性は書いたほうがいいのか、空白のほうがいいのか。

 

回答は、W3Cなどの趣旨・そしてユーザビリティの観点から考えるなら、すべて書いたほうがいいということになります。

個別具体的には、画像とalt属性(代替テキスト=画像の簡潔な説明)に関連性が高い場合は書いたほうが良いです。

 

関連性はあるけど、関連性が低い画像なら空白のままでも良いでしょう。

空白でも特に問題はありません。

正しい書き方の事例

alt属性とは何かを知ろうでお話ししたように、alt属性は正しく記述する必要があります。

 

以下は弊所トップページの画像のimg要素のalt属性になります。

正しい書き方の一例です。

alt属性の正しい書き方の例

➀画像(視覚的認識)と➁alt属性(代替テキスト)が➂おおよそ一致しており、④簡潔な説明になっています。

 

➀➁➂④でW3CやWCAG2.0の基準に沿っており、これが本来のalt属性の使用用途になります。

誤った書き方の事例

次によくある、alt属性の誤った書き方について解説していきます。

1,画像とalt属性が一致しない

誤った書き方の例-意味が違う

急にシウマイが食べたくなったのでこのテキストで説明します(笑)

画像とalt属性が一致しておらず、alt属性の機能を果たせていません。

画像とalt属性の説明を一致させましょう!

 

2,簡潔な説明になっていない

誤った書き方の例-長文

長文になっていますので、簡潔な説明と言えません。

簡潔な説明に変更する必要があります。

 

3,文字の羅列になっている

誤った書き方の例-地域の羅列

この書き方は、ひと昔前に合ったSEO対策の手法で、地域名の羅列です。

様々な地域で集客したいのは共感しますが、現代においてこのような書き方をするとコンテンツ(画像やウェブページ、深刻な場合はホームページ全体)に悪影響を及ぼします。

 

画像とalt属性の一致と簡潔な説明文になるように記述しなおす必要があります。

 

4,キーワードの過剰詰込み

誤った書き方の例-キーワードの過剰詰込み

非常に悪い誤った書き方であり、過剰最適化といいます。

これは、SEO対策として大問題となりますので、すぐにやめましょう。

参考ブログ記事:コアアップデートを初心者でもわかりやすいように解説/ペンギンアップデート

まとめ

ツイッターを徘徊して、いろんなホームページを見ていますが、こんなに露骨ではありませんが、2~4のように、画像と関係ないのに地域名を入れたり、とにかく文字数を増やしたり、画像に表示してほしいキーワードを何度も詰め込む書き方は結構見かけます。

 

だいたい2~4全部取り入れてることが多いです。

 

alt属性の誤った書き方を客観的に見直し、排除することで、低品質ページになることを防ぎ、alt属性は正しい方法で書きましょう。

参考ブログ記事:低品質ページの見分け方と対策を7つご紹介!初心者でもわかりやすいように細かく解説

TOP

ブログトップ-検索一覧