この記事はAhrefs公式ブログの日本語訳です。
原文：Alt Text for SEO: How to Optimize Your Images
（著者：Joshua Hardwick / 原文の最終更新日：May 19, 2020）
※フルスピード註：この記事は2020年5月19日時点の記載をもとに翻訳しています。Ahrefs公式ブログの記事は今後追記・再公開されることがありますことをご了承ください。
altテキスト（代替テキスト）は、ウェブページ上の画像について説明するテキストです。通常、このテキストはHTMLコードに埋め込まれており、ページ上では表示されません。
では、なぜaltテキストが重要なのでしょうか？そして、SEOやユーザーエクスペリエンスを向上させるためにどのように活用できるのでしょうか？
このガイドでは、次のことを学びます：
オンページSEOは初めてですか？
初心者向けオンページSEOガイド
なぜaltテキストが重要なのか？
altテキストが重要な理由は主に4つある。
- アクセシビリティの向上
- 「話題性」を高めることができる
- グーグル画像でのランク付けに役立つ
- 画像リンクのアンカーテキスト
1.altテキストはアクセシビリティを向上させる
何百万人もの視覚障害者が、オンラインコンテンツを利用するためにスクリーンリーダーを使用しています。スクリーンリーダーは、画像を含む画面上のコンテンツを音声に変換するツールです。
altテキストのない画像は、ユーザーに画像の内容を伝える方法がないため、スクリーン・リーダーにとって問題となります。通常、これらの画像はスキップされるか、もっと悪いことに、長くて役に立たない画像のファイル名が読み上げられます。
Googleは、SEOスターターガイドの中で、スクリーンリーダーを使うユーザーのためのaltテキストの重要性について述べています。
2.altテキストは「話題の関連性」を高めることができる
Googleはページ上の単語を分析し、そのページが何について書かれているかを理解します。
例えば、ページがプードル、ラブラドール、レトリーバーについて言及している場合、Googleはそのページが犬の種類に関するものだと認識します。
しかし、映像との関連性はどうでしょう？
それは、Googleが読み取れない画像の中にコンテキストが「閉じ込められている」ことがあるからです。
altテキストがなくても、Googleはほぼ確実に犬の画像であることを識別できますが、特定の犬種がどれかは明確ではないかもしれません。
3.altテキストはGoogle画像でのランク付けに役立ちます
Google Imagesは世界で2番目に大きな検索エンジンです。オンライン検索全体の20.45％を占め、YouTube、Bing、その他の検索エンジンを圧倒しています。
要するに、Google Imagesからウェブサイトにトラフィックを誘導する機会があるということです。
過去3ヶ月間のGoogle画像からAhrefsブログへのクリック数をご覧ください：
参考までに
私たちはSEOブログなので、これは私たちのトラフィックのごく一部です。一般的に、私たちが公開する情報を画像検索で探す人はいません。ファッションや食べ物のようなビジュアル系のニッチでは、画像検索を使ってコンテンツを見つけることが多いので、全く話が違ってきます。
Googleのジョン・ミューラーは、altテキストはGoogleイメージの最適化において重要な部分であると述べています：
4.Altテキストは画像リンクのアンカーテキストとして機能します。
アンカーテキストとは、あるウェブページから別のウェブページへのリンクを示すクリック可能な単語やフレーズです。Googleはこのアンカーテキストを通じて、ウェブページの内容やリンク先が何についているのかを理解します。
しかし、必ずしもすべてのリンクがテキストであるわけではありません。
Googleはこう述べています：
画像をリンクとして使用する場合、altテキストを記入することで、リンク先のページについてGoogleがより深く理解できるようになります。テキストリンクのアンカーテキストを書いていると想像してください。
画像にaltテキストを追加する方法
HTMLコードの<img>タグにalt属性を追加するだけです。
altタグ付きの画像：
<img src="pie.jpg"alt="ステーキ＆エールパイ">。
最新のCMSを使っているなら、HTMLコードを掘り下げなくてもaltテキストを追加できるはずです。
例えば、ワードプレスでは、ページや投稿に画像を追加する際にaltテキストを入力する欄があります：
他のCMSでも似たようなものです。
ここでは、最もポピュラーなものをいくつか紹介しましょう：
すべての画像にaltテキストを付けるべきか？
いいえ、これはよくある誤解です。
画像が装飾的な目的であり、重要な情報を含まない場合、altテキストを追加する必要はありません。
たとえば、ウェブサイト上でアイコンがコンテンツを区切っている場合があります：
altテキストは見た目を良くするためだけに存在し、追加するべきではありません。このような場合、スクリーン・リーダーを使用する訪問者にとって迷惑になるだけで、ページにSEO的な価値を付け加えることはありません。
同様に、一般的な画像やストック画像も同じです：
altテキストに「お風呂とろうそく」と書いても、視覚障害者には不要な情報ですので、役に立ちません。そのような場合、スクリーン・リーダーには完全に無視される方が良いでしょう。
ただし、重要なことがあります。
画像がaltテキストを必要としない場合でも、ベストプラクティスとして空のalt属性を追加することがおすすめです。なぜなら、スクリーン・リーダーの中にはalt属性がない場合にファイル名を読み上げるものもある一方、alt属性が空である場合、それをスキップするものが多いからです。
具体的には、以下のようになります：
<img src="spacer.gif" alt="">。
詳しくはWebAIMのガイドをご覧ください。
良いaltテキストの書き方
テキストは難しいものではありません。
以下の5つのベストプラクティスに従えば問題ありません。
- 簡潔に書く：スクリーンリーダーを使用する人にとって、長いaltテキストは不便です。なるべく簡潔な表現を心がけましょう。(長い説明が必要な場合はlongdesc属性を使いましょう）。
- 正確であること：イメージを正確に説明することに焦点を当てましょう。
- キーワードの詰め込みは避ける：altテキストはキーワードを詰め込む場所ではありません。
- 説明文に “Image of… “や “Picture of… “と記載する必要はありません。Googleもスクリーンリーダーも、自分でそれを判断することができます。
- 冗長性を避ける。:画像のコンテキスト内に既に存在する情報を繰り返さないようにしましょう。たとえば、画像の下に「Steve Jobs」と書かれている場合、altテキストに同じ情報を追加する必要はありません。Googleはキャプションが実質的なaltテキストであることを理解します。
また、フォームボタンにaltテキストを追加することも忘れないでください。そうしないと、スクリーン・リーダーがボタンを通り過ぎてしまい、あなたのウェブサイトとインタラクションできない訪問者が出てきてしまいます。
良いaltテキストと悪いaltテキストの例
いくつかの例を挙げながら、何が有効で何が有効でないかを理解しよう。
悪い ：<img src="cheesecake.png" alt="チーズケーキの写真">。
良い:<img src="cheesecake.png" alt="チーズケーキ">。
良い:<img src="cheesecake.png" alt="ストロベリーチーズケーキ">。
最高：<img src="cheesecake.png" alt="クリーム入りストロベリーチーズケーキ">。
悪い ：<img src="steve-jobs.png" alt="スティーブ・ジョブズ apple iphone ipad mac">。
良い: <img src="steve-jobs.png" alt="スティーブ・ジョブズ">。
良い:<img src="steve-jobs.png" alt="アップル創業者、スティーブ・ジョブズ">。
ベスト ：<img src="steve-jobs.png" alt="iphone4を手にするアップル創業者スティーブ・ジョブズ">。
悪い ：<img src="amp.png" alt="image4">。
良い：<img src="amp.png" alt="オレンジ色のアンプ">。
良い ：<img src="amp.png" alt="オレンジ色のアンプ - 30ワット">。
ベスト ：<img src="amp.png" alt="orange AD30HTC - 30ワットアンプ">。
最後の例では、モデル番号が含まれていることに注意してください。これは、特にeコマースの商品ページの画像には良い習慣です。
alt属性の問題を見つけ、修正する方法
AhrefsのSite Auditをはじめ、多くのツールがあなたのサイトをクロールし、足りないalt属性を見つけることができます。
しかし、すべての画像にaltテキストが必要なわけではないので、altテキストがないことが常に問題であるとは限りません。
例えば、これらの欠けているalt属性を見てみましょう：
ファイル名を見れば、altテキストが必要ないことは明らかです。これは装飾的なもので、スクリーンリーダーにはその上を通過してほしいということです。
ですから、サイトをクロールしてalt属性の欠落にいちいちこだわるよりも（ほとんどのサイトには欠落がかなりあります）、すでにトラフィックを獲得しているページのaltタグを監査し、改善する方が良いアイデアです。
これには2つの理由があります：
- アメリカ国民の2.4％が視覚障害を持っています。これはおよそ42人に1人ということで、平均して考えると、あなたのウェブページに月に1万人の訪問者がいる場合、そのうちの240人があなたのコンテンツを正しく閲覧できない可能性があります。
- より多くのトラフィックを得られる可能性がある。 altテキストは、Googleイメージでの画像のランキング向上に役立ち、それがより多くのトラフィックを引き寄せることにつながります。毎月10,000のアクセスがあるページが1%増加するだけでも、100人の訪問者が増える可能性があります。
実施する手順は以下の通りです：
ステップ1.オーガニック検索から最もアクセス数の多いページを見つける
Googleアナリティクス、Google Search Console、またはAhrefsのサイトエクスプローラーの「トップページ」レポートを確認してください。
ステップ2.alt属性を監査する
無料のAlt Text Tester Chromeエクステンションをインストールし、最もトラフィックの多いページをロードしてエクステンションを有効にします。
画像をロールオーバーすると、altテキストが表示されるはずです。
alt属性がない場合は、警告が表示されます。
ページ上のいくつかの画像のaltテキストをチェックしてみましょう。うまく最適化されているのか、そうでないのか、あるいはまったく最適化されていないのか、すぐに感触がつかめるでしょう。
例えば、この記事を数秒スクロールするだけで、すべての画像が最適化されていることがわかります。
…一方、『ミラー』紙のこのページはそうではありません：
ステップ3.ページ数を増やす
あなたのウェブサイトで最も訪問者の多いページについてこのプロセスを繰り返します。これにより、あなたのaltテキストの最適化が健全か、あるいは作業が必要かどうかがわかるはずです。
ほとんどのウェブサイトは、ほんの一握りのページにトラフィックの大半を集めているため、これにはそれほど時間はかからないはずです。
例えば、Ahrefsブログのわずか10記事が、月間オーガニックトラフィックの51％を占めています。
… そのため、トラフィックの多いほとんどのページのaltテキストを数分で簡単に監査し、最適化することができます。
まとめ
altテキストの最適化は重要ですが、画像SEOのすべてではありません。ファイル名の最適化、レスポンシブイメージの提供、遅延読み込みの検討など、他にも多くのことを行う必要があります。
詳しくは、画像SEOに関する12の実用的なヒントをご覧ください。
コメント