Микроразметка: атрибуты itemprop, itemscope, itemtype (schema.org)

Зачем нужна микроразметка? 🌐

Микроразметка — это способ «рассказать» поисковым системам, что именно означают элементы на вашей странице. Без неё ваш контент — просто текст. С ней — структурированные данные, которые повышают кликабельность в выдаче!

Пример: разница между обычным текстом и богатыми сниппетами (рейтинги, цены, события) — именно микроразметка.

Основные атрибуты: разбираем по косточкам 🦴

1. itemscope — границы объекта

Добавляется к HTML-элементу (например, <div>), чтобы сказать: «Вот внутри этого блока — описание конкретного объекта (товар, статья, человек и т.д.)».

<div itemscope>
  <!-- Здесь лежит что-то важное для поисковиков -->
</div>

2. itemtype — тип объекта

Указывает схему (vocabulary) из schema.org. Например: - http://schema.org/Product — товар, - http://schema.org/Person — персона, - http://schema.org/Article — статья.

<div itemscope itemtype="http://schema.org/Product">
  <!-- Теперь поисковик знает: здесь описан товар -->
</div>

3. itemprop — свойства объекта

Определяет, какие данные содержит элемент. Например, для товара: - name — название, - price — цена, - rating — рейтинг.

<div itemscope itemtype="http://schema.org/Product">
  <h1 itemprop="name">Крутая кофемашина</h1>
  <span itemprop="price">29900 руб.</span>
</div>

Практический пример: разметка статьи 📝

Допустим, у вас блог. Вот как отметить статью:

<article itemscope itemtype="http://schema.org/Article">
  <h2 itemprop="headline">Как выучить Python за 10 минут</h2>
  <p itemprop="description">Секретные техники от Данилы Бежина.</p>
  <div itemprop="author" itemscope itemtype="http://schema.org/Person">
    <span itemprop="name">Данила Бежин</span>
  </div>
  <time itemprop="datePublished" datetime="2023-10-01">1 октября 2023</time>
</article>

Что даёт такая разметка?
В поиске статья может отображаться с автором, датой и описанием — это увеличивает CTR!

Важные нюансы ⚠️

1. Проверяйте разметку → Используйте Google’s Rich Results Test.
2. Не дублируйте данные → Если цена уже в itemprop="price", не нужно повторять её в meta.
3. Вложенность → Объекты могут быть внутри объектов (как author внутри Article в примере выше).

Где брать схемы? 📚

Полный список типов и свойств — на schema.org. Самые популярные: - LocalBusiness — для компаний, - Event — для мероприятий, - Recipe — для рецептов.

Итог: зачем это вам? 🎯

• Лучшее отображение в поиске (сниппеты с звездочками, датами, ценами).
• Повышение доверия пользователей.
• Возможность попасть в «карусели» и другие особые блоки выдачи.