alt属性とSEO｜画像SEOの書き方と軽量化の手順

alt属性のSEO対策は、画像に写っているものを一文で言い切ることから始めます。
キーワードを並べる欄ではなく、画像を見られない人と検索エンジンの両方に同じ内容を伝える説明文を入れる欄です。

この記事ではalt属性の書き方を良い例と悪い例の表で示したうえで、ファイル名・画像形式・読み込み設定・WordPressでの直し方・効果の測り方まで順に説明します。
公開前に使える5項目のチェックリストも後半に付けました。

画像SEOで効く2つの場面と直す順番

画像SEOが効く場面は、画像検索からの流入とページの表示速度の2つです。
料理・施術例・商品・施工事例のように見た目で選ばれる業種では、画像検索が実際の入口になります。
重い画像はページ全体の読み込みを遅らせるので、読み始める前の離脱にもつながります。

検索エンジンは画像の中身を文字で受け取る

Googleの画像SEOガイドは、altテキストを画像認識の結果やページの内容と組み合わせて、被写体を理解する材料にしていると説明しています。

画像の意味を検索エンジンに渡せる主な手段は、altと周囲の文章とファイル名です。

画像の中に書かれた文字は、人にしか読めない情報です。

料金表や地図をそのまま画像にしたページは、その情報が検索にもAIの回答にも届かない状態になります。

画像SEOで検索順位を上げるための作業を進めるときは、次の手順に沿って上から順番に手を動かします。

1. まずはすべての画像にalt属性が漏れていないかを確認し、未入力の箇所にテキストを追加します。
   所要時間の目安は画像10枚あたり約10分です。
2. 次にファイル名が「IMG_001.jpg」などの初期設定のままになっているものを、内容が伝わる英単語に変更します。
   所要時間の目安は画像10枚あたり約10分です。
3. そのあと画像のファイルサイズが大きすぎるものを確認し、次世代フォーマットへの変換や圧縮を行います。
   所要時間の目安は全体の見直しで約30分です。
4. 最後に料金表などの重要な情報が画像化されている場合は、本文へのテキスト書き起こしを行います。
   所要時間の目安は1ページあたり約20分です。

直す順番は3段階

順番はalt属性が先で、形式とサイズが後です。

圧縮から始めても、画像の中身は検索エンジンに伝わらないからです。

次の表を使って、今の状態から先に直す所を決めます。

今の状態	先に直すもの	判断の根拠
altが空の画像が多い、ファイル名がIMG_のまま	alt属性とファイル名	画像の中身が検索エンジンに渡っていない
PageSpeed InsightsでLCPが2.5秒を超え、LCP要素が画像	形式・サイズ・読み込み設定	web.devの基準は2.5秒以内
読み込み中にレイアウトがずれる	widthとheightの指定	web.devのCLSの基準は0.1以下
素材写真ばかりで自社の実写がない	実写への差し替え	被写体や場所を具体的に書けるのは実写
料金表や図解を画像だけで載せている	画像内の文字を本文に書き起こす	画像内の文字は文字として読まれない

文例：制作会社への修正依頼や社内確認の際は、「画像SEOの優先順位を見直し、まずは全画像のalt属性の未入力箇所の補充と、ファイル名の変更から着手したいと考えております。
ご確認よろしくお願いいたします。」と伝えます。

alt属性の書き方｜良い例と悪い例5パターン

alt属性は電話で説明するつもりで、写っているものを一文で書きます。
見ていない人に伝わる文なら、検索エンジンにも同じ内容が伝わります。

画像	悪い例	良い例	理由
店内で施術している写真	整体	施術ベッドで腰の施術を受ける女性	何が写っているかが分かる
料理の写真	料理 おいしい 人気 おすすめ	自家製生パスタのカルボナーラ	キーワードの羅列はスパムと見なされ得る
店舗の外観	IMG_2841	白い外壁と木製の看板が見える店舗の外観	ファイル名の流用では内容が伝わらない
区切り線や飾り	装飾	alt=""（空にする）	意味のない画像は読み上げから除く
料金表を画像にしたもの	料金表	初回6,600円、2回目以降5,500円の料金表	画像内の文字は読まれないのでaltで補う

書き方は3ステップ

1. 画像を見ていない人に電話で伝えるつもりで、被写体を名詞で1つ言い切る。
   例は「カルボナーラ」です。
2. 誰が・どこで・どんな状態かを足して一文にする。
   例は「自家製生パスタのカルボナーラ」です。
3. 同じページの本文やキャプションと同じ言い回しになっていないかを見て、重なる部分を削る。

alt属性を設定する際の一文の長さは、全角で20文字から60文字の範囲におさめるのが適切な目安となります。

この文字数におさめることで、スクリーンリーダーによる読み上げが途中で途切れることなく、検索エンジンに対しても冗長な説明として扱われなくなります。

画像内の主要な要素を過不足なく伝えるために、形容詞や修飾語は最大でも2つまでに絞り込んでから入力作業を行います。

もし詳細な説明が必要な場合は、alt属性にすべて詰め込もうとせず、画像の直下にあるキャプションや本文の文章側に記載します。

長さは全角60字を目安にする

Googleは文字数の上限を示していません。

cantikでは、読み上げの負担と情報量の釣り合いから、一文で言い切れる全角60字ほどを運用の目安にしています。

装飾目的の画像は、alt=""と空の値を入れます。

属性ごと省略するのではなく、空の値を入れるのが正しい書き方です。

alt属性に画像とは全く関係のない情報を記載したり、「image」「photo」といった単語だけを入れたりする行為は、スクリーンリーダーの利用者を混乱させるため避ける必要があります。

またすべての画像に同じalt属性を使い回すことも、検索エンジンが画像の内容を正しく判別できなくなる原因になります。

代わりにそれぞれの画像が持つ固有の役割を確認し、ページ内の文脈に即した個別具体的なテキストを手入力で作成します。

バナー画像であっても、そこに記載されている文字が読めない状態のまま放置せず、キャンペーン名や誘導先をしっかりと反映した説明文に書き換えます。

キーワードを並べると逆効果になる

Googleのガイドは、altにキーワードを詰め込むと利用者の体験を損ない、スパムと見なされる場合があると案内しています。

良い例として示されているのは、犬の写真に「ダルメシアンの子犬がボール遊びをしている」と書くような、短く具体的な説明です。

「検索エンジンで上位表示させたいからといって、狙っているキーワードをスペース区切りで何個も並べれば効果が高まるはずだ」という勘違いをしがちです。

しかし実際には、キーワードの羅列は検索アルゴリズムから不自然なテキストとして検出され、評価が下がる原因になります。

検索エンジンのクローラーは、キーワードの数ではなく、周囲の文章との関連性や自然な日本語の文脈を見て画像の内容を判断しています。

そのため順位を上げたい単語を無理に詰め込むのではなく、ユーザーが音声読み上げ機能を利用した際にすんなりと耳に入ってくるような自然な文章を意識して執筆します。

業種で書く中身が変わる

• 飲食は料理名と調理法まで書く。
  例は「自家製生パスタのカルボナーラ」です。
• 美容・整体は施術の様子を描写し、効果の断定は避ける。
• EC・物販は商品名と色・サイズをaltに入れる。

業種ごとの書き分けができているかを確認するには、ブラウザの検証ツールを開いて対象の画像を右クリックし、HTMLソース内のalt属性の値を直接目視でチェックします。

確認時の具体的な基準として、プレースホルダーやファイル名がそのまま残っている画像がページ全体の5パーセント未満に収まっている状態を合格ラインとします。

またGoogle Chromeの拡張機能などのアクセシビリティ検証ツールを使い、スクリーンリーダーがすべての画像に対して適切なテキストを読み上げているかをテストします。

この確認作業を月に1回のペースで定期的に実施し、新しく追加した画像にaltの未入力やキーワードの詰め込みが発生していないかを点検します。

ファイル名と画像形式｜WebPを基本に5形式を使い分ける

ファイル名は内容を英数字とハイフンで表し、形式は迷ったらWebPを選びます。
Googleの画像SEOガイドも、内容が分かる短いファイル名を付けるよう案内しています。

cantikでは「seitai-shisetsu-sagamihara.jpg」の形でそろえています。
日本語のファイル名はURLがパーセントエンコードされて長くなるので、英数字に直してからアップロードします。
拡張子と実際のファイル形式が食い違わないことも、Googleのガイドが求める点です。

5形式の使い分け

Google検索が画像として扱える形式は、BMP・GIF・JPEG・PNG・WebP・SVG・AVIFです。

実務で選ぶのは次の5つに絞れます。

• WebPは写真にもイラストにも使える基本形式です。
  Googleが公開している比較では、同等の画質のJPEGより25〜34%小さくなります。
• AVIFは圧縮率の高い新しい形式で、Google検索も対応しています。
  書き出しの手間と対応環境を確認してから使います。
• JPEGはWebPが使えない場面の写真用で、保存を繰り返すたびに劣化します。
• PNGは透過が要るロゴや図解向けです。
  写真に使うと重くなります。
• SVGはロゴ・アイコン・線画向けで、拡大しても品質が保たれます。
  写真には不向きです。

古い環境への備えには、pictureタグでWebPを先に、JPEGを後に並べる書き方があります。

Googleのガイドが紹介している方法で、末尾のimgタグにsrcとaltを入れておくのが条件です。

実際にWebPを中心に5つの形式を使い分ける際は、おおむね3分から5分で次の手順を確認します。

1. 使途の確認：画像が写真、イラスト・ロゴ、透過のどれに該当するかを判断します。
2. 形式の選定：基本はWebPにし、ロゴや線画ならSVG、透過が必要ならPNGを選びます。
3. 書き出しの実行：それぞれの画像に適したツールや画像編集ソフトを使って保存します。
4. 環境の検証：ブラウザの表示や古い環境での見え方に問題がないかをテストします。

表示速度を落とさない3つの設定

表示速度に効く画像の設定は、書き出しサイズ・widthとheightの指定・読み込み方法の3つです。
web.devが示すCore Web Vitalsの基準は、LCP（最大の要素が表示されるまでの時間）が2.5秒以内、CLS（読み込み中のレイアウトのずれ）が0.1以下です。

設定1：書き出しサイズは表示幅の2倍まで

幅400pxで表示する画像に、3,000pxの原寸を置いても意味は薄くなります。

高精細な画面でも荒れにくい表示幅の2倍、この例なら800pxで書き出します。

cantikでは1枚200KB以下を社内の目安にしています。

文例：画像のファイルサイズを見直しするため、表示幅の2倍を目安に解像度を調整し、1枚あたりおおむね200KB以下に圧縮したデータをご準備いただけますでしょうか。
デザイン上の見栄えと読み込み速度を両立させるため、ご協力のほどよろしくお願い申し上げます。

この文例は制作会社やライターへ画像の書き出し指定を依頼する際の実用的な文章です。

画像のサイズを見直すことで、ページ全体の軽量化につながります。

実際の表示領域に対して大きすぎる画像を使用している場合は、アップロード前にリサイズを行いましょう。

文字数やファイル容量の制限があるケースでも、目安の数値を共有しておくとスムーズに進行できます。

設定2：widthとheightを書く

imgタグに幅と高さを書いておくと、ブラウザは画像の場所を先に確保してからページを描きます。

読み込み途中でレイアウトがずれるCLSを防げるのは、この指定があるときです。

WordPressは通常自動で付けますが、手書きのHTMLやカスタムHTMLのブロックでは抜けやすい箇所です。

幅と高さを指定する際は、表示上のサイズではなく画像の実際のピクセル数を正しく記述することが重要です。

例えば表示幅が400ピクセルで高さが300ピクセルの画像であれば、width=400とheight=300を指定します。

この数値の比率が画像本来の縦横比と異なっていると、ページ読み込み時に不自然な変形が生じる原因になります。

正確な数値を割り出すための判断基準として、画像ファイルを右クリックしてプロパティを開き、詳細タブからピクセル数を確認するのが確実です。

またレスポンシブデザインであっても、CSSでmax-widthを100%に設定してあれば、HTML側のwidthとheight属性が崩れの防止に役立ちます。

手動でコードを記述する作業は1ファイルあたり約2分から3分で完了するため、実装漏れがないかを定期的に確認しましょう。

設定3：読み込み方法を位置で分ける

• 最初に見える大きな画像には、loading="lazy"を付けず、fetchpriority="high"を指定します。
• 画面の下にある画像には、loading="lazy"を付けて読み込みを後回しにします。
• ヘッダーのロゴは、どちらも付けません。

web.devのFetch Priorityの解説には、Google Flightsの検証でLCPが2.6秒から1.9秒に短縮された例があります。

よくあるのはスライダーの1枚目に遅延読み込みが付いたままで、LCPが遅くなっているケースです。

PageSpeed Insightsの診断でLCPの要素を確認し、それが画像ならlazyを外します。

ここでやってはいけない失敗として、ファーストビューに表示されるメインの画像すべてにloading="lazy"を付けてしまう事例があります。

遅延読み込みを適用してはいけない場所に指定してしまうと、ブラウザが画像の存在に気づくタイミングが遅れ、表示速度の指標であるLCPが大幅に悪化します。

画面の上部に配置される重要な画像には遅延読み込みを避け、代わりに適切な優先度を設定するのが確実な対処法です。

実装後は検証ツールを使い、意図した通りの順序で画像が読み込まれているかを確認しましょう。

WordPressで直す手順｜5ステップ

WordPressでは、記事側の画像ブロックのaltを直すのが最優先です。
サイト全体の画像を一度に直す必要はなく、検索で表示されているページから順に進めます。

1. Search Consoleの「検索パフォーマンス」を開き、ページ別に表示回数の多い順へ並べて、上位10ページを直す対象にする。
2. その10ページをPageSpeed Insightsに入れ、アクセシビリティ欄の「[alt]属性」に関する指摘とLCPの要素を控える。
3. 記事の編集画面で画像ブロックを選び、右の設定欄にある「代替テキスト」を書き直す。
4. アイキャッチ画像は、メディアのライブラリで画像を開き、「代替テキスト」欄を直す。
5. ページを更新したら、Search Consoleの「URL検査」にそのURLを入れ、「インデックス登録をリクエスト」を押す。

ライブラリの値と記事の値は別物

ライブラリの代替テキストは、記事に画像を挿入した時点で記事側にコピーされます。

後からライブラリの値を直しても、挿入済みの記事には反映されないので、記事ごとに画像ブロックを開いて直します。

アイキャッチのようにテーマがライブラリの値をそのまま出力する画像は、ライブラリ側の修正が効きます。

ここで陥りがちな思い込みとして、メディアライブラリの情報を一度更新すれば、過去に公開したすべての記事内の画像も一括で書き換わるという誤解があります。

実際にはWordPressの仕様上、記事へ画像を挿入した瞬間にテキストデータが各記事のコンテンツ内へ固有の文字列として保存される仕組みになっています。

そのためすでに運用しているページ数が数十ページ以上ある場合は、メディアライブラリ側だけを直しても古い記述がそのまま残り続けます。

この仕様を把握していないと、修正作業を行ったにもかかわらず検索エンジンや検証ツールで改善が確認できない原因になります。

確実に対応するには、影響範囲を事前にリストアップし、記事エディタを開いて個別に書き換える手順を踏む必要があります。

WebPへの変換

WordPressは5.8からWebPのアップロードに対応しています。

既存の画像をまとめて変換するときは変換プラグインを使い、変換前の元画像を残す設定にします。

元に戻せないと、後で差し替えが必要になったときに困ります。

正しく変換が行われているかを確認するには、ブラウザの開発者ツールを開いてネットワークタブを読み込み、画像の拡張子が.webpになっているかを目視でチェックします。

またメディアライブラリの容量や、ファイルサイズが圧縮前後でどの程度小さくなったかを数値で比較することも大切です。

おおむね数分から10分程度の作業時間を目安にして、テスト環境または本番環境のバックアップを取った上で検証を進めます。

変換プラグインの設定画面にある品質の数値は、目安として80前後に設定し、表示の粗さが気にならないかを個別のページで確認するのが確実な方法です。

想定以上に画質が下がっている場合は、設定数値を調整して再度変換を行い、表示速度と品質のバランスを評価しましょう。

よくある失敗

よくある失敗を確認し、修正作業の全体像を把握します。

作業は3ステップで、合計約15分から20分で完了します。

1. メディアライブラリを開き、該当する画像のaltを確認します（約5分）。
2. 重複しているaltや空のままになっているaltを個別の内容に合わせて書き換えます（約10分）。
3. プレビューで表示崩れがないか確認して保存します（約5分）。

以下の失敗例に心当たりがある場合は、この手順に沿って修正を進めます。

• 全画像に店名と地域名を並べた同じaltを一括入力して、どの画像も同じ説明になっている。
• ロゴや店名の看板を背景画像（CSSのbackground-image）で入れてしまい、altを書く場所がなくなっている。
  Googleの画像SEOガイドは、CSSで表示した画像を検索の対象にしないと説明しています。
• 圧縮プラグインの一括処理で元画像を消してしまい、後から作り直しになる。
• 料金表の画像だけを載せ、金額を本文にもaltにも書いていない。

それぞれの失敗を防ぐために、事前のバックアップと個別のテキスト入力を徹底します。

画像検索に出る条件と効果の測り方

altを書いただけでは画像検索に出るとは限らず、本文との一致・実写・画像サイトマップの3つが揃って候補に入ります。

• 画像が本文の内容と合っていることが前提です。
  記事の主題と無関係な素材写真は拾われにくくなります。
• 自社で撮った実写は、被写体や場所をaltに具体的に書けます。
  スマートフォンで撮った写真でも、素材写真より説明の材料が多くなります。
• 画像サイトマップに含めると、画像の場所を検索エンジンに伝えやすくなります。
  cantik.co.jpでは画像サイトマップを出力しています。

効果は検索タイプを画像に切り替えて見る

Search Consoleの「検索パフォーマンス」では、初期設定が「ウェブ」の数字です。
画像SEOの成果を見るには、「検索タイプ」のボタンから「画像」を選び、日付を「過去28日間と前の期間」の比較にして表示回数とクリックを並べます。
公開直後は再クロールの前なので、数字が動くまでには日数がかかります。

表示速度の側は、PageSpeed Insightsで直す前後のLCPとCLSを控えておき、画像が原因の指摘が消えたかを見ます。
感覚で判断しないための記録です。

効果を数値で正しく測定するために、以下の文例のような手順でチームや制作会社へ確認を依頼します。

文例：画像検索からの流入数を確認したいのですが、Search Consoleの検索タイプを画像に切り替えて、先月と比較したクリック数の変化を共有いただけますでしょうか。

この文例を参考にしながら、実際の数値を定期的に追跡して改善の判断材料とします。

公開前の5項目チェック

• 内容のある画像すべてにaltが入っているか見る（装飾は空のalt）。
• 画像内の文字が、altか本文のどちらかにテキストで存在することを確かめる。
• WebPまたは圧縮済みで、1枚200KB以内に収まっている。
• widthとheightが入っていて、読み込み中にレイアウトが動いていないかを確かめる。
• 最初に見える画像にlazyが付いていないことをソースで確認する。

1ページあたり5分で終わります。
SEO対策の内部施策として、ページを公開するたびに行う作業です。

判断の目安として、画像サイズは1枚あたり200KB以内、チェック項目は全5項目のうち5項目すべてを満たしている状態を合格基準とします。

この基準を下回る場合は、公開前に画像の再圧縮やaltの再設定を行い、品質を担保します。

数値を満たしているかを確認してから、本番環境への反映作業へ進みます。

AI検索では周辺のテキストが読まれる

AIの回答に使われやすいのは、画像そのものよりaltと本文のテキストです。
図解で示した内容は、本文にも短く文字で書いておきます。
AI検索での見え方はAIO対策にまとめています。

やってはいけない例として、画像に「商品Aのグラフ」とだけ書き、肝心の数値を一切テキストに残さないやり方があります。

これはAIが数値データを読み取れず、回答のソースとして引用されなくなるため駄目です。

代わりに画像内の数値や比較結果を箇条書きで本文側にも併記します。

この対策により、AI検索エンジンが内容を正確に把握しやすくなります。

知らないと損する注意点

alt属性にはキーワードを詰め込めば良いと思われがちな誤解

検索順位を上げたいという理由で、alt属性に狙っているキーワードをスペース区切りで何個も並べる人がいます。

実際にはキーワードの羅列はスパム判定を受けるリスクを高める原因になります。

検索エンジンのクローラーは、不自然なキーワードの数ではなく、周囲の文章との関連性を見て画像の内容を判断しているからです。

ブラウザの検証ツールを開き、対象の画像を右クリックしてHTMLソース内のalt属性を確認し、単語の羅列になっていないかをチェックします。

メディアライブラリの修正だけで全記事が直ると狙われがちな誤解

WordPressのメディアライブラリで代替テキストを直せば、過去に公開したすべての記事の画像も一括で変わると思われがちです。

実際にはWordPressの仕様上、記事へ画像を挿入した瞬間にテキストデータが固定化されるため、メディアライブラリ側だけを直しても古い記述が残ります。

過去に挿入された画像は、記事の編集画面から個別に画像ブロックを開いて直す必要があります。

公開中の上位ページから順に記事の編集画面を開き、画像ブロックを選択して設定欄の代替テキストを直接目視で確認します。

すべての画像に遅延読み込みを付ければ速くなると信じられがちな誤解

表示速度を上げるために、ページ内のすべての画像にloading=’lazy’を付けておけば安心だと思われがちです。

実際には画面の最上部に表示されるファーストビューの画像に遅延読み込みを付けると、ブラウザが画像の存在に気づくタイミングが遅れます。

画面上部のメイン画像に遅延読み込みを適用してしまうと、表示速度の指標であるLCPが大幅に悪化します。

PageSpeed Insightsの診断結果を開き、LCPの要素として指摘されている画像にlazy属性がついていないかを確かめます。

いまの状態を確かめるチェックリスト

画像SEOの現在の状況を確認するには、次の8項目を上から順に見ていきましょう。

• すべての記事内の画像にalt属性が入力できている。
• ファイル名が英数字とハイフンで構成されている。
• 料金表や地図などの重要な情報がテキストで書けている。
• 画像のファイルサイズがすべて200KB以下に収まっている。
• 形式は原則としてWebPが選択できている。
• ファーストビューの画像にloading=’lazy’が外れている。
• すべてのimgタグにwidthとheightが指定されている。
• メディアライブラリではなく記事内のalt属性が直せている。

チェックの結果、×の項目が多い場合は、まずはすべての画像におけるalt属性の未入力箇所の補充から着手します。
そのうえでファイル名の変更やサイズ圧縮を進めていくと、無理なく全体を見直しできます。
もし日々の運用で手が回らない場合は専門の制作会社に任せる選択肢もあるため、まずは無料相談へお問い合わせください。

よくある質問

Q1. alt属性はすべての画像に必要ですか

A. 内容のある画像には必要です。
区切り線や飾りなど意味を持たない画像は、alt=""と空の値を入れます。
属性ごと省略すると、読み上げソフトが画像のファイル名を読み上げる場合があります。

Q2. alt属性は何文字くらいが適切ですか

A. 全角60字ほどが運用の目安です。
Googleに公式の上限はありませんが、一文で言い切れる長さにすると読み上げの妨げを避けられます。

Q3. 圧縮すると画質は落ちますか

A. 適切な圧縮なら、見た目の劣化はごく小さく収まります。
WebPなら同等画質のJPEGより25〜34%小さくなるとGoogleが公開しています。
ロゴや細い文字を含む画像は、書き出した後に拡大して確かめます。

Q4. 画像SEOだけで検索順位は上がりますか

A. 画像SEO単体で順位が大きく動くとは言えません。
画像検索からの流入と表示速度を通じて、ページ全体の使いやすさを支える施策です。

Q5. 既存ページの画像を全部直す必要がありますか

A. 検索で表示されているページから順に直します。
表示回数の多いページほど、直した結果が数字に出ます。

サイト全体の画像の点検は、cantikでZOOM・電話・メールでご相談いただけます。
現状のページを見ながら、どの画像から直すか順番をお伝えします。
無料相談からどうぞ。

▶ 関連サービス：SEO対策・コンテンツマーケティング