Нужно ли мне одновременно использовать метки OG и метки Twitter?

Технически нет — большинство платформ переходят на теги og:, если теги twitter: отсутствуют. Но Twitter/X не отображает большие изображения без установки twitter:card в формате summary_large_image, поэтому добавьте его все же.

Какой размер изображения я должен использовать для og:image?

Рекомендуемый размер 1200×630px. Slack требует минимальной ширины 600px для отображения изображения. При размерах менее 200×200px большинство платформ полностью пропускают изображение.

Мои метки правильные, но предварительный просмотр всё ещё не работает. Что теперь?

Платформы активно кэшируют данные OG. Используйте инструмент Facebook Debugger (developers.facebook.com/tools/debug) или LinkedIn Post Inspector, чтобы произвести новую загрузку. Для Slack добавьте параметр запроса, чтобы разрушить кэшированный URL.

Могу ли я устанавливать разные теги OG на каждой странице в одностраничном приложении?

Да, но это требует серверной рендеринг или сервиса предварительного рендеринга. Изменения на клиентской стороне JavaScript в мета-тегах не учитываются большинством индексаторов — они получают исходный HTML до выполнения JavaScript.

Реклама мешает? Идти Без рекламы Сегодня 

Теги Open Graph Остановите внешний вид ссылок на Slack

Обновлено 15 мая 2026

Вы потратили недели на создание приложения. Превью ссылки в Slack показывает «Без названия» и повреждённый иконку. Это проблема Open Graph. Вот как её исправить за 10 минут.

Теги Open Graph: Остановите плохой внешний вид ссылок в Slack 1

Реклама · УДАЛИТЬ?

Вы потратили три недели на создание приложения. Превью ссылки в Slack показывает «Untitled» и изображение вашего футера. Это проблема Open Graph и её можно исправить примерно за 10 минут.

Что такое теги Open Graph?

Open Graph (og:) — это протокол, который Facebook представил в 2010 году, и который сейчас используется всеми основными платформами для генерации превью ссылок. Когда Slack, Twitter, LinkedIn или iMessage раскрывают вашу ссылку, они загружают страницу, ищут <meta> теги с префиксом og: и используют их для создания карточки.

Отсутствие тегов → они делают предположения. Они обычно ошибаются.

Теги, которые действительно важны

Тег	Обязательно?	Что делает
`og:title`	Да	Заголовок, отображаемый в карточке превью
`og:description`	Да	Подзаголовок / краткое описание (сохраняйте под 200 символов)
`og:image`	Да	Изображение для превью. Должно быть абсолютным URL.
`og:url`	Да	Канонический URL страницы
`og:type`	Рекомендуемый	Используйте `website` для большинства страниц, `article` для постов
`twitter:card`	Рекомендуемый	Управляет размером карточки Twitter/X. Используйте `summary_large_image`.
`twitter:title`	Необязательный	В случае отсутствия — `og:title` на большинстве клиентов
`twitter:description`	Необязательный	В случае отсутствия — `og:description`
`twitter:image`	Необязательный	В случае отсутствия — `og:image`

Наиболее часто вызывающая трудности — og:image. Она должна быть абсолютным URL (без относительных путей), идеально 1200×630px, и не более 8 МБ. Slack особенно будет бездействовать с изображениями, не соответствующими его требованиям по размеру. Цель — не менее 600 пикселей в ширину, иначе изображение просто не появится.

Полный набор тегов OG

Вставьте в <head> вашей страницы. Замените временные значения:

<!-- Primary Open Graph tags -->
<meta property="og:title" content="Your Page Title Here" />
<meta property="og:description" content="A clear, specific description under 200 characters. No fluff." />
<meta property="og:image" content="https://yourdomain.com/images/og-image.png" />
<meta property="og:url" content="https://yourdomain.com/your-page" />
<meta property="og:type" content="website" />

<!-- Twitter/X card (falls back to og: tags if omitted) -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title Here" />
<meta name="twitter:description" content="A clear, specific description under 200 characters." />
<meta name="twitter:image" content="https://yourdomain.com/images/og-image.png" />

Для блога или статьи, измените og:type к article и добавьте автора и дату публикации:

<meta property="og:type" content="article" />
<meta property="article:author" content="https://yourdomain.com/about" />
<meta property="article:published_time" content="2026-04-25T00:00:00Z" />

Как проверить теги без развертывания

Самый быстрый способ: вставьте вашу ссылку в IO Tools Open Graph Checker. Он загружает страницу, парсит теги и показывает вам ровно то, что видят Slack (или любая другая платформа) — включая предварительный просмотр того, как будет выглядеть карточка. Не требуется вход, не нужно устанавливать расширение.

Если вы хотите проверить локальную ссылку или среду разработки, которая недоступна снаружи, проверщик не сможет достичь её. В таком случае, просмотрите исходный код вашей страницы и вручную проверьте, присутствуют ли теги в <head>. После развертывания запустите проверку снова, чтобы убедиться, что работающая версия соответствует.

Проверщики, специализированные на платформах (в случае необходимости принудительного обновления кэша):

Facebook/Meta: developers.facebook.com/tools/debug — также очищает кэш Facebook от тегов OG
LinkedIn: linkedin.com/post-inspector — полезно, когда ваше превью устарело после обновления
Twitter/X: cards-dev.twitter.com/validator — медленнее обновляется, но хорошо подходит для подтверждения формата карточки

Slack кэширует активно. Если вы исправили теги и старое превью продолжает отображаться, вы можете принудительно перезагрузить его, добавив строку запроса (например, ?v=2) к URL перед дележом — не идеально для производственных ссылок, но подходит для QA.

Генерация тегов

Если вы хотите генерировать полный набор мета-тегов интерактивно, а не вручную, то IO Tools HTML Meta Tag Generator покрывает теги OG, карточки Twitter и стандартные мета-теги за один раз. Скопируйте результат в ваш <head>.

Общие ошибки, которые стоит избегать

Относительные URL изображений. /images/og.png Не работает. Каждая платформа загружает теги OG с внешнего сервера, который не имеет контекста относительно вашей основной ссылки. Всегда используйте полный https:// путь.
Использование одного изображения для всех случаев. 300×300 аватар как изображение OG технически отображается — как узкая, ужасная миниатюра. Создавайте правильное изображение 1200×630 для каждой ключевой страницы.
Не установка og:url. Без этого некоторые платформы используют URL, который они загрузили, другие придумывают собственные канонические ссылки. Установите его явно.
Забывание о принудительном очищении кэша. Большинство платформ кэшируют теги OG на 24–72 часа. Если вы обновили теги на рабочей странице, используйте проверщики платформ выше, чтобы принудительно загрузить их заново.
Смешивание property и name атрибутов. Теги OG используют property=. Теги Twitter используют name=. Смешивание их вызывает то, что некоторые парсеры игнорируют тег полностью.

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