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

WordPressの記事内の画像にaltを自動で入れるまでの話 ライフログ

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

Bing Webmaster Tools でエラーが出た日から、コードで解決するまで。

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

ある日 Bing Webmaster Tools を開くと、「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 Optimization）を考えると “記事タイトルの alt” は非常に相性がいい

AI 検索はページの隅々まで解析し、「この画像はどの文脈で使われているのか」という情報を細かく判断していく。

記事タイトルはそのページのテーマを最も的確に表すテキストだ。
つまり、「alt にタイトルを入れる」という行為は、AI検索の文脈理解とも相性がいい。

無理にすべて画像ごとに説明を書くより、“最低でも文脈を正しく伝える” ほうが、AIにとっては有益になることもある、であろう。
だったら、ページタイトルを alt のデフォルト値にする仕組みが最も合理的だと判断した。

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

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

これは、本文内の画像も、アイキャッチ画像も、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 がある画像は尊重
  • 画像の追加やリライトでも壊れない
  • 仕組みがシンプルで動作が安定
  • SEO と AIO にも必要十分な情報を渡せる

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

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

タイトルとURLをコピーしました