alt属性の書き方を完全理解！パターン別の正解例ですぐ実践できる

ブログの記事を書いているとき、画像のアップロード画面で「代替テキスト（alt属性）」という項目を見て、手が止まってしまったことはありませんか？

「ここには何を書けばいいの？」「空欄のままだとSEOに悪影響があるのかな？」と不安に思う方も多いはずです。実は、このalt属性を正しく設定することは、検索エンジンに画像の内容を伝えたり、ユーザー体験を向上させたりするために、とても大切な作業なんですよ。

この記事では、SEO初心者の方でも迷わず設定できるように、alt属性の正しい書き方や具体的な記述例を、シーン別にわかりやすく解説します。これを読めば、自信を持って画像の設定ができるようになり、あなたのブログもより多くの人に届きやすくなるでしょう。一緒に基本をマスターしていきましょう！

alt属性（代替テキスト）とは？SEOとユーザーへの役割

まずは、そもそも「alt属性（オルト属性）」とは何なのか、その役割について理解を深めていきましょう。

alt属性とは、Webサイト上の画像が何らかの理由で表示されなかったときや、画像を見ることができない状況において、画像の代わりに表示・読み上げられるテキストのことです。「代替テキスト」とも呼ばれていますね。

SEO対策としても、ユーザーへの配慮としても、主に3つの重要な役割を持っています。それぞれ具体的に見ていきましょう。

検索エンジンに画像の内容を正しく伝える

一つ目の役割は、Googleなどの検索エンジンに対して「この画像が何を表しているか」を正しく伝えることです。

私たち人間は画像を見れば一目で「これは赤いリンゴだ」とわかりますが、検索エンジンのロボット（クローラー）は、画像の中身を視覚的に理解することがまだ得意ではありません。そのため、テキスト情報であるalt属性を読み取ることで、画像の内容を判断しているのです。

適切に設定することで画像検索の結果に表示されやすくなり、SEOの効果が期待できますよ。

スクリーンリーダーによる音声読み上げに対応する

二つ目は、視覚に障がいのある方などが利用する「スクリーンリーダー（音声読み上げソフト）」への対応です。

目の不自由な方がWebサイトを閲覧する際、スクリーンリーダーは画面上の文字を音声で読み上げます。このとき、画像にalt属性が設定されていれば、そのテキストを読み上げて画像の内容を伝えてくれるのです。

もし設定がないと、「画像」とだけ読み上げられたり、無視されたりしてしまい、情報が伝わりません。Webアクセシビリティ（誰でも使いやすい状態）を高めるためにも、非常に重要な役割を果たします。

通信エラー時に画像の説明文を表示する

三つ目は、通信環境が悪い場所などで画像が読み込めなかったときに、画像の説明文として表示される役割です。

電波の悪い場所でサイトを開いたとき、画像が表示されるはずの場所に「×」マークと一緒に文字が表示されているのを見たことはありませんか？あれがalt属性のテキストです。

画像が表示されなくても、「ここには商品の写真があるんだな」「グラフがあるんだな」と内容が推測できるため、ユーザーを迷わせずに済みますね。ユーザー体験（UX）を守るための保険のような役割とも言えるでしょう。

評価されるalt属性の書き方における基本ルール

alt属性の重要性がわかったところで、次は「具体的にどう書けば評価されるのか」という実践的な部分に入っていきましょう。

SEO効果を高めつつ、ユーザーにも親切なalt属性を書くためには、いくつかの基本ルールがあります。難しく考える必要はありません。これから紹介する4つのポイントを意識するだけで、誰でも適切なテキストが書けるようになりますよ。

画像を見たまま具体的かつ客観的に表現する

最も大切なのは、その画像が何であるかを「見たまま、具体的かつ客観的に」言葉にすることです。

例えば、ただ「犬」と書くのではなく、「公園でフリスビーを追いかけるゴールデンレトリバー」のように書くと、状況がより鮮明に伝わりますよね。

検索エンジンもユーザーも、画像の詳細な情報を求めています。主観的な感想（「かわいい犬」など）よりも、事実に基づいた描写を心がけると良いでしょう。

記事の対策キーワードを自然な形で含める

記事で狙っているSEOキーワードを、alt属性にも含めることは有効です。画像検索からの流入も期待できるからです。

ただし、無理やり詰め込むのは逆効果。「alt属性 書き方」というキーワードなら、「alt属性の書き方を解説した図解」のように、自然な文脈で入れるのがポイントです。

あくまで画像の説明が主役ですので、キーワードを入れることばかりに気を取られて、説明がおかしくならないように注意しましょう。

簡潔な文章で記述する

alt属性は、簡潔でわかりやすい文章にすることも大切です。

あまりに長すぎる説明文は、スクリーンリーダーで聞いているユーザーにとって負担になりますし、検索エンジンも重要な部分を把握しづらくなります。

目安としては、一息で読める程度の長さや、数十文字程度に収めると良いでしょう。詳細な説明が必要な場合は、alt属性ではなく、画像のキャプション（説明文）や本文で補足することをおすすめします。

「〜の画像」「〜の写真」という言葉は省略する

よくある間違いとして、「〜の画像」「〜の写真」という言葉を末尾につけてしまうケースがありますが、これは基本的に不要です。

なぜなら、HTMLの<img>タグを使用している時点で、ブラウザやスクリーンリーダーはそれが画像であることを認識しているからです。読み上げソフトによっては「〜の画像の、画像」と重複して読み上げられてしまうこともあります。

無駄な言葉は省き、中身の説明から書き始めるようにしましょう。

【事例別】そのまま使えるalt属性の書き方・正解パターン

基本ルールを押さえたところで、実際のシーンに合わせた具体的な書き方の例を見ていきましょう。「こういう画像にはどう書くのが正解？」という疑問を解消するために、よくあるパターン別に記述例を用意しました。

これらをテンプレートとして活用すれば、もう迷うことはありませんよ。

商品紹介や物撮り写真の場合

商品レビュー記事やECサイトなどで、商品の写真を掲載する場合は、ユーザーが商品をイメージしやすいように詳細な情報を盛り込みましょう。

色や形など商品の特徴を含めて具体的に書く

単に「商品」とするのではなく、色、形、型番、ブランド名などを含めると親切です。

悪い例：
alt="スニーカー"

良い例：
alt="ナイキ エアジョーダン1 ハイカット 赤×黒"

このように具体的に書くことで、特定の商品を探しているユーザーの画像検索にヒットしやすくなります。

人物が写っている写真の場合

インタビュー記事やプロフィール写真など、人物がメインの画像の場合も、誰がどんな様子で写っているかを伝えます。

人物の名前や表情、動作を説明する

名前がわかっている場合は名前を、さらに表情や動作も加えると状況が伝わります。

悪い例：
alt="男性"

良い例：
alt="パソコンを操作しながら笑顔で話す山田太郎"

表情や動作を入れることで、記事の雰囲気や文脈も伝わりやすくなりますね。

グラフや図解などのデータ画像の場合

データを示すグラフや図解は、画像が見えなくても内容がわかるようにすることが特に重要です。

グラフが示している結論や数値を文字起こしする

グラフのタイトルだけでなく、そのグラフが示している「結論」や「数値」まで書きましょう。

悪い例：
alt="売上推移グラフ"

良い例：
alt="2023年の売上推移グラフ。第4四半期に前年比120%増を達成"

これにより、画像が表示されなくてもデータの要点が伝わります。

記事タイトルや見出しを含んだアイキャッチ画像の場合

ブログのアイキャッチ画像（記事の表紙）にタイトル文字が入っている場合も、alt属性の設定が必要です。

画像内の文字情報をすべて記述する

画像の中に文字が書かれていても、すべてをそのままalt属性に記述するのが正解とは限りません。大切なのは、その画像が持つ意味や情報を分かりやすく伝えることです。

悪い例：
alt="アイキャッチ"

良い例：
alt="alt属性の書き方を解説したガイド記事のイメージ"

もしページ内に同じ文章があるなら、alt属性では重複を避けて簡潔に説明しましょう。また、単なる装飾用の画像であれば、alt属性の中身は空（alt=""）にしておくのがアクセシビリティ上のマナーです。

「alt属性 書き方」で迷ったら、ユーザーにとって必要な情報かどうかを考えてみてください。適切に設定することで、検索エンジンも記事のテーマをより正確に理解してくれますよ。

リンクボタンとして機能する画像の場合

画像をバナーとして使い、他のページへリンクさせる場合は、画像の見た目よりも「機能」を重視します。

リンク先のページ内容やアクションを記述する

「ボタン」と書くのではなく、クリックするとどこへ行くのか、何が起きるのかを書きましょう。

悪い例：
alt="申し込みボタン"

良い例：
alt="無料カウンセリングに申し込む"
alt="CocoroGraphのSEOサービス詳細ページへ"

ユーザーが「この画像をクリックするとどうなるか」を理解できるようにするのがポイントです。

会社のロゴやアイコン画像の場合

ヘッダーやフッターにある会社のロゴ画像も、適切な設定が必要です。

会社名やサービス名をそのまま記述する

シンプルに会社名やサービス名を記述します。「ロゴ」という言葉は入れても入れなくても構いませんが、ホームへのリンクになっている場合はサイト名を記述するのが一般的です。

記述例：
alt="株式会社CocoroGraph"

これにより、スクリーンリーダー利用者がサイトの運営元を認識できます。

意味を持たない装飾用画像の場合

背景画像や、記事の区切り線、装飾目的だけのアイコンなど、情報としての意味を持たない画像もありますよね。

alt属性は空欄にして記述しない

この場合、alt属性は「空欄（alt=""）」にしておきます。これを「null（ヌル）」の設定と呼びます。

記述例：
alt=""

空欄にすることで、スクリーンリーダーは「意味のない画像」と判断して読み飛ばしてくれます。もしalt属性自体を削除してしまうと、ファイル名が読み上げられてしまうことがあるので、必ず「alt=""」と記述しましょう。

ツール別に見るalt属性の設定手順

書き方のパターンがわかったところで、次は実際に設定する手順を確認しましょう。

多くのブログ運営者が使っているWordPress（ワードプレス）を中心に、HTMLでの直接記述も含めて解説します。お使いの環境に合わせて参考にしてみてくださいね。

WordPressのブロックエディタで設定する手順

現在主流のブロックエディタ（Gutenberg）では、直感的に設定が可能です。

1. 記事編集画面で、設定したい画像ブロックをクリックして選択します。
2. 画面右側のサイドバーにある「ブロック」設定タブを開きます。
3. 「設定」の中に「代替テキスト（alt）」という入力欄があります。
4. そこへ説明文を入力すれば自動的に保存されます。

画像を見ながらすぐに入力できるので、アップロードした流れで入力する癖をつけると良いでしょう。

WordPressのクラシックエディタで設定する手順

以前のクラシックエディタを使っている場合の手順はこちらです。

1. 記事編集画面で画像をクリックします。
2. 画像の上に表示される鉛筆マーク（編集ボタン）をクリックします。
3. 「画像詳細」というポップアップ画面が開きます。
4. 「代替テキスト」という欄に文章を入力し、右下の「更新」ボタンを押します。

メディアライブラリから画像をアップロードする際にも、右側の詳細設定で事前に入力しておくことが可能です。

HTMLコードで直接記述する手順

CMSを使わずにHTMLでサイトを作っている場合や、コードエディタで修正したい場合は、<img>タグの中に直接記述します。

基本の書式：
<img src="画像のURL" alt="ここに代替テキストを記述">

alt=""のダブルクォーテーションの中にテキストを入れます。前後に半角スペースを忘れずに入れ、他の属性と区切るようにしてくださいね。

alt属性とtitle属性の違いと使い分け

alt属性とよく似たものに「title属性（タイトル属性）」があります。CMSの設定画面で近くにあるため、「どっちに入力すればいいの？」「両方同じでいいの？」と迷う方も多いようです。

実は、この2つは役割が明確に異なります。違いを理解して、正しく使い分けましょう。

alt属性は「画像代わりのテキスト」として必須

これまで解説してきた通り、alt属性は「画像が表示されない場合の代わり」となるだけでなく、スクリーンリーダーや検索エンジンに画像の内容を伝えるための大切なテキストです。

SEOやアクセシビリティの観点から、画像の意味を正しく伝えるために原則として設定しておくのが望ましいでしょう。ただし、すべての画像に文章を入れるわけではありません。意味のある画像には適切な説明を、単なる装飾画像には空（alt=””）を設定するなど、正しいalt属性の書き方をマスターして使い分けてみてください。

title属性は「補足情報の吹き出し」として任意

一方、title属性は「画像の補足情報」を表示するためのものです。

PCで画像の上にマウスカーソルを乗せたとき、小さな吹き出しで文字が出てくるのを見たことがありませんか？あれがtitle属性です（ツールチップとも呼ばれます）。

あくまでユーザーへの補助的な情報提供が目的であり、SEOへの直接的な効果は薄いとされています。そのため、設定は任意です。

基本的にはalt属性のみの設定で問題ない

結論として、基本的にはalt属性だけしっかり設定しておけば問題ありません。

title属性はスマホやタブレットでは表示されないことが多く、すべてのユーザーに情報が届かないためです。

無理に両方設定する必要はありませんが、もしtitle属性を設定する場合は、alt属性と同じ内容にするか、alt属性の補足になるような内容にすると良いでしょう。まずはalt属性を優先してくださいね。

設定済みalt属性の確認・チェック方法

「記事を公開したけれど、本当にalt属性が設定できているかな？」と不安なときは、ブラウザを使って簡単に確認することができます。

特別なソフトは必要ありません。普段使っているGoogle Chromeブラウザでの確認方法を2つ紹介します。

Chromeブラウザの検証ツールで確認する

少しエンジニアっぽい方法ですが、慣れると一番確実です。

1. 確認したい画像の上で「右クリック」をします。
2. メニューから「検証」を選択します。
3. 画面の右側（または下側）に、HTMLコードが表示されます。
4. ハイライトされている<img>タグの中に、alt="〇〇"という記述があるか確認します。

ここに書かれている内容が、実際に設定されているalt属性です。

Chrome拡張機能を使って視覚的に確認する

もっと手軽に、視覚的に確認したい場合は、Chromeの拡張機能を使うのがおすすめです。

例えば「Alt & Meta viewer」や「Image Alt Tester」などの拡張機能をインストールすると、ワンクリックでページ内のすべての画像のalt属性を吹き出しで表示してくれます。

記事内の画像をまとめてチェックしたいときや、競合サイトがどんなalt属性を書いているか調査したいときに便利ですよ。

やってはいけないalt属性のNG記述例

最後に、alt属性を書くときに避けるべき「NGな書き方」を押さえておきましょう。

良かれと思ってやったことが、逆にSEO評価を下げてしまう可能性もあります。以下の3つのポイントに注意して記述してください。

関係のないキーワードを羅列する

SEOを意識しすぎて、画像と関係のないキーワードを羅列するのは絶対にやめましょう。

例えば、花の画像に対してalt="SEO コンサルティング 格安 おすすめ 東京"のように書く行為です。これは「キーワードスタッフィング（詰め込み）」と呼ばれ、検索エンジンからスパム行為とみなされ、ペナルティを受けるリスクがあります。

あくまで画像の説明の中で、自然にキーワードを含める程度に留めてください。

ファイル名をそのまま設定してしまう

カメラやスマホで撮影した画像をそのままアップロードすると、ファイル名が「DSC_001.jpg」や「IMG_2023.png」のようになっていることがあります。

一部のツールでは、alt属性が空欄の場合にこのファイル名を自動で設定してしまうことがありますが、これでは画像の内容が全く伝わりません。

必ず人間が理解できる言葉に書き換えるようにしましょう。ファイル名自体も「apple.jpg」のように内容がわかる英語名にするのが理想的です。

画像と全く関係のない文章を入れる

画像の内容と全く矛盾する文章や、コピーペーストで全ての画像に同じ文章を入れるのもNGです。

例えば、料理の画像なのに「店内の内装」と書いたり、記事内の全ての画像に「ブログのアイキャッチ」と設定したりするのは避けましょう。

検索エンジンは前後のテキストと画像の関連性も見ています。一つひとつの画像に対して、誠実に説明を書くことが大切です。

まとめ

今回は、SEO初心者の方に向けてalt属性（代替テキスト）の正しい書き方と設定方法について解説してきました。

alt属性は、検索エンジンに画像の内容を伝えるだけでなく、目の不自由な方や通信環境の悪いユーザーを助けるための大切な「おもてなし」の機能です。

記事のポイントまとめ：

• 具体的・客観的に、見たままの情報を書く
• SEOキーワードを自然な形で含める
• 「〜の画像」は省き、簡潔にまとめる
• 装飾用の画像は空欄（null）にする
• title属性よりもalt属性を優先する

最初は難しく感じるかもしれませんが、「この画像が見えない人に、電話でどう説明するか？」をイメージすると書きやすくなりますよ。

正しいalt属性の設定は、小さな積み重ねですが、確実にWebサイトの品質を高めてくれます。ぜひ今日から、過去の記事も含めて少しずつ見直してみてくださいね。

alt属性 書き方についてよくある質問

alt属性について、よく寄せられる質問をまとめました。設定時の疑問解消に役立ててください。

• alt属性の文字数に制限はありますか？
  • 特に厳密な制限はありませんが、長すぎるとスパムと判定されるリスクや、読み上げ時のユーザビリティ低下につながります。簡潔に画像の内容を伝えるため、数十文字〜100文字程度に収めるのが理想的です。
• 全ての画像にalt属性を設定する必要がありますか？
  • はい、タグとしてのalt=""は全ての画像に必須です。ただし、意味を持たない装飾用の画像（ラインや背景など）の場合は、中身を空欄（alt=""）にして設定します。
• キーワードは必ず入れなければなりませんか？
  • いいえ、無理に入れる必要はありません。画像の説明として自然な場合にのみ含めてください。不自然なキーワードの詰め込みはSEO評価を下げる原因になります。
• alt属性を変更すると検索順位に影響しますか？
  • 適切に設定することで、画像検索からの流入増加や、ページ全体のテーマ性の強化につながり、順位に良い影響を与える可能性があります。ただし、即効性があるわけではありません。
• 日本語で書いても大丈夫ですか？
  • はい、日本語のサイトであれば日本語で記述して問題ありません。ターゲットとする読者が理解できる言語で設定しましょう。