SEO 2020.04.16

alt属性とは?htmlの正しい使い方を理解してSEOを強化しよう!

pickup

WEBサイトを運営していく際にイメージなどをわかりやすくユーザーに伝えるため、画像を利用してページを作ることが多いのではないでしょうか。画像を利用する際にalt属性を正しく設定することはSEOをする上ではとても重要です。この記事ではSEOやユーザビリティーの改善に役立つalt属性に関して詳しく解説していきます。

alt属性とは

alt属性とは代替テキストとも呼ばれ、WEBページに使われている画像などに対し、テキストと同様に文字で適切に情報を伝える役割を担う記述です。現段階ではGoogleの検索エンジンはテキスト以外の非テキストコンテンツを完全に読み取ることができず、WEBページに乗っている画像がどのようなものかを正確に理解することができません。
それを補助するためにalt属性を利用して画像にテキスト情報を記述することで、正しくページの内容を検索エンジンに認識させることができます。
alt属性を記述することで正しく情報を認識してもらえるようになるので、SEOの一つの施策として多くのWEBページで取り入れられています。

alt属性を使う理由

alt属性を使う理由は大きく分けて2つの理由があります。

  1. Googleへ画像情報を正しく認識してもらうため
  2. ユーザビリティーの向上のため

それぞれ詳しく解説すると、まず「1.Googleへ画像情報を正しく認識してもらうため」に関しては、前述したように、Googleの検索ロボットは画像情報を正しく読み込むことができません。そのためalt属性を設定し、Googleに画像コンテンツを正しく理解させるために使います。
次に「2.ユーザビリティーの向上のため」に関しては、WEBページにユーザーが訪問した際に、ユーザーのネット環境等の問題で画像をうまく表示できないケースがあります。そういった場合にalt属性をテキストで記述しておくことで画像の代わりにテキストが表示され、ユーザーに画像情報を提供できるようにするために使われます。また、視覚に障害がある方などがWEBページの読み上げを利用した際にalt属性が設定されて入れば、何の画像が表示されているのかを読み上げてくれます。

alt属性の記述方法

alt属性の記述方法は以下のように記述しましょう。

<img =”画像のURL” alt=”画像の説明”>

このように画像のimgタグ内に記載しなければいけません。上記の「alt=“画像の説明”」部分がalt属性に該当します。「画像の説明」部分には、テキストでユーザーが画像の内容がどんなものかよくわかるように具体的に記述することが必要です。

記述する際の注意点

alt属性の記述方法が理解できたら、記述する際の注意点を理解しておきましょう。ここで紹介する注意点を理解せずに設定してしまうと、逆効果となってしまう場合もあるので必ず押さえておきましょう。

画像を適切に説明する

画像に対して適切な説明を設定しましょう。
適切な説明とは、画像を見ずにalt属性の設定だけを見てどのような画像を使っているか想像できることを指します。

画像内で使われているキャッチコピーや書かれている文字をそのままalt属性に設定にすると、どのような画像か想像できない場合もあるので注意が必要です。

また、画像と関係のないキーワードを詰め込みすぎると、Googleからスパム行為とみなされてしまう場合がありますので、画像に関連のあるキーワードのみを記述しましょう。

参考に下記画像の場合の良い例と悪い例記述します。

Webメディア「ワゴコロ」

良い例:Webメディア「ワゴコロ」
悪い例:「ワゴコロ」能、狂言などの日本の伝統舞踊、和食などの日本の食文化や、こけしや雛人形など日本の伝統工芸品を応援するメディアです

意味を持たない画像はalt属性内のテキストを空欄にする

ページの背景画像やデザインのために使われていて意味を持たない画像などに対しては無理にalt属性を記述する必要はありません。
装飾目的の画像はコンテンツとしての意味を持たないため、alt属性内のテキストは空白にしておきましょう。しかし、先ほどの記述方法で記載をした「alt=“”」の記述は装飾画像を含む全画像に記述する必要があるので、忘れずに設定しておきましょう。

まとめ

この記事ではalt属性とはどんなものか、なぜ設定すべきか、具体的な記述方法と注意点を解説してきました。alt属性を正しく記述することはGoogleの検索エンジンとページを訪問するユーザーの両者に対して効果的です。
この記事で解説した内容を振り返り、あなたのWEBサイトにも正しくalt属性を加えてSEO評価も高く、ユーザビリティーも高いWEBサイトにしていきましょう。

ヒトノテロゴ

執筆者:石綿康介

株式会社ヒトノテのオウンドメディア「ヒトノート -Hito note-」のディレクション担当。Google Optimizeを使ったABテストが得意です。

ヒトノテ坪昌史

監修者:坪昌史

株式会社ヒトノテの代表取締役CEO。
エンジニアとしてキャリアスタートし、サイバーエージェントのSEO分析研究機関を経て、リクルートの横断マーケティング組織のマネージャー&全社SEO技術責任者を務める。その後、独立しSEOを中心としたクライアントの課題解決を行う。2017年、株式会社ヒトノテを創業し、様々な企業のウェブマーケティングの支援を行う。