33. Schema.org Structured Data

Иллюстрация к уроку Schema.org structured data – это способ рассказать поисковым системам о контенте вашей страницы, чтобы они могли лучше его понять и отображать более полезную информацию в результатах поиска. Это помогает улучшить SEO и привлекать больше трафика.

Что такое Schema.org?

Schema.org – это совместная инициатива крупнейших поисковых систем (Google, Bing, Yahoo!, Yandex) для создания стандартного набора схем (словарей) для структурирования данных в Интернете. Эти схемы позволяют вам добавлять семантическую разметку к вашему HTML, описывая, что представляют собой различные элементы на вашей странице.

Представьте, что у вас есть страница с рецептом пирога. Вместо того, чтобы просто отображать текст рецепта, вы можете использовать Schema.org, чтобы указать, что это рецепт (Recipe), указать его название (name), автора (author), ингредиенты (ingredients) и инструкции (recipeInstructions).

Как это работает?

Вы добавляете атрибуты itemscope, itemtype и itemprop к вашим HTML-элементам.

itemscope говорит, что элемент и его потомки содержат информацию об определенном элементе (например, о рецепте).
itemtype указывает тип элемента, используя URL из Schema.org (например, https://schema.org/Recipe).
itemprop указывает свойство элемента (например, name, author).

Вот пример:

<div itemscope itemtype="https://schema.org/Recipe">
  <h1 itemprop="name">Шоколадный пирог</h1>
  <p>Автор: <span itemprop="author">Иван Петров</span></p>
  <img itemprop="image" src="shokoladny-pirog.jpg" alt="Шоколадный пирог">
  <h2>Ингредиенты:</h2>
  <ul>
    <li itemprop="ingredients">200г муки</li>
    <li itemprop="ingredients">150г сахара</li>
    <li itemprop="ingredients">100г какао</li>
  </ul>
  <h2>Инструкции:</h2>
  <ol itemprop="recipeInstructions">
    <li>Смешайте муку, сахар и какао.</li>
    <li>Добавьте яйца и молоко.</li>
    <li>Выпекайте в духовке 30 минут.</li>
  </ol>
</div>

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

Практические примеры кода

Вот еще несколько примеров использования Schema.org для разных типов контента:

Информация о продукте:

<div itemscope itemtype="https://schema.org/Product">
  <span itemprop="name">Книга "HTML для начинающих"</span>
  <img itemprop="image" src="html-book.jpg" alt="Книга HTML">
  <p itemprop="description">Отличное руководство для начинающих изучать HTML.</p>
  <div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
    <span itemprop="price">299</span>
    <meta itemprop="priceCurrency" content="RUB">
    <link itemprop="availability" href="https://schema.org/InStock">В наличии
  </div>
</div>

Информация о мероприятии:

<div itemscope itemtype="https://schema.org/Event">
  <span itemprop="name">Концерт рок-группы "Звезды"</span>
  <span itemprop="startDate" content="2024-03-15T20:00">15 марта 2024, 20:00</span>
  <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">ул. Ленина, 10</span>
      <span itemprop="addressLocality">Москва</span>
    </div>
  </div>
</div>

Жизненный пример

Многие крупные веб-сайты используют Schema.org для улучшения своего SEO. Например, сайты электронной коммерции используют его для отображения информации о продуктах (цена, наличие) непосредственно в результатах поиска. Сайты с рецептами используют его для отображения рецептов с рейтингами, временем приготовления и ингредиентами. Новостные сайты используют его для отображения информации о новостях. Все крупные поисковые системы активно используют эти данные.

Фреймворки и CMS (например, WordPress с плагинами) часто предоставляют инструменты для упрощения добавления Schema.org разметки.

Ключевые моменты

Schema.org помогает поисковым системам лучше понимать контент вашей страницы.
Используйте itemscope, itemtype и itemprop для добавления структурированных данных.
Выберите подходящий тип схемы из Schema.org (например, Recipe, Product, Event).
Проверьте свою разметку с помощью инструментов проверки структурированных данных от Google.
Structured data может значительно улучшить SEO и привлечь больше трафика.