どうも、7noteです。今回はaltのお話。

imgタグを書くとき、必ずaltを入れていますか？
今回はimgタグにいれるaltについて説明していきます。

そもそもaltとは何？

↓↓↓

「alt」　・・・　alt属性（読み方：オルトぞくせい）と言われるもの。alternativeの略

日本語的にいうと、画像が読み込めなかった時の代替情報と言ったところでしょうか。WEBが画像の読み込みに失敗したりしたときに、代わりに表示する情報（テキスト）ということです。

altを設定する理由って？

大きく2つあり、１つはそのWEBサイトをみている人のため、もう一つは検索エンジンのためです。（SEO対策）。

①WEBサイトをみている人のため

WEBサイトをみているときに、こんなマークみたことないですか？

これは画像が読み込めなかったですという意味のマークになります。
普段パソコンをつかってWEBサイトで調べ物などしてれば1回くらいは見かけたことがあるのかなと思うのですが（最近のサイトにはあまり見かけない）、作成されたのが古いサイトとかだと画像へのパスが変わったり、画像そのものが削除されてしまい画像が読み込めなくなってこのマークが表示されることがあります。

このままではWEBサイトをみていた人が、「ここにはなんの画像が入るんだろう？」となってしまい、なんの画像か分からずにストレスになってしまいます。（そもそも画像出てないのもよくないですが。。。）

こんなときにaltを設定しておくと、こんな風に表示されます。

<img src="cat.jpg" alt="猫の写真">

マークの横にaltで指定した文字が表示されるようになります。
こうすることで、WEBサイトをみた人が「あ、画像が読み込まれてないけどここには猫の写真が入るんだな」ということを理解できます。

さらにaltの役割としては「音声読み上げ」される際にも利用されます。あまり利用されることは多くないのですが、しっかりとaltを設定することはとても重要な事だと言えます。

altはできるだけ具体的に書く事を意識しましょう！

②検索エンジンのため（SEO対策）

検索エンジンって聞いた事ありますか？一言で言えばgoogleです笑
WEBサイトを探すときに「ググる」事はよくしますよね。
そして検索結果が出てきて、それで欲しい情報を見つける・・・と。

ではこの検索結果の順番は誰が決めているのでしょうか？そうです、googleです。（もちろんyahooで検索した時はyahooです。）
googleのAIが、世の中のWEBサイトの中身（ソースコード）をみて、検索した人に有益そうな情報が載っているWEBサイトを検索結果の上位に表示されます。
この時、WEBサイトの中身をAIがみに来るのですが、AIはまだ正確に全ての画像を認識して情報を取得することはできません。そのため代わりにaltの内容を情報として扱ってもらえます。

altの設定は検索順位（SEO）にとても重要な役割を果たします。