Designing Your Website with Heading Tags in Mind

Heading tags are an essential component in any SEO strategy. UX designers should use typographical design elements to incorporate proper heading tag placement in a website design.  

Katie Hecox
Digital Strategist

Using Heading Tags in On-Page SEO Tactics

Heading tags. What are they? Where should you put them? And how in the world do they impact your SEO?

These are all examples of questions I get about heading tags on a pretty regular basis, not only from our clients, but from the designers and developers on our team. From the ground up, it’s important at each stage in a website redesign to know where heading tags will be placed. This impacts the overall design, how developers classify certain elements of the site, and ultimately, where content strategists will place certain pieces of text to get picked up by search engines.

This on-page SEO tactic should be well thought out and consistent throughout the website. So let’s answer some of those commonly asked questions to help you understand the what, where, and how of heading tags on your website.

What are Heading Tags?

Heading tags are indicators in the HTML to help rank sections of content in a hierarchical way. Tags range from H1-H6 and the content in the H1 Tag will be viewed by search engines, and likely readers, as more important than content in the H5 or H6 Tag. Not only do these tags inform Google what the content is about, making it easier to properly rank a web page—it helps readers see at a glance what pieces of content to focus on. The H1 Tag is essential, as it provides Google with the most context for what the page content is about. H2-H6 are optional tags to organize the content in a way that’s easy to navigate (Search Engine Journal).

Where Should You Put Heading Tags?

If heading tags are used to identify sections of content for both readers and search engines, they should be placed right before a new section of content. Aside from the H1 Tag, that often doubles as the page title, lining the heading tags in order from H2 through H6 should be done sequentially and hierarchically. Additionally, you shouldn’t jump around and place an H3 Tag followed by an H5 Tag, then jump back up and place an H4 Tag. The sequential order, again, helps Google read the content in the right order.

How Do Heading Tags Impact SEO?

Keyword research and placement is important when it comes to on-page SEO tactics, and making sure you’re plugging those keywords in where they will be picked up by Google is crucial. Search engines place the most emphasis on the H1 Tag because it describes the page content or blog article in its entirety. Following suite, H2-H6 are ranked in a hierarchical way, as mentioned above.

If the entire page or blog post is talking about the best toaster oven of the year, for example, an appropriate H1 Tag might look something like “Top Rated Toaster Oven and Where to Find It” (or something like that). This heading tag would be general enough to encapsulate the whole article and uses strong keywords, as well. Subsequently, using the smaller heading tags could break the content into specific sections—possibly making one section about the look and feel of the toaster oven, another section about the quality and price, and a final section for a competitive analysis. Each section title would contain keywords related specifically to that section.

A Designer's Role in Heading Tags

So what does this mean for designers?

Heading tags are one opportunity as a designer to go outside of the box creatively because the headings can also be used as a design element.

– Javon Bell, UX Designer

Designers tend to design the heading tags in the same font and color with descending font sizes based on the tag. Making sure these sizes and colors align with the overall design of the website is essential to bringing consistency and cohesion in the design. Javon, our UX designer indicates that, “Heading tags are one opportunity as a designer to go outside of the box creatively because the headings can also be used as a design element.” The typographic hierarchy is important because it helps establish the main headline or topic for the page.

If heading tags are so important, it probably makes sense for digital strategists to jump in at the beginning of the process and provide feedback on heading tag placements, right? We think so too. Being a cross-functional team allows us to bounce ideas off one another, check our work, and pivot quickly when the direction changes. This act of truly working alongside one another helps us ensure proper placement of these heading tags that are so crucial to SEO.

Not sure if your using heading tags to their fullest potential? Give us a call and we can set up a time to help evaluate your site. Heading tags are just one part of an overall SEO strategy. If you don’t have one, we can help!