皆さん、Webページの画像のalt属性がどんなものか知っていますか?
中には、「 alt属性はSEOに影響するのか? 」「 どうやって設定すればいいの？ 」などと疑問に思われている方もいるかと思います。
結論から言うと、alt属性は単なる画像のタイトルではなく、SEOにおいて大きな役割があります。
ただし、ただ記述すればよいという話でもありません。間違った方法で設定してしまうと、あなたのWebサイトのSEO評価が下がる可能性もあります。
今回は、alt属性の基礎知識からSEOに効果的なalt属性の書き方、注意点まで初心者の方でも分かりやすく解説します。
本記事で適切なalt属性の記述方法を学び、Webサイトの評価を上げましょう！
alt属性とは?
alt属性( オルト属性 )とは、画像の代わりとなるテキスト情報のことを指します。
万が一画像が読み込めない時に表示させる代替手段（ alternative )の文言と定義されており、「 代替テキスト 」とも呼ばれます。
今の段階では、検索エンジンがWebサイトに貼られている画像の内容を把握することはできません。そのためalt属性というタグは「 その画像は示しているのか 」という情報を検索エンジンに伝えるために存在しています。
alt属性を設置する5つの目的
設置方法は後述しますが、alt属性はHTMLタグですので、サイトに訪れたユーザーが目にすることはありませんが、重要な役割をもっています。
alt属性を設置する目的は以下の5つです。
- Google検索エンジンに画像の内容を伝える
- キーワード検索時に画像結果で上位に表示させる
- 画像の代わりにテキストを表示する（Webページの読み込みが遅い場合）
- 読み上げ機能（Webページの音声読み上げ機能を利用した場合）
- alt属性にはアンカーリンクテキストと同じ効果がある
alt属性とSEOの関係について
冒頭で少し触れましたが、alt属性はSEOにも影響を与えることが分かっています。ここでは、SEOとの関係を3つに分けて具体的にお話します。
① alt属性は検索エンジンが読むテキストになる
Google検索エンジンのクローラーは、私たち人間とは違って画像を目で見て理解することができません。そこで、alt属性がクローラーが画像の内容を把握するサポートをします。
クローラーは画像自体を認識できない代わりに、alt属性に記述されているテキストを概要として読み取ります。そうしてクローラーに読み取られた画像は、alt属性に用いた文言がキーワードとして認識されます。
そして、「 遊園地 関西 」でユーザーが検索した場合、alt属性に「 遊園地 関西 」と書いた画像があれば、検索でヒットさせることができるようになります。これはWebサイトへの流入元を増やすことにも繋がりますので、全ての画像に内容が正しく伝わるキーワードを入れる習慣をつけましょう。
| 【 SEOのポイント 】検索エンジンに認識してもらい、上位表示を目指そう！ |
② alt属性は画像リンクのアンカーテキストになる
先ほどalt属性タグを設定する目的のところにも書きましたが、画像をリンクにした場合、alt属性がアンカーテキストになります。
アンカーテキストとは、ページからページへジャンプするリンクに使われる「 テキスト（ 文字列 ）」のことです。
クローラーはリンクのアンカーテキストを読みながらWebサイトを巡回しますので、そのテキスト情報がリンク先の情報を正しく表記しているかどうかはSEOに大きな影響を与えます。リンクを最適化するため、画像の内容を簡潔に表したテキストの記述を心がけましょう。
| 【 SEOのポイント 】リンク先を正しく示して、評価を上げよう！ |
③ alt属性は画像の代替テキストとして表示、読み上げられる
ここまでの2つは検索エンジンとの関係でしたが、alt属性は検索エンジンだけではなく、ユーザーの役にも立ちます。というのも、通信状況が悪いなどの原因で画像が読み込まれないことがあります。
その時、画像の代わりにalt属性が代替テキストとして表示され、「 どんな画像がここに表示されるはずだったか 」を補完してユーザーの手助けをします。
また、インターネットから情報収集をしたい方の中には視覚障害を持った方や高齢者の方もおり、「 音声読み上げ機能 」を使用することがあります。
その場合にalt属性を適切に記述していると、画像の意味を代替テキストとして読み上げられるため、よりユーザーの理解度を高めることができます。
その事実自体がSEOとは直接関係がなくても、ユーザーにとって分かりやすく親切なWebページであればアクセス数や滞在時間は向上し、結果的にSEOにおいても良い影響が期待できます。
| 【 SEOのポイント 】ユーザーの利便性を考えてアクセス数UPを目指そう！ |
altの設置方法
それでは次に、alt属性の設置方法をお教えします。WordPressなどであれば画像の編集画面から「 代替テキスト 」をすぐに入れることができますし、HTMLタグで設定する場合も皆さんが想像しているよりは簡単に設置できると思います。
HTMLの書き方
「 alt 」を以下のようにimgタグ内に他の属性と同じようにを設置するだけです。
| <img src="画像URL" alt="画像の説明"> |
この中の「 alt=“画像の説明” 」の部分がalt属性になるので、そこに画像の説明文を入れましょう。例えば、以下のようになります。
| <img src="https://ooooo/” alt=“関西の遊園地” width=“200” height=“100" /> |
簡単ですよね。
既に画像を設置していてaltを設置していない人も、「 alt=”画像の説明” 」の部分をimgタグ内にコピーして説明部分を書き換えればすぐにできますので、ぜひ更新してみてください。
SEOに効果的なalt属性3つの記述方法
alt属性の目的や設置方法など基本的なことが分かったところで、次はSEOにおいて効果的な書き方についてご紹介します。
alt属性を適切に書かなかった場合SEOに悪影響を与えることになりかねませんので、しっかりと読んでくださいね。
① キーワードを入れすぎない
alt属性にキーワードを詰め込みすぎるのは良くありません。関連キーワードを入れすぎると、本当に伝えるべき内容がブレてしまい逆効果です。そのため、キーワードは2個から3個に抑えるようにしましょう。
例えば、関西の遊園地を紹介する記事で、ジェットコースターの画像を挿入する場合は下記のように書きましょう。
キーワードを含めた書き方の例
【 適切な書き方 】alt=“ 遊園地のジェットコースター ”
【 間違った書き方 】alt=“ 遊園地、ジェットコースター、関西、春休み、おすすめ ”
② 画像の内容に沿ったキーワードを選択する
alt内には、画像の内容を端的に表すキーワードを書くことが一番です。画像の内容からそれたものは含まないよう注意しましょう。
先ほどの例でいうと、「 alt=“遊園地、ジェットコースター、関西、春休み、おすすめ”」の中にある「 関西、春休み、おすすめ 」などは、単なるキーワードとして考えれば入れたくなる気持ちも分かりますが、その画像が表しているものではありませんので省きましょう。
視覚的な障害がある人がページの読み上げ機能を利用した場合、画像部分でaltの内容が読み上げられますので、キーワードをずらりと並べただけだと理解できません。
また、検索エンジンの品質ガイドラインに沿っていないという理由でペナルティを受ける可能性もありますので、画像検索でヒットさせたいというような考えだけで多くの情報を含まないようにしましょう。
関連記事：【SEO対策】キーワード選定の方法と便利ツール7選
③ 説明文は適切な長さにする
alt内の説明文は長くしすぎないようにしましょう。
これは先ほどのキーワードを入れすぎない、内容に即したキーワードにする、という項目から連想できることですが、情報を詰め込みすぎるとその画像で何を伝えたいのかが分かりにくくなってしまいます。
大切なことなので何度も言いますが、alt属性の記述では「 分かりやすくて簡潔な表現 」を心がけましょう。そうすることで検索エンジンのクローラーが理解しやすく正しい評価を受けることができますし、ユーザーにとっても親切です。
説明文の適切な長さの例
【 適切な書き方 】alt=“遊園地のジェットコースター”
【 間違った書き方 】alt=“春休みに行くべき関西で人気の遊園地のジェットコースター”
Google画像検索の上位表示にはファイル名も関係する？
せっかく対策するなら、Google画像検索で上位表示したいですよね。
alt属性を分かりやすく記述することはこれまで説明した通り大切ですが、「 画像のファイル名 」も最適化することでGoogleの画像検索で上位表示しやすくなります。
ファイル名にもキーワードを入れるようにしましょう。
また、設置場所はページ上部であるほどポイントは高いです。それに加えて、画像が設置されている前後の文章にも関連するキーワードがあるかどうかなども評価されます。
ファイル名を最適化する方法
- 「 image1.jpg 」「 2.jpg 」のようなファイル名であれば画像を意味するファイル名に変える
- キーワードを詰め込みすぎたり、文章をコピー&ペーストで使い回ししない
- 簡素で分かりやすいことが大事なので、長すぎるファイル名を付けない
alt属性を利用すべきでないケース・設置時に注意すべき点
alt属性の説明文は、一般的なブラウザ上で見えることはありません。
それでも、上位サイトのほとんどは画像にalt属性を記述しています。
つまり、Googleはalt属性を設置することをユーザーの利便性のために必要なマナーとして考えているため、そうしたところまでしっかりと対応できているサイトを高評価している傾向にあるということです。
しかし、中には無理をして記述しなくても良い画像というものもありますので、ここで解説します。
装飾目的の画像の場合、alt属性は空白でもOK
「 特に意味を持たない装飾目的の画像 」は何も書かなくて問題ありません。例えば、背景画像やラインなどです。
その理由は、装飾目的で使用している画像はコンテンツとしての意味はないからです。
- 装飾目的で使用している画像
- 無くても特に問題がない画像
のどちらかである場合はalt内を空白にしておきましょう。変に記述するよりは、それ以外の文章だけを読み取ってもらう方がクローラーにとってもキレイで分かりやすいです。
ただし、「 alt=”” 」の””内は空白にして良いのですが、「 alt=”” 」自体は記述しておくことが好ましいです。ここは気を付けましょう。
タイトル・見出し・リンクの場合はalt属性は必須
たまに、文字入りの画像を記事中に挿入しているサイトがありますよね。タイトルや見出しにデザイン性を持たせたい時や、「 登録はこちらから 」などの文言をボタンのように設置する時などです。
できるだけ画像ではなくテキストで書くほうがクローラーに伝わりやすいためSEO的には良いのですが、どうしてもタイトルや見出し、リンクに画像を使う場合は、内容をきちんと伝えるためにも必ずalt属性を記述しましょう。
alt属性とtitle属性の違いとは？
imgタグ内では説明文として設置しているalt属性と並べてtilte属性を設置することができます。
title属性は、設置した画像にブラウザ上でマウスカーソルを合わせるとtitleの内容がひょこっと表示されるものです。
imgタグだけでなく、他のタグにも設置可能です。
titleもaltと同じように検索エンジンのクローラーに画像の内容を伝える役割がありますが、alt属性と比べると重要度は低いとされています。
なので、画像の内容を検索エンジンに伝えるという意味ではtitleではなくaltを使うことがおすすめです。
alt属性を確認できる簡単な方法2選
最後に、alt属性が適切に記述されているかどうかを確認する方法を2パターン紹介します。
方法① Googleの検証機能を使う
1つ目は、Googleの検証機能を使って確認する方法です。ツールを使わずにできるので簡単です。
手順としては、まず初めに調査したいページ上で右クリックをして、｢ 検証 ｣という項目をクリックします。すると画面上にページのソースコードが表示されます。あとは、その中から確認したい画像に該当する部分をクリックするだけでalt属性がどのような状態になっているか確認できます。
方法② Chrome拡張機能「 Alt＆Meta viewer 」を使う
2つ目は無料ツールのChrome拡張機能「 Alt＆Meta viewer 」を使用することです。
Chromeウェブストアから「 Alt＆Meta viewer 」と入力して検索すると出てくるので、「 CHROMEに追加 」をクリックしてインストールします。
このツールを使用することでalt属性やtitle属性をツールチップとして表示できるようになりますので、インストールした後はChromeブラウザの右上の「 Alt 」をクリックするだけで簡単に確認できるようになりますよ。
2通りのパターンで実際に調べてみて、自分がやりやすい方法で確認するようにしてみてください。
alt属性が表示されない場合の対処法
中にはブラウザが原因でalt属性が表示されない場合があります。表示されていないことに気づいたら、他のブラウザで見た時にはどうかを先に確認するようにしましょう。
まとめ
いかがでしたでしょうか。
alt属性はWebページ内の画像の内容の説明文となり、画像が表示されない時にユーザーをサポートしたり、検索エンジンのクローラーに画像の内容を伝えてくれるなど重要な役割を果たしていることが分かりました。
SEOとしての影響は大きいものではないかもしれませんが、alt属性を適切に設定することでサイト順位が変わる可能性も十分にあります。
また、今後視覚的な障害者があるユーザー向けの読み上げ機能が「 ユーザーの利便性 」として評価に含まれるようになることも考えられますので、今からサイト内に挿入する画像には全てalt属性を記述する勢いで取り組んでも良いでしょう。
装飾目的の画像には記述する必要はないので、覚えておいてくださいね。