今回はHTMLのaltタグ（オルトタグ）について解説していきます。
altタグとは？
<alt>タグは、img画像の意味をテキストで補足する役割をもっています。
画像が表示できない時の「代替テキスト = alternative text（オルタナティブ・テキスト）」の頭文字をとって、alt（オルト）属性と定義されています。
画像ファイルは、テキストデータと比較すると容量が大きくなりがちです。
回線速度やサーバーの混雑状況などにより、スムーズに表示されにくい場合があります。表示が遅いWEBサイトは、画像が原因となっていることも多いです。
そこで、適切にaltタグを設置しておくことで、画像がうまく読み込まない場合には、代替テキストとして表示されて、ユーザーが画像の意図を解釈することができるようになります。
altタグの正しい書き方
altタグ内の文章の書き方は、画像がまったく表示されなかったと仮定して、すべてをその代替テキストに置き換えても、問題なく意味が通じるかということです。
もし、電話などで、文章の内容を伝えるときに、画像の部分はどのように伝えるかというアプローチで考察してみると、alt属性に書くべき適切な内容が見つかりやすくなるかもしれません。
altタグを記述しないとどうなる
imgタグで画像を設定したら、altタグも正しく記述するというのが一般的ですが、もし記述しないとどうなるのでしょうか？
結論から言うと、altタグに内容を記述しなくても、ホームページ自体は問題なく公開できます。
それでは、altタグの内容を正しく記述しない場合、どういった悪影響がでてしまうのかについて詳しく解説していきます。
まず、1点目がSEO対策（検索エンジン上位表示対策）への影響です。
SEO対策にもalt設定が有効
ホームページをたくさんの人に見てもらう為には、検索順位が少しでも上位になるよう、魅力的なページにしていく必要があります。
その為には、テキストだけのWEBページではなく、効果的な画像を使ったり、資料を添付したり、様々な趣向を凝らすことになります。
しかし、残念なことにせっかく画像や資料を加えても、検索順位を司っているGoogleの検索ロボットは、画像の意味を自動的に理解できません。
結果、altタグがないことで、Googleが画像の意味を理解できず、せっかく制作したページが正当に評価してもらえない原因となります。
もちろん、画像だけでサイトの評価が決まるわけではないので、あくまで一つの要因ではあります。
しかし、alt属性を未設定にするのは、テストでいうところの加点ポイントを取り逃したのと同じ意味合いを持っています。
SEOでは上位を狙うほど、競争は熾烈なっていきますので、些細なものであっても、評価漏れはなるべく避けておきたいところです。
具体的なaltタグの使い方とは
例えば、文章の補足として、グラフを画像にして貼り付けたとします。
人間であれば、記事を補足資料として認識できますが、Googleはなんの画像なのか全く理解できないため、altタグに「〇〇の数値推移」などと言った形で記載することで、初めて関連画像だと理解ができます。
なお、ただのアイコンなど意味がないものに関しては、altタグは空欄でも問題ありません。
しかし、重要な意味をもつ画像の場合、しっかりaltタグを設定することで、プラスの効果を得ることが出来ます。
Google画像検索にも参照されるaltタグ
Googleには画像検索というシステムがあります。
状況によっては、テキストよりも画像検索を用いたほうが、目的の情報に素早くアクセスできることがあるため、人気がある検索方法です。
例えば、上の参考画像では画像検索で「スイカ」と入力した結果が表示されています。
画像検索して、一番最初に表示されたホームページのalt属性を見ると、やはりスイカという言葉が入力されていました。
つまり、画像検索時にaltタグのテキストが参考にされています。
もちろん、alt属性に言葉を入力したからといって、必ず上位に表示されるという事ではありませんが、記事が意図したキーワードをaltタグに入力することで、記事全体の評価があがる可能性があります。
altタグに設定した画像キーワードからの流入事例
altタグにキーワードを指定した結果、どのくらいのSEOへの良い影響があるのか、具体的な数値で示したいと思います。
私が運営している、メディアサイトでは、過去3ヵ月で5,537件もの流入が発生していました。
59.5万回も検索対象としてヒットしているため、クリック率こそ高くありませんが、画像検索をしている人の母数がとても多いことは理解できると思います。
これらは、すべてaltタグに設定してあるキーワードが検索にヒットしたことによる画像流入でした。
もし、altタグを設定していなければ、この流入分はまるごとなかった可能性が高いです。
また、クリックにつながっていなくても、多くの人への目には留まっていた可能性はあるので、効果はこれ以上のものがあると思います。
正しくaltタグを設定することで、得られる流入数はありますので、少しの手間を惜しまず、altタグを設定してみることをおすすめします。
altタグ空欄・altタグなしでは意味が違う
こちらの記事で、特に意味をもたない画像についてはaltタグは空欄でもよいと記述しました。
しかし、altタグ自体は必ずimg属性に含めることを強くおすすめします。
もし、imgタグにalt属性がない場合、検索エンジンは「書き手が説明することが不可能な画像が入っている・著者が意味を理解していない画像」だと解釈してしまいます。
これは、持ち物検査の際、なにか説明できないものを持っているのと、同じ理屈になってしまいます。
もちろん、ホームページを製作する際には、関連した画像しか使用しない訳ですが、相手は画像の意味が解釈できない、検索エンジンやブラウザです。
alt属性に正しく内容を記述して画像の意味を伝えるという作業を行うことで、いらぬ誤解を与えて、サイトの評価を下げないことにもつながっていきます。
今後のaltについて
検索エンジン側で、画像の意味を完璧に解釈できるのであれば、alt属性（代替テキスト）は必要ないわけです。
しかし、2022年現在でも、やっと犬と猫が判別できる程度だと言われています。
たしかに、検索ロボットに画像を見せて、人間と同じように解釈できるのはかなり難しいかもしれません。
総括すると、altタグを設定することで、画像の意図を検索エンジンにも伝えられます。結果、文章全体の価値を正しく伝えることにつながっていきます。
文章の価値が正しく伝われば、サイトの評価が高まり、検索順位があがる一助となる可能性が高まります。
しっかりalt属性の意味や役割を理解して、正しく設定することで、ホームページを多くの人に快適に閲覧してもらいましょう。