Open Graph: что это и что проверить в превью ссылки на сайт

Коротко: Open Graph - набор метатегов, которыми страница сообщает сервисам название, тип, картинку и адрес. Протокол ogp.me называет обязательными четыре метатега: og:title, og:type, og:image и og:url. Метатег og:description по ogp.me необязателен. Единого размера картинки в источниках нет: у LinkedIn минимум 1200 x 627 пикселей, у Одноклассников минимум для веба 128x128. Появление превью в конкретном сервисе источники не обещают, поэтому ссылку проверяют при приёмке сайта.

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

Страницы открыты 06.10.2026, их названия и номера собраны в списке «Источники» в конце. Английские цитаты даны с переводом на русский, перевод наш. Русская справка LinkedIn - перевод самого сервиса. VK, MAX, WhatsApp и X в статье не разбираются. Код дан одним коротким примером, примеры вымышленные: мастерская керамики с сайтом example.ru.

Что такое Open Graph и превью ссылки?

Коротко: Open Graph - протокол метатегов. Справка Яндекса пишет, что стандарт позволяет контролировать превью, которое формируется при публикации ссылки на сайт в социальных сетях. Превью - то, что сервис показывает рядом со ссылкой.

Сайт протокола ogp.me начинается с определения:

«The Open Graph protocol enables any web page to become a rich object in a social graph.» Перевод: «Протокол Open Graph позволяет любой веб-странице стать насыщенным объектом в социальном графе.»

• The Open Graph protocol, ogp.me

Справка Яндекса объясняет назначение через превью:

«Он позволяет контролировать превью, которое формируется при публикации ссылки на сайт в социальных сетях, и передавать информацию другим интернет-сервисам.»

• Open Graph | Вебмастер, справка Яндекса

Слово «превью» в этой статье означает то, что названо в справке Яндекса: результат, который формируется при публикации ссылки. MDN описывает результат на примере собственных метатегов. После их добавления ссылка на MDN Web Docs в социальной сети Facebook* появляется вместе с изображением и описанием. В оригинале: «the link appears along with an image and description», то есть «ссылка появляется вместе с изображением и описанием».

О происхождении стандарта справка Яндекса и MDN пишут одно: он создан в Facebook*. У MDN: «a metadata protocol that Facebook invented to provide richer metadata for websites», то есть «протокол метаданных, который придумал Facebook*, чтобы дать сайтам более богатые метаданные».

Сноска справки Яндекса к названию Facebook*: «Сервис, запрещенный на территории РФ.»

Вид превью зависит от метатегов на странице и от правил сервиса, который показывает ссылку, а требования к картинке у сервисов разные.

Что такое метатег и как выглядит разметка Open Graph в коде страницы?

Коротко: метатег - строка в служебной части HTML-страницы, которую посетитель на странице не видит. Open Graph - несколько таких строк с атрибутом property, имена которых начинаются с og:.

Страница HTML состоит из видимой части и служебной. Служебная часть называется head. MDN описывает её так: «The head of an HTML document is the part that is not displayed in the web browser when the page is loaded», то есть «head документа HTML - часть, которая не отображается в браузере при загрузке страницы». Метатег - элемент meta внутри head. MDN называет метаданные словами «data that describes data», то есть «данные, которые описывают данные». Другой метатег, viewport, разобран в статье Адаптивный сайт: что это и как проверить адаптив до приёмки.

Справка Яндекса пишет, что метатеги Open Graph добавляют «в HTML-код (в элемент head)». Так выглядит короткий пример для вымышленной мастерской керамики:

<head>
  <meta property="og:title" content="Мастерская керамики: кружки и тарелки" />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://example.ru/" />
  <meta property="og:image" content="https://example.ru/images/preview.jpg" />
  <meta property="og:description" content="Кружки и тарелки ручной работы." />
</head>

ogp.me пишет, что метатеги Open Graph ставят в head страницы. Значения в content - тексты и адрес картинки, которые кто-то должен подготовить. Справка Яндекса добавляет: «В стандарте Open Graph одна страница описывает только один объект - человека, компанию или продукт». Значит, у каждой страницы сайта, которая нужна в превью, свои значения. Нужен ли атрибут prefix у тега html, решает разработчик: он есть в примере ogp.me и в примерах справки Яндекса для музыки и видео, а в примере основных метатегов той же справки и в примере MDN его нет.

Слово «канонический» относится к og:url. ogp.me пишет: «The canonical URL of your object that will be used as its permanent ID in the graph», то есть «канонический адрес объекта, который будет использоваться как его постоянный идентификатор в графе».

Какие метатеги Open Graph обязательные, а какие необязательные?

Коротко: ogp.me и справка Яндекса называют обязательными четыре метатега: og:title, og:type, og:image и og:url. Метатег og:description по ogp.me входит в необязательные, как «generally recommended» (в целом рекомендуемые). Справка LinkedIn называет свой набор из четырёх метатегов, и он отличается от набора ogp.me. «Обязательные» здесь означает требование протокола Open Graph.

ogp.me: «The four required properties for every page are», то есть «четыре обязательных свойства для каждой страницы»: og:title, og:type, og:image, og:url. О типе объекта ogp.me добавляет: «Depending on the type you specify, other properties may also be required», то есть «в зависимости от указанного типа могут потребоваться и другие свойства». Справка Яндекса пишет, что для передачи информации сервисам нужно добавить «следующие обязательные метатеги», и называет те же четыре.

Слово «обязательные» взято из ogp.me («required») и справки Яндекса. Это требование протокола Open Graph, и ни ogp.me, ни справка Яндекса не ссылаются на закон.

О типе страницы ogp.me пишет: «Any non-marked up webpage should be treated as og:type website», то есть «любая страница без разметки должна рассматриваться как тип website». Справка Яндекса говорит то же: «Любая неразмеченная страница определяется как объект website». На обеих страницах есть пример со значением website. Другие значения og:type, например article или profile, названы в справке Яндекса в списке типов.

Справка LinkedIn называет свой набор: «Ниже перечислены теги «og:», которые должны присутствовать» - og:title, og:image, og:description и og:url. В этом наборе есть og:description, который по ogp.me необязателен, и нет og:type, который по ogp.me обязателен. Перечень тегов в справке сервиса и перечень обязательных свойств ogp.me не совпадают, хотя та же справка просит, чтобы код сайта соответствовал протоколу Open Graph. Это ещё один довод проверять результат в нужном сервисе.

Что о разметке и картинке пишут сами сервисы?

Коротко: у каждого сервиса своя документация. Одноклассники, LinkedIn и Google называют метатеги Open Graph на своих страницах. Telegram в записи блога пишет о том, что превью строится после вставки ссылки и его можно убрать. Яндекс связывает Open Graph с поиском по видео и называет его в валидаторе - инструменте Вебмастера, который проверяет разметку на странице.

Каждый сервис описан только по его собственным страницам. Номера в таблице - номера в списке «Источники», где даны названия страниц из их title и даты; дата обращения везде 06.10.2026.

Одноклассники. Слово «граббер» взято из документации. Определения в ней нет. По контексту так названа программа Одноклассников, которая обрабатывает ресурс, когда им делятся. О тегах документация пишет, что Open Graph «позволяет внутри тега <head></head> страницы указать теги og:title, og:description, og:image и og:video, которые подскажут грабберу, какой контент на странице требуется использовать». Что документация считает недоверенным доменом, страница не поясняет.

LinkedIn. Справка советует владельцу сайта: «Если вы не являетесь разработчиком вашего веб-сайта, советуем вам обратиться к разработчику с просьбой ознакомиться с приведенными ниже рекомендациями».

Telegram. В записи блога сказано: «Once you paste a URL to the message input field, Telegram will start analyzing the link and getting a preview for it. If you prefer to send a particular message without the preview, just tap the x to remove it.» Перевод: «Как только вы вставите ссылку в поле ввода сообщения, Telegram начнёт анализировать ссылку и получать для неё превью. Если вы хотите отправить конкретное сообщение без превью, нажмите на x, чтобы убрать его.» Там же: «Rich link previews are now shown for most websites», то есть «расширенные превью ссылок теперь показываются для большинства сайтов». Запись датирована 8 апреля 2015 года.

Руководство Instant View описывает шаблоны Instant View. В нём сказано: «Whenever Telegram needs to display a link preview for a URL, it also checks whether an Instant View template exists for that domain». Перевод: «Всякий раз, когда Telegram нужно показать превью ссылки, он также проверяет, есть ли для этого домена шаблон Instant View». Прямого перечня метатегов, из которых строится превью страницы сайта, в этих двух страницах нет.

Google. Страница о названиях сайтов: «Наша система также учитывает элементы og:site_name и <title>, заголовки и другой текст, размещенный на главной странице». Страница о рекомендациях Google: «Используйте разметку schema.org или тег og:image meta, чтобы указать большое изображение, которое имеет отношение к странице и отражает ее содержание». Эта страница относится к разделу рекомендаций Google. О превью в мессенджерах обе страницы не говорят.

Яндекс. Справка пишет: «В Яндексе Open Graph используется для передачи данных в поиск Яндекса по видео». В разделе «Пример использования» той же справки сказано: «Чтобы добавить информацию для формирования сниппетов, в HTML-коде страниц внутри элемента head укажите заголовок страницы и название сайта в свойствах og:title и og:site_name». Как это связано со сниппетами обычных страниц в поиске, раздел не поясняет. Валидатор поддерживает Open Graph: справка пишет, что он «поможет убедиться, что метаданные на ваших страницах распознаются корректно».

Ни одна из этих страниц не обещает заявок или появления превью во всех сервисах. Документация Одноклассников пишет, что новых посетителей на сайт привлечёт кнопка «Класс». Страница Google о рекомендациях пишет, что посетителей из рекомендаций лучше привлекают интересные изображения, желательно большие и с высоким разрешением, которые соответствуют теме.

Какого размера нужна картинка для превью?

Коротко: единого размера нет. ogp.me размеры не задаёт. У сервисов цифры разные: у LinkedIn минимум 1200 x 627 пикселей, у Одноклассников минимум для веба 128x128, у рекомендаций Google ширина не менее 1200 пикселей. Подрядчику нужно знать, для каких сервисов готовят картинку.

Числа в таблице не складываются в один размер. У LinkedIn рекомендуемое соотношение сторон 1,91:1, у рекомендаций Google 16:9, у Одноклассников названо только минимальное соотношение 0.5. Размер картинки зависит от списка сервисов, которые нужны вам, и от требований каждого из них. Формат файла картинки разобран в статье Формат изображений для сайта: какой выбрать и что передать подрядчику.

Что ещё источники говорят об изображении для превью?

Коротко: ogp.me просит описание изображения og:image:alt. Google в рекомендациях советует не брать логотип и картинку с большим количеством текста и не использовать кликбейт в изображениях для предварительного просмотра. LinkedIn предупреждает, что файл может не отобразиться, если он лежит в защищённой директории. Эти советы относятся к разным сервисам.

• Описание изображения. ogp.me: «If the page specifies an og:image it should specify og:image:alt», то есть «если страница указывает og:image, ей следует указать og:image:alt». Свойство описывает, что на изображении: «A description of what is in the image (not a caption)», то есть «описание того, что изображено (не подпись)».
• Логотип и текст на картинке. Страница Google о рекомендациях: «Не используйте в разметке schema.org или теге og:image meta изображения общего характера, например логотип сайта». И ещё: «Для оптимальных результатов избегайте изображений с большим количеством текста в разметке schema.org или теге og:image meta». Совет сказан о рекомендациях Google.
• Правдивость превью. Там же: «Не используйте кликбейт и другие способы, призванные искусственно привлечь внимание, например недостоверные или гиперболизированные заголовки, описания и изображения для предварительного просмотра».
• Доступность файла. Справка LinkedIn: если изображение соответствует требованиям, но не отображается, «возможно, ваш веб-сайт блокирует получение нами изображения либо оно расположено в защищенной директории или части веб-сайта».
• Медиа в Одноклассниках. Документация: «При расшаривании какого-либо ресурса на Одноклассниках могут наблюдаться проблемы с обработкой медиа-контента».

Чем Open Graph отличается от title, description и микроразметки?

Коротко: у каждого из них своё описание в справке Яндекса. Open Graph - превью ссылки в сервисах, title и description - заголовок и описание страницы в поиске, Schema.org - словарь разметки для поисковых систем.

На странице справки об Open Graph, в блоке вопросов в поддержку, сказано: «Чтобы задать желаемое описание страницы в результатах поиска, используйте метатег description». Google в рекомендациях принимает og:image наряду с schema.org, а при определении названия сайта учитывает og:site_name наряду с title.

Как писать title и description и как устроены Schema.org и JSON-LD, разобрано на BLKHT: Как правильно написать title и description для сайта и Микроразметка сайта: что это, что она даёт и как проверить.

Что готовит заказчик и что делает разработчик?

Коротко: тексты и картинку для превью заказчик готовит вместе с содержанием страниц, метатеги ставит разработчик. Распределение ролей - вывод автора статьи: в источниках ролей нет, кроме совета LinkedIn обратиться к разработчику.

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

Как проверить превью при приёмке сайта?

Коротко: ссылку проверяют в тех сервисах, где её будут отправлять, и дополнительно прогоняют страницу через валидатор Яндекс Вебмастера. Справка валидатора называет распознавание метаданных и не описывает вид ссылки в мессенджерах.

1. Составьте список сервисов, где ссылки на сайт будут отправлять: мессенджеры и соцсети, которые нужны вам и вашим клиентам.
2. Для главной и ключевых страниц отправьте ссылку себе в каждый такой сервис и посмотрите на картинку, заголовок и описание. Это совет автора статьи, в источниках такого способа нет. В Telegram превью строится после вставки ссылки в поле ввода сообщения (запись блога от 8 апреля 2015 года), то есть его видно до отправки. О других сервисах смотрите их собственные справки.
3. Проверьте страницу в валидаторе Яндекс Вебмастера. Справка «Валидатор микроразметки | Вебмастер» пишет: «Чтобы проверить код страницы, введите ее адрес в поле URL документа, или вставьте код ниже. Затем нажмите кнопку Проверить». Результат: «Под заголовком Результаты проверки валидатор выведет данные, которые удалось распознать, или текст ошибки». Справка называет только распознавание метаданных, показа превью в мессенджерах она не описывает.
4. Откройте адрес картинки из og:image в браузере, где вы не вошли в личный кабинет. Если файл не открывается, вспомните совет LinkedIn о защищённых директориях. Это совет автора статьи, основанный на предупреждении LinkedIn.
5. Сверьте картинку с цифрами из таблицы о размерах для тех сервисов, которые вы выбрали.

Источники не описывают, как быстро сервисы обновляют превью после правки метатегов.

Какие вопросы задать подрядчику про Open Graph?

Коротко: семь вопросов подрядчику: для каких страниц будут свои тексты и картинки, какая картинка и в каком размере и формате, для каких сервисов подрядчик проверит превью, какой адрес указан в og:url, указан ли og:image:alt, открывается ли картинка без входа, где в договоре записана приёмка превью. Их можно задать до начала работы и повторить при приёмке.

1. Для каких страниц сайта будут свои og:title, og:description и og:image, и кто пишет тексты? Справка Яндекса: одна страница описывает один объект.
2. Какая картинка будет у главной и у остальных страниц, в каком размере и в каком формате, у кого лежит исходный файл? Размеры - в таблице раздела о картинке для превью, формат - в статье о формате изображений.
3. Для каких сервисов подрядчик проверит превью и как покажет результат при приёмке? У сервисов разные требования.
4. Какой адрес указан в og:url у каждой страницы? ogp.me: это канонический адрес, постоянный идентификатор объекта. Связь этого вопроса с переносом адресов при переделке сайта - вывод автора статьи. О перенаправлении старых адресов на новые - в статье Редирект 301: что это и когда он нужен при переделке сайта.
5. Указан ли og:image:alt и кто пишет это описание? ogp.me: если страница указывает og:image, ей следует указать и og:image:alt.
6. Открывается ли картинка без входа в закрытые разделы сайта? LinkedIn предупреждает о защищённой директории.
7. Где в договоре записано, что превью ссылки входит в работу и как его принимают? Как описать результат работы и порядок приёмки, разобрано в статье Договор на разработку сайта: что говорит ГК и что проверить до подписи.

Вопросы составлены для любого исполнителя. На главной странице BITSPARK шаг процесса «Структура» описан так: «Собираем архитектуру: сценарии, страницы, контент и логику взаимодействия.» Шаг «Разработка»: «Верстаем, программируем и подключаем сервисы. Технологии выбираем под задачу.» Шаг «Запуск»: «Проверяем desktop и mobile, скорость, формы и ключевые сценарии - затем запускаем.»

Источники

Страницы открыты 06.10.2026.

1. The Open Graph protocol - определение, четыре обязательных свойства, необязательные свойства, og:image:alt, тип website; страница на английском, даты изменения на ней нет.
2. Open Graph | Вебмастер - определение, обязательные и дополнительные метатеги, сноска к названию сервиса, поиск по видео, раздел «Пример использования».
3. Валидатор микроразметки | Вебмастер - поддерживаемые виды разметки, порядок проверки адреса.
4. Как правильно написать title | Вебмастер - назначение title.
5. Как правильно составить description | Вебмастер - назначение метатега description.
6. Введение в schema.org | Вебмастер - назначение словаря Schema.org.
7. Что внутри "head"? Метаданные в HTML - Изучение веб-разработки | MDN - русская страница, изменена 14.12.2025; английский оригинал - источник 8.
8. What's in the head? Web page metadata - Learn web development | MDN - английский оригинал, изменён 11.09.2026: head, метатег, пример Open Graph.
9. Кнопка «Класс» / «Поделиться» - документация Одноклассников: граббер, Open Graph, ограничения на картинки.
10. Как разрешить размещение контента со своего сайта в LinkedIn | Справочный центр LinkedIn - теги и требования к изображению; на странице «Последнее обновление: 2 года назад».
11. Link Previews - запись блога Telegram от 8 апреля 2015 года.
12. Instant View Manual - руководство Telegram Instant View.
13. Названия сайтов в Google Поиске | Центр Google Поиска | Documentation | Google for Developers - обновлена 20.02.2026.
14. Что попадает в рекомендации | Центр Google Поиска | Documentation | Google for Developers - обновлена 12.03.2026.
15. BITSPARK - Digital studio - шаги процесса «Структура», «Разработка» и «Запуск».

Обсудить проект в Telegram: t.me/billioniks