← Back to SEO LearnNOTABIS SEO / LEARN

Accessibility · 16 September 2026

Duplicate Main Landmarks: How to Correct Them

A page should normally expose one primary main landmark. NOTABIS reports duplicate-main-landmark when the measured HTML contains more than one literal <main> element.

Quick answer

Use one <main> element to identify the document’s primary content region. NOTABIS reports duplicate-main-landmark when the measured HTML contains more than one <main> element; it is a low-severity structure and accessibility review. Remove accidental duplicates while keeping legitimate page sections inside the single main region.

What the issue means

The main landmark should wrap the content unique to the page, separate from repeated navigation, headers, and footers. A common template mistake renders both desktop and mobile shells:

<main>Desktop content</main>
<main>Mobile content</main>

An element with role="main" is related ARIA markup, but the current NOTABIS check counts literal <main> elements only. Nested sections, articles, and <div> elements do not create additional main landmarks.

Why it matters for SEO

Screen-reader users can navigate by landmarks and need one predictable primary content region. Clear structure also makes it easier for people and tools to distinguish page content from repeated chrome. Google does not treat a second <main> as an automatic ranking penalty; the risk is accidental duplicate or hidden content and a confusing document structure.

How NOTABIS detects it

The duplicate-main-landmark rule counts <main> elements in the HTML response for each crawled page and records an issue when the count is greater than one. It does not decide whether a main element is visible, nested in a hidden component, labelled, or added after JavaScript runs. An ARIA role="main" without a literal <main> is not counted by this rule.

How to check it yourself

Search the rendered DOM and View Source for <main. Inspect each match in desktop and mobile breakpoints, modal templates, and client-side route transitions. Check whether a component is present twice even when CSS hides one copy, and inspect the accessibility tree to confirm the landmark exposed to assistive technology.

How to fix it

Keep one <main> around the page’s primary content and move repeated navigation or supporting regions outside it. Correct the shared layout or component condition that renders the duplicate rather than hiding one copy with CSS. A typical structure is:

<header>Site header</header>
<nav aria-label="Primary">…</nav>
<main>
  <h1>Account settings</h1>
  <section>…</section>
</main>
<footer>…</footer>

Re-test route changes and responsive layouts after the change.

When this is intentional or does not need fixing

An application may keep multiple view components in the DOM while only one is active, but that still deserves an accessibility review because hidden landmarks can remain exposed incorrectly. Separate documents loaded in iframes have their own roots and are not duplicates in the parent document. Do not add extra main elements to make visual sections easier to style; use sections and CSS for that purpose.

Related issues

Compare missing main landmarks, missing H1 tags, and multiple H1 tags. The WAI-ARIA main landmark example explains the intended page region.

Run a NOTABIS audit

NOTABIS counts literal main elements in each measured page and identifies templates that render more than one primary landmark.

Measure before you change

See which issues affect your site.
Run a NOTABIS audit ↗