マーケティング

最終更新日: 2022.09.09

alt属性(オルト属性)とは?書き方と確認方法、SEO効果を解説

alt属性(オルト属性)とは?書き方と確認方法、SEO効果を解説

Webコンテンツを作成する際、「画像にalt属性(オルト属性)を記述するのは面倒……」と感じる方は少なくありません。しかし、alt属性は画像の代替となるテキスト情報のため、設定すべき理由がいくつかあります。そこでこの記事では、alt属性が必要な理由とSEOにおける効果を詳しく解説するとともに、記述方法や確認方法について紹介します。
SEOとは?SEO対策の基礎から検索エンジン上位表示テクニック解説 SEOとは?SEO対策の基礎から検索エンジン上位表示テクニック解説

alt属性(オルト属性)とは

alt属性(オルト属性)とは?

alt属性(オルト属性)は、「代替テキスト」「altテキスト」「「altタグ」とも呼ばれ、Webコンテンツ内にある画像の意味をテキストで説明するものです。属性とは、HTMLの画像埋め込み要素のことを指し、画像にどのような意味があるかをユーザーや検索エンジンに知らせる役割をもっています。

alt属性(オルト属性)とは

たとえば、インターネットの通信速度が遅い場合、上記のように画像が表示されないことがあります。この場合、alt属性を記述しておくと、画像の代わりにテキストが表示されるため、ユーザーにコンテンツの内容を正確に伝えることができます。

また、視覚障害のある人や高齢者は、インターネットを見る際、音声読み上げ機能を使うことがあります。その場合にも、ページに埋め込まれている画像がどのようなものであるかを説明することができるのです。

他に、画像をバナーリンクとして埋め込んだ場合、alt属性がアンカーテキストの役割を果たすなど、alt属性を記述することは、ユーザーファーストなコンテンツを作るため大切な要素であるといえます。

alt属性(オルト属性)が必要な理由とメリット

alt属性(オルト属性)が必要な理由とメリット

alt属性を記述することには複数のメリットがあります。具体的には以下の4つです。

  • 検索エンジンのクローラーが画像を理解するのに役立つ
  • 画像検索の検索結果表示に役立つ
  • 画像が表示されなかった際に代替テキストとして表示される
  • スクリーンリーダー、音声ブラウザを利用者の補助テキストとして使用される

1. 検索エンジンのクローラーが画像を理解するのに役立つ

クローラーとは、インターネット上に公開されているありとあらゆる情報を取得している「巡回プログラム」のことをいいます。Webサイトそのものや各ページ、画像などさまざまな情報を自動的に収集し、データベース化しているものです。そのため、alt属性を記述しておくと、検索エンジンのクローラーが画像の意味を理解しやすくなります。
クローラーとは?検索エンジンにインデックスされる仕組みや巡回頻度を上げる方法を解説 クローラーとは?検索エンジンにインデックスされる仕組みや巡回頻度を上げる方法を解説 Webサイトを制作、公開しても検索結果に表示されないと検索エンジン経由の集客はできません。検索エンジンがWebサイトの情報を取得するために使用しているのがクローラーです。クローラーがサイトの情報をどのように取得しているのか、基本的なところから解説します。
クローラビリティとは?SEO対策において重要な理由は?向上の方法も クローラビリティとは?SEO対策において重要な理由は?向上の方法も

2.画像検索の検索結果表示に役立つ

画像検索では、alt属性や画像ファイル名が分かりやすいもののほうが、上位表示されやすいといわれています。Googleの画像検索で上位表示されるための条件は次の3つです。

  • alt属性と画像ファイル名にキーワードが入っていること
  • 画像の配置場所とサイズが適切であること
  • 画像の前後のテキストがキーワードに関連していること

このように、通常のWeb検索に加え、画像検索でもヒットするよう、ひと手間かけてalt属性を記述しておくのが賢明です。

3.画像が表示されなかった際に代替テキストとして表示される

インターネットの通信障害が起こったときや、通信速度が遅い場合などに画像が表示されないことがあります。何らかの原因で画像が表示できない場合でも、alt属性に代替テキストが入っていれば、ユーザーに情報を伝えやすくなります。

画像をURLリンクで挿入しているときはアンカーテキストの代わりにもなるため、どのような状況であっても、コンテンツ内の情報を正確にユーザーに届けることができます。

4.スクリーンリーダー、音声ブラウザを利用者の補助テキストとして使用される

Webサイトの情報は、スクリーンリーダーや音声ブラウザで読み上げることによって視覚に障害のある方も利用できます。ただし、画像などの非テキストコンテンツは、そのままでは読み上げることができません。そのため、alt属性を用いて代替テキストを設定しておくことが重要です。

alt属性を記述しておくと、スクリーンリーダーや音声ブラウザが代替テキストを読み上げるため、視覚障害のある方にもコンテンツの情報を伝えるようにできるからです。

alt属性(オルト属性)はSEO対策に効果があるのか

alt属性(オルト属性)はSEO対策に効果があるのか

alt属性を記述することは、SEO対策にも有効だとされています。画像やイラストなどがあるコンテンツは、質の高いページと判断されやすく、検索上位に表示されやすい傾向にあるためです。しかし、関連性の低い写真を挿入するのではなく、必要な画像を適切な位置に、そして適切なサイズで挿入する必要があります。

キーワードやテキストの内容と関連した画像を選定し、ユーザー行動に応じた配慮をすることでユーザーにも、検索エンジンにも高く評価されます。現に、検索順位の上位サイトのほぼすべてがalt属性を記載しているともいわれているため、alt属性の記述は必須だといえるでしょう。

もちろん、記述したからといってすぐに検索順位が上がったりアクセス数が増えたりするようなことは期待できません。しかしながら、テキストだけでなく画像やイラストも適切なものを選び、ユーザー目線でコンテンツを作っているかどうかを、検索エンジンはきちんと評価します。

SEO対策にはテクニックやノウハウをおさえることももちろん重要ですが、ユーザーファーストであることや、質の高いコンテンツを追求することが本質であることを忘れないようにしておきましょう。
Googleアルゴリズムとは?検索エンジンのアルゴリズムについて解説 Googleアルゴリズムとは?検索エンジンのアルゴリズムについて解説

alt属性(オルト属性)の記述方法

alt属性(オルト属性)の記述方法

alt属性は、HTMLで次のように記述します。

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

「画像の説明」と記載している部分に、画像の内容を記入しましょう。

ワードプレスでのalt属性の設定方法

ワードプレスでのalt属性の設定方法

WordPressでは、画像をアップロードすると「代替テキスト」という項目が表示されます。その項目に画像の説明を入力すると、HTMLの記述なしでalt属性を設定することが可能です。

alt属性(オルト属性)を記述する際の注意点

alt属性(オルト属性)の正しい記述方法、注意点は?

「alt属性の記述は必須」とお伝えしましたが、実際の書き方にはいくつかの注意点があります。alt属性の効果を発揮させるために、以下のポイントに注意してください。

  • キーワードを盛り込みすぎない
  • 画像に合った内容をテキストで記述する
  • 長いテキストは避ける
  • 読み上げる必要のない画像はalt属性を空欄にする

1.キーワードを盛り込みすぎない

alt属性の中に盛り込むキーワードは、2~3個までが適切です。alt属性にはコンテンツの内容に関連するキーワードを盛り込む必要がありますが、多くのキーワードを含めると、記事と画像の内容がブレてしまい、「関連性の低い画像を埋め込んでいる」とクローラーに判断される場合があります。

また、alt属性にキーワードを入れすぎるとスパム行為とみなされ、ペナルティを受ける恐れもあるため、本当に必要なキーワードに絞って記述しましょう。

2.画像に合った内容をテキストで記述する

alt属性は、画像にマッチしたテキストで記述しましょう。キーワードを羅列するだけ、あるいはスペースで区切るだけ、では効果がありません。たとえば、春の桜並木の風景写真を挿入する場合は、場合のalt属性を「桜並木の風景」や「桜の並木道を歩く人」などとします。Googleのクローラーは単語の羅列を理解できないため、端的な文章にして記述しましょう。

alt属性の記述【例】

NG:春 桜 並木道 風景 写真

OK:春の桜並木の風景

3.長いテキストは避ける

alt属性に記述するテキストは、適切な長さに調整しましょう。正確な制限や決まりはありませんが、20文字前後までにおさえるのがよいとされています。alt属性の役割は、画像の意味を説明したり、代替テキストとして補助したりすることですが、テキストが長すぎるとかえって画像の意味が検索エンジンに伝わらなくなってしまいます。

読み上げ機能を使う場合を想定すると、長い説明が必要に感じるかもしれませんが、SEOへの効果とのバランスをとることも大切です。

4.読み上げる必要のない画像はalt属性を空欄にする

Webサイトでは、ページの装飾に使う画像や背景画像などを入れる場合もあります。このようにコンテンツの内容と直接的な関連がなく、意味をもたない画像にはalt属性を記入する必要はありません。ただしこのとき、「alt=””」の記述は残して、代替テキストだけを空欄にするよう注意してください。

「alt=””」そのものを記述しないと、音声読み上げの際に「画像」と読み上げられてしまうケースがあるためです。目で見るべき情報と、耳でも確認できる情報を判断して代替テキストを記述すべきかどうか判断することが必要です。

alt属性をWeb上で確認する方法

alt属性をWeb上で確認する方法

alt属性を確認する際は、「Googleの検証機能」を使うのが簡単です。ツールは使用しませんが、Googleの検証機能を使うため、ブラウザはGoogleChromeを使います。

確認方法は次のとおりです。

  1. alt属性を確認したいページを開く
  2. 対象のページで右クリックし「検証」を開く
  3. ソースコードが表示されるので、確認したい画像のコードをクリックする
  4. コードにある<img src=”〇〇” alt=”〇〇”>部分を確認する

ツールを使わずに簡単にalt属性を確認することができるので、ぜひこの方法でチェックしてみてください。

alt属性(オルト属性)とは?のまとめ

alt属性(オルト属性)とは?のまとめ

alt属性は、ユーザー目線からみてもSEOの観点からみても大切な要素です。書き方に迷ったときは、視覚障害の人や、音声読み上げを使用する状況をイメージしてみましょう。どのような代替テキストであればスムーズに理解できるかを想像することが、結果的に良質なコンテンツの評価へとつながります。

監修者紹介

石田 哲也

石田 哲也

取締役CMO

Twitter:@te2319
株式会社ニュートラルワークス 取締役CMO。1984年生まれ。高校卒業後にISD株式会社にて起業。株式会社オプトにてWebマーケティングを学び、株式会社メタップスなど複数のベンチャー企業にて事業立ち上げを経験。前職はワンダープラネット株式会社にてゲームプロデューサーとしてスマホアプリゲームの制作に従事。2018年に地元の神奈川へ戻り、ニュートラルワークスにジョイン。SEO/Web広告運用/サイト分析・改善など、Webサイトの運用改善~ゲームアプリ制作や数十万フォロワーのSNSアカウントの運用経験などWebビジネス全般を守備範囲とする。

■経歴
2003年 ISD株式会社/起業
2009年 株式会社オプト/SEMコンサルタント
2011年 株式会社メタップス/シニアディレクター
2013年 ライブエイド株式会社/執行役
2016年 ワンダープラネット株式会社/プロデューサー・BizDev
2018年 株式会社ニュートラルワークス/取締役CMO

■得意領域
Webサイト改善
SEO対策
コンテンツマーケティング
リスティング広告

■保有資格
Google アナリティクス認定資格(GAIQ)
Google 広告検索認定資格
Google 広告ディスプレイ認定資格
Google 広告モバイル認定資格