alt属性とは alt（オルトと読みます）属性は、imgタグなどの内容が表示できない場合に 「代替テキスト」として指定します。 よく「altタグ」と呼ぶ人もいますが、正しくはタグの中の属性なので、「alt属性」です。 HTMO2.0以降、imgタグとmapタグはalt属性の記載は必須となっています。 今回はその中でも最も多く使われる、imgタグのalt属性について お話をしたいと思います。 alt属性を記述するとSEOにも効果がある？ alt属性はSEO対策になる、という話は聞いたことがありますか？ 実はこれは正解で、imgタグでは検索ロボットが画像の内容を認識できないので 代わりに画像や写真の説明をalt属性で指定してあげます。 ・・・とは言っても現時点でもだいぶコンピューターが画像を認識できるようになっていますので、 AIがますます発達すると、このタグも意味が変わってくる時が来るのかもしれません。 現状ではaltは必須なので、必ず書くようにしましょう。 写真と文章の場合
|
1 2 3 |
<img src="../images/fujisan.png" alt="河口湖から桜越しに望む春の富士山"> <h1>富士山</h1> <p>富士山（ふじさん、英語：Mount Fuji）は、静岡県（富士宮市、裾野市、富士市、御殿場市、駿東郡小山町）と、山梨県（富士吉田市、南都留郡鳴沢村）に跨る活火山である。標高3776.24 m[4][5]、日本最高峰（剣ヶ峰）[注釈 1]の独立峰で、その優美な風貌は日本国外でも日本の象徴として広く知られている。（Wikipediaより引用）</p> |
このように風景や情景のイメージ、挿絵として挿入される写真は、 その内容をaltに書きます。 この場合単に「富士山」や「富士山の写真」と書くのもOK。 人間はこの写真を見たときに、富士山の他に河口湖が手前にあり、 そして桜が咲いていることも理解できますが、ロボットは今のところそういうわけにいきません。 ロボットに対してもこの写真がどういう描写なのかを伝えるには、 上記ソースコードのように、 「河口湖から桜越しに望む春の富士山」などと記載するとなおよいでしょう。 ロゴの場合 企業、団体、サービス名などのロゴマークはその名称を記載するのが正解です。
|
1 |
<img src="../images/logo.png" alt="株式会社CreativeFlake"> |
名称のほかに、サービス名や商品名をわかりやすくするキャッチコピーを入れてもOKです。 例: 「北海道でていねいに作った生乳で作りました 函館MILK SOFT」 例: 「おうちでラクラク印刷 かんたんフォトコピー」 集合写真の場合
|
1 |
<img src="../images/seminar.png" alt="2月22日に開催したSEO対策セミナーの会場の様子"> |
「〜の様子」や「〜の風景」というキャプションを見たことがあるかと思います。 ここでもalt属性にはどんな会場なのかを記述するとよいでしょう。 誰かが何かをしている写真の場合
|
1 |
<img src="../images/baseball.png" alt="9回裏、優勝をかけ、最後の1球まで一生懸命応援をする選手たち"> |
ここも単純に「2月22日開催された少年野球決勝の様子」でもよいかもしれません。 しかし複数写真がある場合は、alt属性が同じになってしまうので、上記ソースコードのような、 状況を説明するキャプションを記述することも、重複記述を避けられるので一つの方法です。 バナーの場合 バナーの場合は、バナー内の要素を記述することが一般的です。 サービスや商品を紹介するバナーの場合は、 その名称とともに、端的な紹介文やキャッチコピーを添えます。
|
1 |
<img src="../images/banner.png" alt="150Mまで無料のファイルストレージといえば「函（HAKO）」"> |
この場合も説明が長くならないようにして、ワンライン程度で商品やサービスを説明できればベストです。 ＊余談ですが、当社でベータ版のファイルストレージを開発しました( ´−`)。oO altを書かなくてよい場合もある altは必須と言いながらも、実は書かなくてもいい場合があります。 そのケースとして、 ・アイコンなどの小さな画像 ・スペーサー […]