alt属性とは

alt（オルトと読みます）属性は、imgタグなどの内容が表示できない場合に
「代替テキスト」として指定します。

よく「altタグ」と呼ぶ人もいますが、正しくはタグの中の属性なので、「alt属性」です。

HTMO2.0以降、imgタグとmapタグはalt属性の記載は必須となっています。

今回はその中でも最も多く使われる、imgタグのalt属性について
お話をしたいと思います。

alt属性を記述するとSEOにも効果がある？

alt属性はSEO対策になる、という話は聞いたことがありますか？

実はこれは正解で、imgタグでは検索ロボットが画像の内容を認識できないので
代わりに画像や写真の説明をalt属性で指定してあげます。

・・・とは言っても現時点でもだいぶコンピューターが画像を認識できるようになっていますので、
AIがますます発達すると、このタグも意味が変わってくる時が来るのかもしれません。

現状ではaltは必須なので、必ず書くようにしましょう。

写真と文章の場合

富士山
富士山（ふじさん、英語：Mount Fuji）は、静岡県（富士宮市、裾野市、富士市、御殿場市、駿東郡小山町）と、山梨県（富士吉田市、南都留郡鳴沢村）に跨る活火山である。標高3776.24 m[4][5]、日本最高峰（剣ヶ峰）[注釈 1]の独立峰で、その優美な風貌は日本国外でも日本の象徴として広く知られている。（Wikipediaより引用）

このように風景や情景のイメージ、挿絵として挿入される写真は、
その内容をaltに書きます。

この場合単に「富士山」や「富士山の写真」と書くのもOK。

人間はこの写真を見たときに、富士山の他に河口湖が手前にあり、
そして桜が咲いていることも理解できますが、ロボットは今のところそういうわけにいきません。

ロボットに対してもこの写真がどういう描写なのかを伝えるには、
上記ソースコードのように、
「河口湖から桜越しに望む春の富士山」などと記載するとなおよいでしょう。

ロゴの場合

企業、団体、サービス名などのロゴマークはその名称を記載するのが正解です。

名称のほかに、サービス名や商品名をわかりやすくするキャッチコピーを入れてもOKです。

例: 「北海道でていねいに作った生乳で作りました　函館MILK SOFT」
例: 「おうちでラクラク印刷　かんたんフォトコピー」

集合写真の場合

「〜の様子」や「〜の風景」というキャプションを見たことがあるかと思います。

ここでもalt属性にはどんな会場なのかを記述するとよいでしょう。

誰かが何かをしている写真の場合

ここも単純に「2月22日開催された少年野球決勝の様子」でもよいかもしれません。

しかし複数写真がある場合は、alt属性が同じになってしまうので、上記ソースコードのような、
状況を説明するキャプションを記述することも、重複記述を避けられるので一つの方法です。

バナーの場合

バナーの場合は、バナー内の要素を記述することが一般的です。

サービスや商品を紹介するバナーの場合は、
その名称とともに、端的な紹介文やキャッチコピーを添えます。

この場合も説明が長くならないようにして、ワンライン程度で商品やサービスを説明できればベストです。

＊余談ですが、当社でベータ版のファイルストレージを開発しました( ´−`)。oO

altを書かなくてよい場合もある

altは必須と言いながらも、実は書かなくてもいい場合があります。

そのケースとして、
・アイコンなどの小さな画像
・スペーサー
が主に挙げられます。

▼アイコン画像を配置する場合

新着情報

▼アイキャッチ画像を配置する場合

　

英語をもう一度勉強したい方
　

海外旅行をもっと楽しみたい方
　

海外出張の予定がある方
　

TOEIC受験を目指している方

このように特筆すべきことがこのアイコン画像にない場合、alt自体を書かなくてもOKです。

★アイキャッチ画像の例の場合は、本来はcssのbackgroundまたはbackground-imageを
使って記述するほうがHTMLとCSSの構造としてナチュラルです。

とは言っても、最近画像スペーサー（透明なgifやpngの画像）を使って、
レイアウトする人はほとんど見なくなりました。

いまやCSSで調整すべきですからね。

やってはいけない記載例

▼全然ダメなalt属性の記述例

いくらSEO対策だからといって、画像内容とは無関係なキーワードや、
意味のないキーワードを片っ端から書くのは
Googleのペナルティを受ける可能性が大いにあります。

情報はコンパクトにかつ、正しく記載することでSEOとしても最大の効果があがります。

迷ったら見たままのことを書こう

ここまでalt属性の書き方いろいろなパターンを見てきましたが、
どうしてもaltを書きづらい内容もありますよね。

この写真やイラストが何なのかを、子どもに教えるかのように記述すると考えると
よいと思います。

極端な場合として、

（例）花の写真
（例）ネコのイラスト

でもその写真やイラストが、何なのか、ざっくりと分かりますよ。