alt属性とは｜画像の説明文の書き方と例文、WordPressなどでの入れ方

alt属性（オルト属性）とは、ホームページやブログに載せた画像に付けておく「画像の説明文」のことです。代替テキストとも呼ばれます。画像が表示されないときや、目の見えにくい人が音声で読み上げてページを聞くときに、画像の代わりにこの説明文が伝わります。Googleも、この説明文を手がかりに画像の中身を理解します。この記事では、alt属性が何に効くのかを正確に整理したうえで、何をどのくらいの長さで書けばよいかを4つの問いで決める方法、施工写真・料理・店内・地図・料金表・バナーといった写真の種類ごとの良い例と悪い例、空にしてよい画像の見分け方、WordPress・Wix・Shopifyで入れる場所まで、GoogleとW3C（Webの標準を決めている団体）の公式情報をもとにまとめました。パソコンが得意でない方でも、自分のサイトの画像に今日から説明文を付けられる内容です。

alt属性とは、画像の代わりに伝わる短い説明文

alt属性は、画像ごとに「この画像には何が写っていて、何を伝えたいか」を短い文で書いておく欄です。ページを見ている人の画面には、ふだんは表示されません。画像が見られない場面でだけ、画像の代わりに使われます。

GoogleのSEOスターターガイド（外部サイト・新しいタブで開きます）は、代替テキストを「画像とコンテンツの関係を簡潔に説明するもの」と説明しています。写真の見た目を細かく描写する文ではなく、そのページの中でその画像が何の役に立っているかを伝える文だと考えると、書く内容を決めやすくなります。

ホームページの中身は、HTML（ページの見た目や構成を指定する書き方）で書かれています。画像を表示する部分に alt という項目があり、そこに説明文が入ります。実際には次のような形です。

<img src="gaiheki-before-after.jpg" alt="外壁塗装の施工前と施工後。色あせたベージュの壁が、つやのある薄いグレーに塗り替わった様子">

WordPressやWixなどを使っている場合、このHTMLを自分で書く必要はありません。画像を選んだときに出てくる「代替テキスト」や「画像には何が含まれていますか？」といった入力欄に文章を入れると、裏側で自動的にこの形になります。

なお「altタグ」と呼ばれることもありますが、正しくは画像を表示する部分（img要素）の中にある「属性」なので、alt属性と呼ぶのが正確です。どちらの呼び方でも指しているものは同じです。

alt属性が使われる3つの場面

alt属性が実際に働くのは、次の3つの場面です。

MDN（ブラウザを作る団体などが共同でまとめているWeb技術の解説書）のimg要素の解説（外部サイト・新しいタブで開きます）は、alt属性がない画像について、一部の読み上げソフトでは代わりにファイル名が読み上げられることがあると注意しています。「IMG_0023.jpg」のような名前が読み上げられても、聞いている人には何の画像か分かりません。

alt属性はSEOに効く？順位と画像検索への影響

alt属性を入れたからといって、ページの検索順位がそれだけで上がるわけではありません。一方で、Googleが画像の中身を理解する手がかりになり、画像検索に表示されるかどうかや、画像をリンクにしたときの伝わり方に関わります。効き方を分けて整理すると次のとおりです。

いずれもGoogleのGoogle画像検索のSEOに関するベストプラクティス（外部サイト・新しいタブで開きます）に書かれている内容です。ポイントは、Googleがalt属性「だけ」で画像を判断しているわけではない点です。画像の周りの文章やキャプション（画像の下に付ける短い説明）、ページのタイトルも手がかりにしています。同じページで、alt属性と本文の両方が同じ中身を指していると、画像とページの関係がはっきり伝わります。

もう一つ大事なのは、alt属性はもともと検索のためではなく、画像を見られない人のために作られた仕組みだということです。Googleも同じページで、代替テキストを画面の読み上げを使う人や通信環境が悪い人のための補助機能として位置づけています。検索のために書くというより、見えない人に伝わる文を書けば、結果として検索エンジンにも伝わる、と考えるのが正しい順番です。

画像検索から来てもらいたい業種ほど効果が大きい

検索した人が画像を見て選ぶ業種では、alt属性の手入れが集客に直結しやすくなります。たとえば施工事例を見比べたいリフォームや外構、メニューや料理の見た目で選ばれる飲食店、作品の雰囲気で選ばれる美容室や写真館などです。GoogleのSEOスターターガイド（外部サイト・新しいタブで開きます）も、多くの人が視覚的に検索するため、画像がサイトを見つけてもらうきっかけになると説明しています。

逆に、写真が少なく文章で選ばれる業種では、alt属性を直すより、記事の中身やタイトルを直すほうが効果は大きいことが多いです。タイトルの直し方はSEOタイトルの付け方、検索結果に出る説明文の直し方はメタディスクリプションとはで解説しています。

alt属性の書き方：4つの問いで、書く内容が決まる

alt属性に何を書くかは、画像の「見た目」ではなく「そのページでの役割」で決まります。W3Cは、迷ったときに上から順に答えていくalt属性の決め方の分かれ道（alt Decision Tree）（外部サイト・新しいタブで開きます）を公開しています。これを、ふだんのホームページ運営で使いやすい言葉に置き換えると、次の4つの問いになります。

1. 画像の中に文字が入っている？：文字だけが情報なら、その文字をそのまま書きます。同じ文字が近くの本文にもあるなら、空にします。
2. リンクやボタンになっている？：画像を押すとどこへ行くか、何が起きるかを書きます。たとえば「お問い合わせページへ」です。
3. ページの内容を補う写真や図？：写真や簡単な図なら、伝えたい中身を短く書きます。グラフや表の画像なら、要点は本文に書き、altは短くします。
4. 飾りだけの画像？：空にします。読み上げで飛ばされるようになります。

最初に当てはまった問いで、書く内容が決まります。たとえば「お問い合わせ」という文字が入ったボタン画像は、1つめの問いで「文字だけが情報」に当たるので、そのまま「お問い合わせ」と書きます。2つめの問いにも当てはまりますが、行き先がその文字で伝わるので結果は同じです。

書くときの4つのコツ

何を書くかが決まったら、次の4点を意識して文にします。

• 大事なことを先に書く：W3Cの代替テキストを書くときのヒント（外部サイト・新しいタブで開きます）は、最も重要な情報を最初に置くよう勧めています。「施工後の外壁」のように、言いたいことを文の頭に置きます。
• 「〜の画像」「写真」と書かない：同じヒントのページは、「画像」「アイコン」「写真」といった言葉は入れなくてよいとしています。読み上げソフトは、そこが画像であることを先に伝えるからです。
• できるだけ短く、でも具体的に：Googleの例でも、「子犬」より「『取ってこい』遊びをするダルメシアンの子犬」のほうが「最も良い例」とされています。短さより、何が分かるかを優先してください。
• キーワードを並べない：「外壁塗装 横浜 安い 外壁塗装業者」のように言葉を並べると、読み上げで聞いても意味が分からず、Googleもスパムとみなす要因になり得るとしています。地域名や業種名は、自然な文に1回入れば十分です。

迷ったときは、W3Cが勧める方法を試してください。電話でそのページを読み上げて、相手に内容を伝えている場面を想像します。その画像について、相手に何と言えば話が通じるか。その一言が、そのままalt属性に書く文です。何も言う必要がない画像なら、空にしてよい画像です。

文字数の目安：上限はないが、1〜2文に収める

Googleは、alt属性の文字数に上限や最適な文字数を定めていません。W3Cのヒントも、決まった文字数ではなく「できるだけ簡潔に」としています。ネットショップ作成サービスのShopifyは、商品画像に代替テキストを追加する（外部サイト・新しいタブで開きます）の中で、上限を512文字、推奨を125文字以下としています。

実際に書くときは、日本語で1〜2文、長くても50字前後に収まることがほとんどです。それより長くなるときは、画像の説明を本文に書いて、alt属性は短くまとめるほうが、読み上げで聞く人にも伝わりやすくなります。

写真の種類別：alt属性の良い例と悪い例

ここからは、中小企業や個人のホームページによく載る写真について、良い例と悪い例を並べます。同じ写真でも、ページでの役割によって書く内容が変わる点に注意してください。

同じ写真でも、ページの役割で書き方が変わる

たとえば同じ外観写真でも、「アクセス」ページでは道順の手がかりとして「入口の外観。緑色の看板と木の引き戸が目印」と書きます。一方、「会社概要」ページで会社の雰囲気を伝えるために載せているなら「木造2階建ての事務所の外観」で足ります。GoogleのSEOスターターガイド（外部サイト・新しいタブで開きます）が、代替テキストを画像と「コンテンツの関係」を説明するものとしているのは、この違いがあるからです。

WordPressのように、画像の倉庫（メディアライブラリ）にalt属性を1つ登録しておくと、その画像をどのページに入れても同じ説明文が入る仕組みのサービスがあります。何度も使う写真ほど、入れたページごとに説明文が合っているかを確かめてください。

文字が入った画像は、文字をそのまま書く

チラシやキャンペーン画像のように、画像の中に文字が入っているものは、その文字をalt属性に書きます。W3Cの分かれ道でも、ほかの場所に同じ文字がない場合は画像の文字を代替テキストに入れるとしています。

ただし、営業時間・料金・電話番号のように大事な情報は、画像にせず本文に文字で書いておくのが一番です。画像の中の文字は、文字としてコピーしたり翻訳したりできず、スマートフォンで拡大しないと読めないこともあります。

alt属性を空にしてよい画像と、書かないとの違い

alt属性は、すべての画像に説明文を入れればよいわけではありません。伝える情報のない飾りの画像は、説明文を空にしておくのが正しい扱いです。

空にしてよいのは、次のような画像です。

• 見出しの横の飾りのアイコン、区切り線、背景の模様
• 「お電話はこちら」という文字のすぐ横に置いた電話のアイコン（同じことが文字で書いてある）
• 雰囲気づくりだけのために置いた、内容と関係のない写真

ここで大事なのは、「空にする」と「何も書かない」は別物だということです。HTMLで見ると、空にした画像は alt="" のように、alt属性はあるが中身が空の状態になっています。この状態だと、読み上げソフトは画像を飛ばします。一方、alt属性そのものがない状態だと、先ほどのMDNの説明どおり、ファイル名が読み上げられることがあります。W3Cのヒントは、空にするときに引用符の間に空白を入れないよう注意しています。空白があると、画像があることを読み上げてしまうソフトがあるためです。

WordPressやWixでは、HTMLを触らなくても、飾りの画像として登録する欄があります。入れ方は次の章で説明します。

WordPress・Wix・Shopifyでの入れ方

よく使われるサービスごとに、alt属性を入れる場所をまとめます。画面の名前は時期によって変わることがあるので、見つからないときはサービスのヘルプで「代替テキスト」と検索してください。

WordPress

WordPressの画像ブロックの公式ドキュメント（外部サイト・新しいタブで開きます）によると、記事に入れた画像を選ぶと、画面右側の設定欄に代替テキストの入力欄が出ます。ここで入れた説明文は、その記事の中の画像だけに使われます。

一方、メディアライブラリ（アップロードした画像の一覧）で画像の代替テキストを入れておくと、その画像をあとで別の記事に入れたときの初期値になります。よく使う写真はメディアライブラリで入れておき、記事ごとに役割が違うときだけ記事の中で書き換えると、手間が少なくなります。同じドキュメントには、意味のある情報を持たない画像を「装飾」として印を付け、読み上げで無視させる設定も紹介されています。お使いのバージョンにこの欄がない場合は、代替テキストを空のままにしておきます。

WordPressでは、AIの機能を持つプラグインで画像のaltテキストをまとめて作る方法もあります。どの道具で何ができるかは、WordPressのAI自動生成で比べています。AIが作った説明文を使うときの注意は、このあとの「AIに説明文の下書きを作らせるときの注意」を見てください。

Wix

Wixのヘルプアクセシビリティ：画像とギャラリーを準備する（外部サイト・新しいタブで開きます）によると、エディタで画像をクリックし、「設定」アイコンを選ぶと、「画像には何が含まれていますか？」という欄が出ます。ここに説明を入れてEnterキーを押せば保存されます。

飾りの画像は、画面上部の「設定」から「アクセシビリティ設定」を開き、点検（スキャン）で見つかった画像の編集画面で「この画像は装飾的なもので、代替テキストは必要ありません。」に印を付けます。同じ画面では、AIで代替テキストを作る機能も用意されています。ただしAIが作った文は、写っている物は書けても、そのページでの役割までは分かりません。作られた文をそのまま使わず、この記事の良い例と見比べて手直ししてください。SVG形式とGIF形式の画像は、AIで作る対象外とされています。

Shopify

Shopifyのヘルプ商品画像に代替テキストを追加する（外部サイト・新しいタブで開きます）によると、管理画面で商品を開き、商品の画像をクリックして表示される画面から代替テキストを追加し、保存します。スマートフォンのアプリからも同じように追加できます。前に書いたとおり、上限は512文字、推奨は125文字以下です。商品画像では、商品名だけでなく、色・素材・角度など「その画像で何が分かるか」を書くと、同じ商品の写真が何枚あっても区別できます。

自分でHTMLを書いている場合

HTMLを直接書いているサイトでは、画像を表示する部分に alt="説明文" を足します。画像を中に入れたリンクでは、その画像のalt属性がリンクの文字の代わりになります。リンクの文字の付け方は、内部リンクとはで詳しく説明しています。

今のサイトでalt属性の入れ忘れを見つける方法

すでに公開している画像に、alt属性が入っているかを確かめる方法です。難しい道具は使わず、ふだんのブラウザとサービスの機能で確かめられます。

すべてのページを一度に直す必要はありません。次の順番で進めると、効果の大きい画像から手を付けられます。

1. トップページと、問い合わせや予約につながるページの画像
2. バナーやボタンなど、リンクになっている画像
3. 施工事例・メニュー・商品など、画像検索で見つけてほしい写真
4. ブログ記事の中の写真や図

リンクになっている画像を先に直すのは、説明文が空だと、読み上げで聞いている人がどこへ行くリンクなのか分からなくなるためです。Googleも、画像をリンクにしたときは代替テキストをリンクの文字として使います。

直したあとに、画像検索からの訪問が増えたかを確かめるには、Search Consoleの検索パフォーマンスで、検索の種類を「画像」に切り替えて見る方法があります。Search Consoleの基本的な使い方はサーチコンソールの使い方で解説しています。

alt属性と一緒に見直したい、画像まわりの3つのこと

GoogleのGoogle画像検索のSEOに関するベストプラクティス（外部サイト・新しいタブで開きます）は、alt属性のほかにも、画像を理解してもらうための手がかりを挙げています。alt属性を入れるついでに、次の3つも見直すと効果が出やすくなります。

キャプションとalt属性に、まったく同じ文を入れる必要はありません。キャプションは画面に表示されるので、見ている人にも読んでもらう補足を書きます。alt属性は、画像が見えない人に画像そのものの中身を伝える文です。キャプションで画像の中身が十分に説明できているときは、alt属性は短くまとめて構いません。

お店や事務所の写真をGoogleマップに載せるGoogleビジネスプロフィールの写真は、ホームページのalt属性とは別の仕組みです。地域で探す人に向けた写真のそろえ方は、ローカルSEO対策のやり方で説明しています。

AIに説明文の下書きを作らせるときの注意

最近は、WixのようにAIで代替テキストを作る機能を持つサービスが増えています。画像が多いサイトでは便利ですが、そのまま使う前に次の点を確かめてください。

• 写っている物の名前が正しいか：料理名、商品名、工法の名前などを、AIが一般的な言葉に言い換えていないか確かめます。
• ページでの役割が書けているか：AIは画像だけを見て書くことが多く、「どのページで、何のために載せているか」は分かりません。リンクになっている画像なら、行き先を書き足します。
• 飾りの画像にまで説明が入っていないか：飾りの画像に説明が入ると、読み上げで聞く人には余計な情報になります。
• 事実と違うことが書かれていないか：写真に写っていない人数や場所を書き足していないか確かめます。

ブログ記事そのものをAIで作るときも、同じ考え方が当てはまります。画像の説明も本文と同じく、公開前に人が事実を確かめる工程を残しておくことが大切です。AIで記事を作るときの確認のしかたは、AI文章チェックのやり方でまとめています。

記事づくりの中で、画像の説明文も確かめる方法

記事を増やしていくと、本文だけでなく画像の説明文まで毎回確かめるのは手間になります。続けやすくするには、記事を書く流れの中に、画像の確認を組み込んでおくのが近道です。

つむぎは、3つめの「仕組みに任せる」ための道具です。つむぎで作った記事は、記事の詳細画面の「画像」タブで、記事に使う画像と、それぞれの代替テキスト、本文で使っている箇所の数を一覧で確認できます。代替テキストが入っていない画像には「代替テキスト未設定（要確認）」と表示されるので、公開前の見落としを防げます。記事は「要確認」の状態で作られ、公開するかどうかはあなたが決めます。つむぎが勝手に公開することはありません。記事の確認のしかたはヘルプ「記事を確認・編集する」で説明しています。

新規記事の作成は1本あたり約4クレジットで、登録時に付与される初回8クレジットで約2本分を無料で試せます。クレジットカードの登録は不要です。一方、画像が数枚しかないページを直すだけなら、この記事の表を見ながら自分で入れるほうが早く終わります。

よくある質問

画像を入れるたびに使えるチェックリスト

画像を1枚入れるたびに、上から順に確認してください。

• 4つの問い（文字が入っているか、リンクか、内容を補う写真や図か、飾りか）のどれに当たるか決めた。
• 大事なことを文の頭に書いた。
• 「〜の画像」「写真」といった言葉を入れていない。
• 何が写っていて、そのページで何を伝えたいかが分かる。
• リンクやボタンの画像には、行き先や働きを書いた。
• 画像の中の文字は、そのまま書いた（同じ文字が近くの本文にあるなら空にした）。
• 料金・営業時間・電話番号などの大事な情報は、本文にも文字で書いた。
• キーワードを並べたり、何度も入れたりしていない。
• 飾りの画像は、空にするか「装飾」の設定にした。
• AIが作った説明文は、名前や事実が合っているか確かめた。
• 画像のファイル名を、中身が分かる名前にした。

あわせて読む

• SEOライティングの書き方：画像の説明文だけでなく、タイトル・導入文・見出し・本文の書き方をまとめて確認したい人向け。
• 内部リンクとは：画像をリンクにするときを含め、サイト内のページのつなぎ方を見直したい人向け。
• メタディスクリプションとは：検索結果に出る説明文の書き方を、例文で確認したい人向け。
• ローカルSEO対策のやり方：店舗や事務所の写真を、地域で探す人の来店につなげたい人向け。
• サーチコンソールの使い方：画像検索からの訪問を数字で確かめたい人向け。

出典

• Google画像検索のSEOに関するベストプラクティス（外部サイト・新しいタブで開きます）：代替テキストが補助機能として役立つこと、代替テキストに加えて画像の解析技術やページの文章で画像のテーマを理解すること、画像をリンクにした場合に代替テキストがアンカーテキストとして使われること、キーワードの乱用を避けること、子犬の例、ファイル名と画像の置き場所、キャプションの裏づけ。
• SEOスターターガイド（外部サイト・新しいタブで開きます）：代替テキストを画像とコンテンツの関係を簡潔に説明するものとする定義、画像がサイトを見つけてもらうきっかけになることの裏づけ。
• W3C「An alt Decision Tree」（外部サイト・新しいタブで開きます）：文字が入った画像、リンクやボタンの画像、情報を伝える画像、複雑な画像、飾りの画像ごとの代替テキストの決め方の裏づけ。
• W3C「Tips and Tricks」（外部サイト・新しいタブで開きます）：電話で読み上げる想定で考える方法、「画像」「アイコン」「写真」といった言葉を入れないこと、できるだけ簡潔にすること、重要な情報を先に置くこと、空にするとき引用符の間に空白を入れないことの裏づけ。
• MDN「img: 画像埋め込み要素」（外部サイト・新しいタブで開きます）：alt属性がないと一部の読み上げソフトでファイル名が読み上げられること、空のalt属性が重要でない画像を示すこと、画像が表示できないときに代替テキストに置き換えられることの裏づけ。
• WordPress「Image block」（外部サイト・新しいタブで開きます）：画像ブロックの設定欄での代替テキストの入力、ブロックで入れた代替テキストはその投稿だけに適用されメディアライブラリの代替テキストが初期値になること、装飾としての印、title属性が多くの端末やブラウザで表示されないことの裏づけ。
• Wixヘルプ「アクセシビリティ：画像とギャラリーを準備する」（外部サイト・新しいタブで開きます）：画像の設定から代替テキストを入れる手順、装飾としての印、AIによる代替テキストの作成とSVG・GIFが対象外であることの裏づけ。
• Shopifyヘルプ「商品画像に代替テキストを追加する」（外部サイト・新しいタブで開きます）：商品画像への代替テキストの追加手順、上限512文字・推奨125文字以下の裏づけ。
• Search Consoleヘルプ「検索パフォーマンス レポート」（外部サイト・新しいタブで開きます）：検索タイプを「画像」に切り替えて画像検索での表示やクリックを確認できることの裏づけ。