SEO basics every designer should know before handoff
A beautiful page that nobody finds isn’t doing its job. SEO usually gets treated as a “marketing problem” that shows up after launch but by then, half the decisions that actually affect it were already locked into the design file weeks earlier.
Structure is SEO, before content ever is
Search engines don’t see a page the way a person does. They see a structure a hierarchy of headings, a reading order, a set of signals about what matters. If that structure is wrong in the design, no amount of good copywriting fixes it later.
Heading hierarchy
Every page needs exactly one h1 — usually the main title — followed by a logical h2, h3 nesting for sections and subsections. A common design habit is choosing heading levels by how something looks (“this needs to be bigger, make it an h2”) rather than by where it sits in the content hierarchy. That’s an easy habit to break once you know it matters: pick the heading level for structure, and adjust the font size separately in the styles.
Reading order matches visual order
A layout that looks correct visually but is coded in a different order than it reads (common with absolute positioning or complex grids) confuses both screen readers and search engines. When handing off a design, it helps to walk through the intended top-to-bottom reading order explicitly, not just the visual layout.
Images carry more weight than they look like they do
- Alt text isn’t optional decoration. It’s how search engines (and screen reader users) understand what an image contains. “image_final_v2.png” tells them nothing; “team collaborating around a whiteboard during a sprint planning session” tells them everything.
- File names matter before upload. A descriptive file name like
e-house-crm-dashboard.pngcarries a small but real SEO signal that a generic export name throws away.
- Image weight affects ranking. Page speed is a ranking factor, and unoptimized images are the most common cause of a slow page. A design that leans on huge, uncompressed hero images looks great in Figma and loads slowly in the real world.
The fastest SEO win most teams skip isn’t a keyword — it’s naming the file correctly the first time.
What to hand off, not just what to design
A design file that’s SEO-ready includes more than visuals. Before handoff, I try to include:
A clear heading hierarchy noted on each screen, not just implied by font size
Descriptive alt text drafted for every meaningful image
Suggested page title and meta description for each page
Image export guidance — format and target file size, not just dimensions
Any internal links the page should include, called out explicitly
None of this replaces a real technical SEO pass. But it means the developer isn’t guessing, and the content the design was built around actually has a chance to be found.
Why this matters more once you've done both jobs
Designing without thinking about findability is like writing a great book and never listing it anywhere it could be discovered. The two aren’t separate disciplines competing for priority they’re two halves of the same outcome: something worth using, that people can actually reach.