画像のSEO対策 alt属性（代替テキスト）の書き方

Q: すべての画像にalt属性は必要ですか？

内容に意味のある画像には設定しましょう。一方、デザイン目的の装飾画像（飾り線・背景など）は、alt属性を空欄（alt=""）にします。

alt属性のイメージ図。1枚の画像にalt属性のテキストが紐づき、検索エンジンとユーザーの両方に画像の内容が伝わる様子

ホームページの内容をわかりやすくしたり、見栄えをよくするために、画像を挿入している人は多いと思います。しかし、その画像をSEO向けに最適化している人は意外と多くありません。

画像の最適化に利用するのは「alt属性（オルト属性）」と呼ばれるHTMLの記述です。alt属性を活用することで、画像検索からの流入やページの評価にプラスの効果が期待できます。

本記事では、alt属性の役割と最適な書き方を、初心者の方にもわかりやすく解説します。

資料請求でプロが教えるSEO&集客の入門書をプレゼント！

alt属性をはじめ、SEOの基本から実践までをまとめた「SEOとWEB集客の入門書」をご用意しています。資料請求いただいた方に無料でお届けしているので、独学で対策を進めたい方はあわせてご活用ください。

無料で資料を請求する

「alt属性」とは？

alt属性とは、HTML内で画像に設定される属性の一つで、特に「img要素」において使用されます。この属性は、画像の内容を説明するためのテキストを指定し、次のように記述します。

alt属性の記述例。imgタグの中に「赤いシャツを着た男性」というalt属性を記述したHTMLコードのサンプル

alt属性は、画像の内容を文字で表すためのものです。検索エンジンに画像が何を示しているのかを伝える役割を果たします。これにより検索エンジンは画像の内容を理解し、ページ全体の評価に反映します。

たとえば製品の画像であれば、alt属性に「商品名＋簡単な特徴」を記述します。すると検索エンジンがその画像を適切に認識し、関連する検索結果に反映しやすくなります。

さらに、alt属性はユーザーにとっても重要な役割を担います。画像が何らかの理由で表示されないときは、alt属性のテキストが画像の代わりに表示されます。また、視覚に障がいのあるユーザーがスクリーンリーダーを使う際にも、画像の内容を伝える手段となります。

次のセクションでは、alt属性と混同されやすい「title属性」との違いについて詳しく解説します。

「title属性」との違い

title属性とは、HTMLタグ内で使用される属性の一つで、ユーザーに追加情報を提供するためのテキストを指定します。マウスポインターを要素の上に乗せたときに、ブラウザにポップアップで表示されます。

＜titleタグの例＞

title属性の表示例。リンクにマウスを重ねると補足テキストがポップアップ表示される様子

この例では、リンクにマウスを重ねると「このリンクをクリックするとabc.comに移動します」というテキストが表示されます。

title属性はalt属性とよく混同されがちな属性の一つです。両者は画像に関連する情報を提供する点では共通していますが、その目的と役割は異なります。

title属性はサイトの使いやすさの向上に役立ちますが、SEOに直接影響を与えることはほとんどありません。つまりtitle属性は、主にユーザーが画像の詳細を理解するための補助的な情報を提供するためのものです。

一方でalt属性は、SEOにおいて重要な役割を果たします。画像の内容を検索エンジンに伝えるために使用され、画像が表示されない場合や、スクリーンリーダーが読み上げるためのテキストとしても機能します。

検索エンジンはalt属性の内容をもとに、画像が含まれるページのコンテンツを評価し、検索結果に反映させます。役割の違いをまとめると次のようになります。

alt属性：検索エンジンに画像の内容を伝えるため、SEOに関わる。
title属性：ユーザーが画像上にカーソルを乗せたときに表示される補足説明で、SEOには直接影響しない。

このように、alt属性とtitle属性はともに画像に関連する情報を提供しますが、それぞれの目的と役割を理解し、適切に使い分けることが大切です。特にSEO効果を狙う場合には、alt属性の最適化が重要です。

モバイルファーストインデックスへの対応

現在、Googleは「モバイルファーストインデックス」を採用しています。これは、ホームページのモバイル版を検索エンジンが主に評価する仕組みです。今ではスマートフォン対応は標準的な要件になっています。

そのため、PC向けページだけでなく、モバイルページでもコンテンツをしっかり最適化する必要があります。alt属性の設定も、モバイルページで同じように重要です。

モバイルページでalt属性を適切に設定すると、画像の内容が検索エンジンに正確に伝わり、画像検索からの流入やモバイル検索での評価につながります。

画像が小さく表示されるモバイル環境では、alt属性の内容も簡潔で明確な表現を心がけましょう。たとえば商品の画像であれば「赤いシャツ」など、画像が表すものを端的に書きます。すべての画像に漏れなくalt属性を設定することが大切です。

「alt属性」のSEOにおける３つの役割

alt属性を適切に設定すると、さまざまなSEO効果が期待できます。具体的な役割を３つ紹介します。

検索エンジンに画像の情報を伝える

検索エンジンは、主にテキスト情報をもとにホームページの内容を評価します。画像そのものは視覚的な要素のため、検索エンジンは内容を直接は読み取れません。そこでalt属性を使い、画像の内容を文字で伝えます。適切な説明文を記載すると、検索エンジンはその画像が何を表しているのかを理解し、ページ全体の評価に組み込みます。

画像検索での最適化

alt属性を適切に設定すると、通常の検索結果だけでなく画像検索にもプラスに働きます。画像検索エンジンはalt属性の内容をもとに、画像の関連性を判断するためです。これにより画像検索からの流入が増え、サイト全体の訪問者数の増加が期待できます。写真やイラストが重要な業種では、特に効果的です。

画像リンクではアンカーテキストの代わりになる

画像がリンクとして使われている場合、その画像のalt属性は、検索エンジンにアンカーテキスト（リンクの説明文）と同じように扱われます。アンカーテキストはリンク先の内容を伝える重要な要素です。画像リンクに適切なalt属性を設定すると、リンクの評価が高まり、サイト内のリンク構造の価値も高まります。

なお近年は、Googleレンズや画像認識AIの普及で、画像が検索エンジンやAIに「読まれる」場面が増えています。alt属性は、こうしたAI時代にも画像の内容を伝える基本的な手がかりとして役立ちます（くわしくは後半の「AI検索時代のalt属性」で解説します）。

「alt属性」の確認方法

alt属性が適切に設定されているかを確認することは、SEOの最適化で大切です。確認には、次のようなツールが役立ちます。

Googleサーチコンソールを利用する方法

Googleサーチコンソールでは、サイト内のページを分析できます。Googleのクローラー（サイトを巡回するプログラム）がどのようにページを認識しているかを把握しながら、alt属性の設定状況を確認できます。カバレッジレポートやエラーレポートを通じて、設定漏れやミスを見つけて改善できます。

Alt＆Meta viewerを利用する方法

Chromeの拡張機能「Alt＆Meta viewer」も手軽で便利です。インストールすると、ページ上の画像のalt属性を一目で確認できます。設定漏れや不適切な記述をすぐに見つけられるため、視覚的にチェックしたいときに役立ちます。

ChromeウェブストアからAlt＆Meta viewerを追加して使ってみましょう。これらのツールでalt属性を定期的にチェックし、必要に応じて修正することをおすすめします。

alt属性の最適な書き方と注意点

ここからは、alt属性を効果的に設定するためのポイントを紹介します。適切なalt属性は、SEOだけでなく、ユーザーの使いやすさの向上にもつながります。

なお設定そのものは難しくありません。HTMLでは画像のimgタグに `alt=”説明文”` と書きます。多くのホームページ作成ツールでは、画像の編集画面にある「代替テキスト」の入力欄に説明文を入れるだけで設定できます。

画像の内容がわかるように書く

alt属性の基本的な役割は、画像の内容を説明することです。シンプルかつ具体的に、画像が何を示しているのかを端的に書きましょう。たとえば製品画像であれば「赤いシャツを着た男性」など、画像の内容が明確に伝わる表現にします。抽象的な表現や曖昧な説明は避け、誰が見ても画像の内容が理解できるようにすることが大切です。

単語の羅列は禁止

alt属性に単語を並べるだけの書き方は避けましょう。検索エンジンは単語の羅列をスパムと見なすことがあり、評価を下げるおそれがあります。たとえば「シャツ、赤い、男性、買う」のような羅列は不自然です。「赤いシャツを着た男性が歩いている」のように、意味のある文章で書きましょう。

長すぎる記述も避ける

alt属性が長すぎると、キーワードの詰め込みと見なされるおそれがあります。画像の内容を過不足なく、端的に説明しましょう。目安は125字以内、理想は50〜80字程度です。これは、音声読み上げソフトが一度に読み上げる長さの目安でもあります。

意味を持たない装飾画像のalt属性は空欄に

デザインを整えるためのアイコンや背景画像など、内容として意味を持たない装飾画像には、無理にalt属性を設定する必要はありません。alt属性を空欄（`alt=””`）にすることで、検索エンジンに「この画像はコンテンツとして重要ではない」という意図を伝えられます。

画像の種類別の良い例・NG例

画像の種類によって、適切なalt属性の書き方は変わります。代表的な３つのパターンで、良い例とNG例を見てみましょう。

画像の種類別のalt属性の良い例とNG例を対比した図。写真・リンク画像・装飾画像の3パターン

写真・商品画像：内容を具体的に説明します。良い例「黒い革製のビジネスバッグを持つ男性」／NG例「バッグ」「IMG_1234」

リンク・ボタン画像：見た目ではなく、リンク先や動作を説明します。良い例「資料請求ページへ移動」／NG例「ボタン」「ここをクリック」

装飾画像（飾り線・背景など）：内容に意味がないため、alt属性は空欄にします。良い例「`alt=””`（空欄）」／NG例「飾り」「画像」と無理に入れる

このように画像の役割に応じて書き分けると、検索エンジンにもユーザーにも親切なページになります。

「title要素」や「h要素」「a要素」への「alt属性」の適用

alt属性そのものは、画像（img要素）に付ける属性です。title要素やh要素には付きません。ただし「中身を簡潔に、的確に伝える」というalt属性の考え方は、これらの要素を書くときにも役立ちます。a要素（リンク）については、画像をリンクに使ったときのalt属性が関わってきます。それぞれ見ていきましょう。

title要素への適用

title要素は、ホームページ全体のタイトルを定義する要素で、SEOで重要な役割を果たします。タイトルは検索結果にも表示され、ページの内容を検索エンジンに伝えます。alt属性と同じように、シンプルで具体的な表現を心がけることで、ページの内容を正確に伝えられます。

h要素への適用

h要素（h1、h2、h3など）は、ページの見出しを示す要素で、コンテンツの階層構造をつくります。見出しは、検索エンジンがページの構造や主題を理解する手がかりになります。alt属性と同じく、内容を簡潔で的確に表すことで、各セクションの役割が明確になります。

a要素への適用

a要素は、リンクを設定するための要素です。画像をリンクに使うときは、その画像のalt属性を適切に設定することで、リンク先の内容を検索エンジンに伝えられます。これによりリンクの評価が高まり、サイト内のリンク構造のSEO効果も高まります。テキストリンクの場合も、リンクテキストがリンク先の内容を適切に示しているかを確認しましょう。