Alt Tags

Alt tags

Alt text (alternative text), are used within an HTML code to describe the appearance and function of an image on a page.

Alt Tag Uses

  1. Adding alt tags to images* is first and foremost a principle of web accessibility. Visually impaired users using screen readers will be reading an alt tag to better understand an on-page image.
  2. Alt text will be displayed in place of an image if an image file cannot be loaded.
  3. Alt text provides better image context / descriptions to search engine crawlers, helping them to index an image properly.

    *Any png, jpg, jpeg, gif, svg, webp uploaded is defined as an image.
HWP image content dialog box

Optimal Alt Text Fomatting

The best format for alt text is sufficiently descriptive but doesn't contain any spammy attempts at keyword stuffing. If you can close your eyes, have someone read the alt text to you, and imagine a reasonably accurate version of the image, you're on the right track.

dog

Not-so-good alt tag = dog

Thi
s alt text can be better because it's not very descriptive. Yes, this is an image of a dog, but there's more to be said about this image.

dog running

Better alt tag = dog running

This alt text
is better. Yes, it is an image of a dog running, but there's still more to be said about this image.

Border Collie running on beach

Ideal alt tag = Border Collie running on beach 

This alt
text is the ideal alternative because it is far more descriptive of what's in the image. This isn't just a dog or a dog running; it's a Border Collie running on a beach.

dog

Not-so-good alt tag = hammer and nail

dog

Better alt tag = hammer nail into a roof

dog

Best alt tag = hammer nail into a roof shingle

Alt Text Tips

  1. Describe the image as specifically as possible. Alt text is, first and foremost, designed to provide text explanations of images for users who are unable to see them.
  2. Keep it (relatively) short. The most popular screen readers cut off alt text at around 125 characters, so it's advisable to keep it to that character count or less.
  3. Use your keywords. Alt text provides another opportunity to include targeted keywords on a page, and thus another opportunity to signal to search engines that the page is highly relevant to a particular search query. While the first priority should be describing and providing context to the image, if it makes sense to do so, include a keyword and/or name of business in the alt text of at least one image on the page.
  4. Avoid keyword stuffing. Google won't "dock points" for poorly written alt text, but there could be consequences if the alt text is stuffed with too many or irrelevant keywords. Again, focus on writing descriptive alt text that provides context to the image and, if possible, includes a targeted keyword, and leave it at that.
  5. Don't include "image of," "picture of," etc. in alt text. It's already assumed your alt text is referring to an image, so there's no need to reiterate it.

When to Use an Alt Tag

Image Type Alt Text (Y/N)
Client Logo* Yes
Call Out / In-Line Images Yes
Slider Yes
Gallery Images Yes
Row / Container Background Images No
Button No
Badges* Yes
Shields* Yes
Icons* No
Social Icons Yes When manually added
Pay Icons Yes When manually added

*Examples

Client Logos

  • Enter NOB logo as alt tag for the Hibu client logo. The client logo is the only instance when you add "logo" to the alt text.
OnTrack Accounting logo
Nittoli's Pizzeria logo
Dali Painting logo

Badges, Shields, Non-Client Logos (usually associated with a row directly above the footer or on contact us page)

  • Transcribe whatever is written in graphic for alt text
The National Trial Lawyers Top 100 Trial Lawyers
EcoTherm Insulation
Best of the Best Dentists

Icons (SVG, png, and, on occasion, jpg, gif, webp)

  • Do not add alt tags for decorative icons including but not limited to those include with the hero, why choose us, recent reviews, footer, engagement, and call outs icons -- essentially any icon that looks like:
Share by: