Микроразметка Schema.org: примеры для SEO-оптимизации сайта

Schema.org - это обширный словарь схем, который позволяет веб-мастерам структурировать данные на своих веб-сайтах, делая их более понятными для поисковых систем. Это помогает улучшить видимость сайта в результатах поиска и обеспечивает более информативные и привлекательные сниппеты.

Table of contents [Show]

Хлебные крошки (BreadcrumbList)
Организация (Organization)
Статьи (Article)
Поиск (SearchAction)
Вопросы и ответы (FAQ)
Инструкции (HowTo)
Продукты (Product и AggregateOffer)
Отзывы (Review)
Услуги (Service)
Курсы (Course)
События (Event)
Рецепты (Recipe)

Хлебные крошки (BreadcrumbList)

BreadcrumbList используется для отображения цепочки навигации по сайту в результатах поиска. Это помогает пользователям понять структуру сайта и облегчает навигацию. Ниже приведен пример разметки BreadcrumbList в формате microdata:

<ul class="breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <a href="/" itemprop="item">
      <span itemprop="name">Главная</span>
    </a>
    <meta itemprop="position" content="1" />
  </li>
  <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <a href="/services/" itemprop="item">
      <span itemprop="name">Услуги</span>
    </a>
    <meta itemprop="position" content="2" />
  </li>
  <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <a href="/services/web-development/" itemprop="item">
      <span itemprop="name">Веб-разработка</span>
    </a>
    <meta itemprop="position" content="3" />
  </li>
</ul>

А это пример разметки BreadcrumbList в формате JSON-LD:

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "item": {
        "@id": "https://example.com/",
        "name": "Главная"
      }
    },
    {
      "@type": "ListItem",
      "position": 2,
      "item": {
        "@id": "https://example.com/services/",
        "name": "Услуги"
      }
    },
    {
      "@type": "ListItem",
      "position": 3,
      "item": {
        "@id": "https://example.com/services/web-development/",
        "name": "Веб-разработка"
      }
    }
  ]
}
</script>

Организация (Organization)

Разметка Organization используется для представления информации об организации или компании. Она включает в себя такие данные, как название, адрес, контактную информацию и т.д. Пример разметки Organization в формате microdata:

<div itemscope itemtype="https://schema.org/Organization">
  <span itemprop="name">Компания Example</span>
  <a itemprop="url" href="https://example.com">https://example.com</a>
  <img itemprop="logo" src="https://example.com/logo.png" alt="Логотип компании Example" />
  <div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
    <span itemprop="streetAddress">Улица Пионерская, 12</span>,
    <span itemprop="addressLocality">Москва</span>,
    <span itemprop="addressRegion">Москва</span>,
    <span itemprop="postalCode">123456</span>,
    <span itemprop="addressCountry">Россия</span>
  </div>
  <div itemprop="contactPoint" itemscope itemtype="https://schema.org/ContactPoint">
    <span itemprop="telephone">+7 (495) 123-45-67</span>
    <span itemprop="contactType">Служба поддержки</span>
  </div>
</div>

Пример разметки Organization в JSON-LD:

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Organization",
  "name": "Компания Example",
  "url": "https://example.com",
  "logo": "https://example.com/logo.png",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "Улица Пионерская, 12",
    "addressLocality": "Москва",
    "addressRegion": "Москва",
    "postalCode": "123456",
    "addressCountry": "Россия"
  },
  "contactPoint": {
    "@type": "ContactPoint",
    "telephone": "+7 (495) 123-45-67",
    "contactType": "Служба поддержки"
  }
}
</script>

Статьи (Article)

Схема Article используется для описания статей или новостей на сайте. Она включает в себя такие элементы, как заголовок, автор, дата публикации и содержание статьи. Пример разметки Article в microdata:

<div itemscope itemtype="https://schema.org/Article">
  <h1 itemprop="headline">Новости индустрии высоких технологий</h1>
  <span itemprop="author">Иван Иванов</span>
  <time itemprop="datePublished" datetime="2023-08-20">20 августа 2023</time>
  <p itemprop="articleBody">Сегодня мы поговорим о последних тенденциях в мире высоких технологий...</p>
</div>

Пример разметки Article в JSON-LD:

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Article",
  "headline": "Новости индустрии высоких технологий",
  "author": {
    "@type": "Person",
    "name": "Иван Иванов"
  },
  "datePublished": "2023-08-20",
  "articleBody": "Сегодня мы поговорим о последних тенденциях в мире высоких технологий..."
}
</script>

Поиск (SearchAction)

SearchAction используется для добавления функции поиска на ваш сайт. Это позволяет пользователям искать контент непосредственно в результатах поиска. Пример разметки SearchAction в microdata:

<div itemscope itemtype="https://schema.org/WebSite">
  <span itemprop="url">https://example.com</span>
  <div itemprop="potentialAction" itemscope itemtype="https://schema.org/SearchAction">
    <meta itemprop="target" content="https://example.com/search?q={search_term_string}" />
    <meta itemprop="query-input" content="required name=search_term_string" />
  </div>
</div>

Пример разметки SearchAction в JSON-LD:

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "WebSite",
  "url": "https://example.com",
  "potentialAction": {
    "@type": "SearchAction",
    "target": "https://example.com/search?q={search_term_string}",
    "query-input": "required name=search_term_string"
  }
}
</script>

Вопросы и ответы (FAQ)

Схема FAQ (Часто задаваемые вопросы) используется для структурирования раздела вопросов и ответов на сайте. Это улучшает видимость и удобство использования FAQ в результатах поиска. Пример разметки FAQ в microdata:

<div itemscope itemtype="https://schema.org/FAQPage">
  <div itemprop="mainEntity" itemscope itemtype="https://schema.org/Question">
    <h2 itemprop="name">Как зарегистрироваться на сайте?</h2>
    <div itemprop="acceptedAnswer" itemscope itemtype="https://schema.org/Answer">
      <div itemprop="text">
        <p>Для регистрации нажмите кнопку "Регистрация" и заполните форму...</p>
      </div>
    </div>
  </div>
  <!-- Другие вопросы и ответы здесь -->
</div>

Пример разметки FAQ в JSON-LD:

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "Как зарегистрироваться на сайте?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Для регистрации нажмите кнопку \"Регистрация\" и заполните форму..."
      }
    },
    <!-- Другие вопросы и ответы здесь -->
  ]
}
</script>

Инструкции (HowTo)

Схема HowTo используется для описания пошаговых инструкций или руководств. Она помогает пользователям найти конкретные инструкции в результатах поиска. Пример разметки HowTo в microdata:

<div itemscope itemtype="https://schema.org/HowTo">
  <h1 itemprop="name">Как приготовить идеальный стейк</h1>
  <div itemprop="step" itemscope itemtype="https://schema.org/HowToStep">
    <h2 itemprop="name">Шаг 1: Подготовка мяса</h2>
    <p itemprop="text">Выберите хороший кусок мяса и оставьте его при комнатной температуре на 30 минут...</p>
  </div>
  <div itemprop="step" itemscope itemtype="https://schema.org/HowToStep">
    <h2 itemprop="name">Шаг 2: Разогрев сковороды</h2>
    <p itemprop="text">Разогрейте сковороду на среднем огне...</p>
  </div>
  <!-- Другие шаги здесь -->
</div>

Пример разметки HowTo в JSON-LD:

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "HowTo",
  "name": "Как приготовить идеальный стейк",
  "step": [
    {
      "@type": "HowToStep",
      "name": "Шаг 1: Подготовка мяса",
      "text": "Выберите хороший кусок мяса и оставьте его при комнатной температуре на 30 минут..."
    },
    {
      "@type": "HowToStep",
      "name": "Шаг 2: Разогрев сковороды",
      "text": "Разогрейте сковороду на среднем огне..."
    },
    <!-- Другие шаги здесь -->
  ]
}
</script>

Продукты (Product и AggregateOffer)

Схемы Product и AggregateOffer используются для описания товаров и их предложений. Они позволяют отображать цены, доступность и другие важные детали в результатах поиска. Пример разметки Product и AggregateOffer в microdata:

<div itemscope itemtype="https://schema.org/Product">
  <span itemprop="name">Смартфон ExamplePhone</span>
  <img itemprop="image" src="https://example.com/phone.jpg" alt="Смартфон ExamplePhone" />
  <div itemprop="offers" itemscope itemtype="https://schema.org/AggregateOffer">
    <span itemprop="lowPrice">10000</span> - <span itemprop="highPrice">12000</span> руб.
    <span itemprop="availability" content="https://schema.org/InStock">В наличии</span>
  </div>
</div>

Пример разметки Product и AggregateOffer в JSON-LD:

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Product",
  "name": "Смартфон ExamplePhone",
  "image": "https://example.com/phone.jpg",
  "offers": {
    "@type": "AggregateOffer",
    "lowPrice": "10000",
    "highPrice": "12000",
    "priceCurrency": "RUB",
    "availability": "https://schema.org/InStock"
  }
}
</script>

Отзывы (Review)

Схема Review используется для структурирования отзывов на товары или услуги. Она позволяет отображать рейтинги и отзывы в результатах поиска. Пример разметки Review в microdata:

<div itemscope itemtype="https://schema.org/Review">
  <h2 itemprop="name">Отзыв о смартфоне ExamplePhone</h2>
  <div itemprop="reviewRating" itemscope itemtype="https://schema.org/Rating">
    <span itemprop="ratingValue">4</span> из <span itemprop="bestRating">5</span>
  </div>
  <div itemprop="author" itemscope itemtype="https://schema.org/Person">
    <span itemprop="name">Иван Петров</span>
  </div>
  <div itemprop="reviewBody">Отличный смартфон с хорошей камерой...</div>
</div>

Пример разметки Review в JSON-LD:

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Review",
  "name": "Отзыв о смартфоне ExamplePhone",
  "reviewRating": {
    "@type": "Rating",
    "ratingValue": "4",
    "bestRating": "5"
  },
  "author": {
    "@type": "Person",
    "name": "Иван Петров"
  },
  "reviewBody": "Отличный смартфон с хорошей камерой..."
}
</script>

Услуги (Service)

Схема Service используется для описания различных услуг, предоставляемых компанией. Она включает в себя информацию о типе услуги, области применения и т.д. Пример разметки Service в microdata:

<div itemscope itemtype="https://schema.org/Service">
  <h1 itemprop="name">Веб-разработка</h1>
  <p itemprop="description">Мы предлагаем профессиональные услуги по разработке веб-сайтов...</p>
  <div itemprop="serviceType">Веб-дизайн и разработка</div>
</div>

Пример разметки Service в JSON-LD:

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Service",
  "name": "Веб-разработка",
  "description": "Мы предлагаем профессиональные услуги по разработке веб-сайтов...",
  "serviceType": "Веб-дизайн и разработка"
}
</script>

Курсы (Course)

Схема Course используется для описания онлайн-курсов или образовательных программ. Она включает в себя такие данные, как название курса, описание, преподаватель и т.д. Пример разметки Course в microdata:

<div itemscope itemtype="https://schema.org/Course">
  <h1 itemprop="name">Введение в машинное обучение</h1>
  <p itemprop="description">Онлайн-курс по основам машинного обучения и искусственного интеллекта.</p>
  <div itemprop="provider" itemscope itemtype="https://schema.org/Organization">
    <span itemprop="name">Example University</span>
  </div>
  <div itemprop="instructor" itemscope itemtype="https://schema.org/Person">
    <span itemprop="name">Профессор Иванов</span>
  </div>
</div>

Пример разметки Course в JSON-LD:

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Course",
  "name": "Введение в машинное обучение",
  "description": "Онлайн-курс по основам машинного обучения и искусственного интеллекта.",
  "provider": {
    "@type": "Organization",
    "name": "Example University"
  },
  "instructor": {
    "@type": "Person",
    "name": "Профессор Иванов"
  }
}
</script>

События (Event)

Схема Event используется для описания событий, таких как концерты, фестивали или конференции. Она включает в себя такие данные, как название события, место проведения, дата и время. Пример разметки Event в microdata:

<div itemscope itemtype="https://schema.org/Event">
  <h1 itemprop="name">Летний музыкальный фестиваль</h1>
  <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">Проспект Мира, 15</span>
      <span itemprop="addressLocality">Москва</span>
    </div>
  </div>
  <time itemprop="startDate" datetime="2023-08-25">25 августа 2023</time>
  <time itemprop="endDate" datetime="2023-08-27">27 августа 2023</time>
</div>

Пример разметки Event в JSON-LD:

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Event",
  "name": "Летний музыкальный фестиваль",
  "location": {
    "@type": "Place",
    "name": "Парк культуры и отдыха",
    "address": {
      "@type": "PostalAddress",
      "streetAddress": "Проспект Мира, 15",
      "addressLocality": "Москва"
    }
  },
  "startDate": "2023-08-25",
  "endDate": "2023-08-27"
}
</script>

Рецепты (Recipe)

Схема Recipe используется для описания рецептов блюд. Она включает в себя такие данные, как название блюда, ингредиенты, инструкции по приготовлению и т.д. Пример разметки Recipe в microdata:

<div itemscope itemtype="https://schema.org/Recipe">
  <h1 itemprop="name">Пицца Маргарита</h1>
  <p itemprop="description">Классический итальянский рецепт пиццы.</p>
  <ul itemprop="recipeIngredient">
    <li>Мука</li>
    <li>Вода</li>
    <li>Дрожжи</li>
    <li>Соль</li>
    <li>Помидоры</li>
    <li>Моцарелла</li>
    <li>Базилик</li>
  </ul>
  <ol itemprop="recipeInstructions">
    <li>Смешайте муку, воду, дрожжи и соль, чтобы получить тесто.</li>
    <li>Раскатайте тесто и выложите на противень.</li>
    <li>Добавьте помидоры, моцареллу и базилик.</li>
    <li>Выпекайте в духовке при 200°C в течение 15 минут.</li>
  </ol>
</div>

Пример разметки Recipe в JSON-LD:

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Recipe",
  "name": "Пицца Маргарита",
  "description": "Классический итальянский рецепт пиццы.",
  "recipeIngredient": ["Мука", "Вода", "Дрожжи", "Соль", "Помидоры", "Моцарелла", "Базилик"],
  "recipeInstructions": [
    "Смешайте муку, воду, дрожжи и соль, чтобы получить тесто.",
    "Раскатайте тесто и выложите на противень.",
    "Добавьте помидоры, моцареллу и базилик.",
    "Выпекайте в духовке при 200°C в течение 15 минут."
  ]
}
</script>

Эти примеры демонстрируют различные способы использования Schema.org для структурирования данных на вашем сайте. Использование таких схем помогает поисковым системам лучше понимать ваш контент и улучшает видимость сайта в результатах поиска.

Полное руководство по разметке сайта с Schema.org

Хлебные крошки (BreadcrumbList)

Организация (Organization)

Статьи (Article)

Поиск (SearchAction)

Вопросы и ответы (FAQ)

Инструкции (HowTo)

Продукты (Product и AggregateOffer)

Отзывы (Review)

Услуги (Service)

Курсы (Course)

События (Event)

Рецепты (Recipe)

Иван Третьяков

Скрыть div в случае, если внутренний div пустой на jQuery

Маска для ввода номера телефона в input с использованием JS

Предлагаемые теги:

Полное руководство по разметке сайта с Schema.org

Хлебные крошки (BreadcrumbList)

Организация (Organization)

Статьи (Article)

Поиск (SearchAction)

Вопросы и ответы (FAQ)

Инструкции (HowTo)

Продукты (Product и AggregateOffer)

Отзывы (Review)

Услуги (Service)

Курсы (Course)

События (Event)

Рецепты (Recipe)

Иван Третьяков

Похожие статьи

Скрыть div в случае, если внутренний div пустой на jQuery

Маска для ввода номера телефона в input с использованием JS

Популярные

Конвертер изображений в формат WebP для платформы MODX

Открыть pdf файлы в новой вкладке из Downloads в OpenCart 3

Меняем шаблон письма админу на Opencart 3

Скрыть div в случае, если внутренний div пустой на jQuery

Плавная прокрутка страницы до якоря с использованием jQuery