alt属性の記述は必須？SEOに効果的な書き方と3つの注意点
satoualt属性は、画像の代わりとなるテキスト情報のことです。直接的なSEO効果はないものの、alt属性の適切な設定は検索エンジンやユーザーの理解を助けてくれます。この記事では、alt属性の役割や効果的な書き方に加え、3つの重要な注意点もお伝えします。alt属性を正しく設定し、サイトの質を高めましょう。
alt属性(altタグ)とは？記述は必須？
alt属性(オルト属性)とは、Webページ上における画像の代替テキストを指定するための属性です。名称のaltは、「代替テキスト」を意味する「alternative text」に由来します。
alt属性によって代替テキストを指定することで、画像が表示されない環境下や読み込みが遅い際に、画像の代わりにテキストで内容を表示できます。また、検索エンジンに画像内容をテキストで伝える役割も果たします。そのため、基本的にはサイト内の画像全てにalt属性を付与するのが望ましいです。
alt属性の書き方は下記の通りです。
<img src=”画像URL” alt=”画像の説明”>
上記のimgタグにおける「画像の説明」の部分に、画像の内容を示す説明文を入れます。すでに画像を設置しているケースでも、「alt=」以降をimgタグ内に追加するだけで、代替テキストを設定できます。
alt属性のSEO効果3つ
画像の代替テキストを設定できるalt属性は、SEO対策においても重要です。alt属性がもたらす3つのSEO効果をチェックしましょう。
検索エンジンが画像内容を把握できる
alt属性を設定することで、検索エンジンが画像内容を把握できます。imgタグによって画像が設置されていても、検索エンジンはどのような画像なのかを理解できません。alt属性により画像内容がテキスト化されることで、検索エンジンが画像内容を把握しやすくなります。
検索エンジンが画像内容を理解できれば、画像検索での上位表示も狙いやすいです。alt属性を設定のみで通常の検索順位が上がるわけではないものの、代替テキストで検索エンジンの理解を助けることにより、画像検索での順位が上がる可能性はあります。このように、alt属性の設定により、画像検索における検索エンジンからの評価を上げる効果が見込めます。
代替テキストとしてユーザーを助ける
alt属性の設定によって代替テキストが表示されることはユーザーを助ける効果もあります。画像に代替テキストが付与されていることで、ユーザーにとっては下記のようなメリットがあります。
・通信状態が悪く画像の読み込みが遅い時などに、画像内容をテキストで把握できる
・音声読み上げ機能を使用した際に、alt属性に記載された内容が読み上げられる
上記のように、画像が表示されない環境下にいるユーザーに対し、代替テキストによって画像内容を補完する効果が見込めます。また、視覚障害の方や高齢者など画像を見るのが困難な方に対し、画像内容を音声で伝えるのにも役立ちます。
このように、ユーザーに対するalt属性の役割は、画像内容をテキストで説明して理解を手助けすることです。
画像をリンクにした時のアンカーテキストになる
画像をリンクにした時のアンカーテキストになる点も、alt属性によるSEO効果の一つです。アンカーテキストとは、HTMLソースでリンクが張られている文字列を指します。画像リンクの場合は画像をクリックすることで、リンク先のページに移行します。この場合のアンカーテキストは、同画像のalt属性に記述されるものです。
画像リンクを設定する際のアンカーテキストの記述方法は、下記の通りです。
<a href=”リンク先”><img src=”画像URL” alt=”画像の説明”></a>
上記のように、a要素であるhref属性でマークアップし、囲み記述の形をとります。imgタグ内には、リンク先の内容と画像内容の両方を説明するテキストを加えます。
アンカーテキストの適切な設定は検索エンジンからの評価にも関わるため、alt属性の設定は重要なSEO対策の一つです。
alt属性のSEOに効果的な書き方3選
alt属性はSEOにも関わるため、適切な方法で記述する必要があります。alt属性の効果的な書き方のポイントを、3点ご紹介します。
キーワードを詰め込みすぎない
alt属性を設定する際には、キーワードを詰め込みすぎないことが重要です。SEOのことを考えると、できるだけキーワードを盛り込もうと考える方も多いでしょう。しかし、過度にキーワードを詰め込むことはスパムと見なされるなど、むしろSEO的にマイナスに働きかねません。Googleは、ガイドライン違反の一例として、下記を挙げています。
大量のキーワードを含む非表示のリンクや低品質のリンクで、さまざまなサイトに配布されるウィジェットに埋め込まれているもの。
Google リンクプログラム
alt属性にキーワードを詰め込みすぎてもSEO効果は得られないため、検索キーワードを半角スペースで区切って羅列するなどの記述は控えましょう。
分かりやすく簡潔にまとめる
alt属性における説明は、分かりやすく簡潔にまとめることも重要です。alt属性の記述に文字数制限はありませんが、長すぎる記述は検索エンジンやユーザーの理解を妨げる恐れがあります。下記のように、Googleは長すぎるatl属性の記述もスパムと見なす可能性があります。
以下のことは避けましょう。
・スパムと見なされるような長すぎる alt テキストを記述する。
Google 検索エンジン最適化（SEO）スターター ガイド
キーワードの羅列はもちろん、長すぎる説明文はスパムと見なされてしまいます。alt属性を設定する際は、画像内容を分かりやすく簡潔にまとめた記述を心がけましょう。
画像内容を具体的に説明する
alt属性の記述は、画像内容を具体的に説明することも重要です。既述の通りキーワードの羅列や長すぎるテキストはNGですが、短すぎて画像内容を説明していないテキストにも注意が必要です。テキストのみで検索エンジンやユーザーに画像内容が伝わらなければ、alt属性を設定している意味がありません。
例えば下記の場合、「動物」ではなく「アヒルの親子」の方が適切な記述と言えます。
alt属性の目的は画像内容をテキストで説明することのため、ファイル名をそのまま使うのもNGです。画像内容に沿った具体的なテキストを設定しましょう。
alt属性の記述によるSEO対策の注意点
alt属性の設定時には前述の3つのポイントを実践するとともに、下記の2点にも注意してください。
title属性との違いに注意する
alt属性を扱う際には、title属性との違いに注意しましょう。alt属性と混同されやすいtitle属性ですが、両者には下記のような違いがあります。
| 概要 | 対象 | |
| alt属性 | 画像の代替テキスト | 画像 |
| title属性 | 要素の補足情報 | 画像やテキストなど全要素 |
上記の通り、alt属性は画像そのものを示すのに対し、title属性は補足説明を行うものです。一般的には、title属性を付与した画像にカーソルを乗せると、吹き出し内に補足説明が表示されます。画像内容を検索エンジンに伝えるという役割においては、alt属性に比べてtitle属性の重要度は低いです。両者を混同せず、SEO対策としてはまずalt属性の設定を優先的に行いましょう。
装飾目的の画像はalt属性を空にする
サイト内で画像を挿入する場合には基本的にalt属性を記述すべきですが、例外もあります。装飾目的の画像や、なくても問題がない画像に関しては、alt属性を記述する必要はありません。このような画像に余計なファイル名やキーワードの羅列を付与してもSEO効果は見込めないため、alt属性は空にしましょう。
alt属性の記述を確認する方法2選
alt属性が適切に設定されているかを確認するには、下記の2つの方法があります。
Googleの検証機能
alt属性は、Googleの検証機能を使って確認することが可能です。確認手順は、下記の通りです。
- 調査対象となるページを開く
- ページ上で右クリックする
- 「検証」をクリックする。
- ページのソースコードが表示されたら、確認したい画像コードをクリックする
- <img src=”画像URL” alt=”画像の説明”>を確認する
上記の方法により、ツールを使わずにatl属性を確認できます。
Chromeの拡張機能「Alt＆Meta viewer」
もう一つの方法は、Chromeの拡張機能「Alt＆Meta viewer」を活用する方法です。確認手順は、下記の通りです。
- Googleのウェブストアから「Alt & Meta viewer」をインストールする
- Chromeブラウザ右上の「Alt」をクリックする
- alt属性を確認する
「Alt＆Meta viewer」は無料ツールであり、簡単にalt属性を確認できます。
alt属性 seo まとめ
alt属性は画像内容を説明する代替テキストです。alt属性は検索エンジンやユーザーの理解を助けるため、適切な方法で記述することが重要です。alt属性を設定する際は、キーワードを詰め込みすぎず、画像内容を簡潔かつ具体的に説明しましょう。alt属性のみでSEO対策が完結することはありませんが、決して無視できない対策の一つです。alt属性を正しく理解・設定し、より質の高いサイトを構築しましょう。
