始める
パフォーマンスとメタデータ
Altテキスト生成によるSEOの向上

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テキストの生成

注: Altテキスト生成はプレミアム機能です。この機能を利用するには、サポートチームまたはアカウントマネージャーにお問い合わせください。

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

Altテキストは新しく追加されたすべてのアセットにシームレスに統合されます。アセットの追加方法については、アセットマネージャーへのアセットの追加方法をご覧ください。

アセットがアセットマネージャーに追加されると、自動的にAltテキストが生成されます。以下のスクリーンショットは、対応するAltテキストが付いたアセットの例です。

代替テキストの例

自動代替テキスト生成の要件

画像の代替テキストを自動的に生成するためには、いくつかの前提条件を満たす必要があります:

  1. ファイル形式の互換性:
    • 自動代替テキスト生成を有効にするには、画像がJPEGまたはPNG形式である必要があります。
  2. ファイルサイズの制限:
    • アップロードされた画像は、自動代替テキスト生成の対象となるために最大10MBのファイルサイズ制限を守る必要があります。

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

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

アセットエンドポイントを使用して、predictionsプロパティを通じてAltテキストデータを取得できます。以下に、単一のアセットに対して管理APIから送信されたレスポンスの例を示します:

GET https://api.imgix.com/api/v1/assets/66204a3643a0860f8a6151a8/red-fox.jpeg
{ "data": { "attributes": { ... "origin_path": "/red-fox.jpeg", "predictions": {
"alt-text": [ "a fox laying down in the snow with its eyes closed" ] },
"source_id": "66204a3643a0860f8a6151a8", ... }, "id":
"66204a3643a0860f8a6151a8/red-fox.jpeg", "type": "assets" }, ... }

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

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

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

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

まとめ

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