Fixing The Infamous BigCommerce H1 Tag Issue

It’s no secret that using heading tags (<h1>… <h6>) is one of many tactics used to successfully optimise a webpage for search engines. While the overall impact using heading tags has on your rankings is somewhat debatable (mostly due to terrible misuse), it is certainly a best practice and you should be using heading tags where appropriate.

What Is the HTML Heading Tag?

According to W3Schools:

“The <h1> to <h6> tags are used to define HTML headings.

<h1> defines the most important heading. <h6> defines the least important heading.”

Heading tag should be used to structure your pages in a hierarchical order

Here Is an Example Of How You Should Be Using Heading Tags

<h1>This is heading 1</h1>
<p>This is introductory content </p>
<h2>This is subheading 2a</h2>
<p>This is subheading 2a content </p>
<h2>This is subheading 2b</h2>
<p>This is subheading 2b content</p>
<h3>This is subheading 3</h3>
<p>This is subheading 3 content</p>
<h2>This is subheading 2c</h2>
<p>This is subheading 2c content</p>

So What Is the Issue With How BigCommerce Is Using Heading Tags?

Now before we get started I need to personally state that I do not see this as a huge issue, but because a lot of people do I believe it is worth providing you with a way to fix the problem.

The problem is that most BigCommerce templates have been designed to use the <h2> tag for the main heading of the products, info, categories, news and brand name pages.

Here is an example of the heading in question on a product page:

Many people believe that the template should be changed so that the main heading of the products, info, categories, news and brand name pages be labelled with a <h1> tag rather than <h2>. If you agree with this assumption and want to make a change I have good news for you – it’s really easy to fix and you can do so in less than 5 min.

How to change the <h2> to <h1>!

Converting the tags from <h2> to <h1> isn’t difficult but does require you to go into your template files and adjust the code manually.

I have provided some instructions below for what to do with each of the suspect pages.

Step One

The first thing you need to do is either download your template files via FTP or browse the template files via the design editor within your BigCommerce admin.

Step Two

Thing you need to do is go to each individual file and make the appropriate code change.

Locate the “Panels >BrandContent.html” file.
When the file opens you will see some code near the top of the page that looks like this:

<h2>%%GLOBAL_TrailBrandName%%</h2>

All you need to do is change this to:

<h1>%%GLOBAL_TrailBrandName%%</h1>

Locate “Panels >CategoryHeading.html”
Change

<h2>%%GLOBAL_TrailBrandName%%</h2>

to

<h1>%%GLOBAL_TrailBrandName%%</h1>

Locate “Panels >NewsContent.html”
Change

<h2>%%GLOBAL_NewsTitle%%</h2>

to

<h1>%%GLOBAL_NewsTitle%%</h1>

Locate “Panels >PagesContent.html”
Change

<h2>%%GLOBAL_PageTitle%%</h2>

to

<h1>%%GLOBAL_PageTitle%%</h1>

Locate “Panels >ProductDetails.html”
Change

<h2>%%GLOBAL_ProductName%%</h2>

to

<h1>%%GLOBAL_ProductName%%</h1>

To maintain the correct HTML structure you really should also look at changing a number of <h3> tags to <h3>.

The files that you will be looking at to make these adjustments are:

Locate “Panels > ProductByCategory.html”
Change

<h3>%%LNG_FindByCategory%%</h3>

to

<h2>%%LNG_FindByCategory%%</h2>

Locate “Panels > ProductDescription.html”
Change

<h3> %%LNG_ProductDescription%%</h3>

to

<h2>%%LNG_ProductDescription%%</h2>

Locate “Panels > ProductOtherDetails.html”
Change
[ssourcecode]

%%LNG_OtherDetails%%

[/sourcecode]
to

<h2>%%LNG_OtherDetails%%</h2>

Making It Look Pretty

Changing the template heading tags is going to change the way your site looks (more than likely the headings will be much larger). To rectify this you will need to make some small changes to your styles.css file.

To make the changes you will need to change:

.Content h2, .TitleHeading {
font-size: 1.6em;
font-weight: 400;
padding: 5px 20px;
font-family:Georgia, "Times New Roman", Times, serif;
font-style:italic;
background-color:#f4f4f5
}

by adding h1 like this:

.Content h1, h2, .TitleHeading {
font-size: 1.6em;
font-weight: 400;
padding: 5px 20px;
font-family:Georgia, "Times New Roman", Times, serif;
font-style:italic;
background-color:#f4f4f5
}

Obviously you will need to make the necessary changes to the stylesheet above to match your theme.

Concluding This Tutorial

If you follow the above instructions you can sleep well at night knowing that your main pages are now more “SEO friendly”. Personally I don’t think it makes any difference whatsoever, a heading tag is a heading tag to Google…. however in saying that I don’t think it hurts to make the changes either.

If you would like to learn more about optimising your BigCommerce site make sure you check out the Free BigCommerce SEO Short-course I have been putting together.

If you have any questions about this tutorial please feel free to leave a comment below.

Tagged as: BigCommerce, BigCommerce SEO