HTMLのimg要素の1つに「alt属性」がありますが、何となくテキストを記入していたり、SEOとの関係性までは考えずに設定している方も多いのではないでしょうか。
そこで今回は「alt属性」の役割や使い方について解説いたします。もくじ
◆alt属性とは
PCやスマートフォン、タブレットなどのWebブラウザは、通信環境や速度の問題などで画像が表示されない状況になってしまうことが多々あります。
その際、画像の代わりに代替テキストが表示されますが、このテキストがalt属性になります。
また、ページの読み上げ機能の際にも、alt属性の代替えテキストが読み上げられたり、画像検索の際にもalt属性に記述されているテキストで検索に引っかかる事になるので適切な画像説明の記述が重要になります。
◆alt属性のSEO効果
SEO的に最も重要なポイントは、「検索エンジンに対して分かりやすいサイト」という点ですが、alt属性を設定することも最優先したい事項になります。
ユーザーが画像を見れない環境にある時に、それが何の画像なのか把握できるためにalt属性は必要となりますが、検索エンジンは基本的に画像の内容を把握することが出来ません。
検索エンジンは設定されたalt属性のテキストで何を表している画像かを把握をします。
そのため「検索エンジンに対して分かりやすいサイト」にするためには、alt属性を正しく設定する事は必須項目となり、その結果SEO効果も期待ができます。
◆alt属性の書き方
alt属性はキーワードを詰め込みすぎると逆に情報が伝わりにくく、適切ではなくなります。また、逆に名詞１つといったように極端に短い場合でも情報が伝わりにくいので適切とはいえません。
画像に写っているものや、人物等がどのような状態なのか、種類などは何かを簡潔にわかりやすく記載する必要があります。
「～％OFF」や、「～％クーポン配布中」など、サービスを表したバナーなどの画像の際には、サービス内容も簡潔に記載した方が良いでしょう。
意図的に長くしすぎた場合、検索エンジンからスパム行為とみなされる可能性もあるので、注意しましょう。
◆まとめ
Google Chromeの拡張機能「Alt & Meta viewer」を使えば、簡単にalt属性を確認する事ができます。
他社のwebサイトがどんなalt属性を使用しているのかも確認ができ、勉強にもなるのでぜひインストールしてみてはいかがでしょうか。
alt属性を正しく設定しただけで検索順位が向上する可能性もあるので、簡潔でわかりやすく効果的なalt属性を設定するように心がけましょう。 フォーザウィンはIT業界で働く仲間を募集しています！ 経験、未経験は問いません。是非当社の採用情報をご覧ください。 採用情報を見る ＞