mail@crispycontent.de
Last updated on August 17, 2026 at 06:52 AM.
The design-SEO conflict arises when visually appealing layouts hide their information in images, JavaScript animations, or CSS-only elements—rendering them invisible to search engines, AI Overviews, and Large Language Models. The solution is not an either-or decision: visual design and machine extractability can coexist when the content structure is built on semantic HTML and visual styling remains strictly separated from it. This article defines the core terms, explains the underlying principle, provides a step-by-step guide to synchronising both worlds, and identifies the five design decisions that most reliably destroy AI visibility.
Why marketing teams are caught between design and discoverability
Marketing decision-makers invest in high-quality visual brand communication—and simultaneously lose organic visibility because AI crawlers cannot read the content. This is not a fringe issue: according to the Web Almanac 2025, 10.3% of all mobile pages deliver invalid HTML in the <head>, making metadata invisible to crawlers. Placing an <img> tag in the head breaks the entire metadata chain—canonical, title, and description end up in the body and are ignored. The cause is rarely malicious intent but rather a lack of coordination between design teams and technical implementation.
Search engines are no longer the only place where a brand is discovered. To understand how visibility can be established simultaneously for Google and for the answers generated by ChatGPT or Perplexity, Crispy Content's approach to agentic SEO and Generative Engine Optimization offers a data-driven and automated method that serves precisely this dual function.
Google AI Overviews appear in 2025 for a significant share of informational queries—anyone not extracted as a source there loses reach to competitors with a clean semantic foundation. For B2B companies under budget pressure, this means: treating design and SEO as separate disciplines is a luxury no one can afford any longer. The visual hierarchy must be AI-readable, or it works against the business.
Core terms – What "visual hierarchy," "machine extractability," and "content structure" mean
These three terms are routinely conflated in briefings and meetings. Anyone who wants to resolve the design-SEO conflict must separate them cleanly—and then deliberately reunite them.
Visual hierarchy – Directing attention through design
Visual hierarchy is the deliberate arrangement of size, colour, contrast, and white space to guide the user's reading direction and attention. A large hero image draws the eye; a coloured button signals the next action. The critical distinction: visual hierarchy is not identical to semantic hierarchy. A dominant image can visually anchor a page without conveying any meaning to machines. Conversely, an inconspicuous H1 tag in the source code can define the entire page structure for crawlers, even when styled with visual restraint.
Machine extractability – How crawlers and LLMs read content
Machine extractability describes the ability of search engine bots and Large Language Models to identify and process text content, structures, and meaning from a page's HTML source code. Google crawls the raw HTML first and only renders JavaScript in a subsequent rendering queue. Content generated exclusively by client-side JavaScript does not exist for the initial crawl pass. The difference between raw HTML and rendered HTML amounts to a median of 18% of word count on desktop pages—that is the share of content invisible during the first crawl.
Content structure – The link between design and machine
Content structure refers to the organisation of information within a page through headings, paragraphs, lists, tables, and internal links. It serves as the link because it fulfils three functions simultaneously: readability for humans, crawlability for bots, and extractability for AI systems. A clean content structure makes visual hierarchy machine-readable—without constraining it.
The core principle – Semantics as the bridge between design and machine
The core principle can be stated in a single sentence: Semantic HTML defines meaning; CSS defines appearance. As long as this separation is maintained, design and machine readability can coexist without compromising each other. Semantic HTML is the skeleton of a building—it carries the structure and determines what goes where. CSS is the façade—it determines colour and proportion without altering the structural integrity. Remodelling the façade does not change the floor plan. Removing the skeleton leaves no building at all.
The data shows that the semantic foundation is broadly in place: 71% of all desktop pages use H1 tags, 72% use H2 tags. Structured data is deployed by 50% of all websites, 43% of which use the JSON-LD format. The infrastructure for machine readability is no longer a niche concern—it is standard. Those who fail to use it fall behind.
The design-SEO conflict does not arise from good design. It arises from design that replaces semantic structures rather than complementing them. A hero banner with text rendered as an SVG graphic is visually identical to an H1 tag with CSS styling—but only the latter is read by crawlers and LLMs. The difference is invisible in the browser and decisive in search.
Before discussing tactics, it must be clear what one's own website and those of competitors actually rank for. How search terms, monthly search volumes, positions, and their financial equivalent in advertising value can be substantiated rather than assumed is demonstrated by Crispy Content's SEO strategy—a foundation for basing decisions on data rather than gut feeling.
Step by step – Synchronising visual design and machine readability
The following five steps transform a purely visual layout into a structure that ensures both brand aesthetics and AI extractability. None of these steps require design compromises—they require coordination.
Step 1 – Define the semantic heading hierarchy before the visual layout
The heading hierarchy from H1 to H4 is defined as a content outline before font sizes and colours are assigned. The right time for this is the content brief or wireframe stage—not the development phase. Time investment: 30–60 minutes per page type. Those who avoid this investment will pay multiples later, because broken heading hierarchies multiply across templates to hundreds of pages.
Step 2 – Use CSS classes for visual deviations instead of misusing HTML tags
When an H2 needs to appear visually smaller than an H3, a CSS class controls the presentation—the tag hierarchy remains intact. This sounds trivial but is the most common breaking point between design and semantics. A page with a broken heading hierarchy loses an average of 18% of word count between raw and rendered HTML. Nearly one-fifth of the content does not exist for the initial crawl pass.
Step 3 – Never place text content exclusively in images or SVGs
Every core textual statement must exist as HTML text in the DOM. Decorative typography may supplement as an image but must not replace. This checkpoint belongs in the design review between UX team and SEO team. The rule of thumb: if a sentence is relevant to understanding the page, it must appear as selectable text in the source code.
Step 4 – Add structured data as a machine-readable meaning layer
JSON-LD markup for article type, organisation, FAQ, or product is embedded directly in the static HTML—not loaded via JavaScript. Only 2% of pages deliver structured data exclusively via JavaScript. The overwhelming majority embeds it statically because this is the most reliable method of communicating meaning to crawlers.
Step 5 – Perform a rendering test with JavaScript disabled
The page is loaded in the browser without JavaScript. All core content—headlines, body text, navigation, structured data—must remain visible. Time investment: 5 minutes per page, automatable via crawling tools such as Screaming Frog or Sitebulb. This test is the fastest way to diagnose the design-SEO conflict on any given page.
Content at AI speed but without the machine aftertaste remains a question of craftsmanship. How repurposing, executive ghostwriting, and quality assurance can be implemented with agentic support while preserving the brand's own voice is described in detail in Crispy Content's agentic content operations.
Common mistakes – Five design decisions that destroy AI visibility
The following mistakes are not design sins. They arise from a lack of coordination between design and technical implementation—and every one of them can be fixed without altering the visual outcome.
Text in images instead of the DOM
Headlines or key statements are embedded as raster graphics or SVGs. To the user, this looks identical. To crawlers, the text does not exist. The alternative is HTML text with CSS styling—web fonts, text shadows, and gradient clips deliver the same visual result with full machine readability.
Heading tags assigned by visual size rather than content hierarchy
An H3 is styled as an H1 because the font size fits. This breaks the semantic hierarchy and signals a false information architecture to crawlers. The solution: CSS classes control visual size; HTML tags define the semantic level. Both systems operate independently of each other.
Content hidden behind JavaScript interactions
Accordions or tabs whose content is only loaded into the DOM after a click are invisible to the initial crawl pass. Better: deliver content in the raw HTML and visually show or hide it via CSS. The content exists in the source code but only becomes visible upon interaction—for machines, it remains readable regardless.
Missing alt texts on information-bearing images
Infographics without alt text are accessible to neither screen readers nor crawlers. Descriptive alt text plus an optional long description in the body copy provides the remedy. Accessibility and machine readability pursue the same goal here.
Canonical and meta tags placed below invalid head elements
An <img> tag in the <head> prematurely terminates the head. All subsequent meta tags—canonical, robots, description—end up in the body and are ignored by crawlers. The countermeasure: validate the <head> before every deployment. An automated test in the CI/CD pipeline prevents this error permanently.
Comparison – Purely visual approach vs. semantic-visual approach
| Criterion | Purely visual approach | Semantic-visual approach |
|---|---|---|
| Headline rendering | Text as SVG or image | HTML tag + CSS styling |
| Information architecture | Visual via size and colour | Semantic via H1–H4, visual via CSS |
| Interactive elements | Content loaded via JavaScript | Content in raw HTML, presentation via CSS |
| Structured data | Not present | JSON-LD in static HTML |
| AI extractability | Low to none | Fully ensured |
Numbers and impact – What the loss of machine readability costs
The cost of missing machine readability can be quantified. The following table summarises the relevant metrics:
| Metric | Value | Source |
|---|---|---|
| Pages with invalid HTML in the head | 10.3% (mobile) | Web Almanac 2025 |
| Pages without an H1 tag | 30% (mobile); without a populated H1 even 34% | Web Almanac 2025, Fig. 5.32/5.33 |
| Difference raw vs. rendered word count (median, desktop) | 18% | Web Almanac 2025 |
| Websites with structured data | 50% | Web Almanac 2025 |
| Increase in AI citations through quotes and statistics in content | +37% to +40% | Princeton GEO study (arXiv:2311.09735) |
Illustrative calculation: A B2B company with 500 indexed pages, 30% of which lack a semantic H1, has 150 pages with a significantly reduced probability of being cited as a source in AI Overviews. Assuming an organic traffic value of €12 per page visit and a total of 200 potential clicks per month across all 150 affected pages, the illustrative foregone value amounts to €2,400 per month—solely due to missing heading semantics. Annualised, that is €28,800 in invisible loss that never appears in any analytics dashboard because the traffic never arrived. The assumptions (€12/click, 200 total clicks) serve illustrative purposes—actual values vary by industry and keyword landscape.
The future – How visual hierarchy and AI readability converge
The separation between "design for humans" and "structure for machines" is dissolving. AI systems increasingly evaluate content the way readers do: by coherence, depth, and contextual relevance. Those who structure well for humans automatically structure well for machines—provided the structure resides in the source code and not only in the visual rendering.
LLMs as new consumers of visual structures
Large Language Models use heading hierarchies, lists, and tables as semantic anchors to identify definitions, key statements, and citable passages. The introduction of llms.txt—at 2% adoption in 2025 still in its early phase—shows that websites are beginning to provide machine-readable summaries alongside the visual presentation. The trend is clear: those who optimise their content structure for LLM extraction will be cited in AI-generated answers. Those who do not supply the raw material for others to be cited instead.
Generative Engine Optimization (GEO) as a new discipline
GEO combines classical SEO structural work with the requirement of being cited in AI-generated answers. For the design-SEO conflict, this means: those who design visual hierarchy in an AI-compatible way simultaneously serve Google, ChatGPT, and Perplexity. The investment in semantic structure pays into every channel that processes content by machine.
Accessibility as the common denominator
Accessibility and machine readability share the same technical goal: making content processable for agents that do not possess the same capabilities as sighted users. WCAG-compliant pages are preferentially extracted in AI search systems because their semantic foundation is cleaner. Those who treat accessibility merely as a compliance obligation forfeit the strategic lever: accessible pages are machine-readable pages.
Assessment and next steps
The next logical step after this analysis is an audit of one's own page structure. The questions are concrete: Where does text exist only as an image? Where are semantic headings missing? Where is structured data delivered exclusively via JavaScript? Where does an invalid element in the head break the metadata chain?
Content structure audit as the first lever
The checkpoints are: heading hierarchy, alt texts, raw vs. rendered content difference, and structured data coverage. Tools such as Screaming Frog, Sitebulb, or Lighthouse deliver this data automatically. The time investment for an initial audit is one to three days—depending on the number of page types, not the total page count. Auditing templates is sufficient because errors multiply through templates.
Extending the design system with semantic rules
Within the existing design system, it is defined which HTML tags are used for which visual components. This is the point at which designers and developers learn to speak the same language. A component library that documents the semantic tag alongside colour, typeface, and spacing prevents the design-SEO conflict at its root—by construction rather than retroactive repair.
A documented content structure strategy makes design decisions and SEO requirements plannable. Those who cannot map the synchronisation of visual design and machine readability internally can develop it with a specialised B2B communications agency such as Crispy Content®.
Frequently asked questions
What is the design-SEO conflict?
The design-SEO conflict describes the situation in which visually appealing design decisions—text in images, JavaScript-based animations, broken heading hierarchies—prevent search engines and AI systems from extracting a page's content. The conflict does not arise from good design per se but from design that replaces semantic HTML structures rather than complementing them.
How do AI systems like ChatGPT or Google AI Overviews read a web page?
AI systems and search engine crawlers primarily read a page's HTML source code. Google crawls the raw HTML first and renders JavaScript only subsequently. LLMs use heading hierarchies, lists, and tables as semantic anchors to identify citable passages. Content that exists only visually—for example as an SVG graphic or loaded via JavaScript—remains invisible during the initial crawl pass.
Can I maintain visually sophisticated design and still be AI-readable?
Yes. The core principle is: semantic HTML defines meaning; CSS defines appearance. An H1 tag can be styled via CSS to look exactly like an SVG graphic—using web fonts, gradient clips, and text shadows. The visual output is identical, but the latter variant is read by crawlers and LLMs. No design compromise is necessary—only a clean separation of structure and presentation.
How do I test whether my page is machine-readable?
The quickest test: load the page in the browser with JavaScript disabled. All core content—headlines, body text, structured data—must remain visible. Additionally, crawling tools such as Screaming Frog or Sitebulb provide automated analyses of heading hierarchy, raw vs. rendered content difference, and structured data coverage.
What does missing machine readability cost in concrete terms?
A B2B company with 500 indexed pages, 30% of which lack a semantic H1, has 150 pages with a significantly reduced chance of being cited in AI Overviews. Assuming a total of 200 potential clicks per month across all affected pages and a traffic value of €12 per visit, the illustrative foregone value amounts to €2,400 per month—€28,800 annually, solely due to missing heading semantics.
Sources
- HTTP Archive / Chukwuma, Green, Brannon (2026): SEO – The 2025 Web Almanac, Chapter 5. URL: https://almanac.httparchive.org/en/2025/seo (accessed 13 August 2026).
- Olsina, Victoria (2026): Content Structure for SEO & LLMs: Designing Pages That Rank & Get Cited. URL: https://victoriaolsina.com/blog/content-structure/ (accessed 13 August 2026).
- Aggarwal et al. (2023): GEO: Generative Engine Optimization. Princeton University. arXiv:2311.09735.
- Google Search Central (2025): AI Features and Your Website. URL: https://developers.google.com/search/docs/appearance/ai-features (accessed 13 August 2026).
Gerrit Grunert
Gerrit Grunert is the founder and CEO of Crispy Content®. In 2019, he published his book "Methodical Content Marketing" published by Springer Gabler, as well as the series of online courses "Making Content." In his free time, Gerrit is a passionate guitar collector, likes reading books by Stefan Zweig, and listening to music from the day before yesterday.
.png)
.jpg){kind=tracking}
.jpg)
-1.jpg)
-1.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
