Что такое теги Open Graph? Руководство по предпросмотру ссылок и общему доступу в социальных сетях

Когда вы делитесь ссылкой на Facebook, LinkedIn, Slack или Twitter, обычно появляется карточка предпросмотра — с заголовком, описанием и изображением. Эти предпросмотры — не магия. Они контролируются тегами Open Graph (OG) в HTML вашей страницы.

Правильное использование тегов Open Graph означает, что ваши общие ссылки выглядят профессионально и получают больше кликов. Неправильное использование означает неудачные предпросмотры, отсутствующие изображения или универсальный текст по умолчанию.

Что такое протокол Open Graph?

Open Graph — это протокол, созданный Facebook в 2010 году, который позволяет веб-страницам определять, как они отображаются при общем доступе на социальных платформах. Он использует метатеги в разделе HTML <head>:

<meta property="og:title" content="Заголовок вашей страницы" />
<meta property="og:description" content="Краткое описание страницы" />
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="article" />

Когда социальная платформа обнаруживает общую URL, она загружает страницу и читает эти теги для построения карточки предпросмотра.

Основные теги Open Graph

og:title

Заголовок, отображаемый в карточке предпросмотра. Держите его под 60 символами для лучшего отображения на всех платформах.

<meta property="og:title" content="Как создать фирменные короткие ссылки" />

Советы:

Не просто дублируйте тег <title> — оптимизируйте для социального взаимодействия
Поставьте важные слова в начало
Избегайте сенсационализма (платформы могут это наказать)

og:description

Краткое описание, показанное под заголовком. Стремитесь к 120-160 символам.

<meta property="og:description" content="Создавайте пользовательские фирменные короткие ссылки с отслеживанием кликов и аналитикой. Настройка за 5 минут." />

og:image

Изображение, отображаемое в предпросмотре. Это наиболее влиятельный тег — посты с изображениями получают значительно больше взаимодействий.

<meta property="og:image" content="https://example.com/social-preview.jpg" />

Требования к изображениям по платформам:

Платформа	Рекомендуемый размер	Соотношение сторон
Facebook	1200 × 630 px	1.91:1
Twitter	1200 × 628 px	1.91:1
LinkedIn	1200 × 627 px	1.91:1
Slack	500 × 500 px мин	Любое

Используйте 1200 × 630 пикселей для охвата всех платформ.

og:url

Канонический URL для страницы. Это указывает платформам, какой URL отображать, и помогает предотвратить дублирование контента.

<meta property="og:url" content="https://example.com/page" />

og:type

Описывает тип контента. Общие значения:

website — для домашних страниц и общих страниц
article — для постов в блоге и статей
product — для страниц продуктов

Теги Twitter Card

Twitter использует свои собственные метатеги (в дополнение к Open Graph) для карточек предпросмотра:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Ваш заголовок" />
<meta name="twitter:description" content="Ваше описание" />
<meta name="twitter:image" content="https://example.com/image.jpg" />

Если теги Twitter card отсутствуют, Twitter возвращается к тегам Open Graph. Большинство сайтов устанавливают оба для максимального контроля.

Как социальные платформы загружают данные Open Graph

Когда вы делитесь URL:

1
Краулер платформы посещает URL
2
Он читает HTML <head> для поиска тегов OG
3
Он кэширует данные карточки предпросмотра
4
Последующие общие ресурсы одного и того же URL используют кэшированную версию

Важно: Изменения в тегах OG не отражаются сразу. Платформы агрессивно кэшируют, поэтому вам может потребоваться вручную очистить кэш (см. отладку ниже).

Настройка предпросмотра ссылок с помощью Linkly

Что если вы делитесь URL, который вы не контролируете — или вы хотите разные карточки предпросмотра для разных контекстов?

Функция пользовательские предпросмотры для социальных сетей Linkly позволяет переопределить данные Open Graph для любой сокращенной ссылки:

Установите пользовательский заголовок, описание и изображение
Разные предпросмотры для разных аудиторий
Нет необходимости редактировать HTML целевой страницы
Работает для любого URL, даже для страниц, которыми вы не владеете

Это особенно полезно, когда:

Делитесь сторонним контентом с вашим собственным брендингом
Тестируете различные карточки предпросмотра A/B, чтобы увидеть, какая получает больше кликов
Целевая страница имеет плохие или отсутствующие теги OG

Отладка тегов Open Graph

Отладчик Facebook

Инструмент Facebook позволяет просмотреть и обновить кэшированные данные OG:

1
Введите ваш URL
2
Нажмите Debug (Отладка)
3
Посмотрите, что Facebook читает со своей страницы
4
Нажмите Scrape Again (Загрузить снова) для очистки кэша

Валидатор Twitter Card

Валидатор Twitter показывает, как будет выглядеть ваша карточка, и выделяет любые проблемы.

Инспектор постов LinkedIn

Инструмент LinkedIn предпросматривает вашу карточку ссылки и обновляет кэшированные данные.

Общие советы

Проверьте источник: Просмотрите источник страницы и найдите og:, чтобы проверить наличие тегов
Используйте абсолютные URL: URL-адреса изображений должны быть абсолютными (начинаться с https://), а не относительными
Тестируйте после изменений: Всегда очищайте кэш платформы после обновления тегов OG
Проверьте рендеринг JavaScript: Некоторые платформы не могут выполнять JavaScript, поэтому теги OG должны быть в начальном ответе HTML

Распространенные ошибки

1
Отсутствует og:image: Посты без изображений получают в 2-3 раза меньше кликов
2
Изображение слишком маленькое: Используйте как минимум 1200 × 630 пикселей
3
Неправильное соотношение сторон: Изображения обрезаны неудачно
4
Устаревший кэш: Вы обновили теги OG, но забыли очистить кэши платформ
5
Дублирующиеся теги: Несколько тегов OG одного типа вызывают непредсказуемое поведение
6
HTTP изображения: Используйте HTTPS для URL-адресов изображений — некоторые платформы блокируют HTTP изображения
7
Относительные URL: Краулеры платформ не могут разрешить относительные пути

Open Graph для различных типов контента

Посты в блоге

<meta property="og:type" content="article" />
<meta property="article:published_time" content="2026-04-02" />
<meta property="article:author" content="Ваше имя" />

Продукты

<meta property="og:type" content="product" />
<meta property="product:price:amount" content="29.99" />
<meta property="product:price:currency" content="USD" />

Видео

<meta property="og:type" content="video.other" />
<meta property="og:video" content="https://example.com/video.mp4" />

Заключение

Теги Open Graph — это небольшое дополнение к вашему HTML, которое оказывает большое влияние на то, как ваш контент отображается в социальной сети. Правильное выполнение — с правильным заголовком, описанием и изображением — напрямую увеличивает коэффициент прохождения при общем доступе ваших ссылок.

Хотите пользовательские предпросмотры ссылок без редактирования HTML? Начните с Linkly и настройте карточку предпросмотра социальной сети для любой сокращенной ссылки — установите свой собственный заголовок, описание и изображение.