Trouble with H1 tags

Highlighted
New Member
2 0 0

My home page shows blank h1 tags, how can i set a custom H1 to help improve SEO

Website: https://www.tweetsonamug.com/

0 Likes
Shopify Expert
230 0 28

Your <h1> is wrapping your logo in your theme.

One idea you could try is remove that (do on a test theme in case there is CSS attached), then add your own <h1>... maybe under your hero banner you could add something like this:

<h1>welcome message that includes a keyword or two</h1>
<p>Some friendly welcome text to visitors of your home page</p>

Where you put this code depends on your theme setup, but what I would do is find the section/snippet that displays your hero banner, then add this new code block under that.

? Enjoy the adventure! ?
0 Likes
New Member
2 0 0
  <header class="site-header{% if section.settings.align_logo == 'left' %} border-bottom logo--left{% else %} logo--center{% endif %}" role="banner">
    <div class="grid grid--no-gutters grid--table site-header__mobile-nav">
      {% if section.settings.align_logo == 'center' %}
        {%- assign logo_classes = 'medium-up--one-third medium-up--push-one-third logo-align--center' -%}
      {% else %}
        {%- assign logo_classes = 'medium-up--one-quarter logo-align--left' -%}
      {% endif %}

      <div class="grid__item {{ logo_classes }}">
        {% comment %}
          Use the uploaded logo from theme settings if enabled.
          Site name gets precedence with H1 tag on homepage, div on other pages.
        {% endcomment %}
        {% if template.name == 'index' %}
          <h1 class="h2 site-header__logo">
        {% else %}
          <div class="h2 site-header__logo">
        {% endif %}
          {% if section.settings.logo %}
            {%- assign img_url = section.settings.logo | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
            <a href="/" class="site-header__logo-image{% if section.settings.align_logo == 'center' %} site-header__logo-image--centered{% endif %}">
              {% capture logo_alt %}{{ section.settings.logo.alt | default: shop.name }}{% endcapture %}
              <img class="lazyload js"
                   src="{{ section.settings.logo | img_url: '300x300' }}"
                   data-src="{{ img_url }}"
                   data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                   data-aspectratio="{{ section.settings.logo.aspect_ratio }}"
                   data-sizes="auto"
                   alt="{{ logo_alt | escape }}"
                   style="max-width: {{ section.settings.logo_max_width }}px">
              <noscript>
                {% capture image_size %}{{ section.settings.logo_max_width | escape }}x{% endcapture %}
                <img src="{{ section.settings.logo | img_url: image_size }}"
                     srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x"
                     alt="{{ section.settings.logo.alt | default: shop.name }}"
                     style="max-width: {{ section.settings.logo_max_width }}px;">
              </noscript>
            </a>
          {% else %}
            <a class="site-header__logo-link" href="/">{{ shop.name }}</a>
          {% endif %}
        {% if template.name == 'index' %}
          </h1>
        {% else %}
          </div>
        {% endif %}
      </div>

Thanks for the response, I found this code in header.liquid

is "<h1 class="h2 site-header__logo">" the only thing i should remove?

I was able to add the code you suggested in hero.liquid.

0 Likes