h1 标签中带有链接和跨度的两行

Question

我有一个 shopify 商店，在我的产品标题的第一行，我有一个指向供应商页面的内部链接，在第二行有产品标题。
我读到将带有<br/>两行放在<h1>标题中是有效的（为了不使用两个 h1 标题），但我想将它与<a>链接（第一行）和<span> （第二行）用于不同的样式。 我正在做的事情是否有效，在 SEO 方面也是如此？ 感谢您的帮助！！

<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>

Answer 1

它是有效的，但不是必需的。 相反，您可以完全摆脱br 。 将一个或两个子节点设置为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>

另一种选择是考虑使用<header>标签，如果您想为产品标题赋予完整的h1权重，但仍保留与标题相关联的供应商链接。 您可以在页面级别使用它或使用sections 、 div等，但不能使用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>

Answer 2

它有效，但在 SEO 方面真的很糟糕，请改用标题层次结构和语义 HTML5 标签，检查以下两个资源：

语义标签

标题层次结构