0Pricing
HTML Academy · Урок

Основы структурированных данных JSON-LD

Добавляйте структурированные данные, понятные машинам, с помощью JSON-LD

«Основы структурированных данных JSON-LD» — бесплатный урок HTML Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.

Что такое структурированные данные

Структурированные данные — это машиночитаемый JSON, описывающий содержание страницы: статью, рецепт, товар или событие. Поисковые системы используют их для отображения расширенных результатов (рейтингов со звёздами, карточек рецептов, навигационных цепочек) вместо обычных синих ссылок.

JSON-LD — рекомендуемый формат

Предпочтительный формат Google — JSON-LD: один блок <script type="application/ld+json"> в head или body, содержащий один или несколько объектов schema.org. Он отделён от видимого HTML, поэтому для его добавления или обновления не требуется переписывать шаблон.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Learn HTML",
  "author": { "@type": "Person", "name": "Ada Lovelace" },
  "datePublished": "2024-05-01"
}
</script>

@context и @type

Каждому объекту JSON-LD нужны @context (почти всегда "https://schema.org") и @type (класс schema.org: Article, Recipe, Product, FAQPage). @context сообщает анализаторам, из какого словаря взяты имена свойств.

Распространённые свойства Article

Для Article укажите headline, image (URL или массив), datePublished, dateModified, author (объект Person или Organization) и publisher (Organization с логотипом). Это минимальный набор полей, необходимый для того, чтобы Google рассмотрел страницу для карусели главных новостей.

Схема Product

Страницы товаров объявляют @type Product с полями name, image, description, brand, sku и вложенным объектом offers, содержащим price, priceCurrency и availability. В сочетании с aggregateRating эти данные позволяют Google отображать рейтинги со звёздами и фрагменты с ценой прямо в результатах поиска.

{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Coddy Plus",
  "offers": { "@type": "Offer", "price": "29.00", "priceCurrency": "USD" }
}

Схема Breadcrumb

BreadcrumbList описывает иерархию навигации. Каждый itemListElement — это ListItem с полями position, name и item (URL). Если эти данные присутствуют, Google заменяет строку с URL в фрагменте размеченной навигационной цепочкой, что помогает получить больше переходов.

FAQ и HowTo

Ранее схемы FAQPage и HowTo открывали доступ к блокам расширенных результатов в SERP. Позже Google ограничил расширенные результаты FAQ несколькими категориями сайтов (gov, edu), однако эта разметка по-прежнему полезна для голосовых помощников и других потребителей данных — используйте её на настоящих страницах FAQ.

Соответствие видимой странице

Google наказывает за разметку, которая не соответствует тому, что видят пользователи. Не указывайте рейтинг 5 звёзд, которого нет на странице; не показывайте цену $9.99, которую пользователь не видит. Структурированные данные должны точно описывать отображаемое содержимое.

Проверка с помощью теста расширенных результатов

Тест расширенных результатов Google (search.google.com/test/rich-results) анализирует любой URL или вставленный код, перечисляет обнаруженные типы схем и предупреждает об отсутствующих обязательных свойствах. Запускайте его перед развертыванием любых изменений в структурированных данных.

Несколько схем на одной странице

На одной странице можно объявить несколько блоков JSON-LD (например, Article + BreadcrumbList + Organization) или объединить их в одном массиве @graph. Обе формы допустимы; выберите ту, которую проще использовать в шаблонах вашего конвейера сборки.

Обновление без повторной отрисовки

JSON-LD находится в отдельном от видимого содержимого теге script. Чтобы обновить его, заново сформируйте блок JSON — никогда не внедряйте структурированные данные только с помощью JavaScript на стороне клиента, поскольку Googlebot не всегда надёжно выполняет JS до индексации.

Проверка знаний

Какие два свойства верхнего уровня должен содержать каждый объект JSON-LD, чтобы структурированные данные были действительными?

Итоги

JSON-LD объявляет структурированные данные в одном блоке скрипта application/ld+json, где @context и @type определяют каждый объект. Распространённые схемы (Article, Product, BreadcrumbList) открывают доступ к расширенным результатам поиска, если разметка точно соответствует видимой странице. Проверьте её с помощью теста расширенных результатов до развертывания.

Часто задаваемые вопросы

Урок «Основы структурированных данных JSON-LD» бесплатный?

Да — полный текст урока «Основы структурированных данных JSON-LD» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.

Чему я научусь в уроке «Основы структурированных данных JSON-LD»?

Добавляйте структурированные данные, понятные машинам, с помощью JSON-LD Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать HTML Academy?

Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Основы структурированных данных JSON-LD»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке HTML Academy?

Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. OpenGraph og:title og:description og:image
  2. Мета-теги карточки Twitter
  3. Основы структурированных данных JSON-LD
  4. Hreflang для международных страниц
← Назад к HTML Academy