Altテキスト生成によるSEOの向上

今日のデジタル環境では、アクセシビリティと検索エンジン最適化(SEO)はウェブサイトの所有者や開発者にとって重要な考慮事項です。Altテキスト、または代替テキストは、視覚障害者ユーザーや検索エンジンに画像に関する記述情報を提供することで重要な役割を果たします。

Altテキストとは?

Altテキストは、画像の内容を記述するために使用されるHTML要素です。画像が読み込まれなかった場合や、スクリーンリーダーを使用してウェブをナビゲートするユーザーのためのテキスト代替として機能します。

Altテキストの重要性

  1. アクセシビリティ: Altテキストは、視覚障害者のユーザーがウェブページの画像の内容とコンテキストを理解できるようにします。
  2. SEO: 検索エンジンはAltテキストを使用して画像の主題を理解し、ウェブページの検索結果での可視性を向上させることができます。

Altテキスト作成のベストプラクティス

  1. 具体的に記述する: 画像の内容と目的を明確かつ正確に記述します。
  2. 簡潔にする: 簡潔ながらも有益な情報を伝えるAltテキストを目指します。
  3. キーワードの詰め込みを避ける: 関連するキーワードを含めることは重要ですが、不必要なキーワードでAltテキストを詰め込むことは避けます。
  4. 装飾的な画像: 意味のある内容を伝えない装飾的な画像には、空のAltテキスト(alt="")を使用して、スクリーンリーダーが画像を無視するようにします。
  5. コンテキストを考慮する: Altテキストを記述する際には、画像のコンテキストとその周囲のコンテンツを考慮します。

imgixでAltテキストを追加する

imgixでは、Generations APIを利用したAIによるAltテキスト生成を推奨しています。アセットマネージャーのUIとプログラムの両方から利用できるため、合計2つの方法があります。

  • アセットマネージャーのUIから: アセットの詳細パネルを開き、Alt Textフィールドの横にあるGenerateをクリックします。

    AI生成用のGenerateボタンを表示するアセット詳細パネル
  • APIから直接: /v1/generations/alt-textに対して同期的なGETリクエストを送信し、urlまたはurl64で画像を指定します。

どちらの方法も同じ50以上の言語セットをサポートしています。サポートされている言語の全リストは、Generations APIリファレンスのサポート言語を参照してください。

AI生成のAltテキストはアカウントのクレジットに対して計測されます。レスポンスはキャッシュされるため、同じ画像・言語に対する再リクエストはキャッシュから返され、追加のクレジットは消費されません。キャッシュをバイパスして、クレジットを消費する新規生成を強制するには、regenerate=trueを渡してください。

GET api/v1/generations/alt-text?url=https://assets.imgix.net/photo.jpg&language=en,es

認証、リクエストパラメータ、レスポンス形式の詳細は、Alt Text Generation APIリファレンスを参照してください。

HTMLでのAltテキストの使用

Altテキストを使用するには、HTMLページの<img>タグ内にalt属性を含め、その値を画像の簡単な説明に設定します。例えば:

<img src="/red-fox.jpeg" alt="雪の中で目を閉じて横たわるキツネ" />

これにより、すべてのユーザーが画像を見る能力に関係なく、ウェブページの内容とコンテキストを理解できるようになります。

まとめ

AltテキストはウェブアクセシビリティとSEOの基本要素です。imgixでは、Generations APIを利用したAIによるAltテキスト生成を推奨しており、アセットマネージャーのUIまたはAPIから利用できます。ベストプラクティスに従い、画像に対して記述的なAltテキストを提供することで、ウェブサイトの所有者はコンテンツがすべてのユーザーにアクセス可能であり、検索エンジンに最適化されていることを確認できます。