Are headings giving you headaches?

Headings play a pivotal role on any webpage, following the guidelines can make headings this silver bullet that will nicely structure your webpage and adhere to the user experience, while it also is beneficial for your SEO. Unfortunately this often isn’t the case and we find ourselves struggling with getting the correct headings, in the correct position with the correct styling. Now this doesn’t have to be the case.

Gotcha's:

• The approach to headings varies among SEO professionals, developers, and designers, with each prioritising different aspects.
• Google's Guidelines emphasises the use of only a single <h1> tag per page and maintaining a hierarchical structure.
• Websites can benefit from the proper use of headings, especially with keywords.
• It's critical to assess whether headings are needed for certain content, avoiding their overuse to maintain their SEO power.
• Proposed is a dynamic approach to heading usage which offers flexibility and ensures semantic integrity.

A Collaborative Solution to Heading Challenges

Headers vs. Headings

First we need to emphasise the distinction between "headers" and "headings" as these terms are often confused. A "header" is an HTML element (<header>) that typically contains introductory content such as menus, and may include a heading. Conversely, "headings" are HTML elements (<h1> to <h6>) that denote the titles of sections within a webpage, crucial for content hierarchy but should not encompass a header. The distinction is vital for web developers, designers, and SEO specialists.

Three different perspectives

Headings have been a cornerstone of SEO since its inception, as they help search engines understand and index web content more effectively. Incorporating focus keywords (hotels in Bali) into headings (The top ten hotels in Bali) can significantly improve a page's performance in a search engine. Beyond SEO, headings structure content, enhance readability and user navigation. The evolution of SEO practices has shifted towards more natural keyword integration within headings, reflecting the broader trend towards optimising web content for both search engines and user experience.

• For SEO professionals, the correct implementation, together with the correct content is critical. They must ensure headings are structured properly and contain relevant keywords to enhance a page's search-ability. While SEO experts can guide content creation, they often rely on developers to integrate these elements into the webpage's code, highlighting the collaborative nature of optimising headings.
• From a developer's standpoint, the priority is not the specific heading used but adhering to the style guide provided by designers. Whether it's an <h1>, <h2>, <span>, or <div>, the goal is to present content in the designated format. This approach underscores a more technical focus on functionality rather than the content's SEO implications.
• Designers prioritise how a web page reflects the intended design, often linking styles to specific HTML elements based on traditional practices. This focus can sometimes lead to conflicts with SEO and development best practices, particularly when creative designs dictate heading sizes and styles that deviate from standard guidelines.

The effective use of headings should be a collective responsibility among SEOs, developers, and designers. By adjusting their approach to prioritise both user experience and a comprehensive understanding of heading usage, teams can turn headings into a powerful tool that benefits both the website's functionality and its visibility online. Now as said before this doesn't always play well, let's look at some examples.

Guidelines for Effective Heading Implementation

Google's guidelines for heading implementation emphasise two main principles for web developers and content creators:

• Firstly, each webpage should start with a single <h1>-heading to clearly define its primary topic, and this heading should be unique to the page. Secondly, it's crucial to maintain a hierarchical structure among headings, ensuring a logical flow from <h1> to <h6>.

Challenges with single <h1> heading usage

Despite the straightforward nature of the first guideline, compliance is frequently overlooked. For instance, notable brands like Levi’s have been observed either omitting the <h1> heading on their homepage or employing multiple <h1> headings on product detail pages. Such oversights can negatively impact a page's search ranking, as adherence to guidelines is a factor in SEO performance. Now I wanted to follow up with an example of a competitor, Nudie Jeans, who did have an <h1>-heading on their homepage. But apparently they also don’t have it as they’ve hidden theirs.

Link

A big no-no in my book, and that of Google too. So maybe it's something with Jeans manufacturers that they don’t want an actual <h1> heading on their homepage. So free tip from me, if you’re in the business, this is where an opportunity lies.

Issues with the hierarchical structure

The second guideline presents more complexity, especially with the rise of component-based development, which can obscure the overall heading structure. Design often drives the appearance of headings, potentially leading to a disregard for their hierarchical order. For example, Oracle's style guide illustrates that while <h1> and <h2> headings are distinguishable in size, <h3> and <h4> headings are not, which can tempt designers or content managers to misuse these headings for aesthetic rather than structural reasons. This practice contravenes the guideline that headings should reflect the content's structure, with each level of heading (<h2>, <h3>, etc.) following its predecessor in a nested and logical manner, as illustrated:

<h1>...</h1>
    <h2>...</h2>
        <h3>...</h3>
        <h3>...</h3>
            <h4>...</h4>
        <h3>...</h3>
    <h2>...</h2> 

Decoupling headings and styling

A significant challenge in web development is the rigid association between headings and their styling, which can lead to consistency issues across different pages. Typically, a heading's appearance is predetermined in the CSS file, assigning specific attributes like font size, color, weight, and line height to each heading tag (<h1>, <h2>, etc.), thus standardising their look but also limiting flexibility. Such as:

h1 {
  font-size: 32px;
  color: #000;
  font-weight: 600;
  line-height: 24px;
}

This CSS snippet binds the <h1> tag to a specific look, limiting flexibility and creative design implementation across webpages.

A solution to this challenge is the introduction of styling classes that can be applied to any heading level, thereby separating the visual style from the semantic importance of the heading. Consider the following CSS class:

.large-heading {
  font-size: 32px;
  color: #000;
  font-weight: 600;
  line-height: 24px;
}

This class can be applied to any heading to achieve the desired visual effect, regardless of the heading's semantic level, enhancing consistency and flexibility in design.

Empowering Developers with Choice

In React applications, this concept can be extended through the creation of a dynamic <heading /> component. This component allows for the specification of both the semantic element (e.g., h1, p, span) and its style (e.g., large, medium, small) through props, as demonstrated in the following code example:

import React from 'react';

// Styles for each size
const styles = {
  small: {
    fontSize: '12px',
    fontWeight: 'normal',
  },
  medium: {
    fontSize: '16px',
    fontWeight: 'bold',
  },
  large: {
    fontSize: '24px',
    fontWeight: 'bold',
  },
};

const Heading = ({ headingProp = 'p', styleProp = 'medium', children }) => {
  const style = styles[styleProp] || styles.medium;
  return React.createElement(headingProp, { style }, children);
};

export default Heading; 

This component dynamically generates the desired HTML element with the appropriate style, offering unprecedented flexibility in heading management across the application.

This approach empowers developers to choose the most suitable HTML element for the content's context, independent of the design's predefined heading structure. It enables a more semantic use of HTML elements, where a title in a design might be visually consistent with a <h2> tag but semantically correct as a <p> or <div> tag, with the class providing the necessary styling.

Streamlining Design and Development Collaboration

By decoupling the style from the semantic level of headings, designers and developers can focus on their strengths—visual appeal and semantic structure, respectively—without compromising on either. Designers can specify the size and appearance of headings in their designs, which developers can then implement without being constrained by the HTML element traditionally associated with that style. This method simplifies the implementation of design intents, ensures semantic correctness, and enhances the overall accessibility and SEO of web content.

Considerations when it comes to headings

Managing Headings in a CMS Environment

To ensure optimal control over headings within a content management system (CMS), several adjustments are necessary. CMS platforms often include rich text editors that allow for HTML content injection, raising concerns about the misuse of default heading styles and the potential disorganisation of heading structures. While it may not be possible to control all aspects of content editing, particularly in terms of SEO oversight, certain measures can be taken to enforce programmatic standards. For instance, content entered through a CMS can be restricted or reformatted using markdown, offering a way to programmatically manage how headings are implemented. A practical approach could involve disabling the <h1>-tag in the CMS's WYSIWYG editor, or automatically converting selected heading levels in markdown (e.g., h1, h2, h3) to a consistent heading level (e.g., <h2>) in the webpage's code, with specific styling. This strategy helps maintain the hierarchical integrity of headings, avoids the redundancy of multiple <h1>-tags, and simplifies the use of headings by limiting them to a few stylistically consistent options.

Reevaluating the Necessity of Headings

An important consideration for designers, developers, and SEO professionals is the actual necessity of headings within a page's content. There's a prevailing trend to use headings extensively for any text that deviates from standard paragraph formatting, but this approach may not always be appropriate or effective. Headings should primarily serve to title sections rather than being embedded in elements like buttons. HTML offers a wide range of elements designed for specific purposes, and it's advisable to use these elements correctly rather than defaulting to headings. For example, an unordered list should not be comprised of h3 headings but rather styled to resemble such headings if necessary. Lastly overuse of headings can dilute their impact on a page's SEO, diminishing the effectiveness of well-structured heading use in organic ranking.

Bonus: Incorporate the Google guideline in your End-2-End-tests

I've written about end-2-end-tests for SEO before. And while working on this article I noticed that I didn't incorporate a test to check for the existence of only one <h1>-tag on a page in that article. Now this can be done fairly simple with the test below and that can run in your deployment pipeline.

it('should have only one <h1> heading on the page', () => {
  cy.get('h1').should('contain.text', 'the text of the heading');
  cy.get('h1').should('have.length', 1);
}) 

It will check if the given page has an <h1>-heading present, and that only one <h1> heading is used on the page. If the test fails this will mean that you either have no <h1>-heading present or a couple, which should also not be the case.