WordPress画像のalt属性とは？設定方法とSEOで注意したいポイント

WordPressに画像を追加するとき、「代替テキスト（alt）」には何を入力すればよいのでしょうか。画像の説明を書けばよいと聞いても、SEOへの影響や、どの画像にも設定するべきなのかは迷いやすいところです。

alt属性は、画像の内容や役割を文字で伝えるためのHTML属性です。この記事では、WordPressでの具体的な設定方法と、画像の用途に応じた書き方、設定後の確認方法を解説します。

WordPress画像のalt属性とは？

alt属性とは、画像を表示するHTMLのimg要素に指定する代替テキストです。画像を見られない利用者に内容や機能を伝えるために使われ、検索エンジンが画像の内容を理解する際にも参考にされます。

例えば、WordPressの設定画面を紹介する画像であれば、単に「WordPress」と書くよりも、「WordPressのメディアライブラリにある代替テキスト入力欄」と説明する方が、画像の役割を具体的に伝えられます。

alt属性が役立つ3つの場面

• アクセシビリティ：スクリーンリーダー（画面の情報を音声などで伝える支援技術）が画像の代替テキストを利用できます。
• 画像を表示できない場合：画像の読み込みに失敗したとき、ブラウザや表示環境によって代替テキストが表示されることがあります。
• 画像SEO：Googleなどの検索エンジンが画像の主題やページとの関連性を理解するための情報になります。

ただし、alt属性を設定しただけで検索順位が上がるわけではありません。画像自体の品質、周辺の文章、ページ全体の関連性なども重要です。

alt属性と画像タイトル・ファイル名の違い

これらは別々の項目です。ファイル名や画像タイトルを設定しても、alt属性を設定したことにはなりません。

WordPressで画像のalt属性を設定する方法

WordPressでは、主にメディアライブラリと記事編集画面から代替テキストを設定できます。ここでは標準的なブロックエディターを前提に説明します。テーマやWordPressのバージョン、使用する編集機能によって表示が異なる場合があります。

方法1：メディアライブラリから設定する

すでにアップロードした画像の代替テキストを登録・編集するときに便利な方法です。

1. WordPressの管理画面にログインします。
2. 左側のメニューから「メディア」→「ライブラリ」を開きます。
3. 設定したい画像を選択します。必要に応じて一覧表示から画像の編集画面を開きます。
4. 「代替テキスト」欄に、画像の内容や役割を表す文章を入力します。
5. 編集画面に保存・更新操作がある場合は実行し、変更内容を確認します。

入力する文章は、画像だけを見られない読者にも意味が伝わるものにしてください。

注意：メディアライブラリの代替テキストと、すでに記事へ挿入した画像ブロックのalt属性が常に自動同期されるとは限りません。公開済み記事で使用している画像は、記事側の設定も確認してください。

方法2：ブロックエディターから設定する

記事内で画像を使う場合は、画像ブロックを選択して代替テキストを設定できます。

1. 対象の記事または固定ページの編集画面を開きます。
2. alt属性を設定したい画像ブロックを選択します。
3. 右側の設定サイドバーを表示し、画像ブロックの設定を開きます。
4. 「代替テキスト」欄に適切な説明を入力します。
5. 記事を更新し、公開ページの画像に設定が反映されているか確認します。

記事ごとに画像の役割が異なる場合は、使用する場所に合わせた説明にしてください。同じ画像であっても、文章の文脈によって適切な代替テキストが変わることがあります。

方法3：HTMLで直接指定する

カスタムHTMLブロックなどで画像を記述する場合は、img要素のalt属性を指定します。

<img src="wordpress-alt-setting.webp" alt="WordPressの代替テキスト設定画面">

この例では、srcが画像ファイルの場所、altが画像の代替テキストです。

装飾目的で、画像自体に伝えるべき情報がない場合は、次のように空のalt属性を指定することがあります。

<img src="decoration.webp" alt="">

ただし、意味のある画像に空のalt属性を設定すると、必要な情報が支援技術の利用者に伝わらなくなる可能性があります。

SEOに配慮したalt属性の正しい書き方

alt属性は、検索キーワードを並べる場所ではなく、画像の内容や機能を適切に伝える場所です。文章の長さを機械的に決めるよりも、画像を見られない場合に何を伝える必要があるかを基準にしてください。

画像の内容を具体的かつ簡潔に説明する

例えば、WordPressのメディアライブラリにある代替テキスト入力欄を示す画像なら、次のように書き分けられます。

「画像」「写真」といった言葉を毎回冒頭に付ける必要はありません。ただし、画像の種類そのものが意味を持つ場合は、その情報を含めることもあります。

画像の用途によって書き方を変える

すべての画像に同じ形式の説明を付けるのではなく、画像の役割に応じて判断します。

例えば、リンクとして機能する虫眼鏡アイコンなら、見た目だけを説明する「虫眼鏡」よりも、用途を表す「サイト内を検索」の方が適切な場合があります。

キーワードの詰め込みを避ける

画像SEOを意識するあまり、同じキーワードを繰り返すのは避けてください。Googleは、画像のalt属性に不自然なキーワードを詰め込まないよう案内しています。

画像の内容と一致する言葉であれば、検索キーワードが自然に含まれても問題ありません。しかし、画像と関係のない語句を追加する必要はありません。

alt属性を空欄にしてよい画像とは？

すべての画像に説明文を入力することが正解とは限りません。重要なのは、その画像が読者に情報を伝えているかどうかです。

例えば、区切り線の代わりに配置した装飾画像や、本文と重複するだけの飾り画像では、空のalt属性が適切な場合があります。

一方、操作手順のスクリーンショット、重要な情報を含む図解、リンクボタンとして機能する画像などは、画像の役割を説明する必要があります。

「alt属性がない状態」と「alt=””を指定した状態」は同じではありません。装飾画像に空の代替テキストを使う場合は、HTML上で空文字列が指定されていることを確認してください。

なお、画像の代替テキストを空にしても、本文中に必要な情報を省略してよいわけではありません。

設定したalt属性が反映されているか確認する方法

WordPressの入力欄に文章が表示されていても、公開ページのHTMLに想定どおり出力されているかは別途確認できます。

ブラウザの開発者ツールで確認する

1. alt属性を確認したい記事の公開ページを開きます。
2. 対象画像を右クリックし、「検証」などのメニューを選択します。
3. 開発者ツール（WebページのHTMLなどを確認できるブラウザ機能）で、対象のimg要素を探します。
4. alt属性の値が、意図した代替テキストになっているか確認します。

例えば、次のように表示されていれば、HTML上で代替テキストが指定されています。

<img src="example.webp" alt="WordPressの画像設定画面">

alt属性自体が存在しない場合、空文字列が指定されている場合、意図した文章が設定されている場合を区別してください。

変更が反映されないときの確認事項

代替テキストを変更したのに公開ページへ反映されない場合は、次の順番で確認すると原因を絞り込みやすくなります。

1. 編集している画像と、公開ページで表示されている画像が同じか確認します。
2. 記事内の画像ブロックにも代替テキストが設定されているか確認します。
3. 記事を更新した後、公開ページを再読み込みします。
4. キャッシュ（表示を高速化するために保存されたデータ）がある場合は、影響を確認します。
5. テーマやプラグインが画像HTMLを変更していないか確認します。

キャッシュの削除やプラグインの停止は、サイトの表示に影響することがあります。まずは設定内容と公開HTMLを照合し、必要な場合だけ影響範囲を確認して対処してください。

WordPress画像のalt属性に関するよくある疑問

alt属性を設定すればGoogle画像検索に表示されますか？

alt属性の設定だけでGoogle画像検索への掲載が保証されるわけではありません。Googleは画像の内容を理解する際にalt属性のほか、ページ内の文章や画像周辺の情報なども利用します。画像が検索エンジンにアクセス可能であることも重要です。

alt属性は何文字にするのが適切ですか？

すべての画像に適用できる絶対的な文字数の正解はありません。画像の目的に必要な情報を、簡潔かつ具体的に伝えることを優先してください。長い説明が必要な図表では、詳細を本文で説明する方法も有効です。

同じ画像を複数の記事で使う場合、alt属性も同じでよいですか？

画像が同じ役割で使われるなら、同じ代替テキストが適切な場合もあります。ただし、記事によって説明したい内容や画像の機能が異なるなら、その文脈に合わせて調整してください。

アイキャッチ画像にもalt属性は必要ですか？

アイキャッチ画像も、実際の表示場所と役割に応じて判断します。記事の内容を伝える画像なら適切な代替テキストが役立ちます。一方、記事タイトルと完全に重複する装飾的な画像やリンク画像では、周辺のテキストやリンク全体の機能を考慮する必要があります。

アイキャッチ画像の表示方法はWordPressテーマによって異なります。例えば、THE THORでアイキャッチ画像を非表示にする設定方法のように、テーマ固有の表示設定が関係する場合もあります。

まとめ：alt属性は画像の役割に合わせて設定する

WordPressのalt属性は、画像の内容や機能を文字で伝えるための重要な設定です。SEOだけを目的にキーワードを並べるのではなく、画像を見られない読者にも必要な情報が伝わる文章を入力してください。

まずは記事内の操作画面や図解など、情報を持つ画像から設定を見直すとよいでしょう。設定後は公開ページのHTMLも確認し、必要に応じて記事ごとの説明を調整してください。

あわせて読みたい記事

次に知りたいことや、役立つ情報をまとめました。

【WordPress】Web制作

WordPressのパーマリンク設定方法｜おすすめのURL構造と変更時の注意点

WordPressのパーマリンクは、記事URLの構造を決める重要な設定です。初心者におすすめの設定、変更手順、SEOへの影響、既存記…

記事を読む →

【WordPress】Web制作

WordPressのカテゴリーとタグの違いとは？SEOを意識した使い分けと設定方法

WordPressのカテゴリーは記事を大きなテーマで分類する仕組み、タグはテーマを横断して関連する記事を結び付ける仕組みです。それぞ…

記事を読む →

【WordPress】Web制作

WordPressの固定ページと投稿の違いとは？使い分け・設定方法を初心者向けに解説

WordPressの固定ページと投稿は何が違うのでしょうか。用途や機能の違い、作成方法、トップページ設定、間違えて作成した場合の対処…

記事を読む →

関連記事の一覧を見る →