Web design and SEO are usually treated as separate disciplines — the designer makes it look good, the SEO agency makes it rank. But they're deeply intertwined: the design decisions made when a site is built have direct consequences for how Google crawls, reads, and ranks it. Here are five design mistakes we consistently find when auditing sites that look professional but perform poorly in search.
1. Putting Critical Text Inside Images
Google's crawler reads text. It cannot reliably read text that's embedded inside an image file — a PNG of your headline, a JPEG of your value proposition, or a graphic containing your service descriptions. This approach, common in designs built in tools like Figma where exporting image assets is the default, effectively hides content from search engines. If your most important keyword-rich text lives in an image, Google doesn't know it exists. All headline and body text should be real HTML text, styled with CSS.
2. Relying on JavaScript to Render Primary Content
JavaScript-heavy sites — particularly single-page applications (SPAs) built with older patterns — can present a rendering problem for Google. Although Googlebot can execute JavaScript, it does so in a separate crawl wave that can lag hours or days behind the initial crawl. Content that only appears after JavaScript runs may be indexed late or incompletely. Server-side rendering (SSR) or static generation — where the HTML arrives pre-built from the server — ensures your content is immediately available when Google's crawler arrives.
3. Designing for Desktop Only
Google switched to mobile-first indexing in 2019, meaning it primarily uses the mobile version of your site for indexing and ranking — even for desktop searches. A site designed exclusively for desktop, where the mobile version hides content, collapses sections into non-crawlable accordions, or loads significantly slower due to unoptimised assets, is ranked based on that diminished mobile experience. Every design decision needs to be evaluated on mobile first, not as an afterthought.
4. Using Generic or Missing Heading Structures
Heading tags (H1, H2, H3) are how Google understands the structure and hierarchy of your content. Designers sometimes use heading tags for visual sizing purposes — making a line of text bigger with an H1 tag because it looks right — rather than for semantic meaning. A page with three H1 tags, or H1 tags containing generic text like 'Welcome' instead of keyword-relevant descriptions, misses a significant opportunity to signal relevance. Every page should have exactly one H1 that clearly describes the page's topic, followed by logical H2 and H3 subheadings.
5. Animations and Lazy Loading That Block Largest Contentful Paint
LCP (Largest Contentful Paint) measures how long it takes for the largest visible element on your page to render. Designers often apply entrance animations — fade-ins, slide-ups, staggered reveals — to hero images and headlines. If those animations delay the element from rendering, they directly worsen your LCP score, which is a ranking signal. Similarly, applying lazy loading to the hero image (the most common LCP element) tells the browser not to load it until it's in the viewport — exactly where it already is on load. Both are easy to fix but rarely caught without a performance-focused review.
The best time to fix these issues is before a site is built. The second best time is now. A technical SEO audit will surface which of these are affecting your site and by how much — giving you a prioritised list of changes ranked by their likely impact on rankings.
SEO-friendly design isn't about making a site look worse — it's about making deliberate choices that serve both users and search engines. The sites that rank best are almost always the ones where design and SEO were considered together from the start, not bolted together after launch.