皆さんはWeb開発やサイトを運営していて「追加した画像にキャプションをつける場合、Alt属性（代替テキスト）も同時に指定できたらいいのにはなぁ…。」と思ったことはありますか？一般的にキャプションは閲覧するユーザー（人間）のため、Alt属性は徘徊するクローラー（Googlebotなどの機械）のためにつけるとされていて、どちらもあるとユーザエクスペリエンスやSEOが良くなり、サイトのアクセス数が増える可能性があります。私は長らくこの点で面倒さを感じていて困っていたので今回JavaScriptでスクリプトを作成しました。もしよかったら参考にしてみてください。
WordPress画像管理の課題を解決！ChatGPTを活用してキャプションとAlt属性を一括設定する方法
皆さんは「静的サイトやWordPressなどのCMSに追加した画像にキャプションをつける場合、Alt属性（代替テキスト）も同時に指定できたらいいのにはなぁ…。」と思ったことはありませんか？
私の運営しているこのブログは生き物について解説することが多くその際、生態写真を多く掲載するのですが、WordPressでは画像のキャプションは編集画面のメイン部分で簡単に指定できますが、Alt属性は編集画面の右側にあるサイドバーから選択し指定することになり、大量の画像を挿入している場合、一目でAlt属性の内容が確認できないので、指定できているかどうかの見落としが多発していました。
そもそも、キャプションとAlt属性は同じ内容になることが殆どで、「だったら同じになるプラグインはないのかな？」と思って探していました。
しかし見つからず、JavaScriptでの生成もできましたが当時では技術力がなくこの件は長らく放置していましたが、最近HTML・CSS・JavaScriptを本格的に学習したことと、生成AIの発展により、ChatGPTとJavaScriptを用いることで解決できることが分かったので、シェアしておきます。
キャプションとAlt属性とは？その違いは？なぜ両方必要？
まず大前提としてなぜキャプションとAlt属性を両方指定しなければならない（とされているか）について解説しておきます。
そもそも、キャプションは画像の説明や補足情報を提供するために使用されます。主にユーザーに対してコンテキストを提供し、理解を助ける役割があります。
キャプションはHTMLではキャプションは通常<figure>要素の中に配置され、その中に要素が使われます。
一方、Alt属性は画像が読み上げられたり、画像が表示できない場合に代替テキストを提供することが元々の目的です。
Alt属性はHTMLでは<img>要素の「属性（attributes）」として指定されます。
HTMLのソースコードで示すと以下のような構造になっています。
<main>
<figure>
<img src="sample.jpg" alt="sample"/> <!--altで指定された部分がAlt属性-->
<figcaption>sample</figcaption> <!--figcaptionで囲まれた部分がキャプション-->
</figure>
</main>ただ、これだけではなぜキャプションとAlt属性を両方指定しなければならないことなっているのか分からないかもしれません。
これはAlt属性の内容が現在では検索エンジン最適化（SEO）の一環としても利用され、検索結果に影響を与える可能性があるとされているからです。
『Google検索』などの検索サイトはGooglebotなどのクローラーを用いてプログラムによってWeb上の情報を収集していますが、このクローラーがAlt属性を参照して検索結果に反映しているとされています。一方、キャプションに関してはそれほど影響しないとされており、サイト閲覧者が記事を見やすくなるというユーザーエクスペリエンスを高める役割があるとされています。
要するに、現代ではキャプションは閲覧するユーザー（人間）のため、Alt属性は徘徊するクローラー（Googlebotなどの機械）のためにあるということです。
つまり、Alt属性を指定しておくことで、『Google画像検索』などの画像検索サイトで自サイトの画像を的確に表示してくれる可能性があるのです。
したがって、一般的はどちらも指定しておくメリットがあるとされています。
ただ、本当にクローラーがキャプションを無視しているのかについては不明なところも多く、それを検証した記事は見たことがないので、個人的にはAlt属性の影響力に確証があるというわけでもありません。
JavaScriptでWordPressに実装する方法
しかし、少しでも影響があるなら最小限の手間で両方指定しておきたいものです。
残念ながらまだJavaScriptのDOM（Document Object Model）の知識が浅く一からの記述は難しかったので、ChatGPT 3.5とともに修正しながら作成することにしました。
そこで得られたのが以下のコードです。
var images = document.querySelectorAll('figure img');
images.forEach(function (img) {
if (!img.alt) {
var figcaption = img.parentElement.querySelector('figcaption');
if (figcaption) {
img.alt = figcaption.textContent || figcaption.innerText;
}
}
});意外にシンプルな内容なので、汎用性は高いと思います。
日本語にすると以下のような操作を行っています。
- ページ内のすべての
figure要素内のimg要素を取得します。 取得された要素はNodeListオブジェクトとしてimages変数に格納されます。 images変数に対してforEachメソッドを使用して、各要素に対して指定された関数を実行します。- 各
img要素のAlt属性が存在しない場合に分岐処理を行います。 img要素に対してparentElementメソッドとquerySelectorメソッドを使用して、img要素の親要素であるfigcaption要素を取得し、その中から最初に見つかった要素をfigcaption変数に格納します。figcaption変数が存在する場合に処理を行います。img要素のAlt属性に、figcaption要素のテキストコンテンツを設定します。textContentが存在すればそれを使用し、存在しない場合はinnerTextを使用します。これは、ブラウザによってはどちらか一方しかサポートしていないことがあるためです。
WordPressの場合は、このスクリプトを編集画面の左にあるメニューバーの「外観」→「テーマファイルエディター」に行き、「テーマファイル」という見出しの下にある「javascript.js」に貼り付ければ動作します。
なお、WordPressなどのCMS（Contents Management System）を利用している場合、HTMLのコードが膨大なため、以下のように本文が含まれるid属性が「main」の範囲のみに絞ることで、軽量化や誤作動防止を実現できます。
セレクターはquerySelectorAll()とgetElementById()の2種類が存在しますが、1つのIDを指定する場合はgetElementById()を使用するほうが、処理が早いです。
更に以下のコードではdocument.addEventListenerメソッドを使用することで、完全にロードされるまで待機してからスクリプトを実行するようにしています。
document.addEventListener('DOMContentLoaded', function () {
var main = document.getElementById('main');
if (main) {
var images = main.querySelectorAll('figure img');
images.forEach(function (img) {
if (!img.alt) {
var figcaption = img.parentElement.querySelector('figcaption');
if (figcaption) {
img.alt = figcaption.textContent || figcaption.innerText;
}
}
});
}
});Alt属性がうまく指定できているか確認する方法は？
うまくAlt属性が指定できているかは『Google Search Console』を確認することで分かります。
『Google Search Console』を利用するには自サイトのURLを予め登録し、投稿した記事もクロール済みにしておく必要があるのでご注意ください。
登録されている場合は確認したい記事のURLを「～内のすべてのURLを検査」と書かれている検索フォームに張り付けて検索してください。
検索後、表示されたページの「クロール済みのページ」をクリックすればGooglebotが認識したHTMLが右側に表示されます。
この右側のコード内を一度クリックして、キーボードで
&amp;lt;kbd&amp;gt;Ctrl&amp;lt;/kbd&amp;gt; + &amp;lt;kbd&amp;gt;F&amp;lt;/kbd&amp;gt;を押せば検索窓が開くのでここで「alt=」を検索すると、画像のalt属性の指定が確認できます。
うまく上記のスクリプトが動作していればalt属性にテキストが追加されているはずです。
この方法のメリットとデメリットは？
この方法のメリットとして勿論、そもそもの目的通り画像のキャプションにテキストを入力すると、自動的にalt属性が指定されるというのがあります。
WordPress（バージョン6.4.2現在）の仕様として画像をビジュアルエディターから追加すると、画像のプロパティの「タイトル」の内容が自動的に挿入されるので、プロパティのタイトルを指定していれば、全て自動で入力することが可能になりそうです。ただ、私は別の用途でこのプロパティを使用しているので行っていません。
もう一つの副産物として感じたのはきちんと画像のキャプションにテキストを追加する習慣がつくということです。
いままで、「別に画像があればサイトを見に来た人には分かるし、キャプションの追加は面倒だからいいか～。」とユーザエクスペリエンスだけを考えて雑に画像を貼り付けてしまうことも多かったですが、SEO向上というメリットも加わるとなると、かなり真面目に、しかも的確な内容になるように入力する癖がつきました。
デメリットに関しては基本的には無いと思っていますが、JavaScriptで動的にコンテンツを生成するという特性上、クローラーがJavaScriptの実行を行わなかったり、実行が遅すぎる場合はうまく認識することができなかった場合は指定できていないかもしれません。JavaScriptなどを多用してサイト自体が重くなっている場合は注意しましょう。
上記のスクリプトでは既にAlt属性が入力されている場合は、そのAlt属性が優先されるようになっているので後からキャプションとAlt属性を別の内容にしたくなっても問題なく反映されます。したがって、Alt属性を個別に指定したい場合は上述のようにビジュアルエディターの右サイドバーから指定しましょう。
もし、Alt属性の入力が面倒だと思っている人はぜひ試してみてください！
