alt=””
グーグルの検索botは人間が見ている画面ではなくHTMLそのものを読むため、画像にaltanative(代替)テキストをつけることで画像の意味をちゃんと伝えることができます。
以前は、Lynxなどの画像を表示できないテキストブラウザを使ってテキストベースで伝わるサイト作りをしていました。
web黎明期はSEO、アクセシビリティ、ユーザビリティはあまり考えてられておらず、見栄えもDTPのレイアウトをwebに持ってきたものなども多く見られました。
webfontもないため文字も画像にして切り出すという感じです。
余計な装飾画像も多用し、大きな画像は切り分けてテーブルタグを乱用したり透明gifを使ったりしてレイアウトデザインを作っていました。
画像ばかりでは検索botがなんのサイトなのか判断できず検索順位にも良い結果になりません。
そもそもテーブルタグはレイアウトに使うタグではなく、透明gifは意味のない画像ということでbot的には邪魔でしかありません。
そんな2000年代初期のweb制作環境でしたが、徐々にwebサイトは作っておしまいではなく検索で上位に表示されないとだれも来てくれないという、意識が広がっていきました。
検索上位に表示するために検索エンジン最適化する方策(SEO)が生まれました。
大量のリンクを張ったり、価値の高いサイトから被リンクを得るリンク売買などもありましたが、まずSEOで行ったのは・・・個人的には画像にaltタグを入れるでした。
それ以前はタグの意味を理解していないまま、webサイトを構築しており大半の人が「とりあえず表示されればOK」でした。(というよりそれ以前にホームページを持っているだけでなんか今風という感じでしたw)
画像をふんだんに使ったサイトの中で写真やイラストにはまずaltタグを入れて説明しよう。手っ取り早いのでやり始めました。
h1やh2などの見出しタグを適正に使う。ディスクリプションやタイトルタグなどのmetaタグをちゃんと入れるなども、人気がありました()
w3cの仕様書を読みながら、html validatorやAnother HTML-lintのお世話になりエラー解消しながら作っていたのが懐かしい・・・
そんなaltタグも仕様がかわり
HTML 4.01 などでは、img 要素の alt 属性は必須属性でしたが、HTML5 においては特に文脈上意味を持たない画像など、代替テキストが必要ではない img 要素に関しては省略が可能になりました。これは、従来、alt=”” としていた画像が該当すると思います。ただし、alt 属性の省略はなるべく避け、原則として画像に対しては alt 属性と適切な代替テキストを指定するのが望ましいでしょう。
https://reference.hyper-text.org/html5/attribute/alt/
省略が可能になりました。
SEOとともにあるweb制作も時代を感じます。