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
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."
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."
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).
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."
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
- In your WordPress account, go to the page/post where the image is located.
- Edit the page/post and locate the image you want to update.
- Click the image. You should see an "Edit" button or pencil icon.
- Click the "Edit" button, which will open the image editor.
- 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
- In HubSpot, visit the website/landing page or blog post where the image is located.
- Edit the page or post by clicking on the "Edit" button.
- Find the image you want to update and click on it to select it.
- In the image properties panel, you'll find an option to add or modify the alt text.
How to update alt text in Webflow
- In Webflow, open your project and go to the page or template where the image is located.
- Select the image element you want to update.
- In the right sidebar, you'll find the "Settings" panel for the selected element.
- Within the "Settings" panel, look for the "Alt" field or attribute.
- 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.