altタグ（オルトタグ）とは、HTMLのimg要素やinput要素で画像・写真を表示させる際、その画像の代替テキストを指定するためのタグです。今回はaltタグに焦点を当て、その概要やSEOとの関係性、メリット、記述方法、注意点、確認方法などをご紹介します。気になるポイントを一挙確認してしまいましょう。

altタグとは？

altタグとは、HTMLのimg要素やinput要素で画像・写真を表示させる際、その画像の代替テキストを指定するためのタグです。

画像にaltタグを設定することで、指定の画像が表示できないブラウザなどでアクセスした際、画像の代わりにテキストで内容を表示することができます。また、検索エンジンのクローラーに画像の内容を的確かつ正確に伝えることもできます（後述解説）。

altタグとtitleタグの違い

altタグとtitleタグは、それぞれ意味や役割は異なります。

titleタグとは、主にWebページのタイトルを設定する際に用いられるタグです。 画像の上に1秒以上カーソルをのせると、補足情報の吹き出しが表示されます。それは、titleタグで設定されたテキストです。

altタグは画像要素のみ、titleタグは全ての要素に付与できると覚えておきましょう。

altタグとSEOとの関係

altタグを設定すると、検索エンジンのクローラーに画像内容を的確かつ正確に伝えることができます。

本来、テキストしか理解できないクローラーですが、画像にaltタグを設定すれば、画像をテキストとして理解できるようになります。つまり、altタグに画像内容のキーワードを記述すれば、画像検索で上位表示を狙うことも可能で、自社サイトのSEOにも好影響です。

SEOとは？基礎知識と初心者がやるべき対策をわかりやすく解説

自社サイトの流入数を増やし、ビジネスを成長させるにはSEO対策(検索エンジン最適化)が欠かせません。このページでは初心者の方でもわかりやすいように、「SEO対策がそもそもどのようなものなのか？」を解説します。基本的な概念をどこよりもわかりやすくご紹介するので、SEO対策を検討されている方はぜひ参考にしてみてください。

altタグを設定するメリット

ここでは、altタグを設定するメリットについて解説します。

1.画像をテキストとして表示できる

何らかの原因で「画像が表示されない」トラブルが起きたとしても、altタグが設定されていれば、簡単な画像内容を表示できます。そのため、仮に画像が正確に表示されなくても、ユーザーは表現したかった画像の内容を大まかに理解できるのです。

2.画像内容を音声として流せる

画像を視覚的に判断できない人でも、音声読み上げシステムという画面をテキストで読み上げるソフトウェアをインストールすれば、altタグで設定されたテキスト情報を音声で読み上げることができます。

3.検索エンジンに画像内容を伝達できる

検索エンジンは、前後のテキスト内容に加え、altタグのテキストから画像を理解し、検索結果へと反映させる傾向にあります。

つまり、画像の内容に適した説明文をaltタグとして設定すれば、検索エンジンに画像内容をより正確に伝達できるのです。

4.アンカーテキストの役割を果たす

画像をリンクにした場合、altタグは「アンカーテキスト」の役割も果たします。

アンカーテキストとは、リンク先のコンテンツ内容を表現するテキストのことです。

インターネットサイトなどで「詳細についてはこちら」という文章をクリックすると、別の詳細ページ購入ページへ遷移したという経験はないでしょうか。それがアンカーテキストです。

アンカーテキストを設置すると、検索エンジンやユーザーがWebサイト内を回遊しやすいので、結果的に自社サイトの閲覧数や評価の向上にもつながりやすくなります。

altタグの記述方法

altタグをHTMLコードで記述・設定する方法は以下です。

なおWordPressで記述する場合は、画像をアップロードした後、「代替テキスト」という項目が表示されるので、そこでaltタグを設定しましょう。

altタグを設定する際の注意点

ここでは、altタグを設定する際の注意点について3点解説します。

1.対策キーワードを入れすぎない

画像に関係のないキーワードを乱用すると、検索エンジンの理解に悪影響を与えやすいので、altタグを設定する際は注意しましょう。

事実、Googleの公式ページでも「キーワードの乱用はスパムとみなされる可能性がある」と警告しています。

代替テキストを設定するときは、キーワードを適切に使用して、ページのコンテンツのコンテキストに沿った、情報に富む、有用なコンテンツを作成するようにしてください。alt タグにキーワードを羅列すること（キーワードの乱用）は避けてください。これによって、ユーザー エクスペリエンスが低下し、サイトがスパムとみなされる場合があります。

（引用：https://developers.google.com/search/docs/appearance/google-images?hl=ja&visit_id=637498181612897935-218342154&rd=1）

2.画像に不適合な内容を記述しない

画像に不適合な内容をaltタグに設定することは避けましょう。

検索エンジンやユーザーを混乱させる可能性があります。

たとえば、「中性的な顔立ちをした痩せ型の男性」の画像に「強面な顔立ちの太った女性」のような画像とあまりにもかけ離れた内容を入力することは避けましょう。

3.音声で読み上げる必要がない場合は空欄にする

音声で読み上げる必要がない場合は、altタグを空欄にしましょう。

仮に、音声読み上げ機能を使っているユーザーからすれば、画像内容を読み上げる必要がないケースも多いです。

そのため、もし装飾目的で画像にaltタグを設定したいと考える場合は、内容に関するテキスト情報は不要なので「alt=””」のように空白で設定しておきましょう。

altタグの確認方法

ここでは、altタグの確認方法について2点解説します。

1.Google検証機能（無料）

1つ目は、「Googleの検証機能を使って確認する」方法です。

Googleの検証機能を使用する際は、特別なツールは必要ありません。

なおブラウザはGoogle Chromeにしましょう。

2.Chrome拡張機能（無料）

2つ目は、Googleの拡張機能である「Alt & Meta viewer」を使用して、確認する方法です。

altタグが表示されない場合の対処法

使用しているスマートフォンやブラウザによっては、altタグが表示されないことがあります。

その場合は、パソコンからaltタグが正しい記述になっているか確認しましょう。

もし、パソコンで表示したaltタグが正しい表記になっていれば問題ありません。

altタグを適切に設定し、ユーザビリティやクローラビリティを高めよう！

このページでは、altタグに焦点を当て、その概要やSEOとの関係性、メリット、記述方法、注意点、確認方法などについて解説しました。

altタグを設定することで、直接的なSEO効果はありません。しかし、ユーザビリティやクローラビリティの向上につながり、画像検索で検索順位上位を獲得できる可能性が高まります。

画像検索で上位表示できれば、自社サイトのSEOに好影響です。検索エンジンからの評価を向上させたい場合は、altタグを設定してみましょう。

なおaltタグの設定方法やaltタグについてもっと詳しく知りたいという方は弊社にご相談ください。弊社はaltタグやSEOに関しての知識やノウハウが豊富です。株式会社ipeではSEOでの大手クライアント実績も多数ありますのでSEOを検討する際にはぜひ一度ご相談ください。