Enhancing SEO With Alt Text Generation

In today’s digital landscape, accessibility and search engine optimization (SEO) are paramount considerations for website owners and developers. Alt text, or alternative text, plays a crucial role by providing descriptive information about images to users with visual impairments and search engines.

What is Alt Text?

Alt text are HTML elements used to describe an image’s content. It serves as a textual alternative to images and is typically used when an image fails to load or for users who rely on screen readers to navigate the web.

Importance of Alt Text

1. Accessibility: Alt text ensures that users with visual impairments can understand the content and context of images on a web page.
2. SEO: Search engines rely on alt text to understand the subject matter of images, which can improve the visibility of a web page in search results.

Best Practices for Writing Alt Text

1. Be Descriptive: Provide a clear and accurate description of the image’s content and purpose.
2. Keep it Concise: Aim for brief but informative alt text that conveys the essential information.
3. Avoid Keyword Stuffing: While including relevant keywords is essential, avoid overloading alt text with unnecessary keywords.
4. Decorative Images: For decorative images that don’t convey meaningful content, use empty alt text (alt="") to indicate to screen readers that the image can be ignored.
5. Context Matters: Consider the context of the image and its surrounding content when writing alt text.

Using Alt Text in Asset Manager

You can manually add and save alt text to images indexed by the Asset Manager. Once added, the alt text will be associated with the image and can be accessed either by the Asset Manager UI or by calling the Management API, which will return the alt text data in the response.

You can manually add alt text for up to 100 different languages. Suppose you use the Asset Manager UI to manage alt text. In that case, we recommend focusing on the primary languages spoken by your target audience, as too many languages can clutter the interface.

Generating Alt Text With imgix

For premium users, we automatically tag images in the Asset Manager with descriptive alt text using AI-driven algorithms.

Automatic alt text generation supports up to 5 different languages:

• English
• French
• German
• Italian
• Spanish

To enable this feature on your premium account, please contact our Support team with the languages you want to enable on your account.

Alt texts are seamlessly integrated with any new assets indexed by the Asset Manager, and can be overriden and/or restored in the Asset Manager UI.

Note that automatic alternative text is only generated for newly indexed assets and not for existing assets in the Asset Manager. To generate alt text for existing assets, you can use the refresh asset feature either in the Asset Manager UI or through the Management API. Automatic alt text takes a few seconds to be generated for newly ingested assets, so check again later if it’s not immediately available.

Retrieving Alt Text Using the Management API

After an image has been successfully added to the Asset Manager, you can programmatically add alt text data using our Management API

By using the asset endpoints, you can retrieve the alt text data through the predictions property. You will receive either an alt_text or alt_text_predictions object depending on whether or not the alt text was automatically or manually generated.

Below, we provide an example response sent from the Management API for a single asset:

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"
  }
}

Using Alt Text Generated With imgix

To use alt text, include the alt attribute within the <img> tag of an HTML page and set its value to a brief description of the image. For example:

<img
  src="/red-fox.jpeg"
  alt="A fox laying down in the snow with its eyes closed"
/>

This ensures that all users, regardless of their ability to see images, can understand the content and context of your web page.

Summary

Alt text is a fundamental component of web accessibility and SEO. By following best practices and providing descriptive alt text for images, website owners can ensure their content is accessible to all users and optimized for search engines.