【WordPress】アイキャッチ画像にaltがない場合の自動設定方法

画像においてalt属性は、検索エンジンに画像の内容を理解させる大切な情報です。

適切なalt属性を設定することで、検索エンジンに記事内容を正しく伝えることができます。また、画像が表示されない環境やスクリーンリーダー利用者にも情報を届けられるため、SEOとアクセシビリティの両面で重要です。

画像を指定するタイミングでalt属性を忘れずに設定できれば問題ないのですが、忘れてしまったときに自動でalt属性を付与する機能を追加しました。

具体的にはサムネイル画像を表示するPHPを以下のように記載しています。

<?php if(has_post_thumbnail( )) : ?>
    <?php
        $thumbID = get_post_thumbnail_id( $post->ID ); // サムネイルのIDを取得
        $thumbAlt = get_post_meta( $thumbID, '_wp_attachment_image_alt', true); // サムネイルのalt属性を取得

    if ($thumbAlt == '') { // alt属性が空の場合は「記事タイトル | サイト名」に設定
        $thumbAlt = get_the_title() . ' | ' . get_bloginfo( 'name' );
    }
    ?>
    <img src="<?php the_post_thumbnail_url(); ?>" alt="<?php echo $thumbAlt; ?>">
<?php endif; ?>

構造は簡単で

1. サムネイルの有無を確認
2. サムネイルがあったときはサムネイルの画像IDを取得
3. 画像IDを使ってサムネイルのalt属性を取得
4. サムネイルのalt属性がない場合は「記事タイトル | サイト名」を指定
5. 画像を出力

という流れになっています。

あくまでalt属性は自身でひとつひとつ設定することがベストですが忘れてしまった時の救済措置としてアイキャッチ画像にalt属性を自動付与する方法を紹介しました。

参考になれば幸いです。

以下の記事を参考にさせていただきました。

• WordPress画像のaltを取得する方法
• 【WordPress】アイキャッチ画像のalt属性に自動で記事タイトルを設定する方法