29-07-2026, 19:28

Schema.org и Open Graph — что это и зачем?

Представь, что ты выложил в интернет свой сайт с рецептами пиццы. Ты старался, писал красиво, добавил фото. Но когда кто-то ищет в Google "рецепт пиццы", твой сайт показывается просто как ссылка. А у других - с картинкой, звёздочками рейтинга, временем приготовления и даже ценой!

Почему так?

Потому что они используют Schema.org и Open Graph. Конечно, можно воспользоваться специальным генератором Schema.org & Open Graph markup generator.

Но сначала давайте разберёмся, что это за штуки и как они работают.

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

Schema.org - это словарь (набор понятий), который помогает поисковикам (Google, Яндекс, Bing) понимать, что написано на твоём сайте.

Представь, что ты написал сочинение на иностранном языке. Человек прочитает и поймёт. А робот (поисковый алгоритм) — не всегда. Ему нужны подсказки:

Это рецепт?

Это отзыв?

Это персона (автор)?

Это событие (концерт)?

Schema.org даёт такой язык-подсказку. Ты ставишь специальные теги, и робот говорит: "Ага, это рецепт! Вот ингредиенты, вот время готовки, вот рейтинг!"

Пример (в виде кода)

Без Schema.org:

<div>
<h1>Пицца Маргарита</h1>
<p>Время: 30 минут</p>
<p>Рейтинг: 4.5</p>
</div>

С Schema.org (используем JSON-LD — самый удобный способ):

Теперь Google точно знает, что это рецепт, и может показать его в поиске с красивым блоком:

Что такое Open Graph?

Open Graph (OG) - это про социальные сети (ВКонтакте, Одноклассники, Дзен, Telegram).

Когда ты кидаешь ссылку в чат или пост, соцсеть обычно показывает превью: картинку, заголовок, описание. Это и есть Open Graph.

Без OG соцсеть сама пытается угадать, что показать. И часто ошибается — берёт какой-то случайный текст, ломает вёрстку или вообще не показывает картинку.

С OG ты сам решаешь, что увидят люди, когда поделятся твоей ссылкой.

Пример (в коде HTML, внутри тега <head>):

Теперь, когда кто-то кинет твою ссылку в ВКлнтакте, увидит:

?? Картинка пиццы
Пицца Маргарита — лучший рецепт
Простой и вкусный рецепт домашней пиццы за 30 минут

Красиво и понятно!

Для чего это нужно (понятным языком)

Привлекать внимание — красивая карточка в соцсетях = больше кликов.

Улучшать поиск - Google показывает больше информации, и люди охотнее переходят на сайт.

Помогать роботам - они лучше понимают твой контент и могут его правильно показать.

Повышать доверие - когда есть рейтинг, цена, автор — сайт выглядит солиднее.

Как начать использовать (план для школьника)

Определи тип контента - это статья, рецепт, товар, событие, отзыв?

Зайди на schema.org и найди свой тип (например, Recipe).

Посмотри, какие свойства нужны (name, description, image, и т.д.).

Добавь JSON-LD-скрипт в <head> или перед закрывающим </body>.

Для Open Graph добавь мета-теги с префиксом og:.

Совет от профи

Делай и то, и другое! Это как два крыла: одно для поиска, другое для соцсетей. Вместе они принесут тебе больше посетителей, лайков и внимания.

А если хочешь изучить глубже - начни с малого: добавь на свой школьный проект Open Graph, чтобы ссылкой было приятно делиться в чате класса. Это просто, быстро и сразу даёт видимый результат!

Теперь ты знаешь то, что многие веб-мастера узнают только на работе. Удачи в изучении информатики!

Уважаемые читатели!

Все материалы с сайта можно скачивать абсолютно бесплатно. Все материалы проверены антивирусом и не содержат скрытых скриптов.

Материалы в архиве не помечены водяными знаками!

Если материал нарушает чьи-то авторские права, просьба написать нам по обратной связи, указав авторство материала. Мы обязуемся либо убрать материал, либо указать прямую ссылку на автора.

Сайт пополняется материалами на основе бесплатной работы авторов. Eсли вы хотите отблагодарить их за работу и поддержать наш проект, вы можете перевести любую, не обременительную для вас сумму на счет сайта.
Заранее Вам спасибо!!!

К списку новостей