taupe WebとAIと暮らし

Notes / 実践記録

WordPressの記事内の画像にaltを自動で入れるまでの話

WordPressの記事内の画像にaltを自動で入れるまでの話

本ページはアフィリエイトプログラムを利用しています

Bing Webmaster Tools でエラーが出た日から、WordPressの画像altをコードで補完するまで。

GoogleのコアアップデートでDiscover等々にも掲載されなくなり、アクセス数が全盛期の10分の1。
そんなブログも、色々と手を入れていたらだいぶ復調してきた。

ある日 Bing Webmaster Tools を開くと、「alt が設定されていない画像があります」というエラーがずらりと並んでいた。
あぁ、確かに、以前はaltをひとつひとつ設定していたけど、アクセス落ちてからはほったらかしだった。

この記事では、そのとき作った「空のaltに記事タイトルを入れる」仕組みと、今のブログリライトで考えている画像altの扱いをまとめておく。
同じように WordPress を運用している人の参考になれば幸い。

Bing の警告で気づいた、“画像の alt” という基本の大切さ

Bing Webmaster Tools を開いていると、改善項目の中に Image alt missing が出てくることがある。
今回はその量がなかなかの “山” になっていた。

画像の alt というのは、検索エンジンやスクリーンリーダーに「この画像は何を表しているか」を伝える大事な手がかりだ。
AI検索やAIブラウザがページ内容を読む場面でも、画像まわりのテキストは記事の文脈を補う情報になる。

もちろん、画像検索の面でもプラスになるし、アクセシビリティという観点でも必要な情報。

本来なら記事を書きながらセットしておくべきなのだけど、日々の更新の中では漏れがどうしても出る。

普段、私は WordPress を複数運用している。
過去記事まで含めると 画像ひとつひとつの alt をすべて設定するのは、さすがに非現実的だ。

そこで、まとめて自動化することにした。
タイトルを全画像のaltに設定する……設定しないよりは、マシであろう。

ただし、これはあくまで「空欄を残さないための保険」だ。
本来は、画像ごとに何が写っているのかを自然な文章で入れたほうが読みやすい。

プラグインを試したけれど、多機能すぎてしっくりこない

まず手を伸ばしたのはプラグインだった。

WordPress には alt を自動で補完してくれる拡張がいくつもある。

  • BIALTY(Bulk Image Alt Text)
  • Auto Image Attributes
  • SEO系プラグインの画像モジュール
  • AIで画像内容を解析して alt を生成するタイプ

それぞれ強みがあって便利ではあるのだけど、今回求めていたのはもっとシンプルなものだった。
「alt が空の画像に、記事タイトルを入れてくれるだけでいい」という、たったひとつの要件。

プラグインを試すも、無料版では使えなかったり、多機能すぎて重かったり、ページが表示されなくなってしまったり。

結局、プラグインで解決するのは、思ったより遠回りに感じてきた。

“必要な機能だけ” を自分で書いたほうが早いのでは?

そう思ったタイミングで、方向を変えた。

欲しい機能だけコードで書けばいい。
どう動いているか自分で把握できるし、アップデートで予期しない挙動になる心配も少ない。

そしてもうひとつ、今回コード化に踏み切った理由がある。

AIOやAI検索を考えると、画像のaltは「画像だけの説明」ではなく、記事全体の文脈を補う情報としても見たほうがいい。

もちろん、理想は画像ごとに自然なaltを書くことだ。
たとえば料理写真なら料理名、操作画面なら何を設定している画面か、旅先の写真なら場所や見えているものを書く。

ただ、過去記事が多いサイトでは、すべてを一気に直すのは現実的ではない。
だったらまずは「空のaltをなくす」ことを優先し、その後のリライトで重要な画像から自然文に直していく。

ページタイトルを alt のデフォルト値にする仕組みは、そのための最低限の土台として考えると扱いやすい。

functions.php にコードを追加する

最終的に書いたのが、以下のコード。

これは、本文内の画像も、アイキャッチ画像も、alt が空なら記事タイトルを自動で入れるという形。

確認日: 2026年6月30日。
WordPressのImageブロックでは、画像を挿入したあとにaltテキストを設定でき、メディアライブラリ側の代替テキストも使われる。

/*----------------------------------------------
  本文内の画像 → alt="" の場合は記事タイトルをセット
----------------------------------------------*/
function mf_auto_alt_from_title( $content ) {
    if ( empty( $content ) ) return $content;

    libxml_use_internal_errors( true );
    $dom = new DOMDocument();
    $dom->loadHTML( '<?xml encoding="utf-8" ?>' . $content );
    $imgs = $dom->getElementsByTagName( 'img' );

    $post_title = get_the_title();

    foreach ( $imgs as $img ) {
        $alt = $img->getAttribute( 'alt' );
        if ( $alt === '' ) {
            $img->setAttribute( 'alt', esc_attr( $post_title ) );
        }
    }

    $html = $dom->saveHTML();
    $html = preg_replace( '/^.*?<body>(.*)<\/body>.*$/si', '$1', $html );

    return $html;
}
add_filter( 'the_content', 'mf_auto_alt_from_title', 20 );


/*----------------------------------------------
  アイキャッチ画像 → alt="" の場合は記事タイトルをセット
----------------------------------------------*/
function mf_featured_image_auto_alt( $html, $post_id ) {
    if ( empty( $html ) ) return $html;

    $post_title = get_the_title( $post_id );

    if ( strpos( $html, 'alt="' ) === false ) {
        $html = str_replace( '<img', '<img alt="' . esc_attr( $post_title ) . '"', $html );
    } else {
        $html = preg_replace(
            '/alt="\s*"/i',
            'alt="' . esc_attr( $post_title ) . '"',
            $html
        );
    }

    return $html;
}
add_filter( 'post_thumbnail_html', 'mf_featured_image_auto_alt', 20, 2 );

このコードのおかげで、alt の未設定画像はゼロになり、Bing Webmaster Tools の警告も消えた。

過去記事を大量に抱えているサイトでも、これなら確実に救ってくれる。
もちろん、必要なら後から手で alt を上書きできるので柔軟性も損なわない。

今のリライトでは、画像ごとの自然なaltに直している

この仕組みを入れたあと、ブログのリライト作業では画像altを改めて見直すようになった。

記事タイトルのaltは空欄よりずっといい。
ただ、読者にも検索にもAIにも伝わりやすいのは、やはり画像ごとの自然な説明だ。

たとえば釣魚料理の記事なら「皿に盛ったマゴチの刺身」、旅記事なら「成田空港第3ターミナルのフードコート」、技術記事なら「WordPressの画像ブロックでaltを設定する画面」のように書く。

つまり、このコードは最終形ではなく、リライト前の安全網。
日々の記事では自動補完で漏れを防ぎ、アクセスがある記事や重要な記事から、人間が画像に合わせたaltへ直していく運用にしている。

運用を続ける中で感じた、この方法の“ちょうど良さ”

自動化は便利だけれど、やりすぎると管理しづらくなる。
一方で、手動ですべてを設定するには膨大な時間が必要だ。

今回のやり方は、その中間にある “ちょうど良い解決策” だった。

  • alt が空のときだけ自動補完
  • 元から alt がある画像は尊重
  • 画像の追加やリライトでも壊れない
  • 仕組みがシンプルで動作が安定
  • SEO と AI検索にも最低限の情報を渡せる

こうした「必要なところだけ、確実に支える」仕組みは、日々の更新サイクルと相性が良い。

こうした一個ずつの改善が積み重なって、検索エンジンにも AI にも読みやすいサイトが育っていく……といいなぁ。

AIチーム運用の中で読むなら

画像altの見直しは、単体のSEO作業というより、既存記事を育て直す作業の一部だ。
記事の検索意図、内部リンク、公開HTML、収益導線と一緒に確認すると、古い記事でももう一度読まれる形に戻しやすい。

参考・出典

WordPress公式ドキュメントのImageブロックとMedia Libraryの説明を確認しました。
WordPressの画面や仕様は変わることがあるため、実際に設定する場合は現在の管理画面も合わせて確認してください。

続けて読む

次に読むなら、これ。

同じテーマの実践記録や、taupeの読み方へ進めます。

同じテーマ技術メモ近い実践記録をカテゴリから続けて読めます。サイトの読み方FAQ運用方針や、よくある質問を確認できます。taupeについてこのサイトについてどんな視点で作り、使い、運用しているかをまとめています。

Category

Author / Official hub

イシカワヒデカズの実践記録

Web制作、開発、AI活用、メディア運営の相談先は公式サイトにまとめています。