Атрибут itemref тега <aside>
Описание
Атрибут itemref позволяет связывать свойства микроразметки, находящиеся за пределами элемента с itemscope, с этим элементом. Используется в сочетании с микроразметкой для случаев, когда структура HTML не позволяет разместить все свойства внутри одного элемента.
Пример использования:
<!-- Основной элемент с микроразметкой -->
<aside itemscope itemtype="https://schema.org/Book" itemref="book-author book-publisher">
<h3 itemprop="name">Современный JavaScript для нетерпеливых</h3>
<p itemprop="description">Книга о современных возможностях JavaScript</p>
</aside>
<!-- Связанные свойства вне основного элемента -->
<div id="book-author" itemprop="author" itemscope itemtype="https://schema.org/Person">
<span itemprop="name">Кей Хорстманн</span>
</div>
<div id="book-publisher" itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
<span itemprop="name">Питер</span>
</div>
Особенности работы:
| Характеристика | Описание |
|---|---|
| Синтаксис | Список ID элементов через пробел |
| Обязательные атрибуты | Требует наличия itemscope |
| Механизм работы | Связывает свойства по ID элементов |
| SEO значение | Позволяет сохранять семантику при сложной верстке |
Правильное применение:
<!-- Основной элемент -->
<aside itemscope itemtype="https://schema.org/LocalBusiness"
itemref="business-address business-contact">
<h3 itemprop="name">Кафе "Уют"</h3>
<p itemprop="description">Лучшие десерты в городе</p>
</aside>
<!-- Связанные элементы -->
<div id="business-address" itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
<span itemprop="streetAddress">ул. Центральная, 15</span>,
<span itemprop="addressLocality">Москва</span>
</div>
<div id="business-contact">
<p itemprop="telephone">+7 (495) 123-45-67</p>
<p itemprop="openingHours" content="Mo-Fr 09:00-22:00">Пн-Пт: 9:00 - 22:00</p>
</div>
Ограничения:
- Поддерживается не всеми парсерами микроразметки
- Может усложнить чтение и поддержку кода
- Требует уникальных ID на странице
Рекомендации:
- Используйте только когда невозможно разместить все свойства внутри элемента
- Избегайте сложных цепочек связей
- Проверяйте результат в валидаторе schema.org
- Для новых проектов предпочтителен JSON-LD
Альтернатива на JSON-LD:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Book",
"name": "Современный JavaScript для нетерпеливых",
"description": "Книга о современных возможностях JavaScript",
"author": {
"@type": "Person",
"name": "Кей Хорстманн"
},
"publisher": {
"@type": "Organization",
"name": "Питер"
}
}
</script>
Примечание: Хотя itemref является частью спецификации микроданных HTML5, для сложных структур данных рекомендуется использовать JSON-LD, который лучше поддерживается поисковыми системами и более удобен для чтения.