今回は、代替テキストを書く際に注意すべきことについて、良い例と悪い例を交えて解説していきます。
代替テキスト（alt属性）とは
代替テキストとは、Webサイトに掲載されている画像や動画が表示されないときに表示されるテキストのことです。
コンテンツを音声に変換する「スクリーンリーダー」などを使ったときにも、代替テキストが読み上げられます。
ブラウザ：画像や動画が表示されない場合、代替テキストが表示される
テキストブラウザ：代替テキストが表示される
スクリーンリーダー：代替テキストが読み上げられる
点字ディスプレイ：代替テキストが点字に変換されて表示される
クローラー：代替テキストで画像や動画の内容を理解する
代替テキスト（alt属性）を設定するメリット
では代替テキスト（alt属性）を設定するメリットをご紹介します。
アクセシビリティの向上に寄与する
視覚障碍者の方をはじめ、たくさんの人がインターネット上のコンテンツを利用するため、スクリーンリーダーを使っています。
スクリーンリーダーとは、画像を含む画面上にあるコンテンツを音声に変換し、操作できるというソフトです。代替テキストが無い場合、画像の内容をユーザーに伝える手ことができず、スクリーンリーダーとしての役割を果たせません。基本的には代替テキストの無い画像はスキップされますが、画像ファイル名を読み上げてしまうといった場合もあるのです。
Google検索セントラルでこのように記載もあります。
代替テキスト（画像について説明するテキスト）は、スクリーン リーダーを使用するユーザーや、低帯域幅のネットワークを使用しているユーザーなど、ウェブページの画像を確認できないユーザー向けの補助機能として役立ちます。
「コンテンツの関連性」 を向上させる
検索エンジンは、ページ上に存在する単語を認識し、そのページがどういったコンテンツかを理解します。
例えば、そのページで「トイプードル」「フレンチブルドッグ」「ゴールデンレトリーバー」について言及されている場合、それらが犬の種類であることを理解できるのです。しっかりと代替テキストを記載することは、検索エンジンやユーザーはこれらの画像を認識することにつながり、ひいてはページとそのコンテンツに関して理解を深めることにもなるのです。
画像リンクのアンカーテキストとしても機能する
アンカーテキストとは、ウェブページから別のウェブページにリンクする、クリックが可能なテキストのことを指します。
画像をリンクにした場合、alt属性がアンカーリンクテキストとして扱われます。検索エンジンがページの内容を理解するためには、こういったアンカーテキストのような情報も必要であり、SEOにも大きな影響を与えます。
代替テキスト（alt属性）の設定方法
工程としては、HTMLのタグにalt属性を追加するだけです。
例えば、トイプードルの画像があった場合、<img src=”example.png” alt=”トイプードル”>といった具合になります。
以下では、WordPressで画像に代替テキストを設定する方法をご紹介します。
- 「メディアを追加」から、記事に挿入する画像を選択する
- 画面右上に表示される「代替テキスト」の項目に、代替テキストを記述する
- 「投稿に挿入」をクリックすれば、代替テキストが設定された画像を記事に挿入する
これで代替テキスト（alt属性）を行うことができました。
代替テキスト（alt属性）を設定するときの注意点
代替テキスト（alt属性）を設定するとコンテンツの関連性が向上します。しかし、代替テキスト（alt属性）を設定する上でいくつか注意しなければならないことがあります。
画像について正確に記述する
画像について、なるべく正確に記述することが大切です。
例えば犬の画像の場合、「走っている」犬なのか、「餌を食べている」犬なのかなど、どういう状態の「犬」なのかを記述することが大切です。
簡潔に記述する
代替テキストは、なるべく簡潔に記述するようにします。
スクリーンリーダーを使用している場合、長い代替テキストはむしろ理解の妨げとなってしまうので、注意が必要です。
キーワードは詰め込まない
「犬・トイプードル・プードル」など、関連キーワードを羅列するのは適切ではありません。
ユーザーエクスペリエンスが低下するだけでなく、スパム行為と認識される場合があります。
画像であるということを記載しない
代替テキストの中に、「～の画像」を含める必要はありません。
代替テキスト（alt属性）の良い例・悪い例
では実際に代替テキスト（alt属性）の良い例と悪い例をご紹介します。
こちらのトイプードルの画像に代替テキスト（alt属性）を設定する場合、どのように設定するのが正解なのでしょうか。
代替テキスト（alt属性）の良い例
画像の内容に沿った代替テキストを設定するのが、良い例です。
- 良い例：適切な説明をしている…<img src=”example.png” alt=”トイプードル”>
- 最も良い例:：わかりやすく簡潔な表現で説明している…<img src=”example.png” alt=”寝ているトイプードル”/>
代替テキスト（alt属性）の悪い例
何か意味をもつ画像に対して、画像の内容に沿っていなかったりそもそも代替テキストが設定されていなかったりするのが悪い例です。
- 悪い例：代替テキストが無い… <img src=”example.png”/>
- 悪い例：キーワードを乱用している… <img src=”example.png” alt=”犬 子犬 トイプードル かわいい トレーニング トイレ プードル 小さい”/>
- 悪い例：画像と異なる内容の代替テキストを設定している…<img src=”example.png” alt=”人気の猫種”/>
画像すべてに代替テキスト（alt属性）を追加すべき？
代替テキストを設定するべきと説明してきましたが、画像すべてに代替テキストを追加すればいいというわけではありません。
ページ内にある画像がただの装飾を目的として存在している場合や、画像の前後にあるテキスト情報以上に重要な情報が画像に含まれていない場合は、無理に代替テキストを追加する必要はないのです。そのような余計な代替テキストは、SEOにも寄与しないだけでなく、スクリーンリーダーを使用しているユーザーにとっては邪魔になってしまいます。
画像に代替テキストが必要ない場合は、<img src=”example.png” alt=””>というように、alt属性に内容を記載しないことが効果的です。
スクリーンリーダーの中には、alt属性に内容が記載されていない場合、画像のファイル名を読み取ってしまうものも存在しますが、基本的には、alt属性の内容が空の画像のファイル名は無視されるようになっています。
おすすめのSEOツール3選！今すぐチェック！
画像の代替テキストを適切に設定し、そして包括的に管理したいなら、今すぐSEOツールを導入しましょう。
以下、SEOの観点から画像も対策可能なおすすめツールを3つご紹介します。
- Google Search Console
- Ahrefs
- Yoast SEO
Google Search Console
Google Search Consoleは、Webサイトの画像に関する情報を提供するだけでなく、代替テキストの設定方法を示すドキュメント（※Google画像検索SEOベストプラクティス）も公開しています。
また、Search Consoleの「検索パフォーマンス」セクションで、Webサイト内のすべての画像に対するクリック数、インプレッション数、およびCTRなどの詳細なパフォーマンスデータを確認できるため、代替テキストの最適化に役立ちます。
無料でSEOツールをお探しなら、Google Search Consoleを利用すれば、まず間違いありません。
Ahrefs
Ahrefsは、様々なキーワードに関する検索順位や、競合他社の戦略に関する情報を提供するツールです。Ahrefsを利用すれば、企業は自社のSEO戦略を改善し、検索順位を上げることが期待できます。
また、AhrefsはWebサイトのリンク構造を分析できるため、画像の代替テキストの改善にも役立ちます。具体的には、競合他社のWebサイトのリンク構造を分析し、良好な画像の代替テキストを持つページを参考にすることで、自社のWebサイトの改善点を見つけ出せるでしょう。
Ahrefsは有料ツールですが、Webサイトの画像SEOにおいては非常に有用なため、十分に投資する価値はあるといえます。
Yoast SEO
Yoast SEOは、代替テキストの最適化に役立つWordPressのプラグインです。
Yoast SEOの優れている点として、画像の代替テキストを自動的に生成してくれます。また、手動で代替テキストを設定することも可能です。
Yoast SEOは、Webサイト内の画像に対するクリック数やインプレッション数などのデータを提供するため、代替テキストの最適化がどのようにパフォーマンスに影響するかを理解するのに役立ちます。
但し、Yoast SEOは無料の基本版と有料のプレミアム版があるため、利用できる機能に差がある点には注意しましょう。プレミアム版では、画像の代替テキストを自動的に生成する機能が強化され、Webサイト内の画像の代替テキストに対するさらに詳細な分析が可能になります。
WordPressを使用している場合は、Yoast SEOの活用をまず検討してみてください。
まとめ
今回は、代替テキストの必要性や書き方について解説してきました。
アクセシビリティの向上やコンテンツの関連性をしっかりと認識してもらうためにも、正確に記載する・簡潔に記載する・詰め込まないといった代替テキストを記載する際の注意点を意識して適切な代替テキストを用意することが大切です。
