---
id: seo-for-designers
title: "SEO for Designers 2026"
category: seo
platform: web
tags: [core-web-vitals, layout-shift, font-loading, image-optimization, mobile-first, accessibility]
sources: ["https://web.dev/articles/vitals", "https://web.dev/articles/optimize-cls", "https://web.dev/articles/font-best-practices", "https://developers.google.com/search/docs/crawling-indexing/mobile/mobile-sites-mobile-first-indexing", "https://www.uxpin.com/studio/blog/web-design-seo-key-principles/", "https://www.uxpin.com/studio/blog/ux-seo-guide/", "https://www.modernwebseo.com/en/blog/seo-friendly-web-design-guide/", "https://www.elegantthemes.com/blog/design/web-design-and-seo"]
updated: 2026-07-08
---
# SEO for Designers 2026
Every design decision — hero media, font choice, navigation pattern, animation — becomes a Core Web Vitals number, a crawlability property, or an accessibility signal. This file maps design choices to their SEO consequences with hard rules. Thresholds referenced: LCP ≤ 2.5 s, INP ≤ 200 ms, CLS ≤ 0.1 at the 75th percentile of real users (see technical-seo.md).
## 1. Layout Stability (CLS) — Design Rules
CLS ≤ 0.1 means the page visually budges almost not at all after first paint. Shifts are caused by *designed* elements arriving late.
**Rules:**
- **Reserve space for everything that loads late.** Images, videos, iframes, embeds, ad slots, testimonial carousels: fixed `aspect-ratio` or explicit `width`/`height` in the design spec, always.
```css
.hero-media { aspect-ratio: 16 / 9; width: 100%; }
img { max-width: 100%; height: auto; } /* with width/height attrs in HTML */
```
- **Cookie banners and promo bars:** design them as `position: fixed` overlays (bottom sheet) or reserve their height in the layout. Never let them push the page down on arrival.
- **No content injected above the fold after load** — late-loading announcement bars are the single most common CLS failure.
- **Skeleton screens must match final content dimensions exactly** — a skeleton that's shorter than the loaded card causes the shift it was meant to prevent.
- **Carousels/accordions/tabs:** size the container to the tallest state, or animate `transform` (compositor-only) rather than `height`/`top`. `transform`/`opacity` animations never count toward CLS; layout-property animations do.
- **Buttons/badges with dynamic text** ("3 items"): min-width so digits changing doesn't reflow neighbors.
- Design review gate: load the page on throttled 4G and watch — anything that visibly jumps fails the design, not just the build.
## 2. Font Loading — Typography Without the SEO Tax
Web fonts are a top cause of both CLS (swap reflow) and slow LCP (text is often the LCP element).
**Rules:**
- **Max 2 font families, ≤ 4 total weights/styles.** Every weight is a network file. Prefer a variable font when you need > 2 weights of one family.
- **Self-host WOFF2.** Third-party font CDNs add a connection; Google Fonts via CSS link is slower than self-hosting and has privacy implications in the EU.
- **Preload the primary text font:**
```html
```
- **`font-display: swap`** so text is never invisible (FOIT kills LCP). Then neutralize the swap-reflow with fallback metric matching:
```css
@font-face {
font-family: "Inter";
src: url("/fonts/inter-var.woff2") format("woff2");
font-display: swap;
}
@font-face {
font-family: "Inter Fallback";
src: local("Arial");
size-adjust: 107%;
ascent-override: 90%;
descent-override: 22%;
}
body { font-family: "Inter", "Inter Fallback", sans-serif; }
```
(`size-adjust`/`ascent-override` tuned so the fallback occupies identical space → zero font-swap CLS. Tools: Fontaine, next/font does this automatically.)
- **Subset fonts** to used character sets (latin) — often 70%+ smaller.
- Decorative display fonts used once in the hero: consider an SVG wordmark or accept system-font fallback on slow connections.
- **Don't** load icon fonts (Font Awesome as font) — use inline SVG icons; icon fonts are a render-blocking request and an accessibility problem.
## 3. Images & Media — The LCP Discipline
The hero image is usually the LCP element; the design decision about it *is* the performance decision.
**Rules:**
- **Formats:** AVIF first, WebP fallback, via `` or content negotiation. JPEG only as last resort; PNG only for UI screenshots needing lossless; SVG for logos/icons/illustrations.
- **Hero/LCP image:** `fetchpriority="high"`, never `loading="lazy"`, preloaded if it's a CSS background. Target ≤ 200 KB for a full-bleed hero (AVIF makes this achievable at 1920 px).
- **Everything below the fold:** `loading="lazy" decoding="async"`.
- **Responsive sizing:** export/serve multiple widths with `srcset` + `sizes`; never ship a 2400 px image into a 400 px slot:
```html
```
- **Alt text on every meaningful image:** describe content and function, include keywords only when natural. Decorative images: `alt=""` (empty, not missing).
- **Descriptive filenames:** `bakery-website-redesign-hero.avif`, not `IMG_4021-final-v3.png`.
- **Background video heroes:** muted, `preload="none"` or poster-first, compressed ≤ 2–3 MB, with a static image fallback on mobile/reduced-data. Autoplaying video must never be the LCP bottleneck — the poster image can be the LCP element instead.
- Text as text, never baked into images — invisible to search, AI engines, and translation.
## 4. Mobile-First Indexing — Parity Is Non-Negotiable
Google indexes and ranks from the **mobile rendering** of your site. Whatever the mobile design hides, SEO loses.
**Rules:**
- **Content parity:** the mobile design must contain the same content, headings, structured data, and internal links as desktop. "Simplified" mobile pages that drop sections drop rankings.
- Content in accordions/tabs on mobile is fine and fully indexed — as long as it's in the DOM (HTML present, visually collapsed), not fetched on click.
- **Tap targets ≥ 48×48 px** with ≥ 8 px spacing; body text ≥ 16 px without zooming; no horizontal scroll at 360 px width.
- `` — absence makes the page "not mobile friendly" outright.
- No intrusive interstitials on mobile entry (full-screen popups before content) — explicitly penalized. Design email-capture as inline sections, exit-intent (desktop), or small dismissible banners.
- Design mobile-first in Figma: the 375–414 px frame is the canonical design, desktop is the enhancement.
- Hamburger menus are fine for crawling (links must be in HTML), but every strategic page should also have contextual in-body links (see on-page-seo.md §4).
## 5. Accessibility ↔ SEO Overlap
Accessibility work is SEO work — the same semantics feed screen readers, Googlebot, and LLM crawlers:
| Accessibility practice | SEO effect |
|---|---|
| Semantic landmarks (`
```
- **Alt text on every meaningful image:** describe content and function, include keywords only when natural. Decorative images: `alt=""` (empty, not missing).
- **Descriptive filenames:** `bakery-website-redesign-hero.avif`, not `IMG_4021-final-v3.png`.
- **Background video heroes:** muted, `preload="none"` or poster-first, compressed ≤ 2–3 MB, with a static image fallback on mobile/reduced-data. Autoplaying video must never be the LCP bottleneck — the poster image can be the LCP element instead.
- Text as text, never baked into images — invisible to search, AI engines, and translation.
## 4. Mobile-First Indexing — Parity Is Non-Negotiable
Google indexes and ranks from the **mobile rendering** of your site. Whatever the mobile design hides, SEO loses.
**Rules:**
- **Content parity:** the mobile design must contain the same content, headings, structured data, and internal links as desktop. "Simplified" mobile pages that drop sections drop rankings.
- Content in accordions/tabs on mobile is fine and fully indexed — as long as it's in the DOM (HTML present, visually collapsed), not fetched on click.
- **Tap targets ≥ 48×48 px** with ≥ 8 px spacing; body text ≥ 16 px without zooming; no horizontal scroll at 360 px width.
- `` — absence makes the page "not mobile friendly" outright.
- No intrusive interstitials on mobile entry (full-screen popups before content) — explicitly penalized. Design email-capture as inline sections, exit-intent (desktop), or small dismissible banners.
- Design mobile-first in Figma: the 375–414 px frame is the canonical design, desktop is the enhancement.
- Hamburger menus are fine for crawling (links must be in HTML), but every strategic page should also have contextual in-body links (see on-page-seo.md §4).
## 5. Accessibility ↔ SEO Overlap
Accessibility work is SEO work — the same semantics feed screen readers, Googlebot, and LLM crawlers:
| Accessibility practice | SEO effect |
|---|---|
| Semantic landmarks (`