Генератор Open Graph и Twitter Card мета-тегов онлайн

Ссылка улетела в канал, а подписчики видят голый адрес: ни картинки, ни заголовка. Кликают такие ссылки редко. Причина обычно одна. На странице нет тегов Open Graph и Twitter Card, и соцсеть просто не знает, что показывать в превью.

Генератор Open Graph и Twitter Card выше собирает этот блок целиком: заполняете поля, ниже появляется готовая разметка, копируете её и вставляете к себе на страницу.

Кому пригодится генератор Open Graph

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

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

Что писать в полях

• og:title. Заголовок для ленты. С заголовком страницы совпадать не обязан, в карточке лучше читается короткий.
• og:description. Описание примерно до 200 знаков. Что не влезет, соцсеть обрежет.
• og:url. Полный адрес страницы, вместе с https.
• og:type. Выбираете из трёх значений: website, article или product.
• og:image. Абсолютный адрес картинки. Оптимальный размер 1200×630: такое изображение корректно показывают ВКонтакте, Telegram, Facebook и X.
• twitter:card. Значение summary_large_image даёт широкую карточку, summary мелкую.
• og:site_name и twitter:site. Эти поля необязательные. Оставите пустыми, в блок они не попадут.

Заголовок и описание для X отдельно вписывать не нужно: они подтягиваются из og-полей и дублируются в готовом блоке. Строка twitter:image появится только тогда, когда заполнен og:image.

Вот как выглядит собранный блок, если подставить свои значения:

• <meta property="og:title" content="Внедрение CRM под ключ">
• <meta property="og:description" content="Настроим воронки, перенесём данные, обучим отдел продаж.">
• <meta property="og:url" content="https://example.ru/crm/vnedrenie">
• <meta property="og:image" content="https://example.ru/share/crm.jpg">
• <meta property="og:type" content="website">
• <meta name="twitter:card" content="summary_large_image">

Что делать с результатом

Скопируйте вывод и вставьте его в секцию head страницы. Дальше проверьте вживую: отправьте ссылку себе в Telegram или в личные сообщения ВКонтакте и посмотрите, что собралось.

Место для блока у каждой CMS своё. В Битриксе теги дописывают в шаблоне сайта, в файле header.php, до закрытия head. В WordPress этим обычно занимается SEO-плагин: у Yoast и Rank Math есть вкладка для соцсетей, и руками в шаблон лезть не нужно. На Tilda поля для картинки, заголовка и описания лежат в настройках страницы, отдельного места для кода там искать не надо.

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

Превью не обновилось

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

У Telegram для сброса есть служебный бот @WebpageBot: отправьте ему ссылку, и карточка пересоберётся. ВКонтакте чистит кеш через инструмент для разработчиков. У X публичного отладчика давно нет, там остаётся ждать. Универсальный обходной путь работает везде: добавьте к адресу любой безобидный параметр, например вопросительный знак и v=2, и соцсеть сочтёт ссылку новой.

Про картинку

Берите JPEG или PNG. WebP и AVIF понимают не все площадки, и в половине чатов на месте картинки будет пусто. Вес держите примерно до мегабайта: тяжёлый файл площадка иногда просто не успевает забрать.

Пропорции 1200×630 рассчитаны на широкую карточку. Если в twitter:card стоит summary, картинку обрежут до квадрата по центру, поэтому важное к краям не прижимайте. Логотип и текст на картинке делайте крупными: в ленте телефона она размером со спичечный коробок.

На что обратить внимание

Пять основных тегов выводятся всегда, даже когда поле пустое. Пустой content ничего не даст соцсети, так что заполняйте все пять.

Картинка по относительному пути в превью не подтянется. Нужен полный адрес, от https до имени файла.

И загляните в исходный код страницы, прежде чем вставлять. Если CMS или SEO-модуль уже отдаёт og-теги, второй комплект лучше не плодить: какой из них возьмёт соцсеть, предсказать нельзя. Поправьте тот, что есть.

И последнее. На позиции в поиске эти теги не влияют. Они отвечают только за то, как ссылка выглядит в ленте и в чате, зато на кликабельность это влияет заметно.