Semantic HTML tags for headings

[swissspidy]

Summary

After reading through https://wordpress.org/support/topic/add-the-code-of-the-hn-tags/ I realized that we don't seem to have any ticket or documentation about the expectations around semantic HTML output for stories. There's only #1610 about semantic tags for inline formatting.

For several reasons (SEO, accessibility, to name the most important ones) it is advisable to use semantic heading tags like <h1> or <h2>.

At the moment it is not possible to use any of those.

We need to define if and how this should be possible, and document this accordingly.

If we do want to support this

Should we allow multiple <h1> tags in a story (but only 1 per page)? Demos like https://amp.dev/documentation/guides-and-tutorials/learn/webstory_technical_details/ seem to indicate so.

How is this reflected in the pre-publish checklist?

Additional Context

In the legacy story editor we tried to be smart, detecting whether an element was for example positioned high up on the page and with large font size, and automatically turning it into an <h1> on the frontend. The user did not have to worry about it (but was able to override it)

Acceptance Criteria

I am imagining this to be similar to what is shown in the screenshot above (though adding UI is P2).

1. Multiple H1 in a story are OK
2. Only one H1 allowed on a story page
3. Devise algorithm for automatically setting the heading level based on the element's appearance
4. When using one of the existing text sets or text presets, these should automatically have the right heading level
   e.g. when I insert the "Heading 1" preset it should be an H1 ideally, due to its appearance (because the font size is so large)
5. If the above is not feasible or some text sets are too complex, we could force the element type for some text elements, e.g. always make an element H1, regardless of its appearance

Does this epic have any performance impact?

There shouldn't be, as the algorithm for automatically setting the heading level (p, h1, h2) is fairly trivial

Does this epic have telemetry?

Not needed

[swissspidy]

Pinging @o-fernandez @choumx for consideration

[dreamofabear]

Seems reasonable to use h1, h2, h3 etc. for text presets and text sets. I don't think we need to bother with quantity restrictions.

IMO this is a P3/P4 though.

[LuckynaSan]

Updating this request with related support topics:
https://wordpress.org/support/topic/one-h1-per-story-or-per-page/
https://wordpress.org/support/topic/the-plugin-converts-headers-h1h2h3-into-span/
https://wordpress.org/support/topic/how-to-know-for-sure-what-the-html-tag-is-for-a-text-element/

[Bernietorras]

I have been creating several web stories and have tried to evangelise their use in Spain, but as an SEO specialist I find that this format is at a disadvantage if we can't add headers so that google bots can understand the content better.

Since a few months I only use them as landing pages, because the projects for which I have used them are not positioning well at all. I think the fact of not being able to help google understand the content, through the use of headers, or the use of different types of structured data more widely, is hurting the use of the web stories format.

I think it is an easy functionality to implement and has been omitted for too long.

[wmosquini2]

Guys, like this question here?

I recently opened a thread on plugin support commenting on the absence of title tags in the body of Stories, especially the h1, which negatively impacts SEO reports.

Is there any expectation of any solution? As here at the company we generate an SEO report for several clients, who then question this error of absence of h1, which ends up generating frustration for not having a clear solution.

Could easily create a PHP and capture the title of the Guide, the question is if it will work.

[swissspidy]

@wmosquini2 Thanks for reaching out about this

We have discussed this enhancement and have put it on the roadmap for one of our next releases. So we will be taking a closer look at how to best implement this very soon.

[Bernietorras]

Thank you for implementing headers in the Web Stories.

In all the stories I have published now show me headers, and as far as I can see, it has marked them by size and other criteria that you have established in an algorithm, as I have seen in a github thread.

Would it be possible to change the headers of the stories, through a selector in the editor? So that we can set which ones we want to be H1, H2 or H3? Respecting the styles (size and font) that we already have.

Otherwise I have to delete all the content created in the story and recreate it with the correct tags.

[swissspidy]

Thanks for your feedback! It's something we might consider adding in the future. The initial goal was to add this algorithm to do it automatically without having to add a UI option in the editor (to keep things simple).

[Bernietorras]

Thank you very much, Pascal!!

[surajpandeykp]

So adding H1 and H2 is possible on the web stories?

[swissspidy]

@surajpandeykp Yes. See https://wp.stories.google/docs/seo/

Please open a support thread pn WordPress.org if you need assistance. We don’t monitor old closed issues like this. Thanks!