WordPressカスタマイズ:画像のalt属性が空欄なら記事タイトルを自動挿入する方法【プラグイン不要】

SEOを意識してブログ運営をしていると、画像のalt属性(代替テキスト)を毎回入力するのが面倒に感じることはありませんか?
- 画像を何枚も使う記事で、alt属性の入力が追いつかない
- 入れ忘れてそのまま公開してしまった
- WordPressが自動で出力する空のalt属性(
alt=""
)が気になる
そんな方に向けて今回は、プラグインを使わずに、alt属性が未入力の画像に記事タイトルを自動で挿入する方法をご紹介します。
なぜalt属性が重要なのか?
- SEO(検索エンジン最適化):Google画像検索の対象となる
- アクセシビリティ:視覚に障害のあるユーザーが使う読み上げソフトが内容を認識しやすくなる
- ページの構造が明確になるため、サイトの信頼性向上にも貢献
方法①:画像挿入時のalt/title属性を制御する
WordPressで画像を記事に挿入すると、alt
やtitle
は「代替テキスト」フィールドから取得されます。このフィールドが空の場合に、空の属性だけが出力されてしまいます。
以下のコードをfunctions.php
に追加することで、代替テキストが入力されている場合はそのまま使用し、空欄の場合は空のalt/title属性を明示的に追加できます。
// 代替テキストがあるとき→入力値を反映、ないとき→空のalt/titleを入れる
function auto_title_filter($html, $id, $caption, $title, $align, $url, $size, $alt){
if ( $alt !== ” ) {
return preg_replace(‘|alt=”[^”]“|U’, ‘$1 alt=”‘.esc_attr($alt).'” title=”‘.esc_attr($alt).'” ‘, $html,1); } else { return preg_replace(‘|alt=”[^”]“|U’, ‘$1 alt=”” title=””‘, $html,1);
}
}
add_filter(‘image_send_to_editor’, ‘auto_title_filter’, 1, 8);
方法②:記事表示時に空のalt/titleを記事タイトルに自動置換
記事が表示されるタイミングで、alt=""
やtitle=""
となっている場合に、記事タイトルを挿入する処理です。既に公開済みの記事でも適用できます。
// 空のalt・title属性を記事タイトルで補完
function auto_alt_filter($html) {
global $post;
$post_title = get_the_title();if ( $post_title !== ” ) {
$html = str_replace(‘alt=””‘, ‘alt=”‘.esc_attr($post_title).'”‘, $html);
$html = str_replace(‘title=””‘, ‘title=”‘.esc_attr($post_title).'”‘, $html);
} else {
$html = str_replace(‘alt=””‘, ‘alt=”画像の説明です”‘, $html);
$html = str_replace(‘title=””‘, ‘title=”画像の説明です”‘, $html);
}return $html;
}
add_filter(‘the_content’, ‘auto_alt_filter’);
記事タイトルが空欄でも「画像の説明です」というプレースホルダーが代わりに挿入されます。
方法③:すべてのalt/titleを強制的に記事タイトルに上書きする
「画像が大量にある」「alt属性を全部記事タイトルで統一したい」といった場合に有効な方法です。
// 全てのalt/title属性を強制的に記事タイトルで上書き
function auto_alt_filter($html) {
global $post;
$post_title = get_the_title();$html = preg_replace(‘|alt=”[^”]“|U’, ‘alt=”‘.esc_attr($post_title).'”‘, $html); $html = preg_replace(‘|title=”[^”]“|U’, ‘title=”‘.esc_attr($post_title).'”‘, $html);
return $html;
}
add_filter(‘the_content’, ‘auto_alt_filter’);
このコードは、すでに記述済みのalt属性やtitle属性をすべて上書きするため、慎重に利用してください。
まとめ
- プラグイン不要でSEOに有利なalt属性を自動補完
- 画像挿入時の処理と、記事表示時の処理、どちらもカスタマイズ可能
- Google画像検索への露出アップや、アクセシビリティ向上にも貢献
- 過去記事にも適用できるため、alt属性の抜け漏れを簡単に対処
おすすめの使い方
- 個別のaltを丁寧に入力できるときは方法①
- 入力を忘れた場合の保険にしたいなら方法②
- alt/titleすべてを簡単に記事タイトルで統一したいなら方法③
画像SEOの改善は小さなことですが、積み重ねると確実に成果に繋がります。プラグインに頼らず、軽量なままでしっかり対策したい方はぜひ取り入れてみてください。
テーマ別に最適なカスタマイズコードの書き方
WordPressのテーマによっては、出力されるHTML構造やフィルターの適用タイミングが異なるため、標準のthe_content
フィルターだけでは意図通りに動作しないことがあります。ここでは、よく使われるテーマに対して調整が必要なポイントや、より効果的な実装方法をご紹介します。
Cocoon(コクーン)
Cocoonはフィルター処理が多めのテーマですが、the_content
フィルターは素直に適用されます。ただし、キャッシュや高速化機能があるため、変更後はキャッシュ削除を忘れずに。
// Cocoonではそのまま使用可能。変更後にキャッシュクリアを!
add_filter(‘the_content’, ‘auto_alt_filter’);
SWELL
SWELLでは、画像ブロックがGutenberg(ブロックエディター)をベースにしており、figure
タグや<noscript>
タグが付属するケースがあります。alt=""
だけでなくdata-src
やsrcset
に注意。
// SWELLでも基本動作しますが、srcsetやdata属性の加工は別対応が必要
add_filter(‘the_content’, ‘auto_alt_filter’);
SWELLでは lazy load プラグインとの併用時にalt
挿入が効かないケースがあります。
SANGO(サンゴ)
SANGOはHTML出力が比較的素直です。alt=""
の書き換えは標準通り動作します。
// SANGOも特別な処理は不要。functions.phpへ追加でOK
add_filter(‘the_content’, ‘auto_alt_filter’);
JIN / JIN:R
JIN系テーマは画像装飾をしっかり行っているため、場合によっては出力HTMLにクラス名が追加されます。img
タグそのものには影響しないため、コードはそのまま使用できます。
Lightning / ExUnit系
Lightningなど公式系テーマでは、ExUnit(拡張機能)による自動処理があるため、画像まわりの処理が複雑なケースも。うまく反映されない場合は、image_send_to_editor
も一緒に使うのがおすすめです。
add_filter(‘the_content’, ‘auto_alt_filter’);
add_filter(‘image_send_to_editor’, ‘auto_title_filter’, 1, 8);
オリジナルテーマや軽量テーマ(Twenty Twenty系など)
クラシックなテーマや自作テーマでは、HTML出力がシンプルなので、提示したすべてのコードがそのまま活用可能です。title属性の必要有無に応じて使い分けましょう。
注意点と併用プラグイン
- キャッシュ系プラグイン(WP Super Cache、W3 Total Cache)などを使っている場合は、変更後にキャッシュをクリアしてください。
- 画像の最適化プラグイン(EWWW Image Optimizer、ShortPixelなど)とは基本的に干渉しませんが、lazy load機能がある場合は画像表示後に
alt
が上書きされないか検証しましょう。
多くのテーマでthe_content
フィルターは有効ですが、ブロックエディター対応やキャッシュ処理の仕組みによって、微調整が必要なケースもあります。