ブログやWebサイトに画像を挿入する際、「alt属性(オルトテキスト)」という項目に何を入力すればいいか迷ったことはありませんか?
「よく分からないから空欄のままにしている」 「とりあえず、狙っている検索キーワードをたくさん詰め込んでいる」
もしそうだとしたら、非常にもったいないことをしています。 なぜなら、Googleのロボットは「目」を持っていないため、altテキストを読んで初めて画像の内容を理解し、SEOの評価を下すからです。
alt属性は、単なる画像の裏側の設定ではなく、SEO(検索エンジン最適化)とアクセシビリティ(誰もが使いやすいサイト作り)の両方を支える重要な役割を持っています。
この記事では、Webマーケティングのプロの視点から「alt属性には具体的にどんなテキストを入力すればいいのか?」を、初心者にでも分かりやすく、NG例・OK例を交えて解説します。今日からすぐに使える3つの基本ルールをマスターして、検索エンジンに好かれるサイトを作りましょう!
Webマーケティングの観点から見ると、画像タグの「alt属性(オルトテキスト)」は、SEO(検索エンジン最適化)とアクセシビリティ(誰もが使いやすいサイト作り)の両方を支える重要な要素です。
altテキストに入力すべき内容を一言で表すなら、「電話口の相手に、その画像に何が写っているかを言葉だけで伝えるための説明文」です。
検索エンジンのロボット(Googleなど)や、視覚に障害がある方が使う音声読み上げソフトは、画像そのものを「見る」ことができません。そのため、あなたが設定したaltテキストを読んで、その画像の意味を理解します。
具体的にどのように書けばよいのか、3つの基本ルールと実例を解説します。
1. 具体的で自然な説明にする
キーワードを詰め込むのではなく、画像の内容を素直に説明します。「〜の画像」「〜の写真」という言葉は、システム側がすでに画像だと認識しているため不要です。
| 画像の状況 | ❌ 悪い例(NG) | ⭕️ 良い例(OK) | 理由 |
| 赤いスニーカーの商品画像 | alt="靴 スニーカー 赤 セール" | alt="ナイキの赤いランニングシューズの側面" | 単語の羅列(キーワードの詰め込み)はスパムと判定されるリスクがあります。画像を見たまま具体的に書きます。 |
| 自社のロゴ画像 | alt="ロゴ" | alt="株式会社〇〇のロゴ" | 「ロゴ」だけではどこの会社か分かりません。企業名を含めることで、検索エンジンにも正しく認識されます。 |
| 売上推移のグラフ | alt="グラフ" | alt="2023年の売上推移を示すグラフ。前年比で120%増加。" | グラフや図解の場合は、そこから読み取れる「重要な結論」までテキストに含めると親切です。 |
2. リンクになっている画像には「移動先」を示す
バナー画像などをクリックして別のページに移動する場合、altテキストは「リンクのアンカーテキスト(青い文字のリンク)」と同じ役割を持ちます。
- ❌ 悪い例:
alt="バナー画像"またはalt="クリック" - ⭕️ 良い例:
alt="Webマーケティング無料相談のお申し込みはこちら"
ユーザーやGoogleに対し、「クリックした先で何が起きるのか(どんなページに移動するのか)」を明確に伝えてください。
3. 装飾目的の画像は「空(から)」にする
すべての画像にテキストを入れなければいけないわけではありません。文章の理解に関係のない、ただの「見栄えを良くするための画像(背景の模様、見出し横の小さなアイコンなど)」は、あえて空にします。
- ⭕️ 正解:
alt=""(※ダブルクォーテーションの間に何も入れない)
ここに無理に「星のアイコン」や「青い線」などと入れると、音声読み上げソフトがすべて読み上げてしまい、かえってユーザーにとってノイズになります。
初心者のための最終チェックリスト:
- 画像が表示されなかった時、代わりにそのテキストが表示されても文脈に違和感がないか?
- キーワードを不自然に詰め込んでいないか?
- ただの装飾画像に無駄な説明を入れていないか?
この3点を確認するだけで、プロレベルのaltテキスト設定ができるようになります。
【まとめ】
いかがでしたでしょうか。画像タグの「alt属性(オルトテキスト)」の正しい書き方について解説しました。
改めて、設定時のポイントを振り返ってみましょう。
- 電話口の相手に伝えるつもりで、具体的で自然な説明文にする(キーワードの詰め込みはNG)
- リンク画像の場合は、クリックした先の「移動先(ページ内容)」を伝える
- 意味を持たない単なる装飾画像は「空(
alt="")」にする
最初にもお伝えした通り、Googleのロボットや音声読み上げソフトは、私たちが設定したこのaltテキストを頼りに画像を理解します。 つまり、alt属性を丁寧に設定することは、検索エンジンへのアピールになるだけでなく、サイトを訪れるすべてのユーザーへの「親切なおもてなし」に直結するのです。
最終チェックとして、「画像が表示されなかった時、代わりにそのテキストが表示されても文脈に違和感がないか?」を意識してみてください。
これからは画像をアップロードする際、ほんの少しの手間をかけて、正しく効果的なaltテキストを設定していきましょう!