I noticed this post is from a month ago, and I’m not sure if anyone has found a solution yet. I just checked your site and saw that the H1 tag is still missing.
I just spent two hours investigating this issue and tried several suggestions —unfortunately, none of them worked for me.
However, after a lot of trial and error, I was finally able to successfully add an H1 tag to the homepage of all four of my Shopify stores. I hope this can help other sellers facing the same problem.
First, to clarify: we're only talking about adding an H1 to the homepage, since collection, product, and blog pages typically already include an H1 by default.
Second, my solution might not apply to everyone, as it depends on the theme. My four stores use the following themes: Ride, Taste, and Shapes, with two of them using Taste.
Below is the method that worked for me on all four stores. If anything is unclear, feel free to ask!
There are two main steps to correctly configure your homepage H1 tag for better SEO performance.
Fix the Logo: Stop the theme from using an <h1> tag for your logo.
Add a New Hidden H1: Implement a custom, search-engine-friendly <h1> tag that is only visible on the homepage.
Step 1: Fix Your Header (Remove H1 from the Logo)
Most themes incorrectly use the <h1> tag for the logo on the homepage. This needs to be changed to a <div>.
In your Shopify Admin, go to Online Store > Themes.
On your current theme, click the ... button and then Edit code.
In the code editor, open the Sections folder and find the header.liquid file.
Inside this file, search for <h1 to find where the logo is wrapped in an <h1> tag. You will find code that looks something like this:
Before:
{%- if template.name == 'index' -%}
<h1 class="header__heading">
{%- endif -%}
<a href="/" class="header__heading-link">
... your logo image is here ...
</a>
{%- if template.name == 'index' -%}
</h1>
{%- endif -%}Your only job here is to change the <h1> and </h1> tags to <div> and </div>.
After:
{%- if template.name == 'index' -%}
<div class="header__heading">
{%- endif -%}
<a href="/" class="header__heading-link">
... your logo image is here ...
</a>
{%- if template.name == 'index' -%}
</div>
{%- endif -%}Click Save. The <h1> tag is now free to be used correctly.
Step 2: Add a Real, Hidden H1 to Your Homepage
Now, we will add our own powerful H1 tag that only shows up on the homepage and is invisible to users but visible to search engines.
IMPORTANT: First, make a backup of your theme! Go to Themes, click ... and choose Duplicate. This is your safety net.
In the code editor, open the Layout folder and click on the theme.liquid file.
Find the opening <body> tag. It will look something like <body class="gradient">.
Paste the following code directly below the <body> tag line.
Code Snippet:
{%- if template.name == 'index' -%}
<style> .visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
white-space: nowrap;
}
</style>
<h1 class="visually-hidden">Your Homepage Title - Main Keywords Here</h1>
{%- endif -%}Customize the text! Change Your Awesome Homepage Title - Main Keywords Here to your actual desired H1. Make it descriptive about your store and include your main keywords.
Click Save.
It seems the forum doesn’t allow HTML code—it keeps notifying me that my reply contains invalid HTML. So, I’ve included both the screenshots and the full code in my original blog post about the missing H1 tag. Feel free to check it out for all the details.
