🐛 Heading structure - should only be a single h1 per page

[bradystroud]

🐛 Describe the Bug

Right now the heading hierarchy doesn't make sense. This is important for SEO and accessibility

🧑‍💻 Reproduction Steps

1. Test tina.io on https://adresults.com/tools/heading-tag-checker-check-h1-t-m-h6-tags
2. See that the headings dont make sense

🎯 Expected Behavior

Headings make sense

Details

Heading tags are levels in the structure of a web page, with the `

` tag by default serving as the page title. There should therefore only be one `

` tag per web page. Then levels can be created with `

` tags, and sublevels with `

` to `

` tags. `

` and `

` tags should appear on every web page; the usage of `

` to `

` tags is optional. The most important thing is that heading tags are used according to the standard paragraph structure. So for what would normally be paragraph 1.1 and subsection 1.1.1, you respectively use `

` and `

` tags. To give you an idea of what that might look like: ```html

Title

Paragraph 1

Paragraph 2

Paragraph 2.1

Section 2.1.1

Paragraph 2.2

Section 2.1.2

Paragraph 3

``` In this example the levels are also indicated by indentations, to show you that a \ tag is never directly followed by a \ tag. Source - https://adresults.com/tools/heading-tag-checker-check-h1-t-m-h6-tags

💼 Tasks

• [ ] Read and understand https://www.semrush.com/blog/header-tag/
• [ ] Fix heading hierarchy

✅ Acceptance Criteria

-[ ] Heading structure follows

Cc: @Marxoz @bettybondoc

[landonmaxwell]

Figure: Pages that need fixing - no h1

[landonmaxwell]

tina.io_multiple_h1_tags_20241113.xlsx Pages with multiple h1 headings

[isaaclombardssw]

Figure: Pages that need fixing - no h1

@landonmaxwell Anything on the subdomain "app" .tina.io is TinaCloud – no need for that to be changed I reckon (or ask the Cloud guys if it should be changed)

[isaaclombardssw]

@bradystroud @landonmaxwell

Still TBC–

Brady thinks the best solution is to add a toggle on each block component to fix the core issue, which allows the editor to set the H1.

Landon and I do think solving this programmatically would be better, but we're not sure there's a reliable solution there.

A lot of docs pages also have duplicated h1's which is another consideration.

Tasks

• [x] Discuss and decide on an approach so this isn't an issue in future.
• [ ] Check all flagged pages after changes.

Bumping this up to a 4 at least, since it's no longer just html element changes.

[isaaclombardssw]

Update – I'm going to put this one as blocked for now, need to discuss with Gert + Josh technical feasibility of the options we have

[isaaclombardssw]

As per my conversation with @Marxoz and @landonmaxwell – we will go with the toggle approach. No longer blocked.

Tasks

• [ ] Add a toggle to each block setting the top level title to an H1.
• [ ] Have some block-level visual indicator so editors can identify which block is the H1 block.
• [ ] Account for H1's used in rich text field (make them H2's with the same styling?) on block, blog and doc pages (currently lots of docs have 2 H1's due to this).
• [ ] Check all flagged pages after changes.

[landonmaxwell]

Check if this affects AI searchability