代替テキストとは?SEOに効果的な画像・動画のalt属性の書き方について

代替テキストとは?SEOに効果的な画像・動画のalt属性の書き方について

代替テキスト(alt属性)とは、ページ内に設定した画像や動画が表示されなかったり、音声で読み上げるブラウザを使用したりする際、画像などの代わりに表示させるテキストのことです。使いやすさ向上や検索エンジンを意識したSEOを考えると、代替テキストは設置しておくべきです。

ここでは、代替テキストの概要と正しい設置の仕方、注意点について、解説していきます。

この記事のポイント

  • 代替テキストとは、画像や動画などが表示されなかった際などに、その内容を表示するテキストのこと
  • サイトの使いやすさやSEOの観点から、コンテンツとして意味のある画像や動画には代替テキストを設置したほうがいい
  • 代替テキストに過度な情報を盛り込んだり、異なった情報を盛り込んだりするのはNG

\SEOで成果につなげる!資料ダウンロードはこちらから/

代替テキストとは

代替テキストはWebサイト内に含まれている画像や動画が何らかの原因で表示されなかったときや、視覚に障害のある方などが音声ブラウザを使用する際に、代わりに表示するテキストを指します。Webサイトは文章を「読ませるサイト」だけではなく「見せるサイト」「使わせるサイト」もあるため、多くのWebサイトではテキスト、画像、動画、音声を含めてコンテンツを作っています。

また、Webサイトの閲覧者は画像や動画を見ることで内容を把握することができますが、検索エンジンは完璧に内容を把握することができません。そのため、代替テキストから画像や動画の内容を判断します。(※代替テキスト以外にも、画像付近のテキスト情報、ページ内容なども参考にします)

コンテンツとして意味を持つ画像や動画には端的な文言で代替テキストを設置することを推奨します。この代替テキスト情報を指定する属性のことをalt属性と呼びます。

代替テキストを設定すべき理由 

代替テキストを設定すべき理由をまとめていきます。

Webアクセシビリティを向上させる

Googleはあらゆる人にとってのWebアクセシビリティを向上するために、代替テキストの設定を推奨しています。視覚障害がある人でも、高速・大容量の接続ができない環境にいる人でも、適切な代替テキストが設定されていれば画像を認識できなくても、情報を取得できるでしょう。誰もが平等に情報にアクセスでき、情報格差をなくすためにも、代替テキストが重要視されているのです。

視覚に障害のある方をはじめ、さまざまな人がスクリーンリーダーを活用しています。スクリーンリーダーとは、コンピューターの画面に表示された情報を読み上げるソフトのことで、主なOSにも搭載されています。

スクリーンリーダーはテキスト情報を読み上げるため、画像をスキップしたり、場合によっては画像のファイル名を読み上げてしまったりすることもあります。スクリーンリーダーを利用している人に画像の情報を正しく伝えるためには、代替テキストを設定する必要があるのです。

検索エンジンがページ内容を正しく把握できる 

代替テキストを適切に設定することで、検索エンジンは画像の意味を理解できるようになるので、ページ全体の内容に対する理解も深まり、さらに画像検索結果にも表示されるようになります。代替テキストを設定することは、SEOの向上につながっていくことになります。

代替テキストを設定する 

代替テキストの設定は難しいものではありません。WordPressの場合、任意の画像を選択し、画像のタイトルなどを設定するのと同様、「添付ファイルの詳細」内にある「代替テキスト」のテキストボックスに記入して記事に挿入すれば完了です。

なお、HTMLのタグでは、<img src=”●●.jpg alt=”■■■”>といった形になります(jpg.gifpngの場合もあります)。alt=”■■■”の部分が代替テキストに当たります。

\SEOで成果につなげる!資料ダウンロードはこちらから/

代替テキスト設置時の注意点

代替テキストは検索エンジンが画像などを把握する上で役に立つものですが、決してSEOを目的として設置するものではありません。以下の注意点に気をつけましょう。

  • 装飾画像等の意味を持たないものには代替テキストを設置する必要はありません。
  • 特定のキーワードを過剰に盛り込まないようにします。
  • 画像の意図と異なる代替テキストを設置するとスパム行為と判断される可能性があります。

いくつか例を載せますので、参考にしてください。
※分かりやすいように画像の下にalt属性を表示しています。

良い例)画像に沿った代替テキスト

赤枠の画像に沿ったalt属性を設置。
参議院のホームページを用い、画像の内容に沿ったalt属性の良い例を紹介しています

悪い例)過度に情報を盛り込む

赤枠の画像の内容より過度に情報を盛り込んだalt属性を設置。
その画像がもつ要素以上の情報が記載されてしまっています。 参議院のホームページを用い、画像の内容よりも過度に情報が記載されてしまっているalt属性の悪い例を紹介しています

悪い例)異なった内容を盛り込む

赤枠の画像の内容と異なった情報を盛り込んだalt属性を設置。
画像と全く関係のない情報が記載されています。 参議院のホームページを用い、画像の内容と関係のない情報が記載されてしまっているalt属性の悪い例を紹介しています

まとめ

代替テキストはWebサイト内に含まれている画像や動画が何らかの原因で表示されなかったときや、視覚に障害のある方などが音声ブラウザを使用する際に、代わりに表示するテキストを指します。

検索エンジンが画像等の内容を理解する際に用いる要素ではありますが、決してSEOだけのために設置するものではないということを意識してください。また、できる限り画像の内容を適切に設定するように心がけましょう。

集客・コンバージョン数を増やしたい方へ

ナイルのSEOコンサルティングは流入数の改善はもちろん、売上に貢献するコンバージョンも増やします。予算未定でも構いません。ぜひお気軽にご相談下さい!

サービス紹介をダウンロードする

ナイルに無料相談する

編集者情報

金子 光
金子 光(かねこ ひかる)
新卒で楽天グループ株式会社に入社。
営業管理として40人規模のチームをマネジメント。その後社員3人のベンチャー企業に入社し新規事業立ち上げを経験。
現在はナイルのマーケティング相談室編集長として、Webマーケティングに従事している。
無料相談はこちらから

監修者情報

ナイル編集部
ナイル編集部

2007年に創業し、約15年間で累計2,000社以上の会社にマーケティング支援を行う。また、会社としても様々な本を出版しており、業界へのノウハウ浸透に貢献している。(実績・事例はこちら

PIVOTにもスポンサード出演しました!

PIVOTにもスポンサード出演しました!
チャンネル登録者数が100万人を超えるYoutubeチャンネルPIVOTにスポンサード出演しました!
動画内では、マーケティング組織立ち上げのための新しい手段についてお話しています。
マーケティング組織に課題がある方はぜひご覧下さい。
動画を見る

関連記事

動画で学ぶWebマーケティング【生成AI/ChatGPT編】

動画で学ぶWebマーケティング【生成AI/ChatGPT編】

「SEOに優れたサイト」と、「上手なSEOを行っているサイト」は全然違うという話

アイキャッチ1

本日のSEOニュース(2021年2月1日収集分)

新着記事

動画で学ぶWebマーケティング【生成AI/ChatGPT編】

動画で学ぶWebマーケティング【生成AI/ChatGPT編】

サードパーティCookie廃止に伴う広告予算動向

【サードパーティCookie廃止に伴う広告予算の動向調査】

動画で学ぶGA4

動画で学ぶWebマーケティング【Googleアナリティクス4/サイト分析編】

もっと効果的な集客施策
してみませんか?

Web戦略の情報を
定期的に受け取りたい方

取材・メディア掲載に関するお問い合わせは、こちらからお問い合わせください。