SEO とは何か、書き方、SEO にとって重要な理由

現在、Google の SERP のほぼ 19% に画像が表示されています。 つまり、最善の SEO 努力にもかかわらず、別のオーガニック トラフィック ソース、つまり Web サイトの画像を逃す可能性があります。

どうやってこのトラフィックソースにアクセスするのでしょうか? 画像の代替テキスト。 この記事では、画像が検索エンジンで上位にランクされ、トラフィックが増加するように画像の代替テキストを記述する方法について説明します。

目次

ビジネスで SEOを実行するかどうかに関係なく、Web サイトの画像代替テキストを最適化することは、訪問者が最初にどのようにしてサイトを見つけたかに関係なく、訪問者にとってより良いユーザー エクスペリエンスを生み出すためのチケットとなります。

画像の代替テキストが重要なのはなぜですか?

画像の代替テキストは、アクセシビリティ、ユーザー エクスペリエンス、画像トラフィックという 3 つの理由から重要です。 これらの理由を理解すると、すべての画像に対して効果的な代替テキストを作成するのに役立ちます。 飛び込んでみましょう。

アクセシビリティ

1999 年に、W3C は障害のあるユーザーにとってコンテンツをよりアクセシブルにする方法を説明する Web コンテンツ アクセシビリティ ガイドライン 1.0 を発行しました。 これらのガイドラインの 1 つは、「聴覚コンテンツと視覚コンテンツに同等の代替手段を提供する」というものでした。 これは、画像 (またはムービー、サウンド、アプレットなど) を含む Web ページには、その視覚的または聴覚的なコンテンツと同等の情報が含まれている必要があることを意味します。

何よりもまず、聴覚および視覚コンテンツに代わる説明テキストにより、誰もが共有コンテンツから恩恵を受けることができます。特に、Web ページ上のコンテンツを理解するためにスクリーン リーダーを使用する可能性がある視覚障害のある人がそうです。 説明のない画像は、そのテクノロジーを使用する人にとって役に立たず、ユーザー エクスペリエンスが低下し、場合によってはブランドの認知度も低下します。

たとえば、Web ページに目次にリンクする上向き矢印の画像が含まれているとします。 同等のテキストとしては、「目次に移動」などがあります。 これにより、スクリーン リーダーやその他の支援技術を使用するユーザーは、画像を見なくてもその目的を理解できるようになります。

つまり、代替テキストは、視覚能力に関係なく、すべてのユーザーがビジュアル コンテンツにアクセスできるようにするのに役立ちます。

ユーザー体験

代替テキストはアクセシビリティを促進し、すべてのユーザーに優れたユーザー エクスペリエンスを提供します。 たとえば、訪問者の接続が低帯域幅であるため、画像が読み込まれないとします。 壊れたリンクアイコンが表示されるだけでなく、画像が何を伝えているかを収集するための代替テキストも表示されます。

たとえば、サイトのユーザーは左側の画像を見ることができるかもしれません。 何らかの理由でそれができない場合は、右側の代替テキストが聞こえるか表示されます。 これにより、代替テキストがない場合よりも優れたユーザー エクスペリエンスが提供されます。

画像ソース

画像トラフィック

代替テキストが行うもう 1 つの重要な機能は、Google イメージまたは画像パックとして検索結果に画像を表示することです。 画像パックは、画像リンクの水平方向の列として表示される特別な結果であり、任意の有機的位置 (冒頭の例に見られるように、SERP の #1 スポットを含む) に表示できます。

そして、どちらのタイプの検索結果にも表示される画像は、オーガニック訪問者を受け入れるもう 1 つの方法です。 これにより、さらに何千人もの訪問者が増加する可能性があります。少なくとも HubSpot の場合はそうでした。

2018 年から、HubSpot ブログ チームは、画像の代替テキストの最適化に重点を置いた新しい SEO 戦略を導入しました。 これにより、ブログの画像トラフィックが 1 年以内に 779% 増加し、オーガニック ビューが 160,000 増加しました。 チームの成功について詳しくは、このブログ投稿をご覧ください。

画像に代替テキストを追加する方法

ほとんどのコンテンツ管理システム (CMS) では、ブログ投稿の本文内の画像をクリックすると、画像の最適化またはリッチ テキスト モジュールが生成され、画像の代替テキストを作成および変更できます。

以下で CMS Hub と WordPress の次のステップを見てみましょう。

HubSpot CMS に代替テキストを追加する方法

HubSpot で画像をクリックし、編集アイコン (鉛筆のようなアイコン) をクリックすると、画像の最適化ポップアップ ボックスが表示されます。

HubSpot ポータル内の CMS でのこの画像最適化ウィンドウは次のようになります。

代替テキストは Web ページの HTML ソース コードに自動的に書き込まれます。CMS に簡単に編集できる代替テキスト ウィンドウがない場合は、画像の代替テキストをさらに編集できます。 記事のソース コード内での alt タグは次のようになります。

WordPress CMS に代替テキストを追加する方法

WordPress では、画像をクリックすると、サイドバーに[ブロック]タブが自動的に開きます。 「画像設定」というラベルの付いたセクションで、空のフィールドに代替テキストを追加します。

準備ができたら、画面上部のツールバーから「更新」をクリックします。

代替テキストの最も重要なルールは何ですか? 説明的かつ具体的にしてください。 ただし、代替テキストが画像のコンテキストも考慮していない場合、この代替テキスト ルールの値が失われる可能性があることに注意してください。 代替テキストは 3 つの異なる方法でマークを外す可能性があります。 以下の例を考えてみましょう。

3 画像代替テキストの例 (良い点と悪い点)

1. キーワードと詳細

不正な代替テキスト

alt="HubSpot office wall Singapore inbound marketing workplace murals orange walls ship it"

上の代替テキストの行のどこが間違っているのでしょうか? HubSpot への参照が多すぎます。 代替テキストを使用して断片的な文章にキーワードを詰め込むと、画像に余計な毛羽立ちが生じ、十分なコンテキストが得られません。 これらのキーワードは発行者にとっては重要かもしれませんが、Web クローラーにとっては重要ではありません。

実際、上記の代替テキストにより、Google は画像がその画像が公開されている Web ページの残りの部分や記事とどのように関連しているのかを理解することが難しくなり、その画像が背後に高い関心を持っている関連ロングテール キーワードでランク付けされなくなります。

さらに悪いことに、Google はキーワードの詰め込みに対してペナルティを課しています。

適切な代替テキスト

不適切な代替テキスト (上記) を念頭に置くと、この画像のより適切な代替テキストは次のようになります。

alt="Orange mural that says 'ship it' on a wall at HubSpot's Singapore office"

2. 詳細と特異性

画像ソース

不正な代替テキスト

alt="Baseball player hitting a ball at a baseball field"

上記の代替テキストの行は、技術的には代替テキストの最初のルール (説明的であること) に従っていますが、正しい方法で説明的ではありません。 はい、上の画像は野球場と野球を打つ選手を示しています。 しかし、これはフェンウェイ・パークの写真でもあり、レッドソックスの #34 デビッド・オルティスが右翼席に 1 点を記録した写真でもある。 これらは、Google が、たとえばボストンのスポーツに関するブログ投稿に画像が掲載されている場合に、その画像を適切にインデックスするために必要となる重要な詳細情報です。

適切な代替テキスト

不適切な代替テキスト (上記) を念頭に置くと、この画像のより適切な代替テキストは次のようになります。

alt="David Ortiz of the Boston Red Sox batting from home plate at Fenway Park"

3. 特異性とコンテキスト

画像ソース

上の両方の画像には、適切な代替テキストを作成するのに役立つ明確なコンテキストが含まれています。1 つは HubSpot オフィスのもので、もう 1 つはフェンウェイ パークのものです。 しかし、画像にそれを説明するための公式のコンテキスト (地名など) がない場合はどうなるでしょうか?

ここでは、画像を公開する記事または Web ページのトピックを使用する必要があります。 以下に、公開する理由に基づいた代替テキストの悪い例と良い例をいくつか示します。

ビジネススクールへの通学に関する記事はこちら

不正な代替テキスト

alt="Woman pointing to a person's computer screen"

上記の代替テキストの行は、通常は適切な代替テキストとして渡されますが、この画像をビジネス スクールへの進学に関する記事とともに公開することが目標であることを考えると、Google が画像を関連付けるのに役立ついくつかのキーワードの選択が欠落しています。記事の特定のセクションで。

適切な代替テキスト

不適切な代替テキスト (上記) を念頭に置くと、この画像のより適切な代替テキストは次のようになります。

alt="Business school professor pointing to a student's computer screen"

ビジネス スクール教師向けの教育ソフトウェアに関する Web ページの場合

不正な代替テキスト

alt="Teacher pointing to a student's computer screen"

上の代替テキストの行は、前の例の優れた代替テキストとほぼ同じくらい説明的で具体的ですが、教育用ソフトウェアに関する Web ページにはなぜ十分ではないのでしょうか? この例では、ビジネス スクールのトピックをさらに深く掘り下げ、この Web ページの理想的な読者が教師であることを指定しています。 したがって、画像の代替テキストはそれを反映する必要があります。

適切な代替テキスト

不適切な代替テキスト (上記) を念頭に置くと、この画像のより適切な代替テキストは次のようになります。

alt="Professor using education software to instruct a business school student"

画像代替テキストのベスト プラクティス

最終的に、画像の代替テキストは具体的でありながら、サポートしている Web ページのトピックを代表するものである必要があります。 ここまでのアイデアはわかりましたか？ 効果的な画像代替テキストを作成するための重要な鍵をいくつか紹介します。

• イメージを具体的に説明してください。
• 画像の主題とコンテキストの両方を参考にしてください。
• ページのトピックに関連するコンテキストを追加します。
• 画像に認識できる場所や人物が含まれていない場合は、ページのコンテンツに基づいてコンテキストを追加します。
• たとえば、コンピューターに入力している人物のストック画像の代替テキストは、Web ページのトピックに応じて、「SEO のために WordPress Web サイトを最適化する女性」または「無料のブログ プラットフォームを研究する女性」になります。
• 代替テキストは 125 文字未満にしてください。
• 画面読み上げツールは通常、この時点で代替テキストの読み上げを停止し、視覚障害者向けにこの説明を言語化する際に、気まずい瞬間に長々と続く代替テキストをカットします。
• 代替テキストを「…の写真」または「…の画像」で始めないでください。画像の説明に直接ジャンプしてください。
• 画面読み上げツール (さらに言えば Google) は、記事の HTML ソース コードから画像としてそれを識別します。
• キーワードは控えめに使用してください。 記事のターゲットキーワードを代替テキストに簡単に含めることができる場合にのみ含めてください。 そうでない場合は、セマンティックキーワード、またはロングテール キーワード内の最も重要な用語のみを検討してください。 たとえば、記事の先頭キーワードが「リードの生成方法」である場合、「方法」を画像の代替テキストに自然に含めるのは難しいため、代替テキストで「リードの生成」を使用できます。
• すべての画像の代替テキストにキーワードを詰め込まないでください。 ブログ投稿に一連の本文画像が含まれている場合は、それらの画像の少なくとも 1 つにキーワードを含めてください。 トピックを最も代表していると思われる画像を特定し、それをキーワードに割り当てます。 周囲のメディアでは、より美的な説明に固執してください。
• スペルミスがないか確認してください。 画像の代替テキスト内の単語のスペルが間違っていると、ユーザー エクスペリエンスが損なわれたり、サイトをクロールする検索エンジンが混乱したりする可能性があります。 ページ上の他のコンテンツと同様に、代替テキストを確認する必要があります。
• すべての画像に代替テキストを追加しないでください。 SEO、UX、アクセシビリティのために、Web ページ上のほとんどの画像に代替テキストを追加する必要があります。ただし、例外もあります。 たとえば、純粋に装飾的な画像や近くのテキストで説明されている画像には、空の alt 属性が必要です。 代替テキストを追加する場合と追加しない場合の詳細な内訳については、この決定ツリーを確認してください。

代替テキストが SEO に与える影響

Googleによると、代替テキストは、画像の主題を理解するために、コンピュータ ビジョン アルゴリズムやページのコンテンツと組み合わせて使用​​されます。

したがって、代替テキストは、Google が画像の内容だけでなく、Web ページ全体の内容をよりよく理解するのに役立ちます。 これにより、画像検索結果に画像が表示される可能性が高まります。

Google の Search Generative Experience (SGE) の展開により、高品質で状況に応じた代替テキストにより、コンテンツが AI を活用した重要な情報の新しいスナップショットに確実に組み込まれるようになります。

たとえば、Google は、自社の SGE によって、注目すべきオプション、製品の説明、価格設定、画像が 1 つのスナップショットに含まれる、総合的なショッピング エクスペリエンスを人々に提供できると述べています。 製品画像に説明的で具体的な代替テキストがあれば、検索エンジンにいつその製品が高品質の選択肢として検索結果に表示されるかを知るためのコンテキストが与えられます。

トピックに関するコンテンツを作成するときは、視聴者がそのトピックに関する質問に対する答えをどのように見つけたいかを考慮してください。 多くの場合、Google 検索者は、古典的な青色のハイパーリンク付きの検索結果を望んでいません。Web ページ内に画像自体が埋め込まれていることを望んでいます。

たとえば、Excel で重複を削除する方法を調べている訪問者は、タスクの完了方法を一目で理解できるようにスクリーンショットを好むかもしれません。

画像ソース

この画像には代替テキストが最適化されているため、「Excel で重複を削除する方法」というロングテール キーワードの画像検索結果に表示されます。 投稿は同じキーワードの Web 検索結果にも表示されるため、訪問者はこれら 2 つの異なるチャネルを通じてブログ投稿に到達する可能性があります。

Web サイトに画像代替テキストを追加する

では、ブログ投稿や Web ページの代替テキストを開発するときはどこから始めますか? 既存のコンテンツの基本的な監査を実行して、以前にタグ付けされていない画像のどこに代替テキストを組み込めるかを確認することを検討してください。 新しい alt タグを付与したページ間でオーガニック トラフィックがどのように変化するかを観察してください。

最適化する画像が多ければ多いほど、SEO 戦略はより効果的に前進します。

編集者注: この投稿はもともと 2018 年 9 月に公開され、包括性を高めるために更新されました。