Загрузка...
Загрузка...
Подробное руководство по Open Graph тегам для Facebook, VK, Telegram, Twitter и других платформ. Настройка превью, размеры изображений, типы контента.
AIПрактическое руководство по генерации постов для Telegram, VK, Instagram с помощью нейросетей. Структура промптов, примеры для разных платформ, как избежать шаблонности.
SEOПодробное руководство по созданию и оптимизации мета-тегов для поисковой оптимизации. Title, description, Open Graph, Twitter Cards и другие важные теги. Практические примеры и лучшие практики.
SEOРуководство по FAQ Schema разметке: формат JSON-LD, требования Google, генерация FAQPage, проверка и типичные ошибки.
Поделитесь с коллегами или изучите другие материалы блога
При публикации ссылки в соцсети платформа формирует карточку: заголовок, описание и изображение. Если разметка настроена неправильно, превью может быть некрасивым, обрезанным или вовсе отсутствовать. В этой статье — как настроить превью так, чтобы ссылки выглядели профессионально в любой соцсети.
При добавлении ссылки платформа:
Без OG вы не контролируете процесс. Платформа может взять логотип вместо релевантной картинки, обрезать заголовок или показать техническое описание.
Добавьте в <head> каждой страницы:
<meta property="og:title" content="Заголовок, который увидят в соцсетях">
<meta property="og:description" content="Краткое описание на 1-2 предложения. Должно побуждать к клику.">
<meta property="og:image" content="https://ваш-сайт.ru/images/preview.jpg">
<meta property="og:url" content="https://ваш-сайт.ru/страница/">
<meta property="og:type" content="website">
Критически важно: og:image должен быть абсолютным URL с https://. Относительные пути не работают.
| Параметр | Рекомендация |
|---|---|
| Размер | 1200×630 px (универсально для всех платформ) |
| Соотношение | 1.91:1 |
| Формат | JPG или PNG |
| Размер файла | До 1 МБ (оптимально 100–300 КБ) |
| Содержимое | Важная информация в центре, учёт обрезки по краям |
Платформы могут обрезать изображение. VK показывает 537×240 в ленте, Telegram — разные пропорции в зависимости от клиента. Держите ключевые элементы (логотип, текст) в центральной зоне 1000×500 px.
?v=2)Для CMS и статических генераторов можно задавать OG на уровне шаблона с подстановкой переменных:
<meta property="og:title" content="{{ page.title }}">
<meta property="og:description" content="{{ page.description }}">
<meta property="og:image" content="{{ site.url }}{{ page.image }}">
<meta property="og:url" content="{{ page.url }}">
Для статей — уникальное изображение на каждую публикацию. Для товаров — фото товара. Для главной — общее превью сайта.
Соцсети кэшируют превью. Решения:
Это нормально. У каждой платформы свои пропорции и лимиты. Универсальный размер 1200×630 минимизирует искажения.
Рекомендация: создавайте шаблон с зоной безопасности 1000×500 px в центре — так важная информация не обрежется ни в одной платформе.
| Проверка | Действие |
|---|---|
| OG-теги на странице | View Source, поиск og: |
| Абсолютный URL изображения | Проверить в коде |
| Размер изображения 1200×630 | Открыть файл |
| Доступность изображения | Открыть URL в браузере |
| Предпросмотр | OG Preview |
| Мета-теги | Проверка мета-тегов |
| Зона безопасности | Ключевые элементы в центре |
| Уникальность для статей | Отдельное превью на каждую статью |
Telegram кэширует превью надолго. Решения: изменить URL изображения (добавить ?v=2), подождать обновления кэша, в крайнем случае — изменить URL страницы.
Обычно достаточно одного 1200×630. Для особых кейсов (например, вертикальный формат для Stories) можно использовать платформо-специфичные теги, но это редко необходимо.
Косвенно. Красивое превью повышает кликабельность при шеринге, что может привести к дополнительным ссылкам и упоминаниям. Прямого влияния на ранжирование нет.
Красивое превью при шеринге — результат правильной настройки Open Graph. Обязательные теги: og:title, og:description, og:image (абсолютный URL), og:url. Изображение 1200×630 px подходит для всех платформ. Проверяйте результат в OG Preview и проверке мета-тегов. Подробнее о разметке — в руководстве по Open Graph.