How to use
01
Paste the page URL
Enter the specific page you want to outline, an article or landing page rather than just the homepage, since the heading structure belongs to one page at a time.
02
Click Extract headings
The tool fetches the page and pulls every H1 through H6 in document order. Each heading gets a colored level chip, brand for H1, green for H2, amber for H3, and indents 24 pixels per level.
03
Read the outline
Check the count chips along the top for totals per level, watch for the multiple-H1 warning, and use the copy button beside any heading to lift its text into a brief or outline doc.
Why Headings Tree
- Visualize the heading hierarchy of any page.
- Color-coded H1-H6 with proper indentation.
- Shows counts per level so you can spot SEO issues (multiple H1s, skipped levels).
Common questions
How is the Headings Tree different from the Page Headings Extractor?
They read the same tags for different jobs. The Headings Tree is a visual document map: indentation and color make a page's outline readable at a glance, which suits writers and content planning. The Page Headings Extractor in the SEO category is built for auditing heading tags as a ranking factor. Use this one to understand structure, that one to fix it for search.
What does an indented heading tree reveal about a page?
Nesting. An H3 sitting under its H2 reads like a subsection under a chapter, exactly like a book's table of contents. Sudden jumps in indentation expose skipped levels, and a wall of same-level headings shows a page that's listing topics rather than developing them.
Why does the heading tree flag more than one H1?
Because a page with two H1s has two competing titles, which muddies the outline for readers, screen reader users navigating by headings, and search engines alike. The warning appears automatically whenever the H1 count exceeds one, so template bugs that inject extra H1s get caught immediately.
Can I use it as a page heading structure viewer for competitor content?
Yes, any public URL works. Pull the heading map of a page that outranks you and you're looking at its editorial skeleton: how many H2 sections it runs, what subtopics get H3 treatment, and how much depth the winning outline actually has.
Does the outline include headings hidden by CSS?
It lists every H1 through H6 present in the fetched HTML, including ones visually hidden with CSS. That's intentional, since hidden headings still shape the document outline for assistive technology, but it explains the occasional entry you can't see on the rendered page.
Which colors mark which heading levels?
H1 chips use the brand tint, H2 is green, H3 is amber, and H4 through H6 share a neutral style. Combined with the 24-pixel indent per level, you can tell an H2 from an H4 from across the room without reading a single tag name.