alt属性の設定方法を完全解説 - SEO効果を高める画像最適化の基本

※ 本記事にはアフィリエイト広告（成果報酬型広告）へのリンクが含まれています。

Webサイトに画像を掲載する際、alt属性(代替テキスト)の設定は、SEO対策において非常に重要な要素です。Googleなどの検索エンジンは画像の内容を直接「見る」ことができないため、alt属性を通じて画像の内容を理解しています。本記事では、alt属性の基本から具体的な設定方法、SEO効果を高める書き方まで、実践的な内容を詳しく解説します。

alt属性とは?なぜSEOに重要なのか
1. alt属性の主な役割
HTMLでのalt属性の基本的な設定方法
WordPress・各CMS別のalt属性設定方法
SEO効果を最大化するalt属性の書き方
alt属性設定時の注意点とよくある間違い
1. 避けるべき記述
2. alt属性の設定漏れをチェックする方法
まとめ:alt属性はSEOの基本施策
関連記事
よくある質問

alt属性とは?なぜSEOに重要なのか

alt属性(オルト属性)とは、HTML内の<img>タグに設定する属性で、画像が表示されない場合に代わりに表示されるテキストのことです。「alternative text(代替テキスト)」の略称で、画像の内容を文字で説明する役割を果たします。

alt属性の主な役割

alt属性には以下の3つの重要な役割があります:

検索エンジンへの情報提供: Googleなどの検索エンジンが画像の内容を理解し、画像検索結果に表示するための判断材料となります
アクセシビリティの向上: 視覚障害のある方がスクリーンリーダーを使用する際、alt属性の内容が読み上げられます
画像読み込みエラー時の代替表示: ネットワーク環境の問題などで画像が表示されない場合、alt属性のテキストが表示されます

これらの役割により、alt属性はSEOとユーザビリティの両面で非常に重要な要素となっています。特に画像検索からの流入を増やしたい場合、適切なalt属性の設定は必須です。

HTMLでのalt属性の基本的な設定方法

✅ 月額678円〜・国内最速クラス・WordPressワンクリック導入

ConoHa WINGを今すぐ確認 →

まずは基本となるHTMLでの直接記述方法を見ていきましょう。alt属性は<img>タグ内に記述します。

基本的な記述方法

alt属性の基本的な書き方は以下の通りです:

<img src="画像のURL" alt="画像の説明文">

具体例を見てみましょう:

<img src="/images/seo-strategy.jpg" alt="SEO戦略を示すチャート図">
<img src="/images/laptop-desk.jpg" alt="ノートパソコンとコーヒーカップが置かれた作業デスク">
<img src="/images/company-logo.png" alt="株式会社サンプルのロゴ">

装飾画像の場合の記述方法

デザイン上の装飾目的で、内容的に意味のない画像の場合は、空のalt属性を設定します:

<img src="/images/decoration-line.png" alt="">

注意点として、alt属性自体を省略するのではなく、alt=""と空の値を設定することが重要です。これによりスクリーンリーダーが装飾画像をスキップし、より良いユーザー体験を提供できます。

レスポンシブ画像での設定

複数サイズの画像を使用する場合も、alt属性は<img>タグに一度だけ記述します:

<picture>
  <source srcset="/images/hero-large.jpg" media="(min-width: 768px)">
  <source srcset="/images/hero-small.jpg" media="(max-width: 767px)">
  <img src="/images/hero-default.jpg" alt="最新のデジタルマーケティングセミナーの会場風景">
</picture>

WordPress・各CMS別のalt属性設定方法

実際の運用では、CMSを使用してWebサイトを管理することが多いでしょう。ここでは主要なCMSでの設定方法を解説します。

WordPressでの設定方法

WordPressでは、メディアライブラリから簡単にalt属性を設定できます:

メディアライブラリを開く: 管理画面の「メディア」→「ライブラリ」をクリック
画像を選択: alt属性を設定したい画像をクリック
代替テキストを入力: 右側の詳細パネルにある「代替テキスト」欄に説明文を入力
保存: 「更新」ボタンをクリックして保存

投稿・固定ページ編集時の設定:

ブロックエディタ(Gutenberg)では、画像ブロックを選択すると右サイドバーに「代替テキスト」の入力欄が表示されます。クラシックエディタの場合は、画像をクリックして編集アイコンから「代替テキスト」を設定できます。

Shopifyでの設定方法

ECサイト構築プラットフォームのShopifyでは、商品画像や店舗画像にalt属性を設定できます:

管理画面から「商品管理」または「ファイル」セクションに移動
対象の画像をクリック
「代替テキスト」または「ALT text」欄に説明文を入力
変更を保存

Wix・Jimdo等のホームページビルダー

視覚的に編集できるホームページビルダーでも、alt属性は設定可能です:

Wix: 画像をクリック→設定アイコン→「代替テキストとは」セクションで入力
Jimdo: 画像をクリック→「設定」→「説明(ALT)」欄に入力
ペライチ: 画像ブロックの設定画面から「代替テキスト」を入力

SEO効果を最大化するalt属性の書き方

alt属性を設定するだけでなく、その内容が適切であることがSEO効果を高める鍵となります。ここでは効果的な書き方のポイントを解説します。

具体的で正確な説明を心がける

画像の内容を正確に、かつ具体的に説明しましょう:

❌ 悪い例:

alt="画像" / alt="写真" / alt="図"

⭕ 良い例:

alt="2026年最新のSEOトレンドを示すグラフ、モバイルファーストインデックスが75%を占める"

キーワードを自然に含める

SEO対策として、ターゲットキーワードを含めることは有効ですが、不自然な詰め込みは避けましょう:

❌ 悪い例(キーワードスタッフィング):

alt="SEO対策 SEO効果 SEOキーワード SEO最適化 SEOツール"

⭕ 良い例:

alt="SEO対策に有効なキーワード調査ツールの比較表"

文脈に合った説明を記述する

同じ画像でも、掲載されるページの内容によって最適な説明が異なる場合があります。記事の文脈を考慮した説明を心がけましょう。

例えば、東京タワーの写真を使用する場合:

観光ガイド記事: alt="夕暮れ時の東京タワー、展望台からの眺望"
建築技術の記事: alt="東京タワーの鉄骨構造を示す建築写真"
夜景スポット紹介: alt="ライトアップされた東京タワーの夜景"

適切な文字数を守る

alt属性には125文字以内を目安に記述することが推奨されています。スクリーンリーダーの多くが125文字前後で切れるためです。簡潔で要点を押さえた説明を心がけましょう。

商品画像での効果的な書き方

ECサイトの商品画像では、以下の情報を含めると効果的です:

alt="[ブランド名] [商品名] [色・サイズ等の特徴] [角度・シーン]"

具体例:

alt="Nike エアマックス90 ホワイト・ブルー メンズスニーカー サイドビュー"

alt属性設定時の注意点とよくある間違い

避けるべき記述

以下のような記述は避けましょう:

「画像」「写真」などの不要な接頭語: alt="画像:東京タワー" → alt="東京タワー"でOK
ファイル名をそのまま使用: alt="IMG_1234.jpg"は内容を説明していません
長すぎる説明文: 200文字を超えるような詳細な説明は避ける
同じalt属性の使い回し: 複数の異なる画像に同じaltを設定しない

alt属性の設定漏れをチェックする方法

サイト全体でalt属性の設定状況を確認するには、以下のツールが便利です:

Google Search Console: 「拡張」セクションで画像の問題を確認
Screaming Frog SEO Spider: サイト全体をクロールしてalt属性の有無をチェック
WAVE(ブラウザ拡張): アクセシビリティの観点からalt属性を評価
Lighthouse(Chrome開発者ツール): アクセシビリティスコアでalt属性の問題を検出

まとめ:alt属性はSEOの基本施策

alt属性の適切な設定は、SEO対策の基本中の基本です。画像検索からの流入増加、アクセシビリティの向上、ユーザー体験の改善など、多方面でメリットがあります。

重要なポイントのおさらい:

すべての意味のある画像にalt属性を設定する
装飾画像には空のalt属性(alt="")を設定
具体的で正確な説明を125文字以内で記述
キーワードは自然に含め、詰め込みは避ける
画像の文脈に合った説明を心がける

既存のWebサイトでalt属性が設定されていない場合は、優先度の高いページから順に設定していきましょう。特にトップページや主要な商品ページ、よく読まれている記事の画像から着手することをおすすめします。適切なalt属性の設定により、検索エンジンにもユーザーにも優しいWebサイトを構築できます。

よくある質問

alt属性とtitle属性の違いは何ですか?

alt属性は画像が表示されない場合の代替テキストで、SEOとアクセシビリティに重要です。title属性は画像にマウスを重ねた時のツールチップ表示で、補足情報を提供しますがSEO効果は限定的です。

alt属性は必ず設定しなければいけませんか?

HTMLの仕様上は必須ではありませんが、SEOとアクセシビリティの観点から強く推奨されます。意味のある画像には具体的な説明を、装飾画像には空のalt属性(alt=””)を設定しましょう。

alt属性にキーワードを何度も入れるとSEO効果が高まりますか?

いいえ、キーワードの過度な詰め込み(キーワードスタッフィング)は逆効果で、Googleからペナルティを受ける可能性があります。自然な文章で1回程度含める程度が適切です。

✅ SEOに強いWordPressテーマ・買い切り型で追加費用なし

AFFINGER6を今すぐ確認 →

▶ 詳しくは：中小企業向けSNS自動化ツール無料版おすすめ比較2026 – 機能・選び方を徹底解説

alt属性の設定方法を完全解説 – SEO効果を高める画像最適化の基本