9.1 Что такое микроразметка?
Микроразметка (structured data) — это способ добавления метаданных к HTML-документам с целью улучшения интерпретации содержимого веб-страницы поисковыми системами и другими сервисами. Микроразметка используется для описания различных сущностей и их взаимосвязей на веб-странице, что помогает улучшить видимость страницы в результатах поиска и предоставляет дополнительные функции, такие как богатые сниппеты.
Микроразметка — это структурированные данные, которые добавляются в HTML-код страницы. Она предоставляет поисковым системам дополнительные сведения о содержимом страницы, такие как тип контента, автор, дата публикации, рейтинг и другие данные.
Основные типы микроразметки:
- Schema.org: наиболее широко используемый стандарт микроразметки, поддерживаемый основными поисковыми системами (Google, Bing, Yahoo, Yandex)
- JSON-LD: формат кодирования микроразметки в виде JSON, рекомендуемый Google
- Microdata: формат микроразметки, встроенный непосредственно в HTML-код
9.2 Schema.org
Schema.org — это словарь типов данных и их свойств, разработанный для структурирования данных на веб-страницах. Он поддерживает множество типов данных, таких как статьи, события, организации, продукты и т. д.
Примеры использования Schema.org
Статья (Article):
<article>
<h1>Заголовок статьи</h1>
<p>Автор: Имя автора</p>
<p>Дата публикации: 1 января 2024 г.</p>
<img src="https://example.com/image.jpg" alt="Пример изображения">
<p>Текст статьи...</p>
</article>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Заголовок статьи",
"author": {
"@type": "Person",
"name": "Имя автора"
},
"datePublished": "2024-01-01",
"image": "https://example.com/image.jpg",
"publisher": {
"@type": "Organization",
"name": "Издательство",
"logo": {
"@type": "ImageObject",
"url": "https://example.com/logo.png"
}
}
}
</script>
Продукт (Product):
<body>
<h1>Название продукта</h1>
<img src="https://example.com/product.jpg" alt="Изображение продукта">
<p>Описание продукта</p>
<p>Цена: $29.99</p>
</body>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Product",
"name": "Название продукта",
"image": "https://example.com/product.jpg",
"description": "Описание продукта",
"sku": "0446310786",
"offers": {
"@type": "Offer",
"priceCurrency": "USD",
"price": "29.99",
"itemCondition": "https://schema.org/NewCondition",
"availability": "https://schema.org/InStock",
"url": "https://example.com/product"
}
}
</script>
Преимущества использования Schema.org:
- Улучшение видимости: поисковые системы могут отображать дополнительные данные в результатах поиска (богатые сниппеты).
- Улучшение интерпретации: поисковые системы лучше понимают контент, что может улучшить ранжирование страницы.
- Поддержка стандартов: Schema.org поддерживается всеми основными поисковыми системами.
9.3 JSON-LD
JSON-LD (JavaScript Object Notation for Linked Data) — это метод кодирования микроразметки в формате JSON, который вставляется в тег <script> на странице. Google рекомендует использовать JSON-LD для структурированных данных.
Пример использования JSON-LD
Организация (Organization):
<body>
<h1>Название компании</h1>
<p>Описание компании</p>
<div>Контакты</div>
</body>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "Название компании",
"url": "https://example.com",
"logo": "https://example.com/logo.png",
"contactPoint": {
"@type": "ContactPoint",
"telephone": "+1-800-555-1212",
"contactType": "Customer Service"
}
}
</script>
9.4 Microdata
Microdata — это встроенный в HTML формат микроразметки. Атрибуты microdata добавляются непосредственно к HTML-элементам, чтобы связать их с типами и свойствами из словаря Schema.org.
Пример использования Microdata
Событие (Event):
<body itemscope itemtype="https://schema.org/Event">
<h1 itemprop="name">Название события</h1>
<p itemprop="startDate" content="2024-05-01T19:00">1 мая 2024 года, 19:00</p>
<div itemprop="location" itemscope itemtype="https://schema.org/Place">
<span itemprop="name">Место проведения</span>
<div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
<span itemprop="streetAddress">Улица, дом</span>
<span itemprop="addressLocality">Город</span>
<span itemprop="postalCode">Почтовый индекс</span>
<span itemprop="addressCountry">Страна</span>
</div>
</div>
</body>
Преимущества использования микроразметки:
- Богатые сниппеты: поисковые системы могут отображать расширенные сниппеты в результатах поиска, что повышает кликабельность.
- Улучшенное понимание контента: поисковые системы лучше понимают контент, что может улучшить ранжирование страницы.
- Поддержка голосового поиска: структурированные данные могут улучшить результаты голосового поиска.
- Интеграция с другими сервисами: микроразметка позволяет интегрировать контент с различными сервисами, такими как Google Knowledge Graph и другими.
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ