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 標簽，檢查以下兩個資源：

語義標簽

標題層次結構