DEV Community

Cover image for Header, Main, and Footer: The Foundation of SEO Crawlability
Pawar Shivam
Pawar Shivam

Posted on

Header, Main, and Footer: The Foundation of SEO Crawlability

#webdev #html #beginners #seo

When a search engine bot like Googlebot visits your website, it doesn't just read words; it tries to understand the purpose of different regions on your page. If your entire layout is built with generic <div> tags, the bot has to work harder to distinguish your navigation from your actual content.

By using landmark elements like <header>, <main>, and <footer>, you are providing a structural map that tells the crawler exactly where to focus.

The Power of Landmarks

1. The <header> Element
The <header> is typically a container for introductory content or navigation links. It often contains the site logo and the main menu.

  • SEO Benefit: Clearly defines the branding and global navigation of the site.

2. The <main> Element
The <main> element specifies the unique, primary content of the document. It should not contain content that is repeated across pages (like sidebars or nav links).

  • SEO Benefit: This is the most critical tag. It tells Google: "Everything inside this tag is what this specific page is about." This helps the crawler prioritize the indexing of your unique value proposition.

3. The <footer> Element
The <footer> contains information about the author, copyright data, links to terms of service, and contact information.

  • SEO Benefit: Helps establish trust (E-E-A-T) by clearly linking to essential business information.

Code Comparison

The Non-Semantic Approach (Generic):

<div class="top-bar">
  <div class="logo">Brand</div>
</div>
<div class="page-content">
  <p>This is the primary information...</p>
</div>
<div class="bottom-bar">
  <p>© 2026 Brand Name</p>
</div>


The Semantic Approach (SEO Optimized):

<header>
  <div class="logo">Brand</div>
</header>
<main>
  <p>This is the primary information...</p>
</main>
<footer>
  <p>© 2026 Brand Name</p>
</footer>
Enter fullscreen mode Exit fullscreen mode

Pros and Cons

Pro - Faster Indexing: Bots spend less time "guessing" which parts of the page matter, leading to more efficient crawling.

Pro - Accessibility: Screen readers allow users to jump directly to the content.

Con - One Rule: You must ensure only one element is visible per page, which requires careful implementation in Single Page Applications (SPAs).

Official Documentation

MDN Web Docs: The Main Element

Google Search Central: Site Structure

Top comments (0)