2012-01-15 25 views
4

Theres是我建立的一個網站中的一部分,其中有一些信息分爲兩列。左邊一欄有「鑰匙」(不知道該怎麼稱呼它,對不起)和右列有值,如下所示:
image taken from site's psd標記中分隔的鍵/值對。有沒有其他方式更好的搜索引擎優化?

浮動內的div和aplying一些其他風格,我可以用這樣的事情實現這一確切的結果:

<div id="container"> 
    <div> 
    <ul> 
     <li>Size</li> 
     <li>etc...</li> 
    </ul> 
    </div> 
    <div> 
    <ul> 
     <li>10MB</li> 
     <li>etc...</li> 
    </ul> 
    </div> 
</div> 

但由於每個關鍵是完全從它的價值分開,標記似乎並沒有被搜索引擎友好的。除此之外,還有其他方式可以做到嗎,保持中心風格,讓標記更加語義化?

感謝您的幫助,
丹尼爾。

+1

不使用表表格數據的原因嗎? – mrtsherman 2012-01-15 06:37:29

+1

@ mrtsherman:由於動機是SEO相關,我會假設這就是爲什麼。是不是有一些關於表的SEO偏執狂,因爲他們需要太多的標記和沒有足夠的關鍵字? – 2012-01-15 06:50:16

+0

@Madmartigan - 我儘量不要聽SEO偏執狂。我的營銷人員會讓我花費盡可能多的時間來重新開發一個功能性網站,因爲他們在某個地方閱讀有助於搜索引擎優化。 – mrtsherman 2012-01-15 07:08:02

回答

8

你當然可以使用這些數據表,這可能是適當的。您可以使用另一種選擇是一個描述列表:

<dl> 
    <dt>Size</dt> 
    <dd>2.63 MB</dd> 
    <dt>Views</dt> 
    <dd>34,412</dd> 
    <dt>Downloads</dt> 
    <dd>2,125</dd> 
    <dt>Likes</dt> 
    <dd>1.368</dd> 
    <dt>Category</dt> 
    <dd>Test</dd> 
</dl> 

添加一些CSS ...

dt, dd { 
    font-family:sans-serif; 
} 
dt { 
    float:left; 
    clear:left; 
    text-align:right; 
    width:50%; 
    color:#bbb; 
} 
dd { 
    float:left; 
    margin-left:3em; 
    color:#999 
} 

有你有它。 http://jsfiddle.net/FuaNk/

我不能評論這是否有助於搜索引擎優化,但值是毗鄰的密鑰,這似乎符合您的要求。在<dl>

更多信息,前身爲 「定義列表」:

+0

謝謝!這似乎更有意義。 – 2012-01-15 06:52:36

相關問題