代替テキストとは?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コンサルティングは流入数の改善はもちろん、売上に貢献するコンバージョンも増やします。予算未定でも構いません。ぜひお気軽にご相談下さい!

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

ナイルに無料相談する

ナイル編集部
監修:ナイル編集部
この記事は、ナイル株式会社のマーケティング相談室編集部が監修しており、わかりやすく役に立つ記事を目指しています。編集長青木がライティング、編集、入稿の全工程をチェックしています。記事内に気になる点がございましたら、こちらよりご連絡くださいませ。

関連記事

webコンサルティングとは

Webコンサルティングは何をしてくれる?導入のメリットを解説!

301リダイレクトなどの推奨設定期間について

“ホワイトハットSEOが上手くいかない”という人へのアドバイス

新着記事

有効な予算消化の方法とは

【効果的に使おう】予算消化はいつ何をすればよい?基礎知識から施策まで徹底解説

サービスサイト必須の11コンテンツとは?

サービスサイトとは?構成に必須な10のコンテンツと制作手順を公開

SEOを独学で身につける! 4ステップ法

【実践あるのみ】SEOを独学で身につける4ステップ!おすすめの本やメディアも紹介