Missing H1 tag on Product page

[Jakubdepor8]

Hi community,

Most of topics with missing H1 tag are about homepage. Hopefuly i do not have problem with it, but all SEO checkers say that H1 tags are missing on my product page.

Using Shopify product editor and marking text as H1 do not change nothing. Can you help me resolve this issue? Do i have to change something in product-template.liquid ?

I would like to see my H1 tag equal as a product title

I am using ELLA by HaloThemes

https://depor8.com

Regards,
Jakub

[Jakubdepor8]

So i have found a resolution, which worked in my case

If your H1 tag directs you to your logo or SEO checkers says that H1 tag is missing you can go to your header.liquid and change <h1 class> to <dev class> and </h1> to </dev>

<h1 class="header-logo col-xs-12 col-sm-4">
              SOME SECTIONS
            </h1>

and than go to your product-template.liquid and change <h2> to <h1>

<h2 itemprop="name">
              {% if settings.enable_multilang %}              
              <span class="lang1">{{ product.title | split: '|' | first }}</span>
              <span class="lang2">{{ product.title | split: '|' | last }}</span>
              {% else %}
              <span>{{ product.title | split: '|' | first }}</span>              
              {% endif %}
            </h2

I can not get responsibility if in your case something would go wrong o won't work, so always do a backup!!

[Jakubdepor8]

Ok it has showed that it is only PARTIAL success 😕

Changing <h1> to <dev> in header/logo, removed all H1 tags from MAIN PAGE.

Any ideas how to fix it? And to restore H1 tag on mane page and have H1 tag on a product page as a product title?

[Jakubdepor8]

I guess it has helped:

Manually adding the tag

If do not use a slide show on your homepage, you can manually add an <h1> tag using these steps:

    Open index.liquid by clicking here or opening the code editor.
    At the top of the file, enter <h1 class="custom-h1">Your text here</h1>
    Next, open your styles.scss.liquid and add this code to the end of the file:
    h1.custom-h1 { font-size: 10px; position: absolute; top: -9999px; left: -9999px; }

Solution found -> help.outofthesandbox.com/hc/en-us/articles/115006912187-How-do-I-set-up-and-define-the-h1-tag-on-my-homepage-


But if someone would like to check some SEO on my website, please do not hesitate...

Regards

[farasiaa]

Hello all the shopify gurus. I am having so much fun "NOT" trying to figure out how to resolve this message "16 pages without H1 Tag" . I am still a novice when it comes to HTML and JAVA can anyone help me how to resolve this issue. I dont know how to find each of these pages to add h1 tag. Basically I see the URL which is taking from the main collection to each of the categories. so If I have a main "Collection" then from there it takes it to lets say "Rings" collection where or how do I find this page to add h1 tag? I hope someone can help me and guide me to the right direction. If I try to open the URL it takes me to some CDN.shopify.com/s/files . Thank you

[Scotty62]

Hello , 

We are experiencing the same issue with a missing H1 tag . One H1 Tag reflects the title and the other shows an empty piece. 

<h1 id="title-page" class="hide">Mouthguards</h1>

<div id="mfilter-content-container" class="grid"><div class="category-info clearfix"><h1><br></h1></div><div class="product-filter clearfix">

[Scotty62]

Does anyone have an idea how we fix this empty H1 Tag as it shows up in 4 collection only? 

[prc]

i found this to be very helpful:

https://www.google.com/search?q=add+h1+tags+to+shopify&oq=add+h1+tags+to+shopify&aqs=chrome..69i57j0...

[beaux]

Hello, this is to anyone that is currently coming across this problem. For non developers this may be a lot to take on so I have a bit of a hackie solution for people that do not want to touch the code. 

1. Make a backup of your site just in case you mess up and can't resolve the issue. 
2. Go to your website in the browser. 
3. Go to a single product page.
4. Right click on what you want to change. For this example we are wanting to change the title <div> to an <h1> tag. 
5. Click Inspect (When you right click over an element and click inspect that element should be highlighted in the code you see in the elements tab.
6. Look at the elements class name and take note of it. 
7. Go to your Shopify code (look up how to do this if you are unsure)
8. Under the templates folder and under products.liquid file click anywhere in the file and then type CTRL F on your keyboard to  bring up the search bar (this will be different on mac). You should see something like: 

<div itemprop="name" class="product_name">{{ product.title }}</div>

9. Now just change the div to h1. Make sure you also correct the closing tag </div> to </h1>

Click save. 

10. You can use this concept for most things. Make sure you are only including 1 h1 tag on each page. For the product page essentially make sure if your title is the h1 that your description doesn't have an h1 tag.

That brings me to the next hackie bit...

The point of the h1 is that Google uses this information to help users find the page. So as long as your product has an h1 anywhere on the page you are good to go. Most people will want this to me their title because it typically hold the strongest keywords. In the case that you can not figure out how to change the title to h1, you can add an h1 to the body of the html in the description. If you have a lot of products it may be beneficial to do this in excel and concatenate h1 tags at the beginning and end of your sentence. You could simply copy your product title, put h1's around the title and place a copy of the title in the description.