Генератор мета-тегов Open Graph
Создайте мета-теги Open Graph для превью ссылок в Facebook, LinkedIn, WhatsApp, Slack и Discord: заголовок, описание, изображение с размером и alt, тип, URL, локаль.
Абсолютный URL; 1200×630 px подходит для большинства соцсетей.
en_US, vi_VN, fr_FR…
<meta property="og:type" content="article"> <meta property="og:title" content="My Awesome Article"> <meta property="og:description" content="A short summary shown when the link is shared."> <meta property="og:url" content="https://example.com/article"> <meta property="og:site_name" content="Example"> <meta property="og:locale" content="en_US"> <meta property="og:image" content="https://example.com/og-image.png"> <meta property="og:image:secure_url" content="https://example.com/og-image.png"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="630"> <meta property="og:image:alt" content="Article cover">
Что такое Генератор Open Graph?
Инструмент генерирует мета-теги Open Graph <meta property="og:…">, управляющие видом ссылки при публикации в Facebook, LinkedIn, WhatsApp, Slack, Discord, Telegram и многих других приложениях. Охватывает og:type, заголовок, описание, URL, название сайта, локаль и изображение с защищённым URL, шириной, высотой и alt-текстом, а также предупреждает об отсутствии обязательных свойств.
Как пользоваться Генератор Open Graph
- Заполните og:title, og:type, og:url и og:image (четыре обязательных свойства).
- Добавьте описание, название сайта, локаль, размер изображения и alt-текст.
- Исправьте предупреждения об отсутствующих свойствах.
- Скопируйте теги в <head> страницы.
Когда использовать Генератор Open Graph
Используйте всякий раз, когда страницей будут делиться, а вы хотите управлять превью, а не позволять каждому приложению угадывать. Сети кэшируют превью; после изменения тегов используйте отладчик платформы (например, Facebook Sharing Debugger), чтобы обновить кэш. Для X (Twitter) см. также генератор Twitter Card.
Как работает Генератор Open Graph
Каждое непустое поле становится одним тегом <meta property="og:…" content="…"> с HTML-экранированным содержимым в порядке, рекомендованном протоколом Open Graph. Если URL изображения использует https, добавляется тег og:image:secure_url с тем же URL; ширина, высота и alt изображения пишутся только при заданном изображении.
Распространенные Случаи Использования
- Задать записям блога большое превью-изображение в LinkedIn и Facebook.
- Установить og:locale для локализованной страницы.
- Добавить og:image:alt для доступности.
- Сделать так, чтобы страницы товаров показывали название и фото товара в WhatsApp.
Часто Задаваемые Вопросы
Какой размер изображения подходит лучше всего?
1200×630 px (1,91:1) хорошо отображается большинством платформ. Держите важное по центру, так как некоторые приложения обрезают до квадрата.
Какие теги og обязательны?
Протокол требует og:title, og:type, og:image и og:url. Описание и название сайта необязательны, но рекомендуются.
Почему Facebook всё ещё показывает старое изображение?
Превью кэшируются. Повторно обойдите URL в Sharing Debugger или измените URL изображения.