Header Tags used incorrectly by Write.as

Currently, the site title is using an H1 tag, and this tag appears on every page, including individual blog post pages. Meanwhile, the titles of blog posts themselves are marked with H2 tags. While this structure might seem logical at first glance, it’s not in line with best practices for HTML semantics and SEO.

Why This is an Issue:

  1. Each Page Should Have One H1 Tag: According to web development best practices, each page should have a single H1 tag that represents the main content of that specific page. The H1 tag is critical for search engines and screen readers as it signifies the primary topic of the page. Therefore, on a blog post page, the blog post title should be the H1, as it is the main content of that page.
  2. The Site Title Should Not Be an H1 on Every Page: While the site title (often the name of the blog or website) is important, it doesn’t need to be an H1 tag on every page. Instead, it can be styled prominently using a div, span, or p tag along with CSS. This allows the page’s H1 to be reserved for the content that is unique to that specific page (i.e., the blog post title).

Supporting References:

  • Moz states that “the H1 tag is typically reserved for the title of the content on a page, and each page should have only one H1 tag.” This makes it clear that each blog post should have its title as the H1 tag, not the site title that appears across every page (source).
  • W3C’s HTML5 Specification emphasizes that the H1 tag should reflect the hierarchical structure of the page content, meaning the most important title on that specific page (source).
  • Google’s SEO Starter Guide advises that each page should have a unique and descriptive H1 tag to help search engines understand the main content of the page (source).

Suggested Solution:

  • Home Page: The site title can remain as the H1 tag on the homepage since it’s the main topic of that page.
  • Blog Post Pages: The blog post titles should be changed to H1 tags, with the site title using a different tag like div, span, or p, styled appropriately for visual consistency.

Thank you for considering this feedback. Implementing these changes would not only align the software with best practices but also improve the SEO and accessibility of the sites that use it.

2 Likes

I mentioned this in a feature request. If you vote for it, and even add this information there, that might help us see it into production.

Ah true. Yeah I already voted for it.

1 Like

Thanks for this in-depth explanation, @justinf! It’s an enormous help, and I think we can definitely address it.

The only real blocker here is going to be with custom designs. Since this changes the structure of the page, it can potentially break any custom CSS people are using.

For a while now, I’ve wanted to revamp the structure (including changes like this), and give people a chance to manually switch to this “V2” layout. I’ve created a task here, so we can track development and be sure to address several issues with the base layout: ⚓ T914 More accessible / customizable base blog layout

2 Likes

If you do go this route, I have a number of suggestions I’d like to voice around getting the HTML structure semantically correct and also optimizing its flexibility for CSS customization. If you’re open to suggestions I’m happy to make a list. Not everything I suggest will be feasible or reasonable for the needs of this system. But I have been coding for about 25 years so I have a knack for it. And if I can contribute to the success of Write.as, that would make me happy.

Happy to hear it’s helpful, thanks for all you do!