Semantic Main Landmark
Jump to section
TL;DR
There’s a technical or content issue reducing how well your page can be crawled, understood, or cited. Follow the steps below to diagnose the cause, apply the fix, and verify the result. Finish by running an Oversearch AI Page Optimizer scan.
Why this matters
Access and crawlability are prerequisites. If crawlers can’t fetch or parse your content, rankings and citations become unreliable, and LLMs may fail to extract answers.
Where this shows up in Oversearch
In Oversearch, open AI Page Optimizer and run a scan for the affected page. Then open Benchmark Breakdown to see evidence, and use the View guide link to jump back here when needed.
What is the <main> tag and do I need it?
The <main> element marks the primary content area of your page, telling browsers, screen readers, and crawlers where the core content begins and ends.
Without a <main> landmark, assistive technologies struggle to skip navigation and jump to content. Crawlers and AI extraction tools may also have difficulty isolating the meaningful content from headers, footers, and sidebars.
- Every page should have exactly one
<main>element wrapping the primary content. - It should not be nested inside
<header>,<footer>,<nav>, or<aside>. - The
<main>element is supported in all modern browsers. - It replaces the older
role="main"attribute (though both work).
If you use Oversearch, open AI Page Optimizer → Benchmark Breakdown to check whether a main landmark was detected.
Can missing <main> affect SEO or AI extraction?
Yes. While search engines can still index pages without <main>, AI extraction tools use semantic landmarks to identify core content and ignore boilerplate.
When a page lacks a <main> element, extraction systems must guess where the content starts and stops. This increases the chance of including navigation text or footer links in summaries, or missing the actual content entirely.
<main>helps AI systems isolate the content that matters.- It reduces noise in extracted text by clearly separating content from chrome.
- Screen readers use it for skip-to-content navigation, improving accessibility.
- Google has indicated semantic HTML helps its systems understand pages.
If you use Oversearch, open AI Page Optimizer → Benchmark Breakdown to see whether the main landmark benchmark passes.
Where should <main> go in my HTML layout?
Place <main> as a direct child of <body>, wrapping only the primary page content — not the site header, navigation, or footer.
A common mistake is wrapping the entire body content (including nav and footer) in <main>. This defeats the purpose because assistive tools and crawlers can no longer distinguish content from chrome.
- Structure:
<body> → <header> → <nav> → <main> → <footer> <main>should contain the article, guide, or page-specific content.- Do not nest
<main>inside<section>or<div>wrappers unless necessary. - Only one
<main>per page (non-hidden).
If you use Oversearch, open AI Page Optimizer → Benchmark Breakdown to verify the landmark is correctly placed.
How do I fix <main> when using a component framework?
In frameworks like React, Vue, or Svelte, add <main> in your root layout component so it wraps the page content slot automatically.
Most component frameworks have a layout file or root component where the page structure is defined. Adding <main> there ensures every page inherits the landmark without per-page changes.
- Next.js: Add
<main>inapp/layout.tsxwrapping{children}. - Nuxt: Add
<main>inlayouts/default.vuewrapping<slot />. - SvelteKit: Add
<main>in+layout.sveltewrapping<slot />. - Astro: Add
<main>in your layout component wrapping<slot />. - WordPress: Edit
header.php/footer.phpor the theme’s template parts.
If you use Oversearch, open AI Page Optimizer → Benchmark Breakdown to confirm the fix.
Common root causes
- Template-level configuration mismatch or conflicting signals.
How to detect
- In Oversearch AI Page Optimizer, open the scan for this URL and review the Benchmark Breakdown evidence.
- Verify the signal outside Oversearch with at least one method: fetch the HTML with
curl -L, check response headers, or use a crawler/URL inspection. - Confirm you’re testing the exact canonical URL (final URL after redirects), not a variant.
How to fix
Review the questions above to understand where <main> should go and how to add it in your framework (see: Where should <main> go in my HTML layout? and How do I fix <main> when using a component framework?). Then follow the steps below.
- Apply the fix recommended by your scan and validate with Oversearch.
Verify the fix
- Run an Oversearch AI Page Optimizer scan for the same URL and confirm the benchmark is now passing.
- Confirm the page is 200 OK and the primary content is present in initial HTML.
- Validate with an external tool (crawler, URL inspection, Lighthouse) to avoid false positives.
Prevention
- Add automated checks for robots/noindex/canonical on deploy.
- Keep a single, documented preferred URL policy (host/protocol/trailing slash).
- After releases, spot-check Oversearch AI Page Optimizer on critical templates.
FAQ
Is role=‘main’ required for accessibility?
The role=‘main’ attribute is redundant if you use the <main> HTML element, which has the role built in. Use the semantic element instead. When in doubt, use <main> without an explicit role attribute.
Can I have more than one <main> element?
Only one <main> should be visible at a time. You can have multiple if all but one are hidden (e.g., with the hidden attribute), but the simplest approach is one <main> per page. When in doubt, use exactly one.
How do screen readers and crawlers use <main>?
Screen readers offer a shortcut to jump directly to <main>, skipping navigation. Crawlers use it to identify the primary content region for extraction. When in doubt, add <main> — it helps both audiences.
How do I check if my page has a main landmark?
Open DevTools, go to the Elements panel, and search for <main>. Or run document.querySelector(‘main’) in the console. When in doubt, use the Accessibility tab in DevTools to see the landmark tree.
Does <main> affect SEO rankings directly?
Not as a direct ranking factor, but it helps crawlers and AI tools isolate your primary content, reducing extraction errors. Proper use of semantic landmarks improves how your content is understood and cited. When in doubt, add <main> — the cost is one HTML tag and the benefit is significant.
Will adding <main> break my existing styles?
Usually not. The <main> element has no default styling that differs from a <div>. If your CSS relies on a specific DOM structure, test after adding it. When in doubt, add <main> with no classes first and verify nothing shifts visually.