画像にalt属性を自動設定する方法｜SEO評価を上げる実装コード

この記事では、WordPressでアップロードされた画像に自動でalt属性を設定し、SEO効果を高める方法を解説します。
投稿タイトルや記事タイトルを元にaltを自動生成することで、Google画像検索からの流入増加が期待できます。

1 重要

alt属性は目の不自由な方や視力の弱い方に、スクリーンリーダーで読み上げるための「代替テキスト」で画像やイラストの内容を伝える為のものと画像がリンク切れで表示されないときに文字としてホームページ上に表示されます。SEO対策の為だけに存在しているのではありません。

その為、これから説明するalt属性の自動で説明を入れる方法は、推奨しておりません。意味のない装飾の為のイメージ写真や画像なら「alt=""」で空白にして下さい。

alt属性の簡単な説明ですが、猫の写真を単に「alt="ねこ"」としている人がいらっしゃいますが、目の見えない人、視力の弱い方には写真のイメージが伝わりません。
「alt="リビングのソファーの上を走り回る白い毛並みの子猫"」
「alt="猫じゃらしを振ったら飛びついてはしゃいでいるキジドラ猫"」
などの説明で、ようやく写真のイメージが伝わるのです。

ですので、ここでは単にTipsとして「こういうTipsもありますよ」と掲載しているだけです。正直、掲載しないほうがいいかなとも思っています。ただ、alt属性代替テキストを雑に書いている人もいますので、alt属性は目の不自由な人にとって重要ですということを忘れないでという意味で掲載しています。
※alt属性の説明は別のページで説明します。

2 実装のポイント

• 画像にaltが空の場合のみ、自動でタイトルを挿入
• 投稿ページ → 投稿タイトルをaltに使用
• 固定ページ → ページタイトルをaltに使用
• テーマに依存せず動作

3 functions.php にコードを追加

//-------------------------------------------
//本文中の img タグに alt を自動補完
//-------------------------------------------
function add_alt_to_content_images($content) {
    global $post;
    if (!$post) return $content;

    $title = get_the_title($post->ID);

    // img タグを探して置換
    $content = preg_replace_callback(
        '/<img([^>]*)>alt\s*=\s*""([^>]*)>/i',
        function ($matches) use ($title) {
            // alt="" を alt="記事タイトル" に置換
            return '<img' . $matches[1] . 'alt="' . esc_attr($title) . '"' . $matches[2] . '>';
        },
        $content
    );

    return $content;
}
add_filter('the_content', 'add_alt_to_content_images');

4 完成イメージ

5 代用プラグイン

コード編集に不安がある場合は、プラグインで代用できます。

• ▶ Auto Image Alt
• ▶ SEO Friendly Images

6 まとめ

alt 属性を自動設定することで、SEO対策とユーザビリティ向上の両方に役立ちます。