Semantic Web Design for SEO & AI Search: Designing Pages Humans, Google and AI Can Understand

For years, SEO teams have divided website work into neat categories:

• Content
• Technical SEO
• Structured data
• Internal linking
• UX
• Design
• Conversion optimisation
• Accessibility

That division is useful organisationally. It is less useful from the perspective of a user or machine encountering the final page. The finished webpage is one object. A user does not experience "the SEO layer" separately from "the design layer". They see a heading, an image, a price, a review, a button and a set of related options. Search engines do not receive your team's departmental boundaries either. They encounter a document containing text, links, markup, media and rendered structure.

W3C accessibility guidance captures the principle particularly well: relationships that are communicated through presentation should also be programmatically determinable or available in text. That is an accessibility requirement, not an SEO rule. But it expresses exactly the kind of redundancy that makes webpages robust.

I use six layers to think about the meaning of a webpage.

Layer 1: Content semantics

For a service page, content semantics might include:

• The service being offered
• The locations covered
• The problems the service solves
• Who provides it
• Evidence of experience
• Price or pricing logic
• Availability
• Process
• Relevant FAQs
• Related services

For an article, the layer includes the main question, subquestions, definitions, evidence, examples and conclusions. This is the foundation. No amount of clever markup can compensate for content that is generic, inaccurate or irrelevant. Google's 2026 generative-AI guidance reinforces this point strongly: unique, valuable, non-commodity content is likely to matter more to long-term visibility than technical AI-search tricks.

Layer 2: HTML semantics

Headings establish hierarchy. Main content, navigation and complementary regions can be distinguished. Lists preserve membership. Tables preserve row-column relationships. Links navigate. Buttons perform actions. Form labels belong to fields. Google recommends semantic HTML where possible but explicitly says perfect semantic HTML is not required. That nuance is important. Semantic HTML is part of clarity, not a purity contest.

Layer 3: Visual semantics

Large text suggests importance. Spacing suggests separation. Proximity suggests association. Cards create conceptual groups. Placement suggests priority. Icons and colour can reinforce categories and status. W3C guidance recognises these mechanisms directly, describing how sighted users infer relationships from larger fonts, whitespace, background colour, indentation, tables and grouping. Visual design becomes semantically useful when it reinforces real information architecture rather than merely decorating it.

Layer 4: Entity and structured-data semantics

Google describes structured data as a way of giving explicit clues about the meaning of a page. Its guidelines also require the markup to represent the visible content truthfully. That makes structured data an alignment layer rather than a parallel reality. If your schema identifies an organisation, service, product, article or event, the visible page should make the same entity clear. For Google's generative AI features, there is no special schema required, and Google warns against overfocusing on structured data as an AI-search tactic.

Layer 5: Media semantics

Google's image guidance says image understanding uses the page context, captions, titles, alternative text and computer vision, and recommends positioning images close to relevant text. That means media should have a job. A real project photograph can demonstrate experience. A diagram can explain a process. A comparison graphic can help users understand a decision. A chart can reveal a trend. A generic stock image of people pointing at a laptop rarely adds much semantic information.

Layer 6: Interaction and navigational semantics

This includes:

• Crawlable internal links
• Descriptive anchor text
• Buttons and controls
• Filters
• Forms
• Calculators
• Product selectors
• Booking steps
• Related-content paths

Google documents the importance of crawlable anchor links and meaningful anchor text for finding and understanding pages. For AI agents, interaction semantics may become even more important. Google's 2026 guidance says agents may analyse visual renderings, inspect the DOM and interpret the accessibility tree. web.dev recommends native semantic controls and stable, clearly represented interactions.

One caution: this framework should not be mistaken for an instruction to repeat the same keyword everywhere. A page does not become aligned because "mobile tyre fitting St Albans" appears in the title, every heading, every alt attribute and every schema property. Meaning can stay consistent while language varies naturally, and Google's current AI-search guidance specifically says its systems can understand synonyms and general meaning. Semantic alignment means conceptual consistency, not exact-match repetition.

Consider a local service page targeting mobile tyre fitting in St Albans. A strongly aligned page might communicate the following:

The page does not need to be visually minimal. It can be highly designed. The difference is that every layer reinforces the same interpretation.

Now imagine a page where:

Nothing in that list automatically prevents ranking. Google is good at interpreting imperfect websites. But the page creates avoidable ambiguity at almost every layer. The question is not "Will Google penalise this?"

The framework becomes useful when we map the layers to documented search behaviours rather than speculative ranking theories.

Content semantics supports relevance and usefulness

Search systems still need information that satisfies the query. Google's guidance prioritises helpful, reliable, people-first and non-commodity content. A page that says very little cannot be rescued by schema, design or HTML.

HTML semantics supports explicit structure

Google recommends semantic HTML and uses rendered HTML for indexing. Semantic elements can make relationships explicit, while headings, links and other structures provide useful machine-readable information.

Visual semantics can support prominence and interpretation

Google says title-link generation can use the main visual title and other large, prominent text. It also tells site owners to use important words in prominent locations. That is a specific, documented use of visual prominence.

Media semantics supports image understanding and multimodal visibility

Google says image meaning is informed by page context, captions, titles, alternative text and computer vision. This makes the relationship between image and surrounding content part of image SEO.

Structured data supports explicit classification and search features

Structured data can help Google understand page information and make pages eligible for certain rich-result features. It should describe, not contradict, the visible page.

Interaction and navigation support discovery and task completion

Crawlable links help Google find pages and descriptive anchor text provides context. Clear, functional interactions also matter to users and increasingly to AI agents.

W3C's accessibility model offers one of the strongest arguments for semantic alignment because it deals directly with a fundamental problem: presentation can communicate relationships that disappear when the visual presentation is removed.

A common example is a comparison table. Visually, a user can see that three prices sit under three corresponding product names. If the page is built only through positioned text blocks, that relationship may be obvious on screen and weak in the underlying structure. Another example is a service card. The icon, service name, short description and "Learn more" action may be enclosed within one obvious visual card. The DOM should preserve enough structure that the link belongs unmistakably to that service rather than relying entirely on spatial placement.

This is where design and development should stop working sequentially.

• The designer should not create relationships that the implementation cannot express.
• The developer should not reproduce a visual appearance while throwing away its semantic meaning.
• The SEO should not arrive at the end and try to patch the problem with schema.

The accessibility tree is becoming an SEO-adjacent artefact

Historically, most SEOs did not inspect the accessibility tree. I think that will change. The accessibility tree is a browser-generated semantic representation of the interface, built partly from native HTML semantics. It exposes roles, labels, states and relationships that assistive technologies use. Google's current AI guidance now explicitly references agents interpreting the accessibility tree.

Modern agents can combine this semantic representation with screenshots to understand both function and visual context. That makes accessibility work increasingly relevant to machine interaction as well as human inclusion. This should not be twisted into "accessibility tree optimisation for rankings". The more defensible point is that semantic accessibility infrastructure is becoming part of the interface that non-human users can consume.

Structured data is one of the easiest places to see semantic misalignment. A site can mark up an FAQ that users cannot actually see. It can describe a service far more specifically than the page itself does. It can include outdated prices, reviews or availability that no longer match the visible content. Google's guidelines explicitly prohibit misleading or irrelevant structured data and say markup should represent content visible to readers.

For SEO, I would therefore audit schema after the visible content and page structure, not before them. Ask:

• What is the primary entity or purpose of this page?
• Is that obvious to a human visitor?
• Is it obvious in the headings and content?
• Does the structured data represent the same thing?
• Are important properties supported by visible evidence?

Images: stop treating them as decorative SEO fields

Image optimisation is frequently reduced to filenames, file size and alt attributes. Those things matter, but Google's own guidance describes a richer context. It recommends relevant images, relevant landing pages and close proximity between images and related text. It says Google uses page content and computer vision alongside alternative text.

• A team photograph belongs where the page establishes who delivers the service.
• A before-and-after photograph belongs beside the case study or result it demonstrates.
• A chart belongs beside the analysis of the data.
• A product image belongs inside the product context it represents.

This is better for users and gives search systems more context than a detached gallery of unexplained media.

Internal linking is part of semantic design

Internal linking is usually treated as an SEO architecture task. It is also a meaning system. A link says that the destination is relevant enough to the current context to be recommended or referenced. The anchor text explains something about the relationship. Google says internal links help both users and Google make sense of a site, and recommends descriptive, relevant anchor text.

From a semantic-alignment perspective, internal links should follow conceptual relationships rather than arbitrary SEO quotas. A guide to semantic HTML should naturally link to a broader guide about semantic web design, such as this one. A service page about AI SEO should link to supporting articles on AI Overviews, LLM crawlability, entities, structured data and content architecture where those resources genuinely deepen the subject. Internal linking then becomes evidence of the site's knowledge structure rather than a mechanical distribution exercise.

There is a growing temptation to redesign content around assumptions about how LLMs "chunk" pages. Google's 2026 guidance explicitly warns against overengineering content into tiny chunks for AI. It says there is no requirement to fragment pages this way and that its systems can understand multiple topics and return relevant portions.

Good semantic design is not the same as artificial chunking. A page should be divided where the information naturally changes subject or function:

• Headings should label genuine subtopics.
• Lists should group real sets.
• Tables should represent real data relationships.
• Callouts should emphasise genuinely important distinctions.
• FAQs should answer questions that deserve independent answers.

What Google, ChatGPT and Perplexity actually say

Neither OpenAI nor Perplexity currently says any of the following:

• Use a particular heading pattern.
• Use semantic HTML to increase citation probability.
• Put the answer above the fold.
• Use a particular card design.
• Implement special visual semantics.

That absence matters. There is a difference between eligibility and discovery, which the crawler documentation addresses, and how a system interprets, selects and cites information, which is much less publicly documented. Semantic alignment is therefore a sensible robustness strategy, not a guaranteed ChatGPT-citation tactic. If you want a deeper, dedicated look at this, that's the focus of my AI SEO services.

The agentic web is different from answer generation. An AI answer can cite a page without ever needing to operate its interface. An agent trying to book, buy, compare or submit something must understand the interface itself. Google's guidance says browser agents may use screenshots, DOM structure and accessibility trees. web.dev explains how these modalities complement one another:

It recommends stable layouts and semantic controls. This is almost a direct technical description of semantic alignment.

• If the screenshot suggests "button", the DOM should not suggest "generic block".
• If the accessibility tree says "navigation", the visual layout should make navigation recognisable.
• If a form label appears visually beside a field, the programmatic relationship should also exist.

For transactional sites, this may become one of the most important practical reasons to improve semantic design.

I would assess a page using the following sequence.

1. State the page's primary job in one sentence

If the team cannot agree what the page is for, the page itself is unlikely to communicate it clearly. Examples: "Help a driver in St Albans arrange mobile tyre fitting" or "Help a buyer compare three commercial boilers and request a quote." Everything else should support that job.

2. Read only the metadata and main headings

Do they describe the same subject? If the title, H1 and main headings point in different directions, fix the editorial structure before touching design.

3. Look at the page without reading closely

What appears most important? What is grouped together? Where does the eye go first? Does that visual interpretation match the actual information priority?

4. Read only the heading outline

Does it create a coherent map of the subject? Are sections genuine subtopics or arbitrary design blocks?

5. Inspect the accessibility tree

Are the main landmarks and controls understandable? Do visual controls have meaningful roles and names? Would the page still make sense if CSS disappeared?

6. Inspect internal links

Can Google crawl them? Do the anchors explain the relationship? Do the destinations deepen the current topic rather than simply distribute link equity?

7. Review images in context

What information does each image add? Is it close to the text it supports? Is its subject represented accurately in text and alternative text where appropriate?

8. Compare structured data with the visible page

Do the entities, properties and claims match? Is anything marked up that users cannot actually verify on the page?

9. Test mobile independently

Semantic relationships can break when responsive design rearranges the page. A caption can move far from its image. A CTA can become separated from its product. A sidebar can be inserted into the middle of the reading flow. A desktop comparison table can collapse into cards that no longer preserve the relationship between values. Alignment must survive responsive transformation.

10. Test the real task

Can a user actually complete the job the page appears to promise? A comparison page should support comparison. A booking page should support booking. A calculator should calculate. A location page should make location relevance clear. Function is part of meaning.

Service pages

Prioritise:

• Clear service and location identity
• Evidence and trust close to the claims they support
• Real service imagery
• Crawlable related-service links
• Visible, semantically correct contact actions
• Consistent business and service structured data where appropriate

Avoid: generic hero slogans overpowering the service itself.

Articles and guides

Prioritise:

• A clear question or thesis
• A strong heading outline
• Definitions near the start
• Examples close to the concepts they explain
• Tables for real comparisons
• Evidence linked where claims are made
• Related internal links that deepen the topic
• Author and source information that users can verify

Avoid: manufacturing dozens of tiny sections solely for supposed AI chunking.

Ecommerce category pages

Prioritise:

• Clear category identity
• Visible product attributes and filtering logic
• Product cards with consistent internal structure
• Meaningful links to products and subcategories
• Image-product associations
• Merchant Center and structured data consistency
• Stable controls that agents and users can interpret

Avoid: putting all useful category information below an enormous product grid without any context.

Product pages

Prioritise:

• Product name and variant clarity
• Price and availability relationships
• Image association
• Feature/specification tables where appropriate
• Reviews clearly attributed to the product
• Semantic purchase controls
• Structured data that matches visible information

Comparison and calculator pages

Prioritise:

• Putting the actual tool or comparison near the point where users expect it
• Explicit labels and relationships
• Accessible form controls
• Visible units and assumptions
• Explanatory content surrounding the tool rather than burying it below generic prose

The functional component is often the main content, not an accessory to the article.

Semantic alignment does not come with a single metric, and inventing one would create false precision. Measure the outcomes associated with the problem you changed.

The web is becoming more machine-operated as well as machine-indexed. Search engines will continue to retrieve and summarise information. AI assistants will continue to cite sources. Browser agents will increasingly navigate interfaces and perform tasks. Multimodal models will become better at combining text, layout and visual information. Google Research's ScreenAI has already demonstrated strong UI and infographic understanding, while Google's current website guidance explicitly discusses agents combining rendered views, DOM structure and accessibility information.

That does not make visual design a ranking factor. It makes coherent interface meaning more valuable.

Final thoughts

SEO has spent years trying to separate content, code, links, schema, design and UX into different optimisation boxes. AI search and agentic browsing make that separation increasingly artificial. Google's own guidance now spans many of these layers at once: valuable content, crawlability, semantic HTML, page experience, structured data, images and emerging browser-agent behaviour.

The practical lesson is not that every page needs more optimisation signals. It is that the signals already present should agree.

• The title should match the page's purpose.
• The headings should match the content hierarchy.
• The design should make that hierarchy visible.
• Images should support the surrounding information.
• Structured data should describe the same entities users see.
• Links should reflect genuine relationships.
• Controls should behave like the actions they visually promise.

Do that consistently and the page becomes easier for humans to understand, easier for search engines to process and better prepared for AI systems that increasingly combine visual, structural and semantic representations.

There is no guarantee that this alone will improve rankings or earn an LLM citation. But it is a far more durable strategy than trying to optimise separately for every new interface that appears.

1. Google Search Central - Optimizing Your Website for Generative AI Features on Google Search
2. Google Search Central - Influencing Title Links in Google Search
3. Google Search Central - Image SEO Best Practices
4. web.dev - Build Agent-Friendly Websites
5. W3C WAI - Understanding WCAG 1.3.1: Info and Relationships
6. Google Search Central - SEO Guide for Web Developers
7. Google Search Central - Introduction to Structured Data
8. Google Search Central - General Structured Data Guidelines
9. Google Search Central - Link Best Practices for Google
10. Google Search Central - JavaScript SEO Basics
11. Google Search Central - Google Search Essentials
12. web.dev - The Accessibility Tree
13. OpenAI Help Center - Publishers and Developers FAQ
14. Perplexity - Perplexity Crawlers
15. Google Research - ScreenAI: A Vision-Language Model for UI and Infographics Understanding