WordPressのカスタマイズ方法やプラグインレビューを中心に、パソコン/動物/植物のことなどを紹介するホームページです
[WordPress] How to automatically replace the “alt” attribute of an image inserted in the text with the page title

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

公開日:2019年6月21日 制作備忘録

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');
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. コードは合っているはずなのに更新できないときは
  6. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「'」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
  7. 「何かが間違っています...」と表示され、更新できないときは
  8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
    ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
これらのエラー対処については以下のページが参考になるかも知れません

コードを転載する場合には

ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします

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

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

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


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

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

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

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

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

後からalt属性を修正する(設定する)方法

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

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

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

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

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

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

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

  • ☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
    ☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。
    ☆Wordpressネタが多いですが、趣味の「園芸」「卓球」などの情報や日々の出来事などもどんどん増やしていきますのでよろしくお願いいたします。

QR Code

このページはモバイル端末でもご覧いただけます

左のQRコードを読み取っていただくと、このページのURLが表示され、簡単にアクセスできます。ぜひモバイル端末でもご覧ください。

WordPressのカスタマイズ・不具合対応などご相談ください

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

【スポンサーリンク】