alt属性とは？SEO対策に効果的な書き方【2021年最新版】
検索エンジンにどのような画像であるかを的確に伝えることができるのが「alt属性」。
ホームページを運営していると、alt属性というワードを見聞きする機会があるはずですが、
『alt属性ってなに？title属性とは違うの？』
『すべて画像に代替テキストを設定した方がいいの？』
『SEO効果はあるのかな？』
といった疑問が生じるのではないでしょうか？
今回のコラム記事では、alt属性とは一体何なのか、SEO効果があるのかを詳しくまとめていきます。
SEO効果が期待される使い方やテキストの書き方を解説するので、本ページを読み終わるころには適切にalt属性を使いこなせるようになるでしょう。
【基本知識】alt属性とは？SEOにおける効果は？
alt属性(オルト属性)とは、検索エンジンに画像が何を表しているのかを伝えるテキストのことです。
alt属性のほかには「代替テキスト」や「altタグ」「altテキスト」と呼ばれることもあります。
主に、下記のような役割を果たします。
- 検索エンジンの画像整理に役立つ
- 画像が表示されない場合にはテキストが表示される
- 視覚障がい者への補助テキスト
では、具体的にどのような効果があるのかをひとつずつ見ていきましょう。
検索エンジンの画像整理に役立つ
検索エンジンは、画像だけではどのような内容であるかが判断できません。
しかし画像に代替テキストを設定することで、検索エンジンが画像の内容を理解できるようになるのです。
画像検索からの流入を増やすことができるので、SEO対策にもつながります。
画像が表示されない場合にはテキストが表示される
『通信状態が悪くてホームページの画像が表示されない』といったご経験がある方もいるでしょう。
何らかの理由で画像が表示されなくなったときに、alt属性を設定することで画像の内容をテキストで表示してくれます。
視覚的に画像は見えていなくても『このような画像が表示されている』ということが認識されるのです。
視覚障がい者への補助テキスト
alt属性は、視覚障がい者がインターネットを利用するときに役立ちます。
視覚障がい者は「音声ブラウザ」や「スクリーンリーダー」などを利用し、読み上げられる音声にて情報を理解します。
その際に、テキストは通常通り読み上げられるのですが、どのような画像であるかを認識できないので音声で伝えることはできないのです。
alt属性で画像内容のテキストを設定しておけば、その設定したテキストを読み上げてくれるので、視覚障がい者の読解に役立ちます。
alt属性を設定することで、Googleの検索エンジンにどのような画像であるかを伝えるだけでなく、読者(ユーザー)にとっても理解しやすい良質コンテンツとなります。
alt属性とtitle属性との違い
『alt属性とtitle属性の違いがよく分からない』と悩む方は少なくありません。
大きな違いを下記にまとめました。
▼スマホの場合は横にスクロールしてご覧ください
| alt属性 | 画像の内容を伝える |
|---|---|
| title属性 | 画像の補助説明をする |
alt属性は画像そのものの内容を伝えるためにありますが、title属性は補助説明のためにあるのです。
title属性を設定した画像やテキストにカーソルを合わせると、吹き出しのような文字(ツールチップ)が表示されます。
alt属性は、画像以外に設定できないことに対して、title属性は画像やテキストなどさまざまな要素に使用できます。
基本的に、title属性はalt属性ほどのSEO効果は期待できないので、alt属性に絞って施策を練る方がいいでしょう。
alt属性の記述例
ここからは、alt属性の記述方法を具体例をあげながら解説していきます。
基本的には下記のように記述をします。
<img src="画像のURL" alt="画像の説明">「alt=”画像の説明”」の部分がalt属性です。
たとえば、下記の画像にはどのような画像の説明を入れるといいのでしょうか？
対策キーワードは「デスクワーク 休憩」だとすると、どのような代替テキストを入れるべきかをお伝えします。
- 具体例①（よい例）
-
<img src="画像のURL" alt="コーヒーとパソコン">画像の内容を簡潔に伝えることができているので、適切な設定だといえます。
- 具体例②（最も良い例）
-
<img src="画像のURL" alt="デスクワークの休憩中に最適なコーヒーとお菓子">対策キーワードも盛り込めているのでSEO対策の面で見ても最適な代替テキストです。
- 具体例③（悪い例）
-
<img src="画像のURL" alt="デスクワークの休憩時間 パソコン 休憩 デスクワーク お菓子">対策キーワードを盛り込み過ぎているので、Googleの検索エンジンからスパムだと思われてしまいます。
GoogleのSEOスターターガイドでは、下記のような記述は避けるべきだと記載されています。
・極端に長いファイル名を付ける。
・alt テキストにキーワードを並べたり、文章全体をコピー＆ペーストしたりする。
alt属性のテキストは、画像の内容を簡潔に書くことが大切です。
ユーザー(読者)とGoogleの検索エンジンにとって、理解しやすい内容を意識して記述しましょう。
SEO対策に効果的なalt属性！書き方のコツ
ここからは、SEO対策に効果的なalt属性の書き方を下記の2つに分けて解説します。
- 画像の内容に合うキーワードを入れる
- キーワードを盛り込み過ぎない
上記の2つのコツを押さえておけば、画像検索の流入が見込めたり、ユーザーに好かれるコンテンツとなったりといったメリットがあります。
画像の内容に合うキーワードを入れる
alt属性は、画像の内容を読者(ユーザー)や検索エンジンに伝えるためにあります。
画像を見なくても相手に伝わるように具体的な記述をしましょう。
対策キーワードで流入を見込みたいからといって、キーワードだけを入れるのはNGです。
なぜかというと、代替テキストが本文の流れに沿ってなかったり、読者(ユーザー)が不自然に感じたりしてページを閉じてしまうからです。
例として下記画像の場合、
alt属性は「ネクタイを閉めるスーツ姿の男性」と記述すると読者(ユーザー)がイメージしやすいでしょう。
キーワードを盛り込み過ぎない
alt属性に、対策キーワードを多数含めるのは控えましょう。
Googleの検索セントラルでは、代替テキストの悪い例（キーワードの乱用）が掲載されています。
悪い例（キーワードの乱用）:<img src=”puppy.jpg” alt=”puppy dog baby dog pup pups puppies doggies pups litter puppies dog retriever labrador wolfhound setter pointer puppy jack russell terrier puppies dog food cheap dogfood puppy food”/>
代替テキストに対策キーワードを複数記述しているサイトは少なくありません。
たとえば、対策キーワードは「デスクワーク 疲れ」として下記画像の場合、
<img src="画像のURL" alt="デスクワーク疲労 デスクワークの疲れ 原因 デスクワークのストレス解消法">など、対策キーワードを並べただけの代替テキストでは、読者(ユーザー)にどのような画像であるかが伝わりにくくなります。
それだけでなく、Googleの検索エンジンにスパム行為と勘違いされる可能性があります。
ペナルティを受けてサイトが飛ばされてしまうと本末転倒ですので、必要最低限のキーワードを代替テキストに記述しましょう。
alt属性に関するQ&A
ここからは、alt属性に関するよくある質問にQ＆A形式でお答えします。
- 文字数に制限はあるの？
- すべての画像に設定するべき？
- 同じ内容の画像を盛り込んでも問題ないの？
- 半角スペースは必要？
では、気になる項目をチェックしましょう。
文字数に制限はあるの？
alt属性は「〇文字～〇文字まで」といった決まりがありません。
しかし、先述したように極端に長い文章だったり、文章全体をコピー＆ペーストしたりすると、Googleからの評価が下がってしまいます。
ですので、簡潔に画像内容を説明する代替テキストとなるように、意識して記述しましょう。
すべての画像に設定するべき？
alt属性は、すべての画像に設定する必要はありません。
背景画像やラインマーカーなどの装飾を画像で設定している人も多いでしょう。
その場合に、すべての画像にalt属性が設定されていれば、音声として読み上げられて読者(ユーザー)がコンテンツを理解しにくくなるはずです。
装飾目的の画像は、alt属性を設定しない方が読者にとって良質なコンテンツになります。
ただし、下記のように「alt=””」というように「” ”」カッコのなかを空にしておくことが重要です。
<img src="画像のURL" alt="">「alt=””」は、すべての画像に忘れずに記述しましょう。
同じ内容の画像を盛り込んでも問題ないの？
同じ内容のalt属性をひとつのページやサイトに複数、盛り込んでも問題ありません。
『すべてのページにサイトのロゴマークを画像で挿入したい』
『何枚も同じ画像を挿入する必要がある』
サイトを運営していると、そのような場面もあるはずです。
同じ内容の画像が並んでもステマ行為と判断されることはないので、安心して挿入しましょう。
しかし読者にとって、音声で何度も同じ内容を読み上げられると不快に思われる場合は「alt=””」と代替テキストを空の状態にしておくといいです。
半角スペースは必要？
alt属性の代替テキストを「、」で区切るのか「 」半角スペースを使用するのか迷っている方も多いはずです。
結論からいうと、どちらを使用しても問題ありません。
- 句読点を使う場合
-
<img src="画像のURL" alt="ダイエット中の食事、女性の食事姿"> - 半角スペースを使う場合
-
<img src="画像のURL" alt="ダイエット中の食事 女性の食事姿">
しかし、句読点やスペースなしで簡潔な文章にするのが最適です。
どうしても句読点やスペースが必要なときには、どちらを使っても問題ないということを覚えておきましょう。
alt属性を確認する方法
設定したalt属性が、適切に反映されているかを確認する方法をご紹介します。
- Googleの検証機能を使って確認する
- Googleの拡張機能を使って確認する
上記の方法でalt属性の反映状況を確かめましょう。
Googleの検証機能を使って確認する
Googleの検索機能を使用することで、alt属性を確認できます。
具体的な使い方を解説します。
- alt属性を調べたい画像にカーソルを合わせて右クリック
- 「検証」をクリックする
- 画面の右側にページのソースコードが表示されるので、alt属性を確認する
上記3つの手順でalt属性が反映されているかを確認できます。
Chromeの拡張機能を使って確認する
次に、Google Chromeの拡張機能「Alt＆Meta viewer」を使って確認する方法をご紹介します。
「Alt＆Meta viewer」は、無料でalt属性とtitle属性の確認ができるツールです。
「Alt＆Meta viewer」のページへ移動して「Chromeに追加」をクリックするとインストールができます。
インストールが完了したら「Alt＆Meta viewer」を開いて、右上の[alt]をクリックしましょう。
alt属性だけ表示されるので、気になっている画像の代替テキストのみを確認できます。
alt属性が表示されないときの対処法
ブラウザによってalt属性が表示されない場合があります。
最近のブラウザ（Google Chrome、Edge、IE）やスマートフォンからでは、alt属性の確認ができません。
alt属性の確認をしたい場合には、Google Chromeの拡張機能「Alt＆Meta viewer」を使いましょう。
画像流入の確認方法
『月にどれぐらいの画像流入があるのかな？』と疑問に思う方もいらっしゃるのではないでしょうか。
Googleサーチコンソールを使用すれば、画像の流入を確認できます。
- Googleサーチコンソールにアクセスする
- 画面左のメニュー「検索パフォーマンス」をクリック
- 画面左上の「検索タイプ：ウェブ」を「検索タイプ：画像」に変更
画面を下側へスクロールすると、画像検索からのクリック数を確認できます。
画像検索からのクリック数が多い場合には、そのalt属性のキーワードをもとに新しいページを追加するといった対応もできるはずです。
今後のコンテンツ作成にとって重要な情報となるので、一度は画像の流入をチェックしてみるといいかもしれません。
まとめ
本ページでは、alt属性についてまとめました。
- alt属性は検索エンジンにどのような画像なのかを伝えられる
- 通信状態が悪いところでもalt属性は、画像の代わりにテキストとして表示される
- 対策キーワードの詰め込み、長文は控えるべき
- 簡潔に画像の内容を伝える
- 装飾や視覚目的の画像はalt属性を空白にする
alt属性を使用すれば、検索エンジンに画像の内容を分かりやすく伝えられるうえに、ユーザーにとっても使いやすいサイトだと認識されるでしょう。
Googleが目指す「誰にとってもわかりやすいサイト」を作るには、alt属性を導入した方が上位表示される可能性がぐんっとアップします。
まずは無料でご相談ください。
お問い合わせ・ご相談や、公開後の修正依頼などに関しては、いずれかの方法にてお問い合わせください。
※年末年始・土日祝は定休日となります
※受付時間 9：00～17：30
