DEV Community

divineikechukwu
divineikechukwu

Posted on • Edited on

Using AI-Generated Alt Text for Better Search Ranking

Image description

Being a developer today, where clean and optimized code is crucial, can be challenging. It's no longer enough to just write code that works. The demand for flawless websites is higher than ever. But don't worry—AI is already helping out. One area AI can assist with is generating better descriptions for images that don’t load due to code errors or poor connections. This is a game changer because instead of just showing a broken image icon, we can provide a description to help users understand the page.

In this article, we’ll uncover the best AI tools for generating short image descriptions and how to use them. Let’s start!

When saving image files, I sometimes name them things like “hero dog image” or “product 1 image.” 😂 I know it’s not the best naming convention, but I still do it, especially when working alone. So, what is the right way to name an image?

The right image name depends on two main goals:

  • Clarity: The name should clearly describe what the image shows.
  • Search Engine Optimization (SEO): The name should include relevant keywords people might use to search for the image.

Here are some tips for crafting a good image name:

  • Keep it concise: Aim for around 6 words or less. For example: “A man in a pink hat.”
  • Use descriptive keywords: Include nouns and verbs that accurately describe the image.
  • Separate words with hyphens: This helps search engines understand the name better. (e.g., "golden-retriever-puppy" instead of "goldenretrieverpuppy").
  • Focus on the main subject: Don’t list every detail.
  • Avoid abbreviations: Not everyone knows what "product-image-1” means.
  • Target the audience: Consider the keywords people might use to search for the image.

Now, let’s reveal our AI tool for image descriptions:

AltText.ai

Image description

AltText is an AI tool created to generate alt text for images. Some of its advantages include improving SEO and increasing web accessibility.

Here’s how to use it to generate the right image description text for your code:

Step one: Go to the “AltText.ai” website and upload the image you want to describe. You don’t need to create an account if you don’t want to.

Image description

Step two: You can add custom SEO keywords if you like—this step is optional. Then click on “Generate AI text.”

Image description

Step three: Result.

Image description

As you can see, the generated text is cool but might be too long. Our rule for perfect alt text is 6 words or less. So how can we shorten it without ruining the description? That’s where ChatGPT comes into play.

Just use the prompt: “shorten to 5 words: [image description]”

Image description

"Black-dog-with-wrinkled-face" is pretty good for this our image description.

Image description

You can now go ahead to use it in your code.

I hope I was able to teach you something new today. In this article, we learned how to use AltText.AI to generate descriptive text for images to improve website SEO and also how to use ChatGPT to shorten this text to six words for easier use.

Thanks for reading!

Top comments (0)