alt属性（altタグ）とは？書き方と設定する必要性・確認方法を解説

【altタグの特徴】

alt属性（altタグ）とは、画像要素（img 要素やinput要素）に設定するhtml属性の事で、画像の代替テキストを設定するために使用します。

alt属性を設定することで、画像が表示できない場合にalt 属性に設定したテキストを表示したり、視覚障害者向けのスクリーンリーダーが画像の代替テキストを読み上げることができます。

また、alt 属性を設定しておくことで、検索エンジンのクローラーに画像の内容を正確に伝える事ができるため、画像検索結果に表示される可能性が高くなります。

alt属性は、以下のように記述します。

次の項目で、より具体的なalt属性の書き方を解説します。

alt属性の書き方は、HTMLの「imgタグ」にあるalt=の後ろに画像の内容を説明するテキストを記述します。

alt属性が記載されていない場合は、

のように、alt=の後ろに説明を説明するテキストが入っていません。

ここに、alt属性を記述すると以下のようになります。

実際に、以下の画像にalt属性を記述してみましょう。

上記画像は「晴れた日の富士山の風景」になるので、alt属性に以下のように記述します。

基本的な記述方法は以上になります。

次の項目で、実際にhtmlにalt属性を書く方法を解説します。

HTMLソースコードに直接altタグを書くには、テキストエディターを使用して編集します。

保存したら、ウェブブラウザを使用して変更が正しく反映されたことを確認します。具体的には、画像がブロックされている、または読み込まれない場合に代わりに表示されるテキストや、スクリーンリーダーが読み上げるテキストが正しいかをチェックします。

WordPressでaltタグを記述する場合は、以下のように記述します。

WordPressのメディアライブラリではなく、記事やページのエディタで直接画像を挿入または編集する際も、alt属性を設定することができます。具体的には、エディタ内で画像を選択して「画像編集」ボタンをクリックすることで、画像の詳細設定ができます。

Shopifyでaltタグを記述する場合は、以下のように記述します。

上記の手順は商品の画像にaltタグを設定するためのものですが、Shopifyのストアには商品画像以外にも、ブログ記事やホームページのスライダー画像など、さまざまな場所で画像が使用されていることがあります。

これらの画像にも適切なaltテキストを設定することで、SEOの効果を最大限に引き出すことができます。

alt属性はアクセシビリティに関わるため、適切な使用方法が求められます。

それぞれ詳しく解説します。

alt属性に記述するテキストは画像の内容を、「具体的」に記述する必要があります。

前述したように、alt属性は画像の意味をユーザーと検索エンジンに伝える役割を持っています。そのため、画像が表示されない場合に、代替テキストを見たユーザーが具体的にどのような画像なのかイメージできるようなテキストを記述するのがポイントです。

▼ 以下の画像を元に、alt属性に設定するテキストの良い例と悪い例を説明します。

良い例では、どのようなラーメンなのか具体的に記載されているため、誰が見てもどのような画像なのか想像できると思います。一方で悪い例では、テキストだけ見ても抽象的で具体性がないため、画像の内容を想像しづらいと感じます。

alt属性には誰が見ても画像の内容を想像できるように、具体的な内容を記述しましょう。

alt属性に、画像に関係するキーワードを詰め込んではいけません。alt属性にキーワードを詰め込むと、ユーザーと検索エンジンが画像の内容を正確に理解できなくなり混乱をする原因となります。

また、関連するキーワードをalt属性に過度に詰め込む行為は、SEO目的や画像検索結果で上位表示させる目的と検索エンジンから判断され、SEOスパムでペナルティの対象となる「キーワードスタッフィング」に該当する可能性があります。

Google検索セントラルのalt属性の設定方法にも、キーワードの詰め込みは悪い例として記載されています。

alt属性のテキストに含める文字数は決まっていませんが、キーワードの乱用や詰め込みは避け、簡潔で分かりやすいテキストを記述しましょう。

装飾目的の画像には、alt属性を設定する必要はありません。

アイコンなどの装飾目的の画像や、あるデザイン要素として挿入された飾り罫にalt属性を設定すると、ユーザーに余計な情報を与える事になるため、これらの画像には「alt=""」と記述し、意味のある画像と区別します。

これにより、視覚障害を持つユーザーがスクリーンリーダーを利用している際に、彼らにとって不要な情報を聞くことなく、重要なコンテンツに集中できるようになります。

また、alt属性を空にすることは、検索エンジンに対してその画像が主要なコンテンツではないことを示すため、SEOの観点からもベストなアプローチとなります。

alt属性の必要性は以下になります。

• スクリーンリーダーを使用した際に、画像の説明が読み上げられる
• 画像が表示されない場合に画像の説明をテキストで表示できる
• 画像検索で表示される可能性が高くなる
• 画像リンクの場合は、アンカーテキストの代わりになる

それぞれ詳しく解説します。

alt属性に画像の説明を記述しておくことで、スクリーンリーダーを使用した際に、設定した画像の説明を読み上げてもらう事ができます。

視覚障害を持つユーザーは、WEBページの内容を理解するためにスクリーンリーダー（音声読上げ機能）を利用してWEBページのコンテンツを理解しています。

しかし、スクリーンリーダーはテキスト情報は読み上げられますが、画像や写真に関しては内容を読み上げる事ができないため、視覚障害を持つユーザーにコンテンツの内容を正確に伝えるためにはalt属性を設定しておく必要があります。

画像に説明がなければ、スクリーンリーダーの機能を100％活用する事ができないため、ユーザーエクスペリエンスが低下し、場合によってはWEBサイトのブランドイメージも低下します。

alt属性を設定する事で、WEBページのアクセシビリティが大幅に向上し、すべてのユーザーが平等に情報にアクセスできるようになります。

ネットワークの問題や画像ファイルの欠落などの理由でブラウザ上の画像が正しく表示されない場合でも、alt属性を設定しておくことでユーザーは画像の内容を理解できます。

例えば、ニュースメディアサイトでは、画像が記事の内容を補完する重要な役割を果たしています。画像が表示されない場合でも、alt 属性を設定しておくことで、記事の内容や追加情報をユーザーに伝えることができるというわけです。

このように、alt属性を設定することでWEBサイトのユーザーエクスペリエンスを向上させる効果があります。

検索エンジンは画像の内容を正確に理解できないため、alt属性、画像周辺のテキスト、画像のファイル名、画像のキャプションなど複数の情報を元に画像の内容を推測しています。

その中で、検索エンジンが画像を理解する上で最も役立つ情報がalt属性です。検索エンジンが画像の内容をより正確に理解する事で、画像検索で上位表示される可能性が高くなります。

Google検索セントラルにある「Google 画像検索 SEO ベスト プラクティス」にも代替テキストを設置する事が重要と記載されています。

視覚的に商品を見たいというニーズの高いアパレルや、家具などを探すユーザーは画像検索をおこなうことが多いので、alt属性を設定して画像検索結果の上位を狙うことはWEBマーケティング戦略において重要な役割を持ちます。

画像リンクの場合、alt属性はアンカーテキストの代わりになるためSEO効果が期待できます。アンカーテキストとはリンクに設定してあるテキストの事で、「アンカーテキストとは？」⇐このようなハイパーリンクの事です。

アンカーテキストは、検索エンジンにリンク先ページの内容を伝える役割や、検索エンジンがリンク元ページとリンク先ページの関係性を理解するのに利用します。

しかし、バナーやボタンなど画像を使ってリンクを作成する場合、テキストリンクにはできないため、アンカーテキストの代わりの役割を担うのがalt属性です。検索エンジンはリンクに設定したalt属性をアンカーテキストと同様に扱います。

Google では、代替テキストに加えて、コンピュータ ビジョン アルゴリズムやページのコンテンツを使用して、画像のテーマを理解します。また、画像の代替テキストは、画像をリンクとして使用する場合にアンカー テキストとして使用できます。

Google 画像検索 SEO ベスト プラクティス

alt属性を確認する方法は、以下の2点です。

1. Google chromeの拡張機能を使った確認方法【無料】
2. Googleの検証機能を使った確認方法

それぞれ画像付きで解説します。

Google chromeの拡張機能で、「Alt＆Meta viewer」というツールを利用することで簡単にaltタグに設定されている代替テキストを確認できます。

【使用方法】

alt属性は拡張機能をインストールしなくても、Google chromeの検証機能を使って確認もできます。

【方法】

今回紹介した「alt属性」は、SEOに直接的に大きな効果を及ぼすことはないとされています。

しかし、テキスト以外の画像コンテンツが表示されないときなどに、正しい情報を伝えられる、アンカーテキストの代わりとなってユーザーに有益な情報を提供するといった観点から見ると、alt属性の役割や効果を知り、正しい使い方をすることは非常に重要な施策と言えます。

意味を持たない画像にはalt属性を設定する必要はありませんが、分かりやすく使いやすいページやWEBサイトを構築してアクセシビリティを向上させるためには、alt属性の設定をおこなうことが望ましいと言えるでしょう。

以上、「alt属性の役割」や「SEO効果」そして、「正しい設定方法」についての解説でした。