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.
Example of Page Heading

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:

Example of Page Heading

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.

Comments

  1. Thank you for this, I have been looking for this solution for a while now

  2. Thanks Dave, great and easy to follow walk-through!

    I have successfully in just a few minutes made all the changes on one of our clients and websites!

    May I ask, why the text “Product Description” should have h2 tag?
    This text never changes, just static text from language file… so I was wondering if the h2 tag on product page can not be used more “smarter” in regards to get a higher ranking? Perhaps on the breadcrumbs or…somewhere else on forexample:
    http://www.greatshoes.se/products/Kn%C3%A4h%C3%B6g-svart-st%C3%B6vel.html

    Also I wonder if you also have been thinking about making the built-in 301 feature 100% automatic instead of as now manually and both very time consuming and easy to forget to update if product name of some reason has been changed.. ?

    All the best,

    Johan
    Intelligent Solutions of Scandinavia AB

    • Dave Beck says:

      hi Johan,

      When looking at heading tags you really need to think about the correct structure of the HTML document rather than rankings. The reason that “Product Description” is a heading tag is that it is a major part of the structural make-up of your content. In my opinion use heading tags as they should be used and if it happens that you can place your keywords into a heading tag you should do it, but definitely don’t stuff keywords in the headings where it is not appropriate and definitely don’t use heading tags in areas of your page that are not appropriate e.g. the breadcrumbs.

      As per the automatic/built-in 301 redirects, unfortunately none of us have access to the underlying code of BigCommerce to make this happen. If you are using Interspire shopping cart you could make something like that happen with some intuitive coding. At the end of the day we all hope that Interspire/BigCommerce fix up the URL issue so that having to redirect becomes less of a task.

      Regards Dave

  3. Hello Dave great explanation i get other people asking me why ? Why when you purchase a template is the template made without tags What are the designers Thinking? our HTML guidelines tell us to use for our headlines and to use h3 h4 h5 h6 for sub headlines so what are they thinking ? leaving out the headlines tags , i want to know there reason . It is not that easy to modify H2 to H1 Because the STYLE.CSS sheet has no code for tags.

    • Dave Beck says:

      @Angelo it’s a good question and one that would need to be answered by Interspire/BigCommerce.

  4. Great article! Very easy to follow.

  5. We fixed this in different way for party bag kids UK – see http://www.ayearinecommerce.co.uk/bigcommerce-h1-issue-revisited/

  6. Great Article, Thanks a million.
    Correction for anyone who has a Big Comm site that was live form version 6.5.

    Location adjustment:
    Instead of updating the file ‘CategoryHeading.html’ you will have to update the file:
    CategoryContent.html’.

    Code adjustment:
    You have to use ‘%%GLOBAL_CatName%%’ opposed to ‘%%GLOBAL_TrailBrandName%%’

    Best,
    Dan

  7. hrmm, I don’t see this %%GLOBAL_CatName%% Dan? perhaps it’s changed with the new version? I am still having problems adding a h1 to the main page, although this guide was brilliant and helped me add h1 to all the other pages… can’t believe bc don’t do it as standard.

    I wish I knew what file it was to make the image logo the h1 so I didn’t need to have text!

  8. Dave,

    yet another great article on Big Commerce SEO. I wish you could write more on the subject. I am just starting to learn about the SEO and any piece of information is incredibly helpful!

  9. Excellent article, steps are really easy to follow & I have been trying to understand h tags in bigcommerce for ages! Thank you!

  10. Hi Dave, thank you for your useful article. I have changed all the h2 to h1. The difference visibly is that the title font and size of category and product name have changed. The font size is bigger and it’s not Arial now. I want to change it back to arial of the original size it used to be. I followed your instruction to try to edit the style.css but my file didn’t show up the content like you indicated:
    ———————————–
    1
    2
    3
    4
    5
    6
    7
    8
    .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
    ———————————–

    Here is mine content in style.css
    ———————————-
    1 /* Global Reset */
    2 * {
    3 margin: 0;
    4 padding: 0;
    5 }
    6 /* General */
    7 body {
    ———————————-

    Does this mean some of the content from my styles.css file is hiden because it’s not allowed to edit? Thank you very much.

  11. Great article! Looks like this fixed this issue on the newest default template Classic Next.

Speak Your Mind

*

css.php