Image Alt Text: A Practical SEO and Sales Guide
By Arash Latifi — Founder, The DevArt
What is alt text, how to write it correctly, and why it matters for store SEO and accessibility. With patterns, real examples, and an audit routine.
TL;DR — Describe the image, don't advertise it; good alt text helps SEO, helps screen readers, and stops your layout breaking on slow mobile connections.
Plenty of stores upload hundreds of product photos and never write the alt attribute. The result: Google can't tell what the image shows, the page performs worse in Image Search, and anyone using a screen reader gets nothing at all.
Here's the short version of how alt text works, what it should never contain, and how you can fix your whole site in an afternoon.
What alt text actually does
alt is an attribute on the img tag that provides text when the image can't be loaded or seen. Three groups benefit:
- Screen reader users — it's the only way to understand an image.
- Search engines — Google uses alt text to understand what an image and its page are about.
- Users on slow connections — when images fail, alt text fills the empty box instead of showing a broken layout.
Important nuance: alt text has no guaranteed direct keyword-ranking impact, but naturally describing the image helps Google understand the page topic.
What to write and what to skip
The rule is simple: describe, don't promote.
| ❌ Wrong | ✅ Right | Why |
| --- | --- | --- |
| image | men's running shoe, Aliyas model, 390000 toman | Describes reality |
| cheap shoes buy shoes | men's running shoe, Aliyas model | Keyword stuffing reads as spam |
| click here for cheap shoes | men's running shoe, Aliyas model, flat sole | CTAs don't belong in alt |
| Five keyword repeats | 8–12 words of plain description | Readability and trust |
The 100-character rule: keep alt under roughly 125 characters, because in practice nobody reads more than that.
A few technical rules people forget:
- Decorative images (dividers, icons, slider arrows) →
alt="". That explicitly says "nothing to announce here", which is better than a fake description. - Product photos → always have alt, even if nearby text repeats it. Link the image to the product page and put the alt on the link, not the image, so you don't produce two links with the same name.
- Logo → the brand name.
- Never start alt with the word "image" or "photo of" unless you really are describing a picture of a picture.
Real example: the image sits inside a figure, the alt is a short factual description ("Men's Aliyas running shoe on a white background, front view"), width and height prevent layout shift, loading="lazy" is set, and the caption adds detail in a figcaption.
Checklist: clean up your site's alt text
- [ ] Every product, homepage banner, and category image has descriptive alt
- [ ] Decorative images use
alt="" - [ ] Linked images have alt on the link, not the image
- [ ] The logo has the brand name and isn't repeated in the header
- [ ] Alt text stays under 125 characters with no "image of" padding
- [ ] Editorial images use
<figure>with a<figcaption> - [ ] Image files have meaningful names (
ali-3600.webp, notIMG_2048.webp) - [ ] Images show as indexed in Search Console
Speed is part of it
Alt text only helps if the image actually loads. Heavy photos make users wait and can make Google treat the asset as lower quality. width, height, modern formats, and loading work alongside alt to make an image production-ready.
If you haven't measured your site speed yet, start with the Core Web Vitals guide. And if you're still uploading raw images, the Next.js image optimization guide has exactly the code you need.
Photo quality is a separate topic: product photography for stores helps your images actually sell, not just index. To fold alt text into a systematic on-page routine, work through the technical SEO checklist.
How to audit it quickly
Cheap and fast: search for <img tags that have no alt attribute — run grep -rn "<img" src/ and filter out any line containing alt=. Any output is your fix list. Then verify with a real screen reader (NVDA on Windows, VoiceOver on macOS, TalkBack on Android) and judge whether the descriptions make sense. Ten minutes of that tells you more than any SEO tool.
Prioritize: do half of it well
You can't fix every image in one sitting. Work in this order:
- Homepage images and top banners
- Best-selling product photos
- Main category images
- Blog post images
- Everything else
Ten images a day clears the whole site in two weeks, and accessibility is where you'll feel the difference first — with a slower, compounding SEO benefit.
FAQ
Q: Should I stuff the keyword into alt text?
If the keyword fits naturally into the description, great. Repetition ("shoes shoes shoes cheap shoes") backfires: it's annoying for screen reader users and reads as manipulation to Google.
Q: Should decorative images get alt="" or be removed entirely?
Keep alt="". Hiding them with display: none or CSS means crawlers can't read them at all, while an empty alt explicitly tells them the image carries no content.
Q: Where does alt go when an image is wrapped in a link?
Alt stays on the img tag in all cases. What belongs on the link itself is aria-label or link text describing the action, such as "view product details" — never a filename.
Sources
- Google Search Central — Google image SEO best practices: https://developers.google.com/search/docs/appearance/google-images
- W3C WAI Tutorials — An alt decision tree: https://www.w3.org/WAI/tutorials/images/decision-tree/
- Google Search Central — Image sitemaps: https://developers.google.com/search/docs/crawling-indexing/sitemaps/image-sitemaps
- Reddit r/SEO — Is it confusing for SEO to post the same images: https://www.reddit.com/r/SEO/comments/1htojt8/