Семантическая разметка делает сайт более понятным и удобным для поисковых машин. Информация проще извлекается и представляется в результатах поиска. Стандарт семантической верстки schema.org был анонсирован в 2011 году крупными поисковыми системами. Пример, рассматриваемый в видео о семантической разметке приведен на codepen.io. Валидатор микроразметки Яндекса и Google, а также микроразметка товаров на Яндексе можно найти в соответствующих ссылках.

Семантическая разметка Schema.org

Код без микроразметки:

<div>
  <h1>Курсы по HTML5 и CSS3</h1>
  <span>HTML и CSS - база, на которой строится построение сайтов в сети</span>
  <figure>
    <img src="http://placehold.it/200x100?text=HTML5+CSS3">
    <figcaption>Курсы по HTML и CSS</figcaption>
  </figure>
  <div> 
    <span>11111</span> <span>RUB</span>
  </div>
</div>

Код с микроразметкой:

<div itemscope itemtype="http://schema.org/Product">
  <h1 itemprop="name">Курсы по HTML5 и CSS3</h1>
  <span itemprop="description">HTML и CSS - база, на которой строится построение сайтов в сети</span>
  <figure>
    <img src="http://placehold.it/200x100?text=HTML5+CSS3" itemprop="image">
    <figcaption>Курсы по HTML и CSS</figcaption>
  </figure>
  <div itemprop="offers" itemscope itemtype="http://schema.org/Offer"> 
    <span itemprop="price">11111</span> <span itemprop="priceCurrency">RUB</span>
  </div>
</div>

Код с микроразметкой напрямую с codepen.io:

See the Pen kkmbVa by Aleksei (@htmllabru) on CodePen.

Описание свойств товара на сайте Schema.org даёт представление о том, насколько подробно мы можем задать характеристики нашего товара.

• информация о бренде товара brand
• категория category
• цвет товара color
• геометрические размеры height width
• логотип товара logo
• адрес товара url