It is easy to think of design and search strategy as two separate jobs handled by two separate people. One makes the website look good, the other makes it findable. In practice, that division does not really hold up, because a large part of what makes a website findable, both to traditional search engines and to AI answer engines, is decided at the design and code stage, long before anyone writes a word of content.
This article looks at the genuine technical foundations that connect good design and development to good SEO and GEO, why a poorly built website undermines even excellent content, and what to check on your own site.
Search Engines and AI Read Your HTML Before They See Your Design
However striking your website looks in a browser, search engines and AI crawlers do not experience it visually. They read the underlying HTML. The visual design you and your visitors see is, in a very real sense, a separate layer from what these systems are actually interpreting.
This means a website can look polished while being genuinely difficult for a search engine or AI system to understand, and a website with fairly plain visual styling can be extremely easy for both to interpret correctly. The two are not the same thing, although the best websites achieve both at once.
What crawlers and AI systems are actually looking at
- The HTML document structure, including which elements are headings, paragraphs, lists and links
- The order in which content appears in the code, not necessarily the order it appears visually
- Alt text on images, since the images themselves are not meaningfully understood without it
- Structured data such as schema markup, sitting separately from the visible page
- Page speed and how quickly meaningful content becomes available
Semantic HTML: Why the Tags You Choose Actually Matter
Semantic HTML means using HTML elements for what they are actually designed to mean, rather than purely for how they look. A heading should be marked up as a heading tag, not simply styled to look like one using a generic div and some bold, oversized text.
The problem with ‘div soup’
It is entirely possible to build an attractive website using almost nothing but div and span tags, styled with CSS to look like headings, lists, and buttons. Visually, nobody would know the difference. To a search engine or an AI system, however, this is a meaningfully worse document, because none of the structural meaning is actually present in the code. The page becomes harder to interpret, harder to extract clean answers from, and less likely to be cited or ranked well.
What good semantic structure looks like
- A single, clear H1 heading per page, properly describing the page’s main topic
- H2 and H3 tags used in a logical, nested order to reflect actual content structure
- Lists marked up with proper list tags, not visually styled paragraphs
- Buttons and links using actual button and anchor elements, not styled divs with click handlers
- Semantic layout elements such as header, nav, main, article and footer, used for their intended purpose
How CSS and Page Speed Affect Rankings and AI Trust
CSS is often thought of purely as a visual concern, but the way styles are built and loaded has a direct, measurable effect on page speed, and page speed is a genuine ranking factor as well as a trust signal AI systems take into account.
Common CSS-related issues that hurt both SEO and GEO
- Large, unoptimised CSS files that delay the page from rendering visible content
- Render-blocking stylesheets loaded in a way that prevents the page from appearing quickly
- Excessive use of heavy web fonts, animations or background effects that slow down mobile performance
- Layouts that shift around as the page loads, which damages both user experience and Core Web Vitals scores
None of this means design needs to be stripped back or plain. It means the implementation needs to be efficient, which is as much a development and technical concern as a creative one.
Visual Hierarchy and Content Clarity Are the Same Problem
Good graphic design and good content clarity are, in a meaningful sense, the same underlying skill applied in two different mediums. A well-designed page uses size, spacing, contrast and position to make it immediately obvious what matters most. AI systems are, in their own way, trying to do exactly the same thing when they parse a page, just using code rather than eyes.
Where this shows up in practice
- A page with a clear visual hierarchy is far more likely to also have a clean, logical heading structure underneath it, because the same thinking produces both
- Generous white space and clear separation between sections in design usually corresponds to clean, well-separated HTML sections in the code
- Strong visual emphasis on key information (a clear headline, a clear answer, a clear call to action) tends to mirror the directness that AI systems favour in the underlying text
This is genuinely good news. It means that thoughtful, well-considered design and strong technical SEO and GEO foundations are not competing priorities. They tend to be built by the same disciplined approach to structuring information clearly.
A Practical Checklist: Bridging Design and Search Strategy
Use this as a working list when reviewing your own website, or briefing a developer or designer on a new build.
☐ Confirm each page has a single, clear H1 that genuinely describes the page topic
☐ Check that headings are nested logically (H2 before H3, no skipped levels)
☐ Replace any visually-styled fake headings or lists with proper semantic HTML
☐ Add meaningful alt text to all images, describing what they actually show
☐ Test page speed and address any render-blocking CSS or oversized files
☐ Check for layout shift issues as the page loads, particularly on mobile
☐ Ensure visual hierarchy in the design matches a logical structure in the code
☐ Use semantic layout elements (header, nav, main, article, footer) rather than generic divs throughout
Frequently Asked Questions
Can a beautifully designed website still rank poorly?
Yes, and this happens more often than people expect. A visually excellent website built with poor underlying HTML, slow-loading CSS, or no semantic structure can still struggle in search results and be overlooked by AI systems because both read the code rather than experience the visual design directly.
Does using div tags instead of semantic HTML actually make a measurable difference?
It can. Search engines and AI systems are generally capable of working around poorly structured HTML to some extent, but semantic markup removes ambiguity and makes content easier to interpret correctly and extract cleanly. The less guessing a system has to do, the more confidently it can use your content.
Is page speed really that important for SEO and GEO?
Yes. Page speed has been a confirmed ranking factor in traditional search for some years, and slow-loading pages are also less favourably treated by AI systems, partly because slow pages are harder to crawl efficiently and partly because speed is one of several signals contributing to overall site quality.
Do I need to redesign my whole website to fix these issues?
Not usually. Most of the issues covered in this article can be addressed through targeted technical fixes, correcting heading structure, adding alt text, optimising CSS delivery, rather than a full visual redesign. A redesign may still be worthwhile for other reasons, but it is rarely the only way to fix these particular problems.
Who should be responsible for this, my designer or my SEO consultant?
Ideally both, working together. A designer or developer needs to understand the technical SEO and GEO implications of their build decisions, and a search strategist benefits from understanding enough HTML and CSS to properly brief those decisions. This is exactly the kind of work that benefits from a joined-up approach rather than two separate, disconnected suppliers.
Want Your Website’s Foundations Checked Properly?
If you are unsure whether your website’s design and code are quietly working against your search visibility, get in touch for a straightforward conversation with no obligation and no sales pitch.