Основы структурированных данных 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 — локальная установка не требуется.
Все уроки этого курса
- OpenGraph og:title og:description og:image
- Мета-теги карточки Twitter
- Основы структурированных данных JSON-LD
- Hreflang для международных страниц