Use semantic landmarks so extractors can tell content from chrome
Exactly one main element plus header, nav, and footer make page structure unambiguous.
What this signal tests
We confirm your page uses HTML5 landmark elements correctly: exactly one visible main element marking the primary content area, plus a header, a nav, and a footer at the top level. We also check that the ratio of generic div containers to semantic landmarks is reasonable, not the so-called "div soup" pattern where everything is a styled div.
Why it matters for your visibility in AI
Every modern AI content extractor - Mozilla Readability, Trafilatura, Claude's web fetch tool, ChatGPT's browser - looks for main and article elements as the highest-confidence signal of where your actual content lives. When those elements are present, the extractor pulls clean prose. When they are missing, the extractor falls back to heuristics that can grab your cookie banner, footer copy, or nav menu instead. The concrete consequence is that when an AI assistant cites your page, the snippet quoted back to the user may be your site-wide CTA rather than the relevant paragraph. Worse, retrieval-augmented systems may embed the boilerplate alongside the real content, so future queries about your topic surface chrome instead of substance.
Pass criteria at a glance
| Criterion | Passes when |
|---|---|
| Exactly 1 <main>; all landmarks present; div:landmark <=25. |
How we test it
We parse the rendered DOM and count non-hidden main elements; exactly one must be present. We then check that header, nav, and footer each appear at least once at the top level of the body (or that an ARIA equivalent with the right role is present). Finally, we compute the ratio of div elements to landmark elements across the page; a ratio above twenty-five to one indicates the page is built almost entirely from generic containers.
Show technical detection method
Count non-hidden <main>; assert ==1. Assert presence of <header>, <nav>, <footer> as top-level. Compute div:landmark ratio.
If your site fails: how to fix it
- Replace the outermost wrapping div around your post body with a main element, ensuring there is exactly one main per page and nothing important sits outside it.
- Swap the top-of-page div containing your logo and primary navigation for a header element, and place the nav element inside it for the navigation list.
- Wrap the bottom-of-page links, copyright, and contact information in a footer element rather than a generic div with a class like "site-footer".
- In React or Vue components, prefer the semantic tag in the JSX/template (<main>, <nav>, <article>) rather than <div role="main">; both work but the native element is cheaper to maintain.
- For component-heavy sites, audit your top-level page layout component first - landmarks at that level cascade benefit to every page that uses the layout.
Quick facts
| Maturity | ESTABLISHED |
|---|---|
| Weight | high |
| Category | Content Clarity |
Primary sources
Related signals
Frequently asked questions
Are headings only important for SEO, or also for AI?
Landmarks are different from headings. Headings (h1–h6) describe the outline of your content; landmarks (main, nav, header, footer) describe the structural regions of the page. AI extractors use landmarks first to find your content, then use headings to chunk it. Both matter, for different reasons.
Can I use ARIA roles instead of HTML5 elements?
Yes - role="main" on a div is treated equivalently to a main element by most extractors. That said, the native HTML5 element is shorter, cheaper, and harder to forget, so we recommend it whenever you can change the markup. ARIA roles are a fallback when the underlying element cannot be changed.
What if my site has multiple main areas for a dashboard?
The HTML spec allows only one main per document. For a dashboard with multiple regions, use article or section elements for each pane and wrap them all in a single main. Multiple main elements either fail validation or, worse, confuse extractors about which region holds the primary content.
Does this affect classic Google SEO?
Modestly. Google has stated that semantic HTML can help understanding but is not a ranking factor on its own. For AI ingestion, the same markup is far more consequential because the extractors are more literal about what they grab - they cannot "see" your page visually the way a human reader can.
Run your own scan
Run a free scan and see how your site grades across all 155 AI-readiness signals.