画像のalt属性の書き方｜SEOとアクセシビリティを両立する7つのポイント

WordPressへ画像を入れるとき、「代替テキスト」に何を書けばよいか迷うことがあります。ファイル名や検索キーワードをそのまま入れても、画像が伝える情報や役割は十分に伝わりません。

alt属性は、画像が表示されない場合やスクリーンリーダーを利用する人へ、画像の情報を補うためのものです。検索エンジンが画像を理解する手がかりにもなりますが、すべての画像へ長い説明を書く必要はありません。画像の役割に合わせた書き分け方を解説します。

alt属性とは何か

alt属性は、HTMLの画像要素に設定する代替テキストです。WordPressでは、画像ブロックやメディアライブラリの「代替テキスト」欄から設定できます。

大切なのは、見た目を細かく実況することではなく、その画像がページ内で伝えている情報や機能を文章で補うことです。同じ画像でも、使われる文脈によって適切なaltは変わります。

図解、グラフ、操作画面、商品写真など、画像を見なければ本文の理解が不足する場合は、重要な情報をaltへ書きます。

画像がリンクやボタンになっている場合は、見た目より「何が起きるか」を伝えます。虫眼鏡の画像なら「虫眼鏡」ではなく「サイト内を検索」のように機能を書きます。

区切り線、背景模様、本文と同じ内容を繰り返すイメージ写真など、なくても情報が変わらない画像は、空のalt（alt=""）が適する場合があります。W3Cの画像アクセシビリティ解説でも、純粋な装飾画像には空の代替テキストを使う考え方が示されています。

「この画像がないと何が伝わらないか」を考え、必要な情報だけを書きます。「グラフ」だけではなく、「平日と休日の作業時間を比較した棒グラフ。休日は平日の約2倍」のように結論を含めます。

直前の本文やキャプションに同じ説明がある場合、altで全文を繰り返すと読み上げが冗長になります。画像だけが持つ情報を補いましょう。

多くの場合、支援技術側で画像であることが伝わるため、毎回「〜の画像」と書く必要はありません。ただし、写真か図面かという形式自体が重要なら含めても構いません。

SEOを意識して同じ語を繰り返すと不自然になります。Google Search Centralは、画像を関連する文章の近くに置き、説明的なファイル名やaltテキストを使うよう案内しています。altだけへ情報を詰め込まず、本文との関係を整えます。

バナーや図解に重要な文字があり、本文に同じ情報がない場合は必要な範囲を含めます。文章量が多い図解は、altへすべて押し込まず、本文にも詳しい説明を用意します。

ロゴを押すとトップページへ移動するなら「トップページへ」、ダウンロードボタンなら「資料をダウンロード」のように目的を書きます。

犬の写真が犬種紹介に使われているなら犬種や特徴が重要です。一方、仕事術の記事の雰囲気づくりとして置かれているだけなら装飾扱いになることがあります。「何が写っているか」だけでなく「なぜここにあるか」で決めます。

用途	altの例
操作画面	WordPress投稿画面の右側にあるカテゴリー選択欄
比較グラフ	A案は月10時間、B案は月6時間の作業時間
使用例	ノートPCをスタンドに置き、外付けキーボードを接続したデスク
リンクアイコン	お問い合わせフォームへ
飾りの背景	空のalt

例文をそのまま使わず、自分のページで画像が担う役割に合わせて調整します。

同じ画像を使い回していても、ページごとの文脈が違えば適切な説明も変わります。実際の掲載箇所で確認しましょう。

画像はaltだけでなく、ページ内容との関連性、表示サイズ、容量、キャプション、ファイル名も確認します。Googleは、関連する文章の近くへ高品質な画像を配置することも画像SEOの基本として案内しています。

公開後はWordPress公開後のSEOチェックリストで表示を確認し、既存記事の画像を直す場合はブログ記事のリライト手順も参考にしてください。関連ページへの導線は内部リンクの貼り方で整理できます。

alt属性は、画像が伝える情報や機能を補うためのものです。内容理解に必要な画像には要点を、リンク画像には操作の目的を書き、純粋な装飾画像は空のaltを検討します。

キーワードを詰め込まず、前後の文章と合わせて自然に理解できるかを確認しましょう。まずは図解や操作画面を使っている記事から見直すと進めやすくなります。