Копируй и вставляй С предпросмотром Советы по кэшу и размерам

Генератор OGP тегов (Авто-генерация og:title/og:image и др.)

Q: "Нужно ли добавлять теги Twitter?"

"Желательно. Хотя X может использовать OG-теги как запасной вариант, явное указание twitter:card дает больше контроля."

Q: "Размер картинки?"

"Универсальный вариант — 1200×630. Это подходит и для Facebook, и для большинства мессенджеров (Telegram, WhatsApp)."

Q: "Превью не меняется"

"Это почти всегда проблема кэша на стороне соцсети. Используйте инструменты из списка выше для сброса кэша."

Введите URL, заголовок, описание и ссылку на картинку. Получите готовые мета-теги Open Graph и Twitter Card.

Загрузка данных происходит прямо в браузере (зависит от CORS).

Ввод данных

Сгенерированные мета-теги / Предпросмотр

1) Основная информация

Обязательно

Заголовок (og:title) Обязательно

Совет: 30–60 символов 0

Описание (og:description) Опционально

Совет: 80–120 символов 0

URL картинки (og:image) Обязательно

Миниатюра появится автоматически после загрузки фото.

Текущие пропорции -

Название сайта (og:site_name) Опционально

Тип (og:type) Обязательно

Выберите тип контента.

2) Twitter Card (X)

Свернуть / Включено по умолчанию

Включить теги Twitter Card

twitter:card

twitter:site (аккаунт сайта)

twitter:creator (автор)

Правила синхронизации

• Если заголовок Twitter пуст, берется og:title.
• Если описание Twitter пусто, берется og:description.
• Если картинка Twitter пуста, берется og:image.

3) Дополнительно

Разверните для тонкой настройки

og:locale (язык)

og:image:alt / twitter:image:alt

Текст для слабовидящих. Рекомендуется до 420 знаков.

og:image:width

og:image:height

Явное указание размеров помогает соцсетям быстрее отрисовать превью.

Теги статьи (только для og:type=article)

Дата публикации

Дата изменения

Используйте формат ISO 8601.

Сгенерированные мета-теги

Предпросмотр

Вид в соцсетях (OG)

example.com

Заголовок превью

Здесь будет описание вашей страницы.

Так ссылка будет выглядеть в мессенджерах и Facebook

Вид в X (Twitter) summary (малая картинка)

example.com

Заголовок превью

Здесь будет описание вашей страницы.

Зависит от выбранного типа карточки

Заметки

Здесь появятся подсказки на основе ваших данных.

Настройки

Сохранять данные в URL Можно поделиться ссылкой с уже заполненными полями Авто-очистка пробелов Удаляет лишние пробелы в начале и конце Экранирование кавычек Для безопасной вставки в HTML-атрибуты

Гайд по размерам (примеры)

Выберите формат для подсказки размеров

Для Open Graph Для X (Twitter)

Соотношение сторон -

Как использовать

Заполните URL, заголовок, описание и ссылку на изображение.
Настройте тип контента и (по желанию) параметры Twitter Card.
Скопируйте код и вставьте его внутрь тега <head> вашего сайта.

Краткий пример

Заполните URL + заголовок + картинка, затем скопируйте «Рекомендуемый» набор.

Полезные советы

Что такое OGP?

OGP (Open Graph Protocol) — стандарт, позволяющий соцсетям красиво оформлять ссылки на ваш сайт.

Задавая заголовок, описание и картинку, вы напрямую влияете на кликабельность ссылок.

Twitter Cards (X) используют похожую разметку и часто берут данные из OG-тегов.

Если превью не обновляется (Кэш)

• Соцсети кэшируют данные. Используйте официальные дебагеры, чтобы заставить их загрузить данные заново.
• Если вы поменяли картинку по той же ссылке, она может не обновиться. Лучше смените имя файла или добавьте версию (?v=2).
• Указание og:image:width/height ускоряет появление картинки при первом репосте.

Инструменты проверки

Meta Sharing Debugger

Очистка кэша и проверка тегов для FB/Messenger.

LinkedIn Post Inspector

Обновление превью для LinkedIn.

X Card Validator

Проверка отображения в Twitter (X).

FAQ

Нужно ли добавлять теги Twitter?

Желательно. Хотя X может использовать OG-теги как запасной вариант, явное указание twitter:card дает больше контроля.

Размер картинки?

Универсальный вариант — 1200×630. Это подходит и для Facebook, и для большинства мессенджеров (Telegram, WhatsApp).

Превью не меняется

Это почти всегда проблема кэша на стороне соцсети. Используйте инструменты из списка выше для сброса кэша.