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

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

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

Кому пригодится

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-полей, поэтому в готовом блоке дублируются.

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

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

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

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

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

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

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