はじめに
WordPressで画像を入れると、
代替テキスト
または、
alt
という項目があります。
SEOで重要だからキーワードを書く場所。
そう説明されることもあります。
でも、それだけではaltの本来の役割を理解できません。
altは、
画像が見えない状況でも、その画像が持つ意味や機能を伝えるためのテキスト
です。
Googleもaltを画像理解の重要な情報として利用しますが、W3Cのアクセシビリティ ガイダンスでもテキスト 代替は重要な役割を持っています。
この章では、
「SEOのために何を書く？」
ではなく、
この画像は何を伝えている？
から考えます。
altとは
HTMLの画像には、alt属性を設定できます。
例：
<img src="salon-interior.jpg" alt="受付から見た美容室の店内">画像を見ることができない状況でも、画像が伝えている情報をテキストで補います。
スクリーンリーダーを使う人だけでなく、画像が読み込まれない状況などでも役立ちます。
altは画像の「見た目説明」だけではない
たとえば、美容室の店内写真があります。
単純に、
椅子と鏡がある写真と書くより、
そのページで何を伝えるために置いた画像なのかを考えます。
初めての方へ店舗の雰囲気を見せるなら、
自然光が入る美容室の施術スペースのように、ページの文脈に合うテキストが考えられます。
W3Cも、テキスト 代替は画像の利用目的や文脈に応じて決めるとしています。
画像の役割によってaltを考える
情報を伝える画像
画像そのものが情報を持っている場合は、その情報を簡潔に伝えます。
たとえば、
Before / After写真なら、
単に、
髪の写真では情報が足りません。
何を示す画像なのかが重要です。
ただし、長い説明が必要なら、すべてをaltへ詰め込むのではなく、本文やキャプションで説明する方が読みやすい場合があります。
装飾画像
一方、意味を持たない装飾画像もあります。
たとえば、
- 背景の模様
- 区切りの装飾
- 近くのテキストと同じ意味を繰り返すだけの画像
などです。
こうした画像では、空のalt、
alt=""が適切な場合があります。
W3Cも、装飾画像はAssistive 技術が読み上げないよう空のaltを使う方法を案内しています。
altを「未入力」にするのと空altは違う
ここは少し技術面ですが重要です。
alt=""と、
alt属性そのものがない状態は同じではありません。
装飾画像では、意図して空altを設定することで、スクリーンリーダーが不要な情報を読み上げないようにできます。
WordPress上で装飾画像をどう扱うかは、使用ブロックやThemeの出力も確認します。
リンクとして使う画像
画像そのものがリンクやボタンになっている場合は、
「何が写っているか」
だけでなく、
押すと何が起きるか
が重要になる場合があります。
たとえば、ロゴだけがトップページへのリンクになっているなら、画像の機能が伝わるようにします。
周囲に同じリンク テキストがある場合は重複読み上げにならないよう文脈を確認します。
画像内に文字がある場合
画像の中に重要な文字しかない場合、その内容が画像を見られない人へ伝わらなくなる可能性があります。
W3Cは、CSSなどで実現できる場合は、重要なテキストを画像として置くより実際のテキストとして表示することを推奨しています。
どうしても画像内テキストを使う場合は、テキスト 代替や周辺本文で同じ情報を提供します。
altを書くときの基本
altをキーワード欄にしない
Googleはalt テキストを画像内容の理解に利用しています。
だからといって、
浦和 美容室 縮毛矯正 髪質改善 おすすめ 人気 安いのようにキーワードを並べるのは適切ではありません。
Google自身もキーワード 詰め込みを避け、文脈に合うUsefulなalt テキストを書くよう案内しています。
altは、
検索Engineへキーワードを送る欄ではなく、画像の意味を伝える欄
です。
ファイル名とaltは役割が違う
たとえば、
ファイル名
salon-interior.jpgalt
受付から見た美容室の店内のように役割を分けます。
ファイル名はファイル管理や画像内容の軽い手がかり。
altはページ上で画像が伝える意味を補うテキストです。
WordPressではどこでaltを書く？
WordPressでは、
- メディアライブラリ
- 画像ブロックの設定
などから代替テキストを設定できます。
メディアライブラリで設定したaltが、画像挿入時の初期値として使われることがあります。
また画像ブロック側で変更したaltは、その特定ページ / 投稿だけへ適用される場合があります。
これは、同じ画像でもページによって役割が変わる場合に便利です。
同じ画像でもaltが変わることがある
altは画像ファイルだけで機械的に決まりません。
同じ写真でも、
店舗紹介ページでは、
美容室の店内が意味になるかもしれません。
アクセスページで入口位置を説明するために使うなら、
道路側から見た店舗入口のように変わるかもしれません。
文脈で決めます。
「画像」「写真」と毎回書かなくてよい
スクリーンリーダーは画像であることを知らせる場合があります。
そのため、
美容室の店内の画像のように、毎回「画像」「写真」を入れる必要は通常ありません。
ただし、写真なのか図なのかが意味を持つ場合は伝えることもあります。
長すぎるaltを避ける
altは簡潔にします。
複雑なGraphやDiagramなど、短い一文では説明できない画像は、本文側で詳しい説明を用意する方法を考えます。
すべてをaltへ詰め込む必要はありません。
altを書くときの簡単な判断
画像を見るたびに、
1. この画像は情報を伝えている？
2. なくても意味が変わらない装飾？
3. リンク / ボタンとして機能している？
4. 画像内に重要なテキストがある？
5. 周辺本文ですでに説明済み？と考えます。
それからaltを決めます。
SEOとアクセシビリティは別々ではない
altはアクセシビリティのために重要です。
そして、Googleが画像を理解するためにも利用されます。
だから、
SEO用altと、
アクセシビリティ用altを別々に考えるより、
利用者へ画像の意味を正しく伝えるテキストを書く
ことを中心にします。
結果として検索Engineにも理解しやすくなります。
今回のポイント
- altは画像の意味や機能をテキストで補うもの
- 画像の文脈によって適切なaltは変わる
- 情報画像と装飾画像は扱いが違う
- 装飾画像では空のaltが適切な場合がある
- リンク画像では画像の見た目より機能が重要な場合がある
- 重要なテキストを画像だけへ閉じ込めない
- altをキーワード 詰め込みに使わない
- ファイル名とaltは役割が違う
- WordPressではメディアライブラリとブロック側でaltを設定できる
- SEOより先に「画像が何を伝えるか」を考える
今回の視点
良いaltは、
検索Engineへ見せるために書くものではありません。
画像が見えなくても、
ページの意味ができるだけ失われないようにする。
そのために書きます。
利用者に正しく伝わるテキストを作ることが、結果として検索Engineにも理解しやすい画像になります。
Part 6｜検索されるホームページを作る