SEO対策 alt属性とは?書き方と設定方法・SEO効果について解説

alt属性とは?書き方と設定方法・SEO効果について解説のサムネイル画像

今回は「alt属性」(代替テキスト)の意味や書き方・SEO効果について解説します。「alt属性がSEOに影響する」と言いますが、正しい使い方や、どの程度SEO効果があるのかまでは把握していない方が多いのではないでしょうか。ユーザーにとって使いやすいWEBサイトにするためにもalt属性についてしっかりと覚えてください。

1

alt属性とは?

alt属性とは、ホームページ(WEBサイト)に表示される画像の意味を説明するテキスト情報のことで、「オルト属性」と読み、「代替テキスト」「Altタグ」と呼ぶこともあります。

WEB画像のリンクが切れているために画像が表示されないときや、画像が表示できないブラウザでページを開いたとき、音声読み上げ機能を利用するときなどに、Alt属性に代替テキストを指定することで画像の代わりにテキストが表示されるようになります。

alt属性の説明


また、alt属性をhtmlソース上に記述することで検索エンジンのクローラーに画像の意味・内容を適切に伝えるため、SEO対策上の効果が見込めます。

Alt属性は

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

このように記述します。

2

alt属性を使うメリット

2-1

画像が表示されないときに代わりにテキストを表示させる

ネットワーク上の問題などが原因でページ内にある画像が表示されなかった場合、あらかじめalt属性が設定されていれば、「画像の代わりに記述した文字列を表示させる」ことができます。

以前に比べると画像が表示できないブラウザが使われることは多くはありませんが、ネット環境によっては画像を読み込むのに時間がかかる場合もあるため、alt属性で画像に関する説明を記述する意味は多いにあります。

また、画像の読み込みが遅い場合も、ユーザーがどのような内容の画像なのかを理解できるようになるため、アクセシビリティの向上にも大きな効果が期待できます。

以下のような状況の場合を想定してAlt属性を設定しておきましょう。

・ネットワーク環境が悪く通信速度が不安定で表示されない。
・サイト側のサーバーが混雑しており画像を読み込めない。
・画像を表示させない設定にしている。

2-2

視覚障害者に対して適切な情報を提供する

パソコンやスマートフォンでWEBサイトを閲覧している視覚障害者の方は、主にスクリーンリーダーや音声ブラウザを使用してWEBサイトの情報を理解します。

スクリーンリーダーや音声ブラウザといった機能は、掲載されている文字情報を音声で読み上げることが可能ですが、テキスト以外の画像や動画などの情報は読み上げることができません。

そのような場合に必要になるのが、画像の内容を読み上げるための代替テキスト、つまりalt属性です。

alt属性が設定された画像は、スクリーンリーダーや音声ブラウザがその内容を読み上げてくれるため、「視覚障害者に対して適切な情報を提供する」ことが可能になります。

2-3

画像検索で表示される

alt属性を入れることで画像検索でも表示される可能性が高まります。

画像検索で表示されるかどうかの判断基準は、alt属性の設定だけではないですが、Googleのミューラー氏は「alt属性のテキストは、画像検索で画像をより適切に理解するのに本当に役立つ。」と発言しています。

例えばアパレルや飲食など画像検索からの流入が多い業種・業界は、画像検索で自社商品の画像が表示されるようにaltを設定しましょう。

画像検索
2-4

alt属性はアンカーテキストの変わりになる

alt属性を最適化したことで、劇的に検索順位が上がることはありませんが、Googleが公開する検索エンジンスターターガイドにはalt属性に関するメリットが記載されています。

それは、画像にalt属性を設定することで、画像からリンクを張ったときに画像のaltテキストがリンクに対してアンカーテキストと同様に扱われるようになるということです。

WEBサイト内にイメージリンクと呼ばれる「a要素」を設定して画像からリンクを貼る場合、alt属性のテキストがリンクに対する「アンカーテキストの代わり」としての役割を担います。

そのため、「こちらをクリック」のようなテキストではなく、検索エンジンにリンク先のページ内容が理解されやすい、きちんと説明された適切なテキストを記述することが大切です。

alt属性 アンカーテキスト
3

alt属性を設定する事によるSEOの効果

検索エンジンのクローラーはhtmlを読み込む際に、テキストの内容は理解できますが、画像の内容・意味を正確に理解することはできません。

そのため、altタグで設定されているテキスト・前後のテキスト・画像ファイルの名前・画像サイトマップを読み込み、どういった画像なのかを判断しています。

この中で、一番クローラーに画像の内容を伝えることができるのが、画像の内容を指定したaltタグになります。

「altタグを設定することで大幅に順位上がるわけではない」ですが、クローラーに画像の意味を理解させることで、「ページ内にはテキストだけではなくテキストの内容を補足する画像での説明がある」ページだと判断されるためSEO対策上でも良い効果があります。

■ 実際にaltタグを設定し検証を行った順位の結果

altタグ 検証結果


「Googleビジネスプロフィール 権限リクエスト」で6位前後の弊社メディアサイトの記事内の画像4枚に対して、altタグを設定して効果検証を行った結果、順位が2位程度上昇する結果となりました。
※ 同時期に関連記事を追加するなど順位上昇には別の要因も考えられる。

4

alt属性の設定方法

①【htmlでalt属性を設定する場合】

htmlでaltタグを記述する場合は以下のように記述します。

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

画像の説明の部分に「画像の内容を表すテキスト」
画像のURLの部分には「画像のアドレス」を指定します。

shopifyでalt属性を設定する場合】

shopifyでaltタグを記述する場合は以下のように記述します。

1.「商品管理」→「全ての商品」→altタグを設定したい商品を選択
2.「商品画像をクリック」→「代替テキストを追加する」をクリック
3.「altに入れるテキストを入力」→「代替テキストを保存する」

word pressでalt属性を設定する場合】

「artタグを設定したい画像をクリック」→「代替テキストの項目に入力」→「更新ボタン」

wixでalt属性を設定する場合】

「エディタからartタグを設定したい画像をクリック」→「設定アイコンをクリック」→「代替テキスト(SEO用)にテキストを入力」→「サイトを公開」

5

alt属性を設定する際の注意点

5-1

画像の内容に合うテキストを入れる

alt属性は、画像が表示されない場合や音声ブラウザで読み込みをおこなう際に、画像の意味をユーザーに伝える目的で設定するため、画像の内容と関係のないテキストや、分かりづらいテキストを入れてはいけません。

必ず画像の内容に合うテキストを入れるようにしましょう。

5-2

簡潔に具体的なテキストで記述する

alt属性に入力する代替テキストは、画像の内容を「簡潔なテキストで記述」します。

検索エンジンやユーザーに分かりやすい簡潔な内容で書かれた代替テキストは、ユーザーの混乱を避け、ユーザビリティを向上させるといった効果が期待できます。

例えば、ある商品を紹介するページに設置した画像からリンクを貼る場合、a要素を設定する必要があります。その際は、alt属性のテキストに「商品はこちら」などの記述ではなく、「商品名」を記述した方が、検索エンジンやユーザーにリンク先の内容を分かりやすく伝えることができます。

5-3

キーワードを詰め込まない

検索結果における順位を上げることを目的に、alt属性に対して特定のキーワードだけを詰め込んだり、繰り返し記述したりすると、検索エンジンにマイナスの評価をされてしまう可能性があるため注意が必要です。

また、alt属性のテキストに含める文字数は決まっていませんが、極端に長くならないように、できるだけ簡潔で分かりやすい文言で記述することを意識することが大切です。

5-4

画像にリンクが設定されている場合は記載する

alt属性はアンカーテキストの役割をするため、バナーリンクなど画像がtitleやh要素である場合は、リンク先のサイトの内容や、バナーの内容を適切にクローラーに伝えるためにaltタグを設定してください。

その際バナーリンクのクリック先URLが採用ページであれば「このリンク先のページは採用ページになります。」ではなく、「採用ページ」とテキストを記述すれば問題ありません。

商品ページへのリンク、資料ダウンロードページへのリンク、別ドメインへのリンクなども同様です。

5-5

装飾目的の場合は記述しない

すべての画像にalt属性のテキストを記述する必要はありません。例えば、背景画像やラインマーカーなど、WEBサイト上のデザインや装飾を目的で使用している画像は、コンテンツ内で意味を持つ画像ではありません。

このような意味を持たない画像に対してもalt属性は記述しますが、alt属性のテキストを設定する必要はないため、「alt=””」といったように値は空白のままで記述します。

【例】

装飾目的の画像例
<img src=”img/flags.gif” alt=””>


検索エンジンの読み込みの精度が進化し続ける今、これまで以上にユーザーや検索エンジンに対して分かりやすく情報を伝え、使いやすいWEBサイトを実現させることが求められています。

6

alt属性の書き方(良い例・悪い例)

alt属性(代替テキスト)の書き方の良い例と悪い例をこちらの画像を例題に説明します。

alt属性 書き方 画像例


【alt属性の書き方 良い例】

<img src=”〇〇.png” alt=”豚骨ラーメン”>
<img src=”〇〇.png” alt=”豚骨ラーメン 大盛”>

このようにシンプルで具体的に画像の内容が記述されている。

【alt属性の書き方 悪い例】

<img src=”〇〇.png” alt=””> ⇒ altの設定が無い
<img src=”〇〇.png” alt=”麺類”> ⇒ altの内容が曖昧
<img src=”〇〇.png” alt=”麺類 ラーメン豚骨ラーメン チャーシュー麺 大盛ラーメン”> ⇒ altのキーワードを詰め込みすぎ
<img src=”〇〇.png” alt=”パスタ”> ⇒ altの内容とあっていない

内容が曖昧、キーワードを詰め込み過ぎている、内容とあっていないのは悪い例となります。キーワードの詰め込みや、関係の無いキーワードの詰め込みはペナルティの対象となる可能性があるため注意が必要です。

また、alt属性はスクリーンリーダーで読み上げられた場合に、画像の内容が伝わらないと意味がありません。

そのため、適切な内容をaltタグに記述することが重要ですが、画像としての意味をもたない装飾画像にもaltタグが設定されていると、スクリーンリーダーで読み上げられた際に突然、前後のテキストと関連の無い単語が読み上げられてしまうため注意してください。

7

altの確認方法

7-1

「alt&Meta viewer」での確認方法

Google chromeの拡張機能で「Alt&Meta viewer」というツールを利用することで簡単にaltタグに設定されている代替テキストを確認することができます。

【方法】

STEP 1
Google chromeに追加するためにAlt &amp; Meta viewer – Chrome ウェブストア
このページに行き、「Googleに追加」をクリックしてインストール

STEP 2
Google chromeの右上に[alt]というアイコンが表示されるのでそちらをクリック。
これで設定されているalt属性を確認することができます。

7-2

「googleの検証機能」での確認方法

alt属性は拡張機能をインストールしなくてもGoogle chromeの検証機能を使って確認することもできます。

【方法】

STEP 1
alt属性を確認したいぺージを開いた状態でマウスを右クリック
※ winの場合はキーボードの「F12」をクリックでも開きます。

STEP 2
右側にソースコードが表示されるので画像のコードをクリック
「alt=」と記述されている部分を確認します。

8

alt属性よくある質問

alt属性の役割とは?

クローラーに何の画像なのかを認識させるために設定する、代替テキストを指定するための属性になります。

alt属性のSEO効果は?

通常の検索結果で大幅に検索順位が上がるなどの効果はないため、直接的なSEO効果は無いと言われています。ただし、画像検索結果で表示されやすくなるといった効果はあります。

alt属性の確認方法は?

Googleの検証機能を使った確認方法と「Alt&Meta viewer」等のGoogle拡張機能を使って確認することができます。

「alt」何を書く?

画像の内容を具体的に分かりやすく記述するようにしてください。

alt属性の略称は?

altは「alternate」の略となります。「altテキスト」「代替テキスト」「alternate text」「altタグ」と呼ばれます。

alt属性の長さは?何文字まで?

文字数の制限など長さの決まりはありません。ただし、スクリーンリーダーで読み上げられることも想定して簡潔に分かりやすく説明しましょう。

「aLT」なんて読む?

「オルト」と呼びます。

「代替え テキスト」と「alt属性」の違いは?

同じ意味となります。

9

まとめ

今回紹介した「alt属性」はSEOに直接的に大きな効果を及ぼすことはないとされていますが、テキスト以外の画像コンテンツが表示されないときなどに、正しい情報を伝えられる、アンカーテキストの代わりとなってユーザーに有益な情報を提供するといった観点からみると、alt属性の役割や効果を知り、正しい使い方をすることは非常に重要な施策といえます。 

意味を持たない画像にはalt属性を設定する必要はありませんが、分かりやすく使いやすいページやWEBサイトを構築してアクセシビリティを向上させるためには、alt属性の設定を行うことが望ましいといえるでしょう。

以上、「alt属性の役割」や「SEO効果」、そして「正しい設定方法」についての解説でした。

ホワイトリンク 記事内用バナー

この記事を書いたライター

SEO施策部

SEMを軸にSEOの施策を行うオルグロー内の一部署。
サイト構築段階からのSEO要件のチェックやコンテンツ作成やサイト設計までを一貫して行う。社内でもひときわ豊富な知見を有する。またSEO歴15年超の塩田英司のノウハウをSEOサービスに反映し、2000社を超える個人事業主から中堅企業までの幅広い顧客層に向けてビジネス規模にあった施策を提供し続けている。

CATEGORY

カテゴリー

SEO対策

WEBサイトを最適化し、Google、Yahoo!などの検索結果で上位に表示させる施策です。

SEO対策とは SEO対策とは イメージ画像
SEO対策の記事一覧

MEO対策

Googleビジネスプロフィールを最適化し、GoogleMapの検索結果で上位に表示させる施策です。

MEO対策とは MEO対策とは イメージ画像
MEO対策の記事一覧

コンテンツSEO

検索ユーザーの検索意図に合わせたコンテンツページを作成し、検索結果で上位に表示させる施策です。

コンテンツSEO コンテンツSEO イメージ画像
コンテンツSEOの記事一覧