The invisible user
For a long time, I thought SEO was a dark art practiced exclusively by marketers keyword stuffing and writing endless blog posts. As a designer, I assumed my job was just to make the site look good and feel intuitive for the human looking at the screen.
I was wrong. There is another, completely invisible user navigating every site you build: the search engine crawler. And this user doesn't have eyes. It doesn't care about your subtle drop shadows or your clever grid layout. It only understands the structure, speed, and semantics you leave behind in the code.
Semantic HTML: Designing with logic, not just pixels
The biggest mistake designers make when moving into frontend development is using HTML tags purely for their visual output. We use an <h3> because we want the text to be medium-sized, or a <div> when we should be using a <button>.
Visual styling should always be decoupled from HTML structure. Headings (H1 through H6) exist to create a document outline, exactly like a table of contents in a book. If you skip from an H1 to an H3, you break the hierarchy for screen readers and search engines alike.
“SEO isn't a dark art practiced by marketers; it's often just accessibility for robots. If you design for accessibility, you are already doing SEO.”
Lighthouse metrics mappingCore Web Vitals: Where design meets performance
Google directly ties search rankings to how annoying your site is to use. They measure this through Core Web Vitals. As a designer, you have direct control over these metrics.
That massive, unoptimized hero image? It tanks your Largest Contentful Paint (LCP). That custom web font that causes the text to flash and jump around while loading? That ruins your Cumulative Layout Shift (CLS). Designing for the web means designing for the constraints of the network.
Always serve images in modern formats (WebP/AVIF) with explicit width & height attributes.
Maintain a strict, unbroken H1-H6 outline per page.
Design Open Graph (OG) images to control how your links look on Twitter, Slack, and iMessage.
Ensure touch targets are at least 44x44px to avoid mobile usability penalties.
Use <nav>, <main>, <article>, and <footer> tags instead of endless <div>s.
Designing the share experience
A webpage isn't just viewed in a browser; it's copy-pasted into Slack, shared on Twitter, and sent in text messages. This is controlled by Metadata and Open Graph (OG) tags.
Think of the OG Image and meta description as a mini-billboard for your design. If you don't design an explicit 1200x630px OG image, platforms will scrape a random, cropped image from your page, usually resulting in an ugly, cut-off logo. Taking 10 minutes to design a branded meta image and write a punchy description often does more for your click-through rate than months of technical tweaking.
The short version
SEO is not the enemy of good design. It forces you to build lighter, faster, and more logically structured websites. When you prioritize semantic HTML, respect performance metrics, and design the metadata, you aren't just doing "SEO work" — you are becoming a better product designer.
I design and build digital products from Sri Lanka. If this was useful, feel free to share it or reach out.