Clicky

Essentials

What are image alt tags (text) in SEO? Examples included

Posted on
May 20, 2023
Segment
Marketing Team
SEO plans from $1,199/month

All the value you need from an SEO agency. Request a free audit and proposal to uncover SEO gaps across your site.

GET STARTED TODAY

Image alt tags

Marketers know the impact of images. They play a crucial role in engaging website visitors. However, it's equally important to ensure that images are accessible to all users, including search crawlers and those who may rely on assistive technologies. This is where image alt tags, also called image alt text, come into play.

Keep reading to learn understand what image alt tags are, why they are important, and see some examples and tips for optimizing them effectively.

Understanding image alt text

Image alt tags are HTML attributes that provide alternative text descriptions for images. When an image can't load right, the alt text is displayed in place of that image. Additionally, alt tags are read by screen readers to assist those who are visually impaired so they can better understand the content of the image.

Here's why they're important:

  • Accessibility: Alt tags are crucial for web accessibility, making images accessible to individuals who are visually impairments or those who rely on assistive technologies.
  • Benefits: Alt tags also contribute to SEO by providing search engines, like Google and Bing, with context about the image, which can improve your website's visibility and rankings in relevant search results.

Image alt tags tips

Be descriptive

Describe the image accurately and concisely, conveying its content and purpose.

Example: Alt tag for a cat image: "A fluffy gray cat playing with a ball of yarn."

Be relevant

Incorporate relevant keywords into alt tags, but avoid keyword stuffing. Focus on providing meaningful descriptions.

Example: Alt tag for a beach vacation image: "Sunset view at a tropical beach resort in Hawaii."

Don't repeat

If multiple instances of the same image appear on a page, use unique alt text for each instance to provide specific details.

Example: Alt tag for a logo image: "Company Name Logo" (on the homepage) and "Company Name - Contact Us" (on the contact page).

Be unique

Skip phrases like "image of" or "picture of" since it's already implied.

Example: Instead of "Image of a red rose," use "Red rose in full bloom."

Be creative

For purely decorative images that don't convey meaningful information, use empty alt tags or a null alt attribute (alt="") to indicate that they are decorative.

Example: Alt tag for a decorative line separator: ""

How to implement image alt text

Via your HTML code

When adding images directly through HTML code, include the alt attribute within the image tag.

Example: <img src="image.jpg" alt="A captivating sunset over the ocean">

Via your Content Management System (CMS)

Most CMS platforms, such as WordPress and HubSpot, allow you to add alt tags when inserting images into your content. See below for quick steps on how to add or modify your alt tags in these popular CMS providers.

How to update alt text in WordPress

  1. In your WordPress account, go to the page/post where the image is located.
  2. Edit the page/post and locate the image you want to update.
  3. Click the image. You should see an "Edit" button or pencil icon.
  4. Click the "Edit" button, which will open the image editor.
  5. In the image editor, you'll find an option to add or modify the image's alt text.

How to update alt text in HubSpot

  1. In HubSpot, visit the website/landing page or blog post where the image is located.
  2. Edit the page or post by clicking on the "Edit" button.
  3. Find the image you want to update and click on it to select it.
  4. In the image properties panel, you'll find an option to add or modify the alt text.

How to update alt text in Webflow

  1. In Webflow, open your project and go to the page or template where the image is located.
  2. Select the image element you want to update.
  3. In the right sidebar, you'll find the "Settings" panel for the selected element.
  4. Within the "Settings" panel, look for the "Alt" field or attribute.
  5. Enter a descriptive and relevant alt tag for the image in the "Alt" field.

Optimize your images the right way

Image alt tags are essential for enhancing accessibility, allowing all users to access and comprehend the content of images. Optimizing alt text with relevant descriptions and keywords can contribute to improved SEO and search engine visibility, even in the Google Images directory.

Incorporating descriptive alt tags not only benefits individuals with disabilities but also enhances your website's overall accessibility, user experience, and search engine optimization efforts. So, take the time to optimize your image alt tags and make your website more inclusive and SEO-friendly.

Contact Segment to see how you can find and fix issues relating to your image alt text.

Explore more updates

Technical
February 1, 2023

Your stress-free guide to 301 redirects

Technical
February 20, 2023

Google PageSpeed Insights vs. Lighthouse: The difference

Essentials
May 15, 2023

What are header tags (H1 - H6) in SEO? Examples included