How do I make my logo not an H1 tag?

[Smeelah]

Thank you! Elizabeth_Morg1

I'm on Minimal

[yellowleggo]

Hi Elizabeth
Are you able to share the solution please? Thanks

[Jason]

For those looking to do this I'd first be asking why you need to do it. Remember that it's ok to have multiple H1 tags on a page as long as it done in the right way.

[yellowleggo]

Hi Jason

Its for SEO purposes, my mentor has recommended that on each page should only have one H1 tag, it gives more of a clear indication for google to learn and rank.

Thanks  

[farasiaa]

Hello guys I am running into same situation. if I do a SEO analysis. Its saying I am missing <h1 tags but when I view the source code I see the following

<h1 class="site-header__logo" itemscope itemtype="http://schema.org/Organization">

<h1 class="product-single__title " itemprop="name"> twice this code

Any recommendation how to fix this issue so that it actually recognize my h1 tag? 

Thanks in advance.

[yellowleggo]

Hi
I think it might be different for different themes.

Try changing the h1 tag to div in section > header.liquid

<header class="site-header header--no-bg {{ position }} header--{{ logo_position }}_{{ links_position }} header--{{ section.settings.nav_layout }} {% if section.settings.show_announcement %}has-announcement-bar{% endif %} {% if section.settings.show_announcement_on_mobile %}has-announcement-bar--mobile{% endif %} template-{{ template }} {% unless logo or logo_other or show_shop_name %}header--no-logo{% endunless %}" data-section-type="header" data-layout="{{ section.settings.nav_layout }}" id="header">

<div class="container">

<div class="row">

{%- if logo or logo_other or show_shop_name -%}

<div class="nav-item main-logo {% unless logo or logo_other %}main-logo--text-only{% endunless %}" itemscope itemtype="http://schema.org/Organization">

{%- if logo or logo_other -%}

<a href="/" class="main-logo__image visible-nav-link" data-width="{{ section.settings.logo_max_width }}">

{%- if template == 'index' or template == 'collection' -%}

{% comment %} Show home logo first if home page {% endcomment %}

{%- if logo -%}

<img src="{{ logo | img_url: '500x' }}" class="logo logo-home lazyload" data-aspectratio="{{ logo.aspect_ratio }}" alt="{{ logo.alt | escape }}">

{%- if logo_other -%}

<img src="{{ logo_other | img_url: '500x' }}" class="logo logo-other lazyload" data-aspectratio="{{ logo_other.aspect_ratio }}" alt="{{ logo_other.alt | escape }}">

{%- endif -%}

{%- elsif logo_other -%}

<img src="{{ logo_other | img_url: '500x' }}" class="logo lazyload" data-aspectratio="{{ logo_other.aspect_ratio }}" alt="{{ logo_other.alt | escape }}">

{%- endif -%}

{%- else -%}

{% comment %} Show other logo first if other than home page {% endcomment %}

{%- if logo_other -%}

<img src="{{ logo_other | img_url: '500x' }}" class="logo lazyload" data-aspectratio="{{ logo_other.aspect_ratio }}" alt="{{ logo_other.alt | escape }}">

{%- elsif logo -%}

<img src="{{ logo | img_url: '500x' }}" class="logo lazyload" data-aspectratio="{{ logo.aspect_ratio }}" alt="{{ logo.alt | escape }}">

{%- endif -%}

{%- endif -%}

</a>

{%- endif -%}

{%- if show_shop_name -%}

<a id="shopName" class="main-logo__text" href="/" itemprop="url">{{ shop_name }}</a>

{%- endif -%}

          </div>

Please see the code thats been changed in green

[farasiaa]

Thank you for taking the time. I am going to apply the code and will let you know if it works. I appreciate you.

[farasiaa]

Just to make sure I am understanding correctly below is the original code that I see in my header.liquid file (thanks for telling me where to look) :

so are you suggesting to replace with your suggested code between the two highlighted with Color?  

<h1 class="site-header__logo" itemscope itemtype="http://schema.org/Organization">

              {% else %}

                <div class="site-header__logo" itemscope itemtype="http://schema.org/Organization">

              {% endif %}

                <a href="{{ routes.root_url }}" itemprop="url" class="site-header__logo-link">

                {% if section.settings.inverted_logo and template.name == 'index' or template.name == 'collection' or template.name == 'article' %}

                          <img class="logo inverted-logo" src="{{ section.settings.inverted_logo | img_url: image_size }}"

                            srcset="{{ section.settings.inverted_logo | img_url: image_size }} 1x, {{ section.settings.inverted_logo | img_url: image_size, scale: 2 }} 2x"

                            alt="{{ section.settings.inverted_logo.alt | default: shop.name }}"

                            itemprop="logo">

                        {% else %}

                      <span class="inverted-logo">{{ shop.name }}</span> 

{% endif %}

{% if section.settings.default_logo %}

                        <img class="logo default-logo" src="{{ section.settings.default_logo | img_url: image_size }}"

                        srcset="{{ section.settings.default_logo | img_url: image_size }} 1x, {{ section.settings.default_logo | img_url: image_size, scale: 2 }} 2x"

                        alt="{{ section.settings.default_logo.alt | default: shop.name }}"

                    itemprop="logo">

                      <img class="logo mobile-logo" src="{{ section.settings.default_logo | img_url: image_size_mobile }}"

                        srcset="{{ section.settings.default_logo | img_url: image_size_mobile }} 1x, {{ section.settings.default_logo | img_url: image_size_mobile, scale: 2 }} 2x"

                        alt="{{ section.settings.default_logo.alt | default: shop.name }}"

                    itemprop="logo">

                      {% else %}

                <span class="default-logo">{{ shop.name }}</span>

                            <span class="mobile-logo">{{ shop.name }}</span>

{% endif %}

                </a>

{% if template.name == 'index' %}

                </h1>

Once again thank you so much for taking time to help me 

[michellesr21]

thank you!

[CrisatGlam]

Hi @Elizabeth_Morg1  I experience this now. Would you mind sharing how did you solve it? I am working on the SEO aspect and my audit says the store has two H1 Tag. I found at the back end that the other H1 is used by the store Logo too... 

I appreciate your reply

Thanks