prebaked.
SEO reference

Heading tags

Last reviewed

Heading tags are the HTML elements <h1> to <h6> that mark the titles of a page and its sections. Google uses headings to understand a page and as one source for the title link in results, but it says the number and order of headings is not something to focus on.

Syntax

<body>
  <h1>Red sneakers</h1>

  <h2>Sizes</h2>
  <h3>EU sizes</h3>
  <h3>US sizes</h3>

  <h2>Care</h2>
</body>

Levels

Element Typical use
<h1> Main title of the page. Usually matches the topic of the <title>.
<h2> Main sections
<h3> Subsections of an <h2>
<h4> to <h6> Deeper levels, rarely needed

What Google says

Question Google's position Source
Does heading order matter? "From Google Search perspective, it doesn't matter if you're using them out of order." Semantic order is good for screen readers. SEO Starter Guide
How many headings? "There's also no magical, ideal amount of headings a given page should have." SEO Starter Guide
Are headings used for title links? Yes. Heading elements such as <h1> and the main visual title are among the sources. If several large headings compete, Google may use the first one. Title links
Where to put the main title? Google recommends the first visible <h1> on the page. Title links

What HTML and accessibility guidance says

  • Multiple <h1> elements are allowed as long as they are not nested, but MDN recommends one <h1> per page that describes the page content.
  • Do not skip levels on the way down: <h1> then <h2>, not <h1> then <h3>. Going back up, from <h4> to <h2>, is fine.
  • Screen reader users jump from heading to heading, so the hierarchy should be logical.
  • There is no document outline algorithm in browsers. <h1> inside <section> does not become a lower level.
  • Do not use headings to change text size. Use CSS font-size.

Common mistakes

  • No <h1>, or the title is a styled <div>. Crawlers and screen readers do not see it as a heading.
  • Logo or site name as the <h1> on every page. The <h1> should describe this page.
  • Headings used for styling. Sidebar labels and footer text as <h4> add noise to the structure.
  • Skipped levels. <h1> straight to <h4> confuses screen reader users.
  • Headings rendered only in the browser. See the JavaScript section below.

How to check your page

  1. List the headings in the raw HTML:
curl -s https://www.<your-domain>/page/ | grep -io '<h[1-6][^>]*>[^<]*'
  1. In the browser console, list the headings after JavaScript has run:
[...document.querySelectorAll("h1,h2,h3,h4,h5,h6")].map(h => h.tagName + " " + h.textContent.trim())
  1. Compare the two. If the first list is empty and the second is full, crawlers that do not run JavaScript see no headings.

On JavaScript sites

In a client-side rendered app, the server often sends an empty <div id="root"> and JavaScript adds the headings. Google renders JavaScript, so it usually sees them after rendering. The major AI crawlers, including GPTBot and ClaudeBot, do not run JavaScript. They read only the HTML the server sends, so a page whose headings are built in the browser has no structure for them at all.

Headings in the server HTML help every crawler find the topic and sections of a page. For JavaScript apps that means server-side rendering, static generation or prerendering.

See what ChatGPT sees on your site

FAQ

Can a page have more than one H1?

HTML allows it as long as the <h1> elements are not nested. MDN recommends one <h1> per page. Google's SEO Starter Guide says there is no ideal number of headings.

Does heading order matter for SEO?

Google says it does not matter for Google Search if headings are out of order. It matters for screen reader users, so keep a logical order.

Should the H1 match the title tag?

They do not need to be identical, but both should describe the same topic. Google can use the <h1> for the title link, and a consistent main title helps.

Do headings help rankings?

Google does not describe headings as a ranking factor in the SEO Starter Guide. It recommends headings to help users navigate pages and uses them as a source for title links.

Do AI crawlers read heading tags?

They read whatever headings are in the HTML they fetch. The major AI crawlers do not run JavaScript, so headings added in the browser are missing for them.