alt属性とは？SEOに効く書き方とファイル名・画像最適化を解説

公開日: 2022-09-12 ／ 最終更新日: 2026-06-19

画像を使った記事は読みやすくなりますが、検索エンジンは画像そのものの「見た目」を人間と同じようには理解できません。そこで重要になるのが alt属性（オルト属性） です。

alt属性とは、画像の内容をテキストで検索エンジンとユーザーに伝える、imgタグ内の代替テキストのことです（50字以内の定義）。

この記事では、画像SEO未着手のWeb担当者・オウンドメディア運用者に向けて、alt属性の役割と書き方を「良い例／悪い例」の比較表で具体的に示しながら、ファイル名・WebP・遅延読込・構造化データ（ImageObject）まで、画像SEOを体系的に解説します。WordPressでの設定手順や確認方法、よくある失敗、業種別のポイントも盛り込み、読み終えたその日から実践できる内容を目指しました。

なお、本記事ではalt属性の効果を「検索順位を直接上げるもの」ではなく、画像検索・アクセシビリティ・コンテンツ理解を通じてSEOに間接的に寄与するものとして正確に整理しています。誇張のない実務目線で進めていきます。

alt属性とは？画像SEOにおける役割

👉 このパートをまとめると！
alt属性は画像の内容をテキストで伝える代替テキストです。

alt属性とは、画像の内容をテキストで検索エンジンとユーザーに伝える、imgタグ内の代替テキストのことです（50字以内の定義）。

「alt」は alternative text（代替テキスト）の略で、HTMLでは次のように記述します。

<img src="harajuku-curry.webp" alt="原宿駅前にあるカレー店の外観">

検索エンジンは画像のピクセル情報を人間のようには判別できないため、この alt に書かれたテキストを手がかりに「この画像が何を表しているか」を理解します。alt属性が果たす役割は、大きく次の3つです。

• 検索エンジンへの内容伝達: 画像が何の画像かをテキストで補い、画像検索やページ全体の文脈理解を助ける
• アクセシビリティの確保: 視覚に障がいのあるユーザーが使うスクリーンリーダーが、alt属性のテキストを読み上げる
• 画像が表示されない場合の代替表示: 通信エラーやファイル破損で画像が出ないとき、alt属性のテキストが代わりに表示される

つまりalt属性は「SEOのためだけの設定」ではなく、すべてのユーザーに画像の意味を正しく届けるための基本要素です。SEO効果はその結果として後からついてくる、と考えると施策の優先順位を判断しやすくなります。

alt属性とtitle属性・ファイル名の違い

👉 このパートをまとめると！
3要素は役割が異なり、SEOで主役になるのはalt属性です。

画像まわりには alt属性・title属性・ファイル名という、混同されやすい3つの要素があります。それぞれ目的が異なるため、違いを整理しておきましょう。

ポイントは、SEOで主役になるのはalt属性だという点です。title属性は付けても付けなくてもSEO評価に大きな差は生まれにくく、無理に設定する必要はありません。一方ファイル名は後述するように、英数字で内容を表すものにしておくと補助的なプラスになります。

「とりあえず全部に何か入れておこう」と考える前に、まずはalt属性を丁寧に書くことに集中するのが、初心者にとって最も費用対効果の高い進め方です。

alt属性がSEOに効果がある理由

👉 このパートをまとめると！
画像検索・文脈理解・UX評価の3経路で間接的に寄与します。

alt属性は「設定すれば検索順位が上がる」という単純なものではありません。次の3つの経路を通じて、SEOに間接的に寄与します。

1. 画像検索（Google画像検索）での露出が増える

Google画像検索は、alt属性やファイル名、周辺テキストをもとに画像の内容を判断します。適切なalt属性を設定した画像は、関連するキーワードで画像検索の結果に表示されやすくなり、そこから記事への流入が生まれます。ECや観光、レシピなどビジュアル訴求が強いジャンルほど、この効果は大きくなります。

2. ページ全体のコンテンツ理解を助ける

画像はページの文脈を構成する要素のひとつです。本文の内容と整合したalt属性が設定されていると、検索エンジンは「このページは何について書かれているか」をより正確に理解できます。結果として、ページ全体のテーマ性・専門性の評価にプラスに働きます。

3. アクセシビリティ・UXの向上

Googleはユーザー体験（UX）を重視しています。alt属性はスクリーンリーダー利用者に情報を届けるアクセシビリティ施策であり、「すべての人に使いやすいサイト」という評価軸に貢献します。リンクに使われている画像のalt属性は、テキストリンクのアンカーテキストに近い役割も果たします。

なお、画像がリンクとして機能している場合（バナーリンクなど）、そのalt属性はアンカーテキストと同等に扱われるため、リンク先の内容を表す説明にしておくと内部リンク評価の面でも有利です。「alt属性を入れたから順位が上がる」のではなく、こうした複数の経路が積み重なって、結果的にSEOへ寄与するという理解が正確です。

SEOに効果的なalt属性の書き方【良い例・悪い例の比較表】

👉 このパートをまとめると！
具体・簡潔・自然なキーワードの3点が良いaltの条件です。

良いalt属性の条件は、たった3つです。「具体的」「簡潔」「キーワードを自然に含む」。逆に避けるべきは、抽象的すぎる説明とキーワードの詰め込みです。良い例と悪い例を比較表で確認しましょう。

書き方の3つのコツ

• 文字数の目安は40〜80字程度: 画像の内容が伝わる範囲で簡潔に。短すぎて伝わらないのも、長すぎて冗長なのも避けます（厳密な上限規定はないため、あくまで目安として捉えてください）。
• キーワードは1〜2個を自然に: 狙うキーワードを無理なく含めます。同じ単語を繰り返したり、関係ないキーワードを並べたりするのは逆効果です。
• 装飾画像は空のalt（alt=""）にする: 罫線・アイコン・背景など、情報を持たない画像にまで説明を書くと、スクリーンリーダーが不要な情報を読み上げてしまいます。空にすることで「この画像は重要でない」と正しく伝わります。

<!-- 良い例：内容が具体的でキーワードも自然 -->
<img src="seo-image-flow.webp" alt="画像SEOの施策手順を示すフロー図">

<!-- 装飾画像：意味を持たないので空にする -->
<img src="divider.png" alt="">

alt属性の設定方法（WordPress / HTML記述例）

👉 このパートをまとめると！
WordPressは代替テキスト欄に入力、HTMLはalt属性を追記します。

alt属性の設定方法は、WordPressを使う場合とHTMLを直接編集する場合の2通りがあります。

WordPressでの設定手順

• 管理画面の「メディア」または投稿編集画面で対象の画像をクリックする
• 画面右側（またはメディアライブラリ）の 「代替テキスト（alt text）」欄 を開く
• 画像の内容を説明するテキストを入力する（例: 原宿駅前のカレー店の外観）
• 投稿を更新・公開する。入力内容は自動的にimgタグのalt属性として出力される

WordPressなら、コードを触らなくても代替テキスト欄に入力するだけで設定が完了します。すでに公開済みの画像も、メディアライブラリから後追いで編集できます。

HTMLでの記述例

CMSを使わない静的サイトやLP、ECのカスタマイズページでは、imgタグに直接alt属性を書きます。

<!-- 基本形 -->
<img src="harajuku-curry.webp" alt="原宿駅前のカレー店の外観">

<!-- 画像がリンクの場合：リンク先の内容を表す -->
<a href="/menu/">
  <img src="curry-menu.webp" alt="カレー店のメニュー一覧を見る">
</a>

src（画像ファイルのパス）とaltはセットで記述するのが基本です。altを省略すると、検索エンジンにもスクリーンリーダーにも情報が伝わらなくなるため、内容を持つ画像には必ず設定しましょう。

alt属性以外の画像SEO施策（ファイル名・WebP・遅延読込・周辺テキスト）

👉 このパートをまとめると！
alt属性に加え、ファイル名最適化と画像の軽量化が重要です。

画像SEOはalt属性だけで完結しません。ここからは「正しく伝える（alt・ファイル名・周辺テキスト）」と「軽くする（圧縮・WebP・遅延読込）」の両輪を解説します。

1. ファイル名の最適化

ファイル名は検索エンジンが画像内容を推測する補助情報になります。IMG_0123.jpg のような意味のない名前ではなく、内容を表す英数字のファイル名にしましょう。

• ✕ gazou01.jpg IMG_2024.png
• ◎ harajuku-curry.webp（半角英数字・ハイフン区切り・内容が分かる）

日本語ファイル名はURLエンコードで文字化けしたり扱いにくくなるため、半角英数字を推奨します。

2. 圧縮・リサイズ・WebP化（表示速度対策）

画像が重いとページの表示速度が落ち、ユーザーの離脱とSEO評価の低下につながります。表示速度はGoogleの評価指標である Core Web Vitals（特にLCP） に直結するため、画像の軽量化は画像SEOの要です。

• リサイズ: 表示サイズに合わせて画像の解像度を縮小する（4000pxの画像を800px幅で表示するのは無駄）
• 圧縮: TinyPNGなどのツールで画質を保ちながら容量を削減する
• WebP化: JPEG・PNGより軽量な次世代フォーマット「WebP」に変換する。多くのモダンブラウザが対応済みです

<!-- WebPを優先し、非対応ブラウザにはJPEGを出すpicture要素 -->
<picture>
  <source srcset="curry.webp" type="image/webp">
  <img src="curry.jpg" alt="原宿駅前のカレー店の外観">
</picture>/

表示速度の計測には専用ツールの活用が便利です。具体的な計測方法はサイトスピードの計測ツールおすすめ3選を紹介！スコアの目安は？で、改善の考え方はLCPの改善方法｜Core Web Vitalsとの関係や測定ツールも解説で解説しています。

3. 遅延読み込み（Lazy Load）

ページ下部の画像を、ユーザーがスクロールして近づいたときに読み込む手法です。初回表示で読み込む画像が減るため、最初の表示が速くなります。HTMLではloading="lazy"属性を付けるだけで実装できます。

<!-- ファーストビュー外の画像に遅延読込を設定 -->
<img src="curry-interior.webp" alt="カレー店の店内の様子" loading="lazy">

なお、ファーストビュー（最初に表示される領域）の画像にはloading="lazy"を付けないのがコツです。最重要画像まで遅延させると、かえってLCPが悪化することがあります。

4. 周辺テキストとの整合

検索エンジンは画像の周辺にあるテキスト（キャプションや前後の文章）も画像理解の手がかりにします。画像のすぐ近くに、その画像が何を示すかが分かる説明文を置くと、alt属性と相互に補強し合います。

画像の表示速度・Core Web Vitalsをサイト全体で改善する考え方はコアウェブバイタル（Core Web Vitals）とは？LCP・FID・CLSの意味＆ランキング改善方法で詳しく解説しています。

構造化データ（ImageObject）で画像を補強する

👉 このパートをまとめると！
ImageObjectで画像の意味や付帯情報を明示的に伝えられます。

alt属性に加えて、構造化データ（JSON-LD）の ImageObject を使うと、画像のキャプションや著作権者などの付帯情報を、検索エンジンに明示的に伝えられます。レシピや商品など、リッチリザルト（検索結果での画像付き表示）を狙う場面で効果を発揮します。

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "ImageObject",
  "contentUrl": "https://example.com/images/harajuku-curry.webp",
  "name": "原宿駅前のカレー店の外観",
  "description": "原宿駅から徒歩1分にあるスパイスカレー専門店の外観写真",
  "creditText": "GMO TECH株式会社",
  "creator": {
    "@type": "Organization",
    "name": "GMO TECH株式会社"
  },
  "license": "https://example.com/image-license"
}
</script>

ImageObjectは必須ではありませんが、画像が重要な意味を持つページ（商品ページ・レシピ・オリジナル撮影写真など）では、画像検索での詳細表示やクリック率の向上に寄与します。構造化データ全般の書き方は構造化マークアップとは？SEOの効果やメリット、書き方までわかりやすく解説！、JSON-LDの仕組みはjson-ldの仕組みとは？SEO効果と構造化マークアップの方法を解説で解説しています。

alt属性・画像SEOでよくある失敗と対策

👉 このパートをまとめると！
未設定・使い回し・詰め込み・巨大画像の4つに注意します。

画像SEOで陥りがちな失敗と、その対策を整理します。

特に多いのが「alt属性の未設定」と「巨大画像のまま掲載」です。この2つは画像点数が多いサイトほど影響が大きく、優先的に対処すべきポイントです。

alt属性の確認方法（Chromeの検証機能 / 拡張機能）

👉 このパートをまとめると！
検証ツールか拡張機能でaltの設定状況を確認できます。

設定したalt属性が正しく反映されているかは、ブラウザで簡単に確認できます。

1. Chromeの検証（デベロッパーツール）で確認する

• 確認したい画像の上で右クリックし、「検証（Inspect）」を選ぶ
• 開いた画面で、その画像のimgタグがハイライト表示される
• <img src="..." alt="ここを確認"> のalt属性の中身を確認する

特別なツール不要で、1枚ずつ正確に確認できる方法です。

2. 拡張機能で一括確認する

ページ内の全画像のalt属性をまとめて確認したい場合は、Chrome拡張機能の 「Alt & Meta viewer」 などが便利です。ボタンひとつでページ内の画像にalt属性を重ねて表示でき、未設定の画像を素早く発見できます。多数の画像を扱うメディアやECサイトの点検に向いています。

業種別の画像SEOのポイント（EC・飲食・美容）

👉 このパートをまとめると！
業種ごとに画像の役割が違い、altの書き方も変わります。

画像SEOの基本は共通ですが、業種によって画像が果たす役割が異なるため、altの書き方にも工夫が必要です。

EC・物販サイト

商品画像は購入判断に直結します。altには「商品名＋色・サイズ・特徴」を具体的に含めましょう（例: alt="ネイビーのレザートートバッグ A4対応"）。商品点数が多いため、テンプレートで「商品名＋特徴」を自動生成しつつ、主要商品は個別に調整するハイブリッド運用が現実的です。

飲食・店舗

料理写真・店内写真・外観写真が「来店前の期待」を作ります。altには「料理名・店舗名・エリア」を含めると、ローカルな画像検索で見つけてもらいやすくなります（例: alt="渋谷の○○店のマルゲリータピザ"）。実際に撮影したオリジナル写真は、フリー素材より独自性の面で有利です。

美容・サロン

施術のビフォーアフターやメニュー写真が重要です。altには「施術名・仕上がりの特徴」を具体的に記述します（例: alt="ショートボブのカット施術後のスタイル"）。ビジュアル比較が購買の決め手になる業種なので、画像の鮮明さ（＝圧縮しすぎない軽量化）とaltの具体性を両立させましょう。

よくある質問（FAQ）

👉 このパートをまとめると！
alt属性の文字数・空alt・順位効果の疑問に回答します。

Q1. alt属性を設定すると検索順位は上がりますか？

alt属性だけで検索順位が直接上がるわけではありません。画像検索での露出、ページの文脈理解、アクセシビリティ向上といった複数の経路を通じて、SEOに間接的に寄与します。「設定すれば必ず上位表示される」という断定的な情報には注意してください。

Q2. alt属性の文字数に決まりはありますか？

明確な文字数の上限規定はありません。画像の内容が過不足なく伝わる範囲で、40〜80字程度を目安に簡潔にまとめるのが実務的です。長文になるほど要点がぼやけ、スクリーンリーダーでも読み上げが冗長になります。

Q3. すべての画像にalt属性が必要ですか？

いいえ。罫線・アイコン・背景画像など、情報を持たない装飾画像は空（alt=""）にするのが適切です。空にすることで、スクリーンリーダーが不要な読み上げをせず、検索エンジンにも「重要でない画像」と正しく伝わります。

Q4. title属性とalt属性は両方設定すべきですか？

alt属性を優先してください。title属性はマウスホバー時の補足表示用で、SEO効果は限定的です。alt属性を丁寧に書くことのほうが、はるかに重要です。

Q5. JPEGとWebP、どちらを使うべきですか？

表示速度を重視するなら、JPEG・PNGより軽量なWebPが有利です。ただし古い一部環境を考慮する場合は、picture要素でWebPを優先しつつJPEGをフォールバックとして用意すると安全です。

まとめ：画像SEOは「正しく伝える」と「軽くする」の両輪

👉 このパートをまとめると！
altで内容を伝え、軽量化で速度を保つのが画像SEOの本質です。

画像SEOの本質は、「画像の内容を正しく伝える」（alt属性・ファイル名・構造化データ） と 「画像を軽くする」（圧縮・WebP・遅延読込） の両輪を回すことです。

• alt属性は「具体的・簡潔・キーワードを自然に」の3点で書く
• 装飾画像は空（alt=""）にする
• ファイル名は内容を表す半角英数字にする
• 圧縮・WebP・遅延読込で表示速度（Core Web Vitals）を守る
• ImageObjectで画像の意味を補強する

alt属性は順位を直接上げる魔法ではありませんが、地道に積み重ねることで画像検索流入・UX・コンテンツ理解の面からSEOへ確実に寄与します。まずは未設定の画像をなくすことと、巨大画像の軽量化から着手しましょう。

関連記事

• alt属性とは？seo対策に効果のある書き方を解説
• 画像検索サイトおすすめ8選｜類似画像を簡単に検索する方法
• メタディスクリプションとは？文字数・例文・確認方法を紹介（meta description）

監修: GMO TECH株式会社 SEO Dash! byGMO 運用チーム
GMO TECHは、SEO・MEO支援ツールの提供を通じて多数のサイト改善を支援してきました。画像最適化を含む内部SEOの改善支援では、巨大画像の圧縮とWebP化、alt属性の一括整備によってページ表示速度（LCP）が改善し、画像検索経由の流入が伸びた事例を複数確認しています。