HTML5語義 - 產品列表中的h1用法

我們正在討論在產品列表頁面中使用h1標籤。有幾個方面可以用來過濾產品。HTML5語義 - 產品列表中的h1用法

技術上明智的做法是使用多個h1標籤，如果這些標籤被封裝在section或article中即可。但是我們正在討論如果在製表人中使用h1也是有用的，我們只有標題，包裝和價格。在我們看來，選擇h1並不是一個好主意，而（SEO明智的）有意義的內容不見了。

以下是1款產品的標記。沒有選擇方面，我們列出了100多種產品（延遲加載）。

<div class="productItem--vView productItem" data-webid="productLister-item"> 
    <article> 
    <a class="wrap" href="/products/category"> 
     <header> 
     <h1><span>product x</span></h1> 
     <div class="meta"> 
      <div class="spec price price--new"> 
      <div class="value"> 
       <span class="currency">&#8364;</span> 10<span class="decimal">.00</span> 
       <span class="type">new</span> 
      </div> 
      </div> 
     </div> 
     </header> 
     <figure> 
     <div class="image"> 
      <div class="graphic"> 
      <img src='https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=230&h=300'/>         
      </div> 
     </div> 
     </figure> 
    </a> 
    </article> 
</div>

在這裏使用h1是否正確，以及這裏最好的選擇是什麼。 h2？

來源

2016-03-01 tortuga

我會使用H2產品標題，保留h1的類別和促銷件。（排名爲關鍵字搜索的產品）可能？到目前爲止，我只是隨便看看SEO的東西。 – Hughzi

請閱讀此：https://www.paciellogroup.com/blog/2013/10/html5-document-outline/ – Alohci

如果要使用切片內容元素（如article），最好提供標題元素。如果你想遵循advice in W3C’s HTML5，你應該使用適當級別的標題元素（可能是support user-agents that don’t support the outline algorithm），而不是一直使用h1（但也允許h1，並且語義上相同）。

但是，在您的情況下，您可能不需要切分內容元素，因爲您只有標題/鏈接，圖像和價格。在文檔大綱中創建超過100個條目似乎不適合這種「小」內容。您可以使用ul並將每個產品放入li，或者可以對每個產品使用figure。

來源

2016-03-03 10:13:21 unor

HTML5語義 - 產品列表中的h1用法

回答

相關問題