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

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

Altテキストとは？

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

Altテキストの重要性

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

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

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

アセットマネージャーでの代替テキストの使用

アセットマネージャーでインデックスされた画像に、代替テキストを手動で追加して保存できます。追加された代替テキストは、アセットマネージャーのUIからアクセスするか、管理APIを呼び出して応答内で取得できます。

最大100の異なる言語に対して手動でaltテキストを追加できます。Asset Manager UIを使用してaltテキストを管理する場合、ターゲットオーディエンスが話す主要な言語に集中することをお勧めします。あまりにも多くの言語を追加すると、インターフェースが煩雑になる可能性があります。

imgixを使用したAltテキストの生成

プレミアムアカウントでAltテキスト機能が有効になっている場合、AI駆動のアルゴリズムを使用してアセットマネージャー内の画像に自動的にAltテキストをタグ付けします。

自動altテキスト生成は、最大5つの異なる言語をサポートしています：

• 英語
• フランス語
• ドイツ語
• イタリア語
• スペイン語

この機能をプレミアムアカウントで有効にするには、アカウントで有効にしたい言語を記載して、サポートチームまでご連絡ください。

Altテキストは、アセットマネージャーでインデックスされた新しいアセットとシームレスに統合され、アセットマネージャーのUIで上書きおよび/または復元できます。

注意：自動代替テキストは、新しくインデックスされたアセットのみに生成され、アセットマネージャーに既存のアセットには生成されません。既存のアセットに対して代替テキストを生成するには、アセットマネージャーUIまたは管理APIを使用して、アセットのリフレッシュ機能を利用できます。新しく取り込まれたアセットに対して、自動的に生成される代替テキストには数秒かかるため、すぐに利用できない場合は、少し時間をおいて再度確認してください。

管理APIを使用したAltテキストの取得

画像がアセットマネージャーに正常に追加された後、管理APIを使用してプログラムでAltテキストデータを追加できます。

アセットエンドポイントを使用することで、predictionsプロパティを通じてaltテキストデータを取得できます。altテキストが自動生成されたか手動で生成されたかに応じて、alt_textまたはalt_text_predictionsオブジェクトが返されます。

以下は、Management APIから単一のアセットに対して送信されるレスポンスの例です：

GET https://api.imgix.com/api/v1/assets/66204a3643a0860f8a6151a8/cactus.jpeg

{
  "data": {
    "attributes": {
      "origin_path": "/cactus.jpeg",
      "alt_text": {
        "es": {
          "text": "cuatro catci en macetas rojas están en una fila"
        }
      },
      "alt_text_predictions": {
        "en": {
          "text": "a row of cactus in red pots on a table"
        }
      },
      "source_id": "66204a3643a0860f8a6151a8"
    },
    "id": "66204a3643a0860f8a6151a8/cactus.jpeg",
    "type": "assets"
  }
}

imgixで生成されたAltテキストの使用

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

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

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

まとめ

AltテキストはウェブアクセシビリティとSEOの基本要素です。ベストプラクティスに従い、画像に対して記述的なAltテキストを提供することで、ウェブサイトの所有者はコンテンツがすべてのユーザーにアクセス可能であり、検索エンジンに最適化されていることを確認できます。