IZN Tools

Генератор Open Graph

Собрать og: и twitter: теги и сразу увидеть, как выглядит карточка.

ПРЕВЬЮ
1200 × 630
ExampleSmall tools that do one thing, fast100 free tools for developers and marketers. Everything runs in your browser.
<meta property="og:title" content="Small tools that do one thing, fast" />
<meta property="og:description" content="100 free tools for developers and marketers. Everything runs in your browser." />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:image" content="https://example.com/og.png" />
<meta property="og:site_name" content="Example" />
<meta property="og:type" content="website" />
<meta property="og:locale" content="en_US" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Small tools that do one thing, fast" />
<meta name="twitter:description" content="100 free tools for developers and marketers. Everything runs in your browser." />
<meta name="twitter:image" content="https://example.com/og.png" />
Всё в порядке
Посчитано на вашем устройстве
Похожие
Генератор Schema-разметкиГенератор robots.txtКонструктор UTM-метокГенератор meta titleСкороГенератор meta descriptionСкороАнализ мета-тегов страницыСкоро

Что делают эти теги

Open Graph превращает голый адрес в карточку с заголовком, описанием и картинкой. Без него ссылка в Slack, WhatsApp, LinkedIn или в групповом чате — это просто синяя строка, по которой никто не кликает. Это одна из самых результативных частей разметки страницы, и на самой странице она невидима — именно поэтому она незаметно устаревает.

Ограничения, которые стоит соблюдать

| Тег | Практический предел | Что происходит дальше | | --- | --- | --- | | og:title | ~60 символов | Обрезается посреди слова | | og:description | ~155 символов | Обрезается многоточием | | og:image | 1200 × 630 | Меньше 600px по ширине — маленький макет |

Это не из спецификации: так фактически ведут себя площадки, и поведение меняется. Счётчики выше предупреждают заранее, а не с точностью до символа.

Правило абсолютного адреса

og:image, og:url и все прочие теги со ссылками требуют полного абсолютного адреса. Относительные пути игнорируются без всякого сообщения об ошибке, и результат выглядит ровно так же, как отсутствие тега. Если после выкладки карточка вдруг стала текстовой, проверьте, не потерял ли путь к картинке своё происхождение.

Кеш — это и есть рабочий процесс

Каждая площадка читает страницу один раз и жёстко кеширует. Порядок, который экономит время:

  1. Опубликовать теги.
  2. Прогнать адрес через отладчик площадки, чтобы принудительно перечитать.
  3. Только после этого делиться ссылкой.

Поделиться сначала и чинить потом — значит, что неверная карточка уже осела в кеше там, где это важно, а некоторые площадки не обновят её ещё несколько дней.

Вопросы

Почему в превью ссылки не та картинка?+

Почти всегда дело в кеше. Facebook, LinkedIn и Slack хранят собственную копию результата обхода и продолжают отдавать устаревшую карточку ещё долго после исправления тега. У каждой площадки есть отладчик, который принудительно перечитывает страницу, — пользуйтесь им, а не считайте, что тег неверен: обычно он верен.

Принимает ли og:image относительный путь?+

Нет. Нужен абсолютный адрес со схемой и хостом. Относительный путь молча игнорируется — поэтому карточка выглядит как голая текстовая ссылка, хотя файл существует и на самой странице открывается нормально.

Какого размера должна быть картинка?+

1200 × 630 подходит всем крупным площадкам при соотношении 1,91:1. Если ширина меньше 600 пикселей, несколько сетей отказываются от большой карточки и переключаются на маленький квадратный макет. Не размещайте важное у краёв — обрезают все по-разному.

Нужны ли и og:, и twitter:-теги?+

X подхватывает Open Graph, когда собственных тегов нет, поэтому блок twitter: строго говоря необязателен — кроме twitter:card, который выбирает макет. Дублировать заголовок и описание не вредно и позволяет написать для одной сети другой заголовок, если захочется.