h1标记中具有链接和跨度的两条线

Question

我有一个shopify商店，在我的产品标题的第一行，我有到供应商页面的内部链接，在第二行有产品标题
我读到在<h1>标题中放两行<br/>是有效的(为了不使用两个h1标题(，但我想将其与<a>链接(第1行(和<span>(第2行(组合以获得不同的样式。这是有效的，我正在做的，也在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>

另一种选择是，如果您希望为产品标题赋予完整的h1权重，但仍保留与标题相关联的供应商链接，则可以考虑使用<header>标签。您可以在页面级别使用它，也可以使用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标签，检查下面的两个资源：

语义标签

标题层次