altタグ

更新日 : 8月 30, 2023

alt属性（英語: alt attribute）はHTMLとXHTMLで使われるHTML属性。HTML要素が表示できないときに代わりにレンダリングされるテキスト（いわゆる代替テキスト、英語: alternative text/alt text）を指定する。

SEOでは、代替テキストのことを指します。

略歴/流れ

altタグに画像とは関係ない内容を詰め込むという手法が流行したことがありますが、現在はそういった手法にメリットはありません。

Twitterの画像ツイートにもaltタグが導入されるなど、一般の人もaltタグについての正しい知識が必要とされるようになってきています。

altタグ（alt属性）はウェブサイトの画像の意味・情報について説明するテキストです。

画像を表示しないテキストブラウザを使っているユーザーや、目の見えない視覚障害者、なんらかの理由で画像が表示されない環境にいるユーザーなどのために、画像に「画像についての情報」というテキストを設定することで、画像が見えなくてもどんな画像なのか理解することができます。

ユーザー以外にも、検索エンジンのクローラーもaltタグを読み取ってウェブページの情報を把握するために使用しています。

altタグという呼び方も一般的ですが、HTMLでは「altタグ」ではなく、「alt属性」という名称で使われています。

テキストブラウザとは、ウェブページの画像を表示せず、テキストのみを表示するブラウザです。

表示されない画像を理解するためにaltタグが活用されています。

テキストブラウザは画像を表示しない分、ページの読み込みやCPUリソースの消費が少ないというメリットのほか、視覚障害者向けにウェブページの内容を読み上げる読み上げソフトと併用されることも多く、アクセシビリティが適切に設定されているか確認するためにも使われています。

HTMLは「HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」の略で、ウェブサイトを作成するための言語です。

ウェブページに画像やメディアを埋め込む、見出しなどのページ構成、太文字や下線などの文字の見た目の設定などの機能があります。

インターネットが普及し始めた頃はHTMLを理解しなければウェブサイトを作れませんでしたが、現在はHTMLの知識がほとんどなくてもWordPressのビジュアルエディタなど、感覚的な操作でウェブサイトを作成できるソフトもあります。

WordPress（ワードプレス）はウェブサイトやブログの作成ができる無料ソフトです。

WordPressの編集方法はテキストエディタとビジュアルエディタの2種類があり、テキストエディタはプログラミング言語を用いて書きますが、ビジュアルエディタは専門知識がなくても感覚的に操作することが可能です。

ビジュアルエディタは特に初心者でも手軽に本格的なウェブサイトを作ることができるため、世界中で利用されています。

クローラーはインターネット上を巡回してウェブページの情報を読み取り、読み取った結果を検索結果や検索順位に反映する検索エンジンのプログラムです。

クローラーにウェブページの情報を素早く正確に読み取ってもらうことが検索順位の上位に来るために必要です。

画像は内容を分かりやすくするため、インパクトを与えるためなど、多くのウェブサイトで積極的に使われていますが、画像だけに頼ってしまうと、視覚障害者にとっては内容がわかりにくい不親切なサイトになってしまいます。

altタグを使用して画像の内容を説明することで、視覚障害者にも画像の意味が理解できるようになります。

そのため、altタグは画像の情報を簡潔に分かりやすく書くことが求められます。

例えば、黒い猫が公園で寛いでいる画像のaltタグの書き方にもいろいろあります。悪い例は、「<img src=” 黒い猫 .jpg” alt=”黒い猫かわいいアメリカンショートヘアおでかけ公園のんびり“/>」のような書き方です。キーワードを羅列しても内容は伝わりません。

良い例は「<img src=” 黒い猫 .jpg” alt=”黒い猫 “/>」です。

さらに視覚障害者に配慮するなら、「<img src=” 黒い猫 .jpg” alt=”公園の芝生で寝ころび、目を閉じて寛いでいる黒い猫 “/>」のような簡潔で必要な情報がきちんと伝わる書き方が理想的です。

クローラーもaltタグの情報を読み取っており、altタグが適切に書かれていれば画像を含めたウェブページの内容を正確に読み取ることができます。

altタグを設定することはクローラビリティの向上につながり、さらに検索結果にも良い影響が期待できます。

altタグの設定は一般ユーザーのユーザビリティの向上、視覚障害者のアクセシビリティの向上、検索エンジンのクローラーのクローラビリティの向上につながります。

ユーザーにとって使いやすく、クローラーにとって情報を読み取りやすいウェブサイトにはSEO効果が期待できます。

以前、altタグに画像とは関係ないキーワードを詰め込んで検索結果の上位を狙う手法が流行しましたが、Googleの検索エンジンのアルゴリズム改善により、こういった手法は現在ではSEOスパムとして低評価の対象となり、ペナルティを受ける可能性があります。

altタグはあくまでも画像の説明です。適切なaltタグの使い方が、良いウェブサイト構築につながります。