画像のalt属性を正しく設定する理由と方法
WordPressで記事を書いていて、画像をアップロードすると「代替テキスト」という入力欄が表示されるのを見たことがあるのではないでしょうか。「空欄のままでも画像は表示されるし、後回しでいいかな」と、つい飛ばしてしまいがちな項目です。
しかし、この代替テキスト(HTML上ではalt属性と呼ばれます)は、SEOやアクセシビリティの面で意味のある設定項目です。この記事では、SEO初心者の方に向けて、alt属性とは何か、なぜ設定すべきなのか、そして具体的な書き方を解説します。
alt属性とは
alt属性とは、画像の内容を文字で説明するために、HTMLの画像タグに付与する属性です。
<img src="office.jpg" alt="明るい窓際に並んだ3つの作業デスク">
通常、alt属性の内容は画面上には表示されません。ただし、次のような場面でその役割を果たします。
- 通信環境の問題などで、画像が表示できなかったときに、代わりに文字が表示される
- 目の不自由な方が利用する**スクリーンリーダー(音声読み上げソフト)**が、画像の内容を読み上げる
- 検索エンジンが、画像の内容を理解する手がかりとして参照する
alt属性を設定する理由
1. 検索エンジンに画像の内容を伝えるため
検索エンジンは、画像そのものを人間のように見て理解するだけでなく、周辺のテキストやalt属性といった情報も手がかりにして、画像の内容を把握しているとされています。alt属性を適切に設定しておくことで、画像の内容や、そのページが何についてのものかを、検索エンジンに伝えやすくなります。
2. 画像検索からの流入につながる可能性がある
Googleなどの画像検索で、自社サイトの画像が表示されれば、そこからサイトへの訪問につながる可能性があります。alt属性は、画像検索において画像の内容を判断する材料の一つとされているため、設定しておくことで、画像検索経由の流入機会を増やせる可能性があります。
3. アクセシビリティ(誰にとっても使いやすいサイトにする)の向上
視覚に障害のある方は、スクリーンリーダーを使ってWebサイトの内容を音声で聞いています。alt属性が設定されていない画像は、「画像」とだけ読み上げられたり、ファイル名がそのまま読み上げられたりして、何の画像なのかが伝わりません。alt属性を適切に設定することは、すべての閲覧者に対して情報を平等に届けるための、基本的な配慮でもあります。
4. 画像が表示されないときの代替情報になる
通信環境が悪い場合や、ブラウザの設定で画像表示をオフにしている場合など、画像が表示されない状況は意外と起こり得ます。そうした場面でも、alt属性があれば、画像に何が写っていたのかを文字で把握してもらえます。
alt属性
WordPressでの設定方法
記事の編集画面から設定する
- 記事の編集画面で、画像ブロックを選択する
- 画面右側の設定パネルを開く
- 「代替テキスト(alt属性)」という入力欄に、画像の内容を説明する文章を入力する
画像を挿入するたびに入力する習慣をつけておくと、設定漏れを防げます。
メディアライブラリから設定する
管理画面の「メディア」→「ライブラリ」から対象の画像を選び、詳細画面で「代替テキスト」を入力することもできます。ここで設定した内容は、その画像を今後新しく記事に挿入した際に、初期値として反映されます。ただし、すでに記事に挿入済みの画像には、後からメディアライブラリで設定を変更しても反映されない場合があるため、既存の記事の画像を修正したい場合は、記事側の編集画面で個別に確認することをおすすめします。
よくあるつまずきポイント
画像のファイル名がそのままalt属性になっていないか
画像をアップロードした際、ファイル名(例:IMG_1234.jpg)が自動的に入力されている場合があります。これは画像の内容を説明するものではないため、適切な文章に書き換えましょう。
過去の記事で、alt属性が未設定のままになっていないか
すでに公開している記事の中に、alt属性が空欄のままの画像が残っていることがあります。すべての記事を一度に見直すのは大変ですが、アクセスが多い記事や、重要度の高い記事から優先的に確認していくと、効率的に改善を進められます。
画像1枚ごとに内容が異なる説明になっているか
同じ記事内の複数の画像に、同じalt属性をコピーして使い回してしまうと、各画像の内容の違いが伝わらなくなります。画像ごとに、その画像固有の内容を説明するようにしましょう。
まとめ
alt属性は、地味な設定項目に見えて、SEO・アクセシビリティ・画像検索流入といった複数の面で役立つ、基本的ながら重要な設定です。
- 画像を見られない人にも内容が伝わるよう、具体的で簡潔な説明を書く
- キーワードの詰め込みは避け、画像の内容に合致した自然な文章にする
- 装飾目的の画像には空のalt属性を設定する
- 記事に画像を挿入するたびに設定する習慣をつける
画像を使うたびに「この画像の内容を、見られない人にどう伝えるか」を一言添えるだけで、サイト全体の品質は少しずつ向上していきます。まずは、これから作成する記事から、alt属性の設定を意識してみてください。
「サイト全体のSEO対策を見直したい」「アクセシビリティも考慮したサイト改善を相談したい」という場合は、お気軽にお問い合わせください。