Updated on September 25, 2024
·Originally published on May 24, 2022
Adding images to your web pages helps enrich your content for both users and search engines alike, like adding pizza toppings to your favorite pie. But do we still need to tag images in this era of generative AI and the sophistication of search engine crawlers?
Search engines have long been able to “read” images, but historically, we have needed to give them a helping hand. And that helping hand also ensures compliance with accessibility standards, a win-win for helping both users and search engines properly “see” image content.
This post will outline everything you need to know when you are tagging your images for SEO.
Tagging your images for SEO is the process of applying HTML attribute tags to your images in order to help search engines understand the content of your images.
In just about every use case, images enrich your page’s content for both users and search engines. However, if we’re not also tagging these images with the appropriate image tags, we’re doing our content and users a significant disservice.
Selecting images that are highly relevant to your page’s content is the first step toward image optimization for SEO. Skip irrelevant stock photos and instead carefully select more suitable images, illustrations, or original diagrams. These enable your ability to use highly relevant terms and natural keywords in your images tags, which contribute safely to improved rankings and traffic from image searches.
Additionally, this practice also helps your content be in compliance with the Web Content Accessibility Guidelines (WCAG) on image accessibility. EU web standards for accessibility require specific attributes — namely the alt text attribute — be populated for screen readers, and sites can face fines for neglecting to comply with these standards. Image tags provide visually impaired users as well as those on low bandwidth connections with accurate descriptions of your image content.
Image tags are HTML attributes that are added to images to provide additional information about an image in your page’s content.
Fortunately, there’s only two for SEO you need to know:
HTML attribute | Also known as | Purpose | WCAG required? | Code example |
---|---|---|---|---|
Alt text attribute | “Alt text,” “alt attribute,” “alternative text” or sometimes incorrectly referred to as “alternate text” | Specifies text for an image, if it can’t be displayed either because the user uses a screen reader, has a slow connection, or there’s an error with the image. | Yes | <img src="image-filename.jpg" alt="image description”> |
Image title tags | “Title attribute” or “title text” | Provides additional information about an image, typically in the form of a tooltip when users hover over the image. | No | <img src="image-filename.jpg" title=“image tooltip”> |
As you can see in the table above, only one of the image tags is required per WCAG: the alt text attribute. However, using both attributes provides two opportunities to improve relevance and contextual understanding of your images as related to your page’s content through enlisting them in your HTML.
Alt text attribute: The alt text attribute is primarily used by screen readers for the visually impaired, but historically also helped search engines understand images. And while search engines like Google’s AI-driven image processing has greatly improved their ability to “read” and understand images, and thus reducing their reliance on alt text, this attribute still remains key, adding significant context to the page, as well as other pages when images are used as links and the alt text serves as anchor text. Most importantly for SEO, the alt text attribute helps the image perform better in image searches.
Image title tags: Image title tags have fallen a bit out of use over the years, but they still can enhance user experience by providing users additional context for an image when they hover over it. These attributes can also improve experience for visually impaired users when hovering over an image they find difficult to decipher.
If you had to choose just one attribute to enlist, alt text is the clear winner, as it ensures you’re in compliance with WCAG and SEO best practices. However, the two can be complementary and allow for added natural keyword usage to improve the image relevance to the page’s content.
SEO image tags (or HTML image attributes) are not to be confused with image meta tags (or image metadata), which are attributes embedded within images, typically by the device that recorded the image. The key difference between the two is that SEO image tags describe the image’s appearance (what it looks like) whereas image meta tags include information about the image itself (technical details).
For instance, image meta tags may include:
Date and time: When the photo was taken.
Location: Where the photo was taken.
Camera: What device and technical settings (e.g. shutter speed, aperture, and ISO).
Copyright: Information on usage rights.
An EXIF data viewer or metadata editor allows you to add to or edit image meta tags. While these fields lend themselves less to SEO, they are extremely useful for organizing and retrieving image assets inside media libraries and digital asset management (DAM) software solutions.
Let’s use the following image for our example SEO image tags. The image is AI and was generated by DALL-E 3, OpenAI's image generation model. Relevant side note, Google will soon begin labeling images as AI-generated in image search results.
To generate the image above, I gave the following prompt to ChatGPT: “a slice of pizza riding a skateboard in the style of a renaissance painting.” I must say, I was stoked with this image. ChatGPT nailed the prompt, where others (who will remain unnamed) failed miserably.
Let’s take a look at some good and bad examples of image tags, as well as some generated with AI, starting with the bad.
Bad example: Keyword stuffing purely for search engines, providing no value for users.
<img src="pizza-man.jpg" alt="best cheap pizza slice pie place shop store delivery near you"/>
Better example: Basic description of the image, and probably better suited as use for the image title tag.
<img src="pizza-man.jpg" alt="pizza on a skateboard"/>
Best example: Simply using the very descriptive prompt AI needed to generate the image as the alt text.
<img src="pizza-man.jpg" alt="a slice of pizza riding a skateboard in the style of a renaissance painting"/>
Using AltText AI, an app that integrates with Contentful, generated the following:
“A surreal depiction of a slice of pizza with human legs balancing on a skateboard in a dynamic pose.”
Using another AI tool, Ahrefs AI Image Alt Text Generator, gave us three options:
“A vibrant painting depicting a man skateboarding with a slice of pizza humorously balanced on his head.”
“An artistic representation of a man on a skateboard, playfully balancing a slice of pizza atop his head.”
“A colorful artwork showing a man riding a skateboard, with a slice of pizza amusingly perched on his head.”
I’d definitely say AltText AI got it more “right” than Ahrefs since the character is more of a slice of pizza with human legs than a man with a slice of pizza on his head. Other than that, both tools capture the essence of the image fairly well and are roughly all the same length, thus would be ideal alt text attributes, especially when generating alt text at scale.
Here are good and bad examples of image title tags, to which I’ve included our best alt text from above.
Bad example: Using keyword stuffing, using the filename, or including a call-to-action doesn’t provide value to visually impaired users nor does it contribute to the pages content.
<img src="pizza-man.jpg" title="order pizza now" alt="a slice of pizza riding a skateboard in the style of a renaissance painting"/>
Good example: Our “better” alt text example from above is pretty spot on for the image title tag, short and to the point.
<img src="pizza-man.jpg" title="pizza on a skateboard" alt="a slice of pizza riding a skateboard in the style of a renaissance painting"/>
Now that you’ve decided which SEO image tags (or both) you’re going to use and seen some examples of both, let’s look at some best practices for each.
Succinctly describe the image, between 3-15 words in length, using natural language.
Keywords may be used where appropriate, however, naturally avoiding keyword stuffing at all costs as this can be seen as spam.
Ensure the attribute is unique for each image, however, it’s absolutely fine to reuse the attribute wherever the image is reused.
Consider a requirement for accessibility compliance with WCAG.
Keep them brief (3-5 words) to ensure hover state tooltip is succinctly displayed.
As with alt text, avoid keyword stuffing and using the filename for this attribute.
Ensure the attribute is unique for each image, however it’s absolutely fine to reuse the attribute wherever the image is reused.
For more information, see our images for SEO guide and Google’s documentation on images SEO best practices.
Tagging images manually is basically how it sounds: Reviewing each image and manually applying image tags to each image. This can be a very labor-intensive and time-consuming task, however, the results of manually tagging images are typically better if performed with an SEO lens. A trained SEO professional can delicately balance the descriptive nature of the fields with natural keyword usage, whereas AI solutions may struggle to get this formula just right.
Just as it sounds, this is the process of tagging images automatically. This may sound like it would involve AI — which it can and typically does — however, this process can take other forms that might be beneficial to explore before jumping straight to an AI solution.
For example, let’s say you and your team are really great about using descriptive image filenames. This content can be parsed through using a script or spreadsheet formula to get the values you need for your image tags, especially at scale, and these can be perfect as image title tags due to length.
Or perhaps your DAM already has a description field that simply is not linked up to your HTML output. These fields can then be connected in the back end so that the output from the DAM is your alt text attribute on the front end.
One of the most efficient ways to tag images is using AI. Namely, it will cut down significantly on time, especially at scale where you have hundreds or thousands of images to tag. However, it’s highly recommended to review the output as AI can totally get it wrong.
Let’s bring back our Renaissance-era skateboard riding pizza man AI image from above. We gave the DALL-E 3 (via ChatGPT) the prompt of “a slice of pizza riding a skateboard in the style of a renaissance painting” to generate the image.
The output of whatever AI-powered image tagging solution you choose should be along the lines of the input (prompt) you would give a generative AI image tool to create the issue. Make sure you are testing this out before employing this solution systemically. It should conform to the SEO image tagging best practices outlined above.
If scale is what you need, then most DAMs now also have AI image tagging as part of their core offering. Check out a few of the DAMs Contentful integrates with, most of which offer AI image tagging.
Contentful’s flexible AI Content Generator can be configured to generate alt text attributes, as well as many other fields and applications, such as generating copy for an entire page or localizing copy into over 95 languages, all powered by ChatGPT.
Contentful also has additional options when it comes to image tagging. Contentful’s AI Image Tagging integration is great for generating tags for use in a DAM or organizing your media library, however, it doesn’t generate alt text attributes. Additionally, Contentful has an AI Image Generator powered by OpenAI using DALL-E to generate images directly in our web app.
If your website’s relatively small with a reasonable library of assets, and you have the time or resources, manually tagging will most always produce the best results.
However, if you manage a large resource of images, a DAM is the most ideal long-term option, and, of course, you have the budget. If you are on a tighter budget or are happy using your CMS platform’s native media library functionality, then perhaps explore automated image tagging integrations with free or low-cost pricing options such as AltText AI.
You will want to weigh up the value of optimizing images on your website. On the one hand, tagging images with alt text helps your website be in SEO best practices and WCAG compliance. This is beneficial for both users and search engines alike, and can result in being rewarded with increased traffic to your website through both traditional search and image search results.
On the other hand, this can be a laborious and time-consuming task, especially if you are doing this manually. And even if you’re using an automated or AI-powered solution, reviewing the output — which is highly recommended — can still be very time consuming.
This pros and cons of image tagging for SEO table below should hopefully help you decide:
Pros | Cons |
---|---|
More traffic: Tagging images with descriptive text can boost your page’s relevance and ranking in traditional search results, as well as increase visibility in image search results. | Time consuming: The main complaint with manual image tagging is that it’s labor-intensive and time consuming, especially at scale. |
Accessibility compliance: Tagging your images with alt text ensures your images are WCAG compliant for the visually impaired and ensures inclusive web design. | Accuracy issues: The biggest complaint with automated image tagging is that it can be unreliable and misidentify objects, leading to inaccurate or incorrect tags. |
Improved asset management: Image tagging creates rich metadata, which improves your ability to retrieve visual content in your DAM or media library. | Price prohibitive: Some AI image tagging tools can come with significant costs or require paid subscriptions, however the rise of GenAI has helped bring down the price. |
As you can see above, there’s very good reasons to adopt a SEO image tagging strategy And while there are prohibitive reasons to tagging your images, your choice is more based on which approach best suits your capacity and needs — whether it’s manual-, automated-, or GenAI-tagging methods — rather than abandoning it altogether.
Let’s talk next about what you’d be leaving on the table if you don’t bother with tagging your image for SEO.
The alt text attribute historically has been widely abused by the SEO industry as a great place for hiding and stuffing keywords. This practice produces a poor experience for the visually impaired, and its abuse can lead to negative consequences from search engines.
However, when it’s executed well, the user is first in your mind when you write them — not SEO or keywords. Selecting highly relevant images for your page’s content will greatly help the SEO image tags themselves to be naturally relevant, thus improving the search engine’s contextual understanding of your page’s content. This should lead to improved performance in traditional search results, as well as in image search results.
While you should always prioritize improving a page’s content over the optimization of image tags, they should be in your broader SEO strategy and prioritized accordingly. And it’s worth keeping in mind that it’s a bit harder to measure its performance impact — with the exception of increased traffic from image search — and perhaps treated a bit more like good SEO housekeeping.
By leaving these tags empty or under-optimized, you’re not only out of compliance with WCAG and inclusive web design standards, you’re leaving a relatively simple and low-lying opportunity on the table.
Image management in Contentful is simple and intuitive. Images can be uploaded manually within our web app or programmatically using our Content Management API.
To manually tag an image in Contentful, simply upload the image in the Media tab in the top navigation bar within the web app. Once you upload the image, you need to fill in the title and description fields.
Depending on how your website’s configured, the title field can be linked up so it displays as the image title tag and thus displays as the tooltip on hover. The description field is most often linked up with the alt text attribute, as it is with our own website.
As for AI image tagging, you can use the Contentful integration AltText AI to automate your image tagging and improve tagging efficiency. This app uses AI and allows you to automatically generate alt text for images and bulk update alt text for existing images. It’s also available in over 130 languages and will help ensure WCAG compliance. See it in action below:
For much larger media libraries, a DAM software solution with AI integration is recommended to help with scale, particularly when we’re talking about thousands (or more) of images. Here’s the DAM solutions we integrate with, however, if you’re interested in a specific DAM, please contact support to let us know that you are interested in a specific integration.
For more information, please see our Help Center guidance on using media in Contentful and our developer documentation one using images in Contentful.
Hopefully, if you’ve made it this far, you are convinced of the value of SEO image tagging. Providing a more inclusive web experience and not leaving search traffic on the table should be enough motivation to get cracking on filling in those alt text attributes.
In the meantime, here are some additional resources on image optimization:
SEO for images: best practice, compliance tips, and how to do it in Contentful.
Simplify image workflow with imgix and Contentful.
Build your own image app integration, specifically an image hotspot configurator.
Image optimization with or without Contentful’s Images API.
Image file formats and why they are important.
And again, here’s our Help Center guidance for content creators on using media in Contentful and our documentation for developers on using images in Contentful.
Subscribe for updates
Build better digital experiences with Contentful updates direct to your inbox.