alt属性とは？代替テキストの書き方と、SEOとの関係

alt属性とは

alt属性は、HTMLで画像を表す <img> タグに付ける、画像の代わりの文です。代替テキストとも、altタグとも呼ばれます。WordPressのメディアライブラリや画像ブロックにある「代替テキスト」の欄に文を入れると、ページのHTMLでは、次のように画像に付きます。

<img src="sekourei-01.jpg" alt="軒を深く出した平屋の外観">

この文は、画像を見られない人に、画像の代わりに伝わる文です。検索エンジンが画像を理解する手がかりにもなります。Googleは、「Google 画像検索 SEO ベスト プラクティス」という資料で、次のように書いています。

画像に関してより多くのメタデータを提供するうえで最も重要な属性は、代替テキスト（画像について説明するテキスト）です。代替テキストは、スクリーン リーダーを使用するユーザーや、低帯域幅のネットワークを使用しているユーザーなど、ウェブページの画像を見ることができないユーザー向けの補助機能としても役立ちます。

硬い文ですが、言っていることは2つです。1つは、画像についてGoogleに伝えられる情報（メタデータ）の中で、いちばん大事なのが代替テキストだということです。ここでの「属性」は、画像に付ける設定のことです。もう1つは、代替テキストが、画像を見られない人の助けにもなる、ということです。

スクリーンリーダーは、画面の文字を音声で読み上げるソフトです。目の見えない人や見えにくい人が、ホームページを読むときに使います。読み上げが画像のところに来ると、altの文が読まれます。通信が遅いなどで画像が表示されないときも、画像の代わりにaltの文が出ることがあります。

Googleにとっては、altの文は、画像が何を表しているかを知るための材料の1つです。同じ資料によると、Googleは、altの文だけでなく、画像そのものや、画像があるページの文も合わせて、画像が何を表しているかを理解しています。

そのため、欄に書くのは、画像を見られない人とGoogleに向けて、その画像がこのページで伝えていることです。何を、どこまで書くかは、第2章と第3章で見ていきます。

SEOとの関係：キーワードを並べる欄ではない

先に結論を書くと、altはキーワードを並べる欄ではなく、その画像がページで伝えていることを書く欄です。自分の画像に何を書くかは、第3章で決めます。この章では、そう言える根拠を、Googleの資料で確かめます。

alt属性がSEOに関係するのは、Googleが画像を理解する材料の1つになるからです。では、検索で上に出るために、キーワードを入れればよいのでしょうか。Googleの資料は、書き方について次のように書いています。

代替テキストを設定するときは、適切にキーワードを使用して、ページのコンテンツの内容に沿った、情報に富む、役に立つものになるようにします。alt 属性にキーワードを羅列すること（キーワードの乱用とも呼ばれます）は避けてください。ユーザー エクスペリエンスが低下するだけでなく、サイトがスパムとみなされる要因となる場合もあります。

キーワードを使ってはいけない、とは書いていません。避けるように書いているのは、キーワードを並べることです。そのうえで、同じ資料は、子犬の写真を例に、悪い例を2つ、良い例と最も良い例を1つずつ並べています。

1つ目は、altが付いていない画像です。2つ目は、子犬・犬・パピーなど、似たキーワードをいくつも並べたものです（資料では、さらに長く続いています）。画像を見られない人がこれを聞いても、どんな写真なのかは分かりません。

3つ目の良い例は〈子犬〉、4つ目の最も良い例は〈「取ってこい」遊びをするダルメシアンの子犬〉です。良い例は、写っているものの名前です。最も良い例は、犬の種類と、その子犬が何をしているところかまで書いています。足されたのはキーワードではありません。「子犬」というキーワードは残したまま、画像が伝えている場面が足されています。

何文字くらい書けばよいかについて、この記事で引いているGoogleの資料に目安はありません。この記事でも、字数の目安は決めません。その画像がこのページで伝えていることを、短く書きます。施工例の写真なら、書くのは「施工例の写真」ではなく、何を、どう仕上げたのかが分かる一文です。

長すぎないかの目安になるのは、W3C（第3章で説明します）の、意味のある画像についての解説（英語）です。そこでは、意味のある画像は、短い語句か1文で表せる情報を伝えるもの、とされています。1文に収まらないほど伝えたいことが多い画像は、グラフや図と同じく、中身をページの本文に書きます。

SEOとの関係は、Googleの「検索エンジン最適化（SEO）スターター ガイド」が、次のように説明しています。

代替テキストとは、画像とコンテンツの関係を簡潔に説明するものです。何に関する画像なのかや、画像とページとの関係の背景を検索エンジンが理解するのに役立つため、適切な代替テキストを書くことは極めて重要です。

どちらの資料も、altを入れれば順位が上がる、とは書いていません。書いているのは、検索エンジンが画像と、その画像があるページとの関係を理解するのに役立つ、ということです。

altは、ページに画像を入れるときに決まる施策の1つです。SEO対策の施策を、サイトを作るとき、記事を書くときなど、決まる時点ごとに並べたものは、SEO対策の記事にまとめています。

関連記事SEO対策の全体像と、施策が決まる順番

書く画像と、空にする画像の分け方

では、自分のサイトでは、どの画像に、どんな文を書けばよいのでしょうか。Googleの資料は、〈W3 ガイドラインに沿って、代替テキストのアクセシビリティについても検討します〉と書き、W3C（ウェブの標準を決めている団体）の、画像についての解説にリンクしています。アクセシビリティは、障害のある人や高齢の人も含めて、誰でもホームページを使えるようにすることです。

W3Cのこの解説の中に、altに何を書くかを、問いの順にたどって決めるページがあります。「altディシジョンツリー」です（日本語版は、ボランティアによる翻訳です）。WordPressの画像ブロックで、代替テキストの欄の下にある〈画像の目的を説明してください。〉のリンクも、このページにつながっています。

問いは、次の4つです。

問い1：画像の中に文字が入っているか。 入っているときは、その文字がほかにもあるかで分かれます。

かつ、そのテキストが実際のテキストとして近くに記載されている場合 空のalt属性を利用します。

かつ、画像内のテキストがそれ以外の場所に存在しない場合 alt属性にはその画像内のテキストを含めます。

キャンペーンの告知を画像にしたバナーで、同じ内容がページのどこにも文字で書かれていなければ、バナーの中の文字をaltに書きます。すぐ下に同じ文が書かれていれば、空にします。

バナーがリンクにもなっていて、押すと申し込みのページなどに移るときは、問い1の〈そのテキストがアイコンなど特定の機能を持つ場合〉に当たり、押した先が分かるように書きます。バナーの中の文字で行き先が分かるなら（例：「見学会の予約はこちら」）、その文字を書けば足ります。分からないなら、行き先を足します。W3Cの機能を持つ画像についての解説（英語）も、W3Cのロゴがトップページへのリンクになっている例で、altを「W3C home」（W3Cのトップページ）としています。

問い2：リンクやボタンになっていて、画像が無いと、押した先や起きることが分からないか。 そうなら、altに、リンク先や動作を書きます。トップページに戻るロゴなら、社名や「トップページ」です。画像の見た目（青い丸のマークなど）を書いても、押した先は伝わりません。反対に、同じリンクの中に、行き先が分かる文字（記事の題など）が書かれていれば、ここには当たりません。画面で見分けるなら、画像を押したときと、すぐ隣の題や名前の文字を押したときに、同じページに移るかを試します。同じページに移り、その文字で行き先が分かれば、ここには当たりません。当たらないときは、次の問い3へ進みます。

問い3：ページに意味を加えているか。 写真なら、意味が伝わるように短く説明します。グラフや、情報の多い図なら、altには何の図かを短く書き、中身はページの本文にも書きます。画像を見られない人も、本文で中身を読めるようにするためです。写真でも、そのページで伝えたいことが近くの文で十分に書かれていて、写真が新しい情報を足していないときは、空にします。

問い4：飾りのための画像か。 区切りの線、背景の模様、見た目を整えるためのアイコンは、空にします。

ここで言う「空」は、alt属性を消すことではありません。alt="" と、属性を残して中を空にすることです。W3Cの装飾の画像についての解説（英語のみ）は、alt属性そのものを付けないと、画像の代わりにファイル名を読み上げる読み上げソフトがある、と書いています。

WordPressでは、代替テキストの欄を空のまま保存すれば、この形になります。画像ブロックの画像も、アイキャッチ画像も、欄が空のときは alt="" を付けて出す作りになっているからです（WordPress 7.1.2 のプログラムで確かめました）。WordPressの欄を使っている限り、「空」にするために特別な操作は要りません。

もう1つ、同じ解説は、飾りの画像か、意味のある画像かは、その画像をページに置いた理由から、ページを作る人にしか決められない、とも書いています。同じ写真でも、ページによって答えが変わります。

いちばん迷うのは、近くに説明の文がある写真です。そのときは、その写真が、近くの文に書かれていないことを伝えているかで決めます。W3Cの意味のある画像についての解説（英語）には、首に鈴を付けた盲導犬の写真の例があります。隣の文が鈴の目的を説明していても、犬が鈴をどう付けているかは書かれていないので、写真にはaltで「首輪に鈴を付けた犬」と書きます。隣の文に付け方まで書かれていれば、写真は飾りと見てよい、としています。

人柄や雰囲気を見てほしくて置いた写真も、同じ考え方です。同じ解説には、家族向けの会社だと伝えるために置いた家族の写真に、伝えたい印象をaltとして書く例があります。見た目を整えるためだけに置いたのなら、飾りとしてよい、とも書いています。スタッフの写真なら、隣の名前と役職で「誰か」が分かるだけで十分なら空、名前の文には無い人柄を見てほしいなら、見てほしいところを短く書きます。一文は、写真を見た人に受け取ってほしいことを、そのまま書けば足ります（例：お客さまの話にうなずきながら図面を見せる設計担当／木の棚に商品が並ぶ、明るい店内）。雰囲気を見てほしい写真が何枚もあるときは、1枚ずつ、その写真でいちばん伝わってほしいことを1つ選んで書きます。

中小企業のサイトによくある画像に当てると、次のようになります。

※W3Cの「altディシジョンツリー」の問いと、意味のある画像についての解説に、筆者が当てて整理した例。

ここまでで、自分のサイトの画像に何を書くかは決められます。そのうえで、画像だけでなく、会社の情報やサービスの内容など、ページ全体の中身をGoogleに伝える方法も知りたくなったら、構造化データがあります。構造化データにどんな情報を書くのか、いま検索結果の見え方にどう関わるのかは、構造化データの記事で解説しています。

関連記事構造化データとは？いま検索結果で何が変わり、何を入れればよいか

このサイトの画像を数えて、判断した

自分のサイトでも、代替テキストの欄が空の画像は多いかもしれません。このサイトもそうでした。2026年10月3日に確かめると、メディアライブラリの画像82枚のうち、欄に文が入っていた画像は1枚もありませんでした。画像を入れるときに、欄を埋めていなかったからです。

ここで分かったのは、欄が空になっていることと、空でよいと判断したことは別だ、ということです。空の画像の中には、空でよい画像も、文を書くべき画像も混ざっているかもしれません。そこで今回、空の画像を第3章の問いに当てて、分け直しました。

このサイトでは、1枚ずつではなく、置き場所ごとに当てました。このサイトの記事のページでは、同じ置き場所の画像は、近くにある文字の種類も同じだったからです（サムネイルなら見出しの題、カードならカードの中の題）。置き場所は「記事のサムネイル」「著者の写真」「関連記事などのカード」の3つです。記事のページ1枚では、画像25枚のうち22枚がこの3つの置き場所にあり、残りの3枚は、テーマが社名を書いているロゴです。

• 記事のサムネイル：画像の中の記事の題が、すぐ上の見出しにも文字で書かれている。問い1で空
• 著者の写真：押すと著者の紹介に移るが、すぐ隣に名前と肩書きが文字で書かれていて、行き先は分かる。問い2には当たらず、誰の写真かも名前で分かるので空
• 関連記事などのカード：押すと記事に移るが、同じカードの中に記事の題が文字で書かれている。問い2には当たらず、空

結果として、今回は3つとも空のままでよいと判断しました。ただ、今回は、たまたま近くに同じ文字がある置き場所ばかりでした。欄を埋めないまま画像を入れ続けると、文を書くべき画像も、同じように空になります。

自分のサイトで当てるときに、まとめて空にしてよいのは、このサイトのカードのように、写真が伝えていることが、近くの文字ですべて分かる置き場所だけです。施工例や商品の写真は、近くに題や商品名があっても、写真で見せている仕上がりや色までは書かれていないことがほとんどです。その場合は、1枚ずつ第3章の問いに当てます。

なお、この記事の図1〜図5は、メディアライブラリから入れた画像ではないので、上の数には入っていません。自社の説明図がメディアライブラリに入っていれば、それは画像です。ほかの写真と同じく、代替テキストの欄で第3章の問いに当てます。

WordPressで入れる場所と、確かめ方

WordPressで代替テキストを入れる欄は、2か所あります。1つは、メディアライブラリで画像を選んだときに出る「代替テキスト」の欄です。欄の下には、〈画像の目的を説明する方法について、詳しくはこちらをご覧ください。装飾のみが目的の画像であれば、空欄にしてください。〉と書かれています。

もう1つは、記事の本文に入れた画像ブロックの設定にある「代替テキスト」の欄です。こちらには〈画像の目的を説明してください。〉と〈装飾であれば空白のままにしてください。〉という文言と、〈装飾用としてマーク〉という切り替えがあります。

（画面の文言は、WordPress 7.1.2 の日本語版のものです。版によって、出る文言や並びが違います。）

2つの欄は、入れた文が使われる範囲が違います。WordPressの画像ブロックの資料（英語）は、ブロックの設定で入れた文は、そのページの、その画像だけに使われる、と説明しています。メディアライブラリで入れた文は、ほかの場所に画像を入れるときに、あらかじめ入っている文（初期値）になります。画像ブロックのaltは、記事の本文の中に保存されます。そのため、すでに本文に入れた画像は、メディアライブラリの欄を直しても変わりません。直すときは、記事を開いて、画像ブロックの欄を直します。

一方、サムネイル（アイキャッチ画像）や、一覧のカードの画像のように、テーマが出している画像は、メディアライブラリの欄の値が使われることがあります。このサイトのテーマでも、メディアライブラリの代替テキストが使われていました（第4章）。ただ、テーマが表示する画像のaltに何が入るかは、テーマによって違います。

テーマがaltに何を入れているか分からないときは、作った会社に、次のように聞くと早く確かめられます。「サムネイルや一覧の画像のaltには、何が出ていますか。メディアライブラリの代替テキストですか、記事の題ですか、空ですか」。

入れたかどうかは、まず、自分が操作できる管理画面の側で確かめます。本文の画像は、記事の編集画面でその画像をクリックし、画像ブロックの設定の「代替テキスト」の欄を見ます。サムネイルなど、テーマが出している画像は、メディアライブラリでその画像を開き、「代替テキスト」の欄を見ます（このサイトのように、テーマがこの欄を使っている場合）。

公開したページで確かめたいときは、Google Chromeなら、画像の上で右クリックして「検証」を選びます。画面の横か下にページのHTMLが開き、その画像の行が、色の付いた状態で選ばれます。その行の <img から > までの間に、alt="…" があれば、それがその画像のaltです。alt="" なら空です。alt= が1つも無ければ、altが付いていない画像です。

直す場所は、画像の置き場所で決まります。

記事に画像を入れるのは、記事を書いて公開するまでの手順の1つです。キーワードを決めてから、公開して数字を見て直すまでの7つの手順は、SEO記事の書き方の記事で解説しています。

関連記事SEO記事の書き方と、書く前に決まること

ARROWSのSEOコンサルティング

第2章で引いたとおり、Googleは、キーワードは並べず、ページの内容に沿った、役に立つ文にするよう書いています。altに何を書くかは画像ごとに決まりますが、その画像がページで何を伝えるかは、ページがどんな問いに答えるかが決まって初めて決まります。ARROWSのSEOコンサルティングは、この問いを、書き始める前に決めるところから入ります。キーワードごとに検索結果を見て、どのような内容が求められているかを読み取ります。

調べたキーワードは、狙うかどうかを、その理由と一緒に判定表にしてお渡しします。あとで方針を見直すときの判断の材料にもなります。

まとめ

alt属性（代替テキスト）は、画像を見られない人に、画像の代わりに読まれる文です。Googleも、画像を理解する材料の1つとして使います。キーワードを並べる欄ではなく、その画像がページで伝えていることを書く欄です。

すべての画像に書く必要はありません。すぐ近くに同じ文字がある画像や、飾りの画像は、alt="" と空にします。最初の一手は、画像の多いページ（施工例・商品・トップページなど）を開き、画像ごとに第3章の4つの問いに当てることです。書くと決めた画像は、本文の画像なら記事を開いて画像ブロックの欄に入れます。サムネイルや一覧の画像なら、テーマがそこに何を出しているかを確かめてから、メディアライブラリの欄に入れます。入れたら、画像の上で右クリックして「検証」を選び、alt="…" に入ったかを見ます。