New format
Image alt and title attributes: how to write them well
`alt` describes the image if the file fails to load or a screen reader reads it. `title` on `img` is a hover tip in some browsers; it barely affects SEO and accessibility.
Below: how to write alt, when to use empty `alt=""`, whether you need title, and what to avoid (keyword stuffing, “image1”). Clickable banners are in the image-as-link article.
Why img attributes exist
Bots and assistive tech don’t see pixels like a person. `alt` gives a text equivalent. For people, alt appears if the image is broken; for SEO — a signal about the image and page topic next to content.
`title` was historically treated as another keyword field. Today it’s a weak optional layer; on touch devices there’s often no hover.
Roles:
- `src` — the file
- `alt` — meaning / empty for decoration
- `width`/`height` — layout space
- `title` — optional tip, not an alt replacement
How to write alt
Describe what’s in the image and why it’s there — without “image shows…”. For a product — model/type; for a diagram — what it explains; for an office photo — short and honest.
If the image carries text (screenshot, meme with a line), alt should convey the text’s essence or decision — or screen-reader meaning is lost.
Examples:
- bad: `photo`, `img_4521`, `buy fridge cheap sale`
- better: `White side-by-side fridge, open shelves`
- for a decorative line: `alt=""`
- for a search icon button: `alt="Search"` or visible text + empty alt
Alt and SEO: realistically
Alt helps convey the image topic and sometimes appear in image search. It’s not faster indexing for the whole site and not a page-one guarantee. More important: a relevant page, a light file, clear context around it.
Don’t duplicate the page Title into every alt. Don’t hide the main offer only in an image without HTML text.
Stronger than alt:
- quality page content
- compression and modern formats
- meaningful captions
- internal links in text
Title on an image
You can give a short hover tip on desktop. Don’t dump a keyword sheet there. Many users never see title.
Don’t confuse `title` on `img` with the document `<title>` or a `<figcaption>` caption.
When title fits:
- extra clarification without critical meaning
- not as the only description source
- not instead of accessible link text
Image links and decoration
If `img` is inside a link with no nearby text, alt should describe the destination (“Pump catalog”), not only “blue button.”
CSS background images have no alt — don’t put the only important meaning there.
Checklist:
- informative — meaningful alt
- decor — empty alt
- image link — alt = action/destination
- no keyword bulk
Rollout practice
In the CMS make alt required for content photos. Crawl for empty and template alts. On accessibility audits check decorative icons.
Example: `<img src="/images/pump.webp" alt="Centrifugal well pump, stainless housing" width="800" height="600">`.
Editorial playbook:
- write alt on upload, not “later”
- ban `image`, `photo`, `banner`
- review commercial galleries
- don’t use title as a keyword dump
FAQ
Is alt required?
For informative images — yes, meaningful text. For purely decorative ones — empty `alt=""` so the screen reader doesn’t read junk.
Is img title required for SEO?
No. Don’t count on title as a ranking factor. Focus on alt, page context, and file quality.
How many characters should alt have?
As many as needed to describe meaning briefly. A short phrase often suffices; a keyword dump doesn’t.
Do keywords in alt help?
Moderate and on-point — fine. Stuffing “buy X cheap photo” into every alt hurts accessibility.
Is alt the same as a caption?
Not necessarily. A caption is visible to everyone; alt is alternative text. You can share meaning, but they needn’t match word for word.
Do button icons need alt?
If visible button text is next to them — often `alt=""`. If the icon is the only meaning — alt should name the action.
Can I use the filename instead of alt?
No. The filename helps organization, but it doesn’t replace alt.
Russian or English alt?
In the language of the page and audience.
Gallery alts all say “buy cheap” — and decorative icons get read as noise?
We’ll set meaningful alt (or empty for decor) — accessibility first, not keyword dumps in title.
Discuss the task
