How to fix 'Page has identical headings'

[mcwhija]

Hi, 

I ran a Sitechecker report and it's showing that all of my pages have identical headings. 

When looking into the code, it appears that every page on my site uses identical H2 headings which include a bunch of information about countries and currencies. 

Does anyone know if there is a quick way to fix this?

Here is my website. I'm using Dawn theme. 

Thanks in advance!

[BlackCro]

The issue seems to be coming from the localisation selector nested inside the mobile navigation menu. 

The problem heading seems to be "Country/region which I don't think is visible on the store. If that is the case you could replace the H2 tag with a P tag. This would stop Google seeing it as an issue and the loss of styling from the H2 tag wouldn't be a problem given it isn't visible anyway. 

Find 

<h2 class="visually-hidden" id="HeaderCountryMobileLabelNoScriptDrawer">
Country/region
</h2>

Replace with

<p class="visually-hidden" id="HeaderCountryMobileLabelNoScriptDrawer">
Country/region
</p>

The code is likely in header.liquid although I'm not sure just looking at the inspect panel. 

Hope this helps

[mcwhija]

Hi BlackCro, thanks so much for your response. It looks like your suggestion has definitely helped, but I think there are still some additional H2 tags that need to be removed.

 

Do you mind please taking a look and letting me know if there is other code that needs to be replaced?

I appreciate your help!

[BlackCro]

Sitechecker doesn't seem to like the fact the svg is nested inside the H2. That code is for the checkmark and text when a customer adds an item to their basket and seems to be the way several Shopify themes handle it, so it isn't a problem as such. But to appease Sitechecker you could separate the svg and H2 by replacing it with the code below. 

<div class="cart-notification__heading caption-large text-body">
    <svg class="icon icon-checkmark" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 9" fill="none">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M11.35.643a.5.5 0 01.006.707l-6.77 6.886a.5.5 0 01-.719-.006L.638 4.845a.5.5 0 11.724-.69l2.872 3.011 6.41-6.517a.5.5 0 01.707-.006h-.001z" fill="currentColor"/>
    </svg>
</div>
    
<h2 class="caption-large text-body">Item added to your cart</h2>