Fix Document Does Not Have a Main Landmark in WordPress

Learn how to fix Document does not have a main landmark in WordPress using a simple PHP code and improve accessibility and SEO.

Document Does Not Have a Main Landmark

If your website receives the Document does not have a main landmark warning in Google Lighthouse, PageSpeed Insights, or accessibility testing tools, it means your page is missing a proper <main> landmark. This issue affects accessibility because screen readers and assistive technologies rely on landmark elements to help users navigate a webpage efficiently.

Fortunately, WordPress users can fix this problem without editing every page manually. By adding a small PHP snippet to your theme or a custom plugin, you can automatically wrap your page content inside a <main role="main"> element.

In this guide, you’ll learn what the Document does not have a main landmark error means, why it matters for SEO and accessibility, and how to fix it using the following WordPress code.

function add_main_landmark_to_content($content) {
    if (is_singular() && in_the_loop() && is_main_query()) {
        $content = '<main role="main">' . $content . '</main>';
    }
    return $content;
}
add_filter('the_content', 'add_main_landmark_to_content');

What Does “Document Does Not Have a Main Landmark” Mean?

A main landmark is the primary section of a webpage that contains the main content. HTML5 introduced the <main> element to clearly identify this area.

Without a main landmark, assistive technologies such as screen readers may struggle to determine where the primary content begins. Accessibility auditing tools therefore display the warning Document does not have a main landmark.

A properly structured page generally includes:

• Header
• Navigation
• Main content
• Sidebar (optional)
• Footer

Among these, the main content should always be enclosed inside a <main> element.

Why Is the Main Landmark Important?

Adding a main landmark offers several benefits.

• Improves website accessibility.
• Helps screen reader users navigate faster.
• Follows HTML5 semantic markup standards.
• Improves Lighthouse accessibility scores.
• Helps websites comply with WCAG recommendations.
• Makes page structure cleaner.
• Supports better user experience.

Although adding a main landmark is not a direct Google ranking factor, improving accessibility contributes to a better overall website quality.

Why Does This Error Appear in WordPress?

Many modern themes already include the <main> element.

However, the warning can appear if:

• Your theme is outdated.
• A custom theme doesn’t use semantic HTML.
• A page builder removes the main landmark.
• Theme files have been heavily customized.
• Content is generated dynamically without a main container.

How to Fix Document Does Not Have a Main Landmark

One of the easiest solutions is wrapping the WordPress content inside a <main role="main"> element using the the_content filter.

Use this code:

function add_main_landmark_to_content($content) {
    if (is_singular() && in_the_loop() && is_main_query()) {
        $content = '<main role="main">' . $content . '</main>';
    }
    return $content;
}
add_filter('the_content', 'add_main_landmark_to_content');

This solution automatically adds the required HTML without editing individual posts or pages.

Understanding the Code

Let’s understand each part of the snippet.

function add_main_landmark_to_content($content) {

This creates a custom function that receives the page content.

if (is_singular() && in_the_loop() && is_main_query()) {

The condition ensures the code only runs when:

• Viewing a single post
• Viewing a single page
• Inside the main WordPress loop
• Using the primary query

This prevents duplicate <main> elements from appearing in widgets, sidebars, or secondary loops.

$content = '<main role="main">' . $content . '</main>';

This wraps the content inside the semantic HTML5 main element.

The role=”main” attribute is included for maximum compatibility with older assistive technologies.

return $content;

Returns the updated content back to WordPress.

add_filter('the_content', 'add_main_landmark_to_content');

Hooks the function into WordPress so every qualifying page automatically receives the main landmark.

Where Should You Add This Code?

You have several options.

Option 1: Child Theme

Add the code to:

functions.php

inside your child theme.

This is the safest approach because updates won’t overwrite your changes.

Option 2: Code Snippets Plugin

If you don’t want to edit theme files:

• Install the Code Snippets plugin.
• Create a new snippet.
• Paste the code.
• Save and activate it.

Option 3: Custom Plugin

Developers managing multiple websites often place such snippets inside a small custom plugin.

How to Verify the Fix

After adding the code:

1. Clear your website cache.
2. Purge your CDN cache.
3. Open the affected page.
4. View the page source.
5. Search for:

<main role="main">

You should now see the main landmark surrounding your content.

Next, rerun:

• Google Lighthouse
• PageSpeed Insights
• Accessibility Checker
• Chrome DevTools Accessibility Audit

The warning should disappear if your page contains only one valid main landmark.

When Should You Not Use This Code?

Avoid using this snippet if your theme already outputs:

<main>

Otherwise you’ll end up with nested main elements, which is invalid HTML.

Always inspect your page source first.

How to Check Whether Your Theme Already Has a Main Landmark

Open your website.

Right-click anywhere.

Select View Page Source.

Press:

Ctrl + F

Search for:

<main

If you already find one, you do not need the PHP snippet.

Common Mistakes

Many users accidentally create accessibility issues by making these mistakes.

• Adding multiple main elements.
• Wrapping headers inside main.
• Wrapping footers inside main.
• Using main inside another main.
• Adding the code to a theme that already has a main landmark.
• Forgetting to clear cache after applying the code.

Comparison Table

Benefits After Fixing the Error

Once you fix Document does not have a main landmark, your website gains several advantages.

• Better accessibility.
• Cleaner semantic HTML.
• Improved Lighthouse Accessibility score.
• Better navigation for keyboard users.
• Improved experience for screen readers.
• Easier website maintenance.
• Compliance with modern HTML standards.

Is This an SEO Ranking Factor?

No.

Google has never confirmed that adding a main landmark directly improves rankings.

However, it contributes to:

• Better accessibility.
• Better semantic HTML.
• Improved user experience.
• Higher Lighthouse accessibility scores.
• Better code quality.

These improvements indirectly support overall technical SEO.

Troubleshooting

If the warning still appears after adding the code, check the following:

• Your theme already includes a <main> element.
• The snippet is not running due to another plugin.
• Website cache has not been cleared.
• CDN is serving an older version of the page.
• A page builder overrides the content output.
• The page being tested is not a singular page, so the condition does not apply.

Frequently Asked Questions

What is the Document does not have a main landmark error?

It is an accessibility warning indicating that your webpage does not contain a semantic <main> element identifying the primary content area.

Does adding a main landmark improve SEO?

Not directly. However, it improves accessibility, semantic HTML, and overall website quality, which are important aspects of technical SEO.

Can I use the provided PHP code in any WordPress theme?

Yes, provided your theme does not already output a <main> element. Always check your page source before adding the snippet.

Where should I paste the PHP code?

You can place it in your child theme’s functions.php, a custom plugin, or the Code Snippets plugin.

Can multiple main landmarks exist on one page?

No. According to HTML specifications, a page should contain only one visible <main> landmark.

Will this fix Lighthouse accessibility warnings?

If the missing main landmark is the cause of the warning, adding a proper <main role="main"> element should resolve it.

Conclusion

The Document does not have a main landmark warning is easy to fix in WordPress and should not be ignored. A proper <main> landmark improves accessibility, creates cleaner semantic HTML, and helps assistive technologies understand your page structure.

The provided PHP snippet is a simple and effective solution because it automatically wraps your content in a <main role="main"> element without editing individual pages. Before using it, verify that your theme does not already include a main landmark to avoid invalid HTML. Once implemented and tested, your website will be more accessible, standards-compliant, and better optimized for modern web best practices.

External Resources