Пары ключ / значение разделены в разметке. Есть ли другой способ улучшить SEO?

Question

На сайте, который я создаю, есть раздел, в котором некоторая информация разделена на две колонки.В левом столбце есть «ключи» (не знаю, как еще его вызвать, извините), а в правом столбце есть значения, как показано ниже:

Плавающие внутренние div иПрименив некоторые другие стили, я могу добиться этого точного результата, используя что-то вроде этого:

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

Но поскольку каждый ключ полностью отделен от его значения, разметка, похоже, совсем не подходит для поисковых систем.Есть ли другой способ сделать это, поддерживая центрированный стиль и сделать разметку более семантической?

Спасибо за помощь,
Даниэль.

Answer 1

Вы, конечно, можете использовать таблицы для этих данных, это, вероятно, будет уместно. Другой вариант, который вы можете использовать, это список описания:

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

Я не могу комментировать, помогает ли это SEO, но значения находятся рядом с ключами, что, кажется, соответствует вашим требованиям.

Дополнительная информация о <dl>, ранее известном как «список определений»:

• http://html5doctor.com/the-dl-element/
• http://dev.w3.org/html5/markup/dl.html