Shopify Question posted in
The Shopify help center can be found here.

Two lines with link and span in h1 tag – Shopify

I have a shopify store, in the first line of my title of the product, I have an internal link to the vendor page, in the second line there is the product title.
I read it’s valid to put two lines with <br/> in an <h1> heading (in order not to use two h1 headings), but I want to combine it with an <a> link (1st line) and a <span> (2nd line) for different styling.
Is it valid what I’m doing, also in terms of SEO? Thank you for helping!!

<h1><a class="product-vendor-hyperlink" href="/collections/{{product.vendor | handleize}}">{{ product.vendor }}</a><br/><span class="product-single__title" itemprop="name">{{ product.title }}</span></h1>
Tags:

2

Answers


  1. 0

    It is valid, but not needed. Instead you can get rid of the br entirely. Set one or both of your child nodes to display:block

    .product-vendor-hyperlink{display:block;}
    <h1><a class="product-vendor-hyperlink" href="/collections/{{product.vendor | handleize}}">{{ product.vendor }}</a><span class="product-single__title" itemprop="name">{{ product.title }}</span></h1>

    Another option is to consider the use of the <header> tag if you want to give full h1 weight to the product title but still keep the vendor link associated with being in the header. You can use this at the page level or use sections , div etc, but NOT li.

    <header>  
  <a class="product-vendor-hyperlink" href="/collections/{{product.vendor | handleize}}">{{ product.vendor }}</a>
  <h1 class="product-single__title" itemprop="name">{{ product.title }}</h1>
</header>
    Login or Signup to reply.
  2. 0

    Its valid, but its really bad in terms of SEO, use the heading hierarchy and semantic HTML5 tags instead, check the two resources below:

    Semantic tags

    Heading Hierarchy

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search