Understanding H1s and Heading Tags for eCommerce SEO

What is an H1 Tag?

H1, or <h1> in HTML, is short for Heading 1. It's a type of HTML tag that is used to define headings on a webpage. While layers of heading tags exist from <h1> to <h6>, eCommerce SEO focuses largely on the <h1> tag, especially when it comes to PLPs (Product Listing Pages).

You implement them on a site by wrapping some text in the tags like this:

GIST: https://gist.github.com/morgoe/7b5a1dbca2028f75f47d8ce271aea67e.js

H2 through H6 tags should follow a natural heading structure with a standard parent-child relationship. To get a feel for how these tags are used, consider the range of sizes and weights from <h1> to <h6> below:

GIST: https://gist.github.com/morgoe/37dd110517c8c9a1bcec6983fdb5b721.js

H1 Tag Example: Patagonia PLP

And here's a quick example of H1's being used on an eCommerce storefront PLP in the wild.  For this example, we've chosen to look at Patagonia's Wetsuits category. The first image here shows the above the fold content with the H1 highlighted.

And this show's what's behind the scenes that powers the Men's Wetsuits text above. A simple <h1> tag.

Why H1s are important

Heading tags are everywhere. Pick a site, open it, and inspect the page. You'll quickly find it covered in all sorts of heading tags, especially H1's. So why does this matter?

It all comes down to communication. When we design and build websites, we're trying to communicate something to our visitors as efficiently and effectively as possible. We do this by presenting information in a logical way. English (and most Western languages) are written and read left-to-right, top-to-bottom. This means the most important information is found towards the top left of a page and less important information is found towards the bottom right of a page. But with modern interface design, the most important information is not always the very first piece of content on the page. Often the top left of a page has some type of menu or navigation bar. Maybe there's a nice hero image or a limited time promotional banner.

We're all focused on delivering the best customer experience possible, but it's also paramount we recognize that some of our traffic is made up of bots crawling our site.

In the Patagonia example above, the first pieces of content on the page are the logo, navigation items, and a hero image. You may be thinking that humans would be able to know the difference, but it's crucial to remember that not all traffic is human. We're all focused on delivering the best customer experience possible, but it's also paramount we recognize that some of our traffic is made up of bots crawling our site. These bots "see" and consume information in a very different way from humans. We need to make sure bots can access, traverse, and understand our sites as well. So we need some way of informing all of the traffic—human, bots, and otherwise— that arrives at our site, this text is what we consider to be the most important information on this page. That's where heading tags come in, especially the H1. The H1 is perhaps the most important piece of information a visitor could consume if they wanted the one thing on a page that would help them know, "What am I look at?".

Think of H1's like the festival name on a music festival poster. Logically, you would expect the event name to be positioned near the top of the poster, likely in a large, bold font. If you pay attention to only one thing, the organizers want you to see and remember the festival name. This applies all the way down the poster. Headline acts are the next thing you see, and in the next largest, most noticeable font. Why? Because the event organizer assumes these popular artists are more likely to make you come to their event than the up-and-comers. These artists are on the poster, but often towards the bottom in smaller fonts. Some people read the whole poster, but for those who don't, the organizers know they need to present the most important information in a way that's unmissable.

H1s for eCommerce

The same logic applies to eCommerce. We need a way for both humans and search engine bots crawling your site to see the page and understand "What am I looking at?". The H1 is the biggest, boldest way we can do that. Critically, H1's solve a dual purpose by controlling the human-facing, visual appearance of that text to communicate in a way humans can understand, while having an identifiable tag in the code that can be consumed and understood by bot traffic. We'll explore H1's in the context of eCommerce PDPs and PLPs below.

H1s on PDPs

Here's a simple PDP for one of the Patagonia Wetsuits we were looking at earlier:

And here's the inspector showing it's an <H1>. There's a lot more going on here with classes and animations, but it's clear to see an opening <h1...> and a closing </h1>.

H1s on PLPs

PLPs, or Category Pages if you call them that, are a different beast altogether. Let's consider the two key reasons behind this.

1. Unlike Product Names, Merchants have to name Categories

As digital merchandisers, you're actually the ones who are deciding what these categories should be called. This isn't a name you've inherited. It's completely up to you. If you named a category full of masks, 'Accessories', you wouldn't be wrong, but you also wouldn't expect to compete for search traffic either. Google will go on to assess how relevant your product assortment is versus other 'Accessories' pages, and will pretty quickly discount your page. Accessories is also not particularly useful for your Customers browswing the storefront if all the PLP contains is masks.

While 'Masks' vs 'Accessories' is an obvious example, the same decision routinely takes place on a much more nuanced basis. Should it be 'Masks', 'Face Masks', or 'Face Coverings'? It's not always clear at this stage which answer is better. Typically, you'll check a competitor's page or go with whatever you think sounds best. This is where Merchstack excels, with our Search and Performance Data.

2. The hierarchical nature of categories typically mean Category Names ≠ Category H1s

Most categories, and related taxonomies, are hierarchical. This often leads to a disconnect between the category name in whatever tool you're using, and the appropriate H1 for the page. Take this simple hierarchy: Men's > Clothing and Women's > Clothing. In many systems, the 'Category Name' in each case here is Clothing. It's okay that they're the same, because they're accessed from different parts of the hierarchy. But this means it's not okay to set the H1 on your PLP equal to Category Name.

In this case you would end up with two pages, both with H1s of 'Clothing'. Telling your customers, humans or bots, that both of these pages are 'Clothing' is clearly not optimal. It's not necessarily wrong, but it's nowhere near as specific as it should be. If Google thinks this page is "Clothing" instead of "Women's Clothing" you have two key problems. First, Google now thinks you have duplicate pages for Clothing, and tries to choose between them. Secondly, neither page is positioned well to compete for the most appropriate search volume based on the products that will be on that page, ie 'Men's Clothing' or 'Women's Clothing'.

Setting the right H1s for eCommerce SEO

Here are some important rules to keep in mind when constructing H1's for eCommerce.

1. Your H1s should be unique.

The logic is pretty simple here. If you have duplicate H1s, you're using the biggest heading on the page to say, we think these two pages are the same thing.

We're trying to make it easy for customers and Google bots to know what they're looking at. So while the above is accurate, being more specific helps everyone.

This makes it easier for humans and bots to understand exactly what this PLP is all about.

2. If you can be more specific, do it.

This doesn't mean make every H1 as granular as possible. Category pages already present logical constraints based on the assortment of products within the category. There is some reason these products have been grouped together. Take a Bags category for example. A more specific H1 could be gender-based...Women's Bags. But we can leverage the products to help us know how specific we can be. If the only type of Bags we have are Briefcases, Briefcases is more specific than Bags. We could be more informative to our visitors if we were to call the page Briefcases, or even Women's Briefcases. At this level, you also stand a much better chance of competing for search traffic as you shift away from head terms (Bags) and towards longer-tail keywords (Women's Briefcases). Let the products dictate how specific you can be, and then layer in demand-data to select H1s that match with customer intent.

3. Avoid over-using Branding Copy

It's really tempting to set cool brand-led copy in your H1's. Take a cool new gym shoe for example. Your marketing team has devised a campaign about keeping the athlete inside you hungry. The campaign's name is 'Stay Hungry'. (or something like that—there's a good reason I’m not in the marketing team!). So they push for your PLP to look like this.

Your existing customers think this is quite cool. But having existing customers is only half the battle. You also need to attract new customers. One of the key sources of that is organic search. So, when Google's bots show up on this page, what are they going to think this page is all about. Is it about hunger? Food? Shoes? Even if you were able to compete for a Stay Hungry keyword, how many potential customers who have never heard of your brand before are going to be googling 'Stay Hungry' to try to find new gym shoes. It's far more likely they're going to search for something boring like 'Gym Shoes' or 'Performance Gym Shoes'. While this may turn the marketing team off, it's a far more effective way of communicating what this page is to customers and bots. It puts you in a much better position to compete for relevant search volumes and to attract new customers so your eCommerce business can grow. You can still work in the 'Stay Hungry' campaign in other ways (like in your marketing graphics or H2's), but you shouldn't let brand-led copy win out over demand-led, brand-informed copy that is much more likely to generate traffic to your site.

4. Match Category H1s to the way your Customers search.

Think about how customers arrive to a PLP or category page. Some will browse through your navigation, some will use your on-site search, but others will arrive organically, from a search engine like Google.

Think about how you search. You likely use Google every day. What do you type when you search? In an ideal world, the top result matches what you searched for perfectly, you click through to that page, and voila, the H1 matches what you searched for and the products on this page are exactly what you're looking for. This is what Google is aiming for, delivering their search customers the best search experience possible, by serving the most relevant pages.

Frustratingly, eCommerce is way off hitting this mark. You see all sorts of irrelevant pages in the Search Engine Results Page (SERP) on a daily basis. Someone searches for Ripped Jeans and gets taken to a Jeans category where there are a few ripped jeans scattered amongst boyfriend and bellbottom jeans. Similarly problematic, you get taken to a PDP for a single pair of Ripped Jeans. Neither of these outcomes deliver a positive search engine experience, and these pages will not rank against these search terms for long. Notably, the organic traffic they attract in the meantime will convert poorly given the low relevancy of the page to the original search term.

You want to position your categories, the assortment of products within them, and their H1's to match what people are actually searching for. Your thought process should be about aligning your supply with customer demand. You'll have to fight influences from your existing taxonomy, branding demands (see below), creative instincts, and the needs of other departments within the business. These may be louder or easier at the time, but your goal is to position your category pages to match customer behavior (the way people are searching) so you create more relevant pages, rank higher, and attract more clicks (like in our Masks, Face Masks, Face Coverings example above). This isn't always as easy as it sounds with the tools and data you have now. With Merchstack, we make it easy for you to make objectively better decisions naming categories and setting your H1s.

Summary

Writing better H1s for your PLPs is a great way to improve both your SEO and your customer experience in one quick move. Better H1s help search engine bots better understand what a page is about (and therefore help them direct customers to that page), as well as providing a great experience for customers who arrive via organic search or direct links. The ideal PLP H1 is unique, specific, unbranded, and matches the way your customers search.