Headings Prestashop SEO Series – Road to SEO Part 2

PrestaShop SEO Series - Road to SEO Part 2 Title Image
PrestaShop SEO Series Part 2

Today we are going to look a little deeper into the topic how PrestaShop is placing headings inside the source code of a page.

Last week I started my new project which is how to better my web shop running on PrestaShop 1.7 concerning SEO. If you did not read this article yet, you can find part 1 here.

Recap Road to SEO Part 1

Shortly after we did the adjustments mentioned here in part 1, our search result started to show the meta description correctly. So that’s a first win!

Google Search Result with correct meta description
Google Search Result with correct meta description

Unfortunately, the title and the description are too long, as it gets cut of at the end, that still needs to get fixed. The output is the similar on Bing as you can see in the next image. On Bing the whole description is visible but the title is cut off even more. But as Google the most used search engine worldwide, I will optimize title and description length to Google standards.

Bing Search Result
Bing Search Result

Additionally, I managed to set up our new Google MyBusiness account. Now this beautiful frame is showing up automatically on Google search results.

Google MyBusiness Search Result
Google MyBusiness Search Result

Pretty neat, isn’t it? Besides the fact that Google probably ranks pages higher which maintain a MyBusiness Page, I find it also looks very inviting to users to check out more information about your business. But remember to keep it up to date and publish news regularly so people know that you are still in business. Nothing worse than a years old page without any updates.

Next step – Headings PrestaShop

When Google crawls your page, it uses headings to determine the structure of your page and to understand its content better. If you do not know what headings are, you can learn more about it here on W3schools for example. By default, PrestaShop is quite good in inserting heading tags, if you are using the standard template which comes with the default installation. As I am using another theme I bought on ThemeForest.net I had to check first, how this theme is doing with inserting tags. The name of the theme is Angara and I think it is really pretty.

There is an ongoing discussion wether or not mutiple H1 tags are allowed and how Google handles it, but I don’t want to risk getting a bad ranking just because there are more than one H1 on it.

In general, when it comes about usage of headings, try to use them as natural as possible as they are describing the structure of your document, just like in a book, where you have one main title (H1), and then you have several chapters (H2) and subtitles (H3 – H6).

HTML Headings Checker tool

I found pretty cool page for analyzing a web page, it has a ton of useful functions just like Swiss army knife! It’s called SEO Review Tools and I just love it, it is just awesome. It comes with an HTML Headings Checker tool amongst many other tools , it gives you recommendations on optimizing your page, and the best thing about it, it is free! Rest assured that I will come back to this great tool a million times more during this series. For today, we will start with the headings checker.

SEO Review Tools HTML Headings Checker
SEO Review Tools HTML Headings Checker

Analyzing the front page

The first check of the front page showed that there is no H1 tag at all! I am quite sure that’s not how it is supposed to be. Checking out the header.tpl file of the default theme, I can see PrestaShop puts a H1 tag on the main logo of the page on the index page only.

<div class="col-md-2 hidden-sm-down" id="_desktop_logo">
  {if $page.page_name == 'index'}
    <h1>
      <a href="{$urls.base_url}">
        <img class="logo img-responsive" src="{$shop.logo}" alt="$shop.name}">
      </a>
    </h1>
  {else}
    <a href="{$urls.base_url}">
      <img class="logo img-responsive" src="{$shop.logo}" alt="{$shop.name}">
    </a>
  {/if}
</div>

Let’s hear what Matt Cuts from Google Webmasterplan has to say about this common practice:

Great! So let’s change the header.tpl of my bought theme accordingly. The alt attribute of the image, which is in that case my shop name I entered from the back office, will be understood as content for my H1 tag. That was easy!

H1 heading found on index page
H1 heading found on index page

Checking subpages

Front page looks good now concerning headings, let’s see the category page, where the facet search module is active.

Multiple H1 tags found again
Multiple H1 tags found again

24 H1 tags found, seriously? By taking a closer look at the source file of the page, I can see that every filter of the facet search gets its own H1 tag. That is definitely not how should be.

After comparing the facets.tpl of my theme with the one from the default theme I decided to try the quick solution and copy & paste the default theme code to my theme. After reloading the page and testing the facet search, I can happily say it works. Now let’s see for the headings.

Still 2 H1 tags present
Still 2 H1 tags present

Seems like we are getting somewhere, finally. But where is this second H1 tag coming from? It’s not from the main logo as that H1 tag should only be displayed on index page. So where to find it? Consulting again the page source code I can see that the category name is enclosed in H1 tags and has a second, a mobile version. I don’t know how Google would handle this so let’s play safe and fix this.

The file to change is namend category.tpl in my template. This is what I found:

<div class="block-category card card-block hidden-sm-down">
  <h1 class="h1">{$category.name}</h1>
  {if $category.description}
    <div id="category-description" class="text-muted">{$category.description nofilter}</div>
  {/if}
  {if $category.image.large.url}
    <div class="category-cover">
      <img src="{$category.image.large.url}" alt="{$category.image.legend}">
     </div>
   {/if}
 </div>
 <div class="text-xs-center hidden-md-up">
   <h1 class="h1">{$category.name}</h1>
 </div>

And this is what I changed it to:

<div class="block-category card card-block">
  <h1 class="h1">{$category.name}</h1>
    <div class="hidden-sm-down">
      {if $category.description}
        <div id="category-description" class="text-muted">{$category.description nofilter}</div>
      {/if}
      {if $category.image.large.url}
        <div class="category-cover">
          <img src="{$category.image.large.url}" alt="{$category.image.legend}">
        </div>
      {/if}
   </div>
</div>

I don’t mind that the header now is not centered on mobile devices. Actually, I think it looks quite neat. And finally, we achieved what we were trying to, only one H1 tag left. Hooray!

Headings Prestashop how it should be
Only one H1 tag left on the page

Well done!

Phew, that was a little tedious, but not too difficult. Let’s hope Google will appreciate the effort and rank my page a little bit better in the future.