og:title Заголовок карточки
Основной заголовок, который внешняя платформа может показать для ссылки.
Required core
Competent Tools · Social Meta
Open Graph Generator онлайн — создать OG-теги для сайта
Создайте Open Graph-разметку для страницы сайта: og:title, og:description, og:url, og:image, og:type и og:site_name. Инструмент сформирует готовый HTML-код и покажет условный предпросмотр карточки ссылки для социальных платформ.
Open Graph Meta Tags
Создать Open Graph-разметку
код формируется в браузере
Готовый HTML-код
Заполните Title и URL
Предпросмотр карточки ссылки условное отображение
OG IMAGE
example.com
Open Graph Title
Open Graph Description
i
Это ориентировочный предпросмотр. Facebook, Telegram, LinkedIn и другие платформы могут отображать карточку по-разному, кешировать старую версию и применять собственные правила к изображениям и тексту.
Social Metadata
Что такое Open Graph
Open Graph — набор meta-свойств, которые описывают страницу для внешних платформ. Они позволяют передать заголовок, описание, URL, изображение и тип содержимого при публикации ссылки.
01 Страница сайта
→ 02 Open Graph meta
→ 03 Карточка ссылки
OG Image
Как подготовить изображение для Open Graph
У разных платформ свои требования и правила кадрирования. Поэтому лучше использовать отдельное изображение для превью, а не случайную фотографию со страницы.
1.91 : 1
SOCIAL PREVIEW
пример широкого формата
Публичный URL
Изображение должно быть доступно внешнему боту платформы.
Понятный сюжет
Основной объект не стоит размещать слишком близко к краям.
Читаемый текст
Если на баннере есть текст, он должен сохранять читаемость после уменьшения карточки.
Отдельный OG Image
Для важных страниц удобно создавать собственную социальную обложку.
SEO vs Social
Open Graph и SEO-мета-теги — не одно и то же
Title и Meta Description ориентированы прежде всего на документ и поисковую выдачу, а Open Graph — на представление ссылки во внешних платформах.
Title + Meta Description
Используются в контексте страницы, браузера и поисковых систем.
<title>...</title>
Open Graph
Используется внешними платформами для описания ссылки и её карточки.
<meta property="og:title" ...>
HTML Example
Пример Open Graph-разметки
Код размещается внутри HTML-элемента head страницы или добавляется через настройки CMS.
HEAD Open Graph
<meta property="og:title"
content="SEO-инструменты онлайн | Competent">
<meta property="og:description"
content="Бесплатные инструменты для SEO и маркетинга.">
<meta property="og:url"
content="https://competent.kz/tools/seo/">
<meta property="og:type"
content="website">
<meta property="og:image"
content="https://example.com/og-image.jpg">
<meta property="og:site_name"
content="Competent Agency">
Common mistakes
Частые ошибки в Open Graph
Даже при наличии OG-тегов карточка может отображаться неправильно, если URL изображения недоступен или платформа использует старые данные из кеша.
OG Image недоступен
Внешняя платформа должна иметь возможность получить изображение по указанному URL.
Относительный URL картинки
Для внешней разметки безопаснее использовать полный абсолютный URL.
Слишком длинный текст
Платформа может обрезать заголовок или описание карточки.
Старое превью
Социальная платформа может кешировать OG-данные после первого получения страницы.
Неверный og:url
URL должен соответствовать странице, которую представляет карточка.
Нет отдельной обложки
Автоматически выбранная картинка со страницы может плохо смотреться в превью.
Важно
Open Graph задаёт данные, но платформа решает, как их показать
Размер карточки, кадрирование изображения, длина отображаемого текста и кеширование зависят от конкретной внешней платформы. Генератор формирует мета-разметку, но не может гарантировать одинаковое отображение во всех приложениях и социальных сетях.
FAQ
Вопросы про Open Graph
Основные вопросы об OG-тегах и карточках ссылок.
Что такое Open Graph?
Open Graph — набор meta-свойств, которые описывают заголовок, описание, URL, изображение и тип страницы для внешних платформ.
Для чего нужен og:title?
og:title задаёт заголовок объекта, который внешняя платформа может использовать при формировании карточки опубликованной ссылки.
Для чего нужен og:description?
og:description передаёт краткое описание страницы для карточки ссылки.
Что указывать в og:url?
В og:url обычно указывается основной абсолютный URL страницы, которую представляет карточка.
Что такое og:image?
og:image содержит URL изображения, которое внешняя платформа может использовать при создании карточки ссылки.
Должны ли OG Title и SEO Title совпадать?
Нет. Они могут совпадать, но Open Graph Title можно адаптировать отдельно под представление ссылки во внешних платформах.
Почему после изменения Open Graph показывается старая картинка?
Внешняя платформа может кешировать ранее полученные данные страницы, поэтому обновлённая карточка не всегда появляется сразу.
Open Graph Generator бесплатный?
Да. Open Graph Generator Competent можно использовать бесплатно без регистрации.
Competent Agency
Карточка ссылки готова — усилим саму страницу.
Оптимизируем Title и Description, структуру сайта, Schema.org, индексацию, внутреннюю перелинковку, технические параметры и контент под поисковый спрос.
SEO-продвижение ↗
Бесплатная консультация
WhatsApp