本文内に挿入した画像のalt属性の設定がない場合に自動でページタイトルとサイトタイトルを設定する方法

公開日：2019年6月21日
更新日：2020年6月19日

SEO（検索エンジン最適化）対策として、よく話題に挙がるのが、挿入している画像の代替文字列（alt属性）はきちんと設定しておいた方がいいという話。

このalt属性というのは、どんな画像なのかを説明するための文字列で、画像が表示できない環境で閲覧した場合に表示されるというのが主な目的です。要は「ここにはこんな内容の画像が普通は表示されますよ！」と閲覧者に知らせるわけです。これは検索エンジンクローラーについても同じことが言えるようで、クローラーがページの中身を分析する際に、「画像タグがあるのはわかるけど、いったい何の画像なんだい？？」を知らせる意味合いとして、alt属性の設定は必須かもしれません（ないと機械的には読み飛ばされてしまう可能性がある）。

ただこればかりは検索エンジンクローラーが何を見てどう判断するのかについて、開発者でない限り確定的なことは言えません。逆に以前に問題となり、Googleの検索エンジンクローラーでは無視するようになった「meta keywords」と同じように、その投稿とは関係ない内容や、キーワードを詰め込んだだけのものを設定すると、マイナス評価されてしまうことすらあるのかもしれません。

が、きちんと設定しておけば問題は無いわけですし、最近ではあまりないことではありますが、前述したように「画像が表示できない環境の人」へ表示する文字列としては設定しておいた方が親切なのではないかと思います。

・・・と言われても今まで何もしてこなかったし・・・今更過去の投稿全部見直すのもねぇ・・・そんな方も多いと思います。そこで今回は私のようなズボラーさんのために、過去の投稿も含めて、本文内に挿入されている画像のうち、alt属性が設定されていないものに対して、自動で「投稿タイトル|サイトタイトル」を設定してしまおうという方法をご紹介します。

ページ上部へ戻る▲

本文内に挿入した画像で「alt」属性が空の場合、自動でページタイトルとサイトタイトルを設定する方法

偉そうに紹介します！なんて言ってますけど実際は簡単なコードで実装できます。

方法は、有効化しているテーマのfunctions.php末尾へ以下のコードを追加するだけです。

※環境によってはエラーが出る可能性がありますので、functions.php？？という方にはおすすめしません。

//記事内のaltが設定されていなかったら、投稿タイトルとサイトタイトルを表示させる
function ha_auto_alt_filter($html) {
global $post;
$post_title = get_the_title();
$site_title = get_bloginfo( 'name' );
preg_replace('|alt=" "|U', '$1 alt="'.esc_attr($post_title).'の画像| '.esc_attr($site_title).'"', $html);
}
add_filter('the_content', 'ha_auto_alt_filter');

※Gutenbergエディタの整形済みテキストブロックでは誤動作してしまうようですので、コードをコピーしたら、5行目の「alt=” “」を「alt=””」（”の間の半角スペースを削除）にしてください

細かいコード解説は省きますが、簡単に説明すると、単独の投稿本文の中でalt=””(alt属性の設定が空)のものに対して、「投稿タイトルの画像|サイトタイトル」というのを入れ込みなさいというコードになります（ここまでの説明通り・・・）。

追記と保存が終わったら、画像が挿入されている投稿をソース表示して、alt属性が設定してあるものはそのままの文字列が、設定されていないものは「投稿タイトルの画像|サイトタイトル」が出力されているかを確認してみてください。

冒頭で書いた通り、これが検索エンジンの最適化に貢献するのか否かも不明ですし、ややもすればマイナス要素になることかもしれません。ちなみに私の管理するサイトでは自作テーマを使っており、当然このコードも使用してalt属性の自動設定をさせるようにしています。

ページ上部へ戻る▲

おまけ情報　Gutenbergエディタで画像のalt属性を設定するには

Gutenberg(最近標準となったブロックエディタ)で画像のalt属性の設定ってどうやればいいの？という声がありますので、おまけ情報として掲載しておきます。

画像の挿入段階でalt属性を設定する方法

画像ブロックを追加して挿入する場合も、クラシックブロックでメディアアイコンをクリックして挿入する場合も以下のような画面が出てきます。その画面の右（赤枠の部分）にalt属性（代替テキストと書いてあります）を入力すれば、挿入した画像についてその文字列が挿入されます。

後からalt属性を修正する（設定する）方法

既に挿入済みの画像に対して変更や追加をしたい場合には、以下の手順で行います

下図のように①対象の画像をクリック→②上に出てくるボタンの中の「鉛筆」マークをクリック

修正（新規追加）する代替文字列を入力して右下の「挿入」をクリック

※この編集は代替文字列だけでなく、画像挿入時と同じ項目の再設定ができます

たったこれだけの作業でいつでも追加や変更ができます。方法を知ってれば怖いものはありませんね。

ページ上部へ戻る▲

後述　WordPressではそもそも画像アップロード時に設定しておけばいい話

今回は後から何とかする方法とおまけ情報としてGutenbergエディタでの設定方法を紹介しましたが、そもそも最初から（画像をアップロードしたらすぐ）設定しておけば、その後投稿などに挿入する画像に対してはあらかじめ設定してあるalt属性が付与されるので、画像をアップロード→どこかに使う前にalt属性の設定をするという癖をつけておけば問題ない話です。