Превью в соцсетях

Open Graph теги: зачем нужны и как настроить правильно

Когда кто-то делится ссылкой на ваш сайт в Facebook, Twitter, Telegram, VK или LinkedIn — соцсеть формирует карточку-превью: заголовок, описание и изображение. Эти данные берутся из Open Graph тегов. Без них платформы пытаются собрать информацию автоматически — и результат почти всегда выглядит плохо.

Минимальный набор тегов

• og:title — заголовок карточки. Может отличаться от HTML title: в соцсетях лучше работают короткие, эмоциональные заголовки без SEO-ключевиков
• og:description — описание. Facebook показывает 1-2 строки, Telegram — до 3. Пишите суть: что получит пользователь, перейдя по ссылке
• og:image — изображение превью. Рекомендуемый размер: 1200×630 пикселей (1.91:1). Минимум для Facebook — 600×315. Изображение меньше 200×200 может не отобразиться
• twitter:card — тип карточки для Twitter. Обычно summary_large_image для полноразмерного превью

OG-теги и SEO

Open Graph не влияет на ранжирование напрямую — Google не использует OG-теги как сигнал. Но косвенное влияние значительное: качественное превью увеличивает количество кликов и расшариваний в соцсетях, что генерирует трафик и поведенческие сигналы. Ссылку с привлекательной карточкой расшаривают в 2-3 раза чаще, чем без превью.

Как обновить кеш превью

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

• Facebook — Sharing Debugger (developers.facebook.com/tools/debug), кнопка «Scrape Again»
• Twitter — Card Validator (cards-dev.twitter.com/validator)
• Telegram — отправьте ссылку боту @webpagebot
• VK — очистка кеша в инструментах разработчика VK

Частые ошибки

Изображение слишком маленькое или в неподдерживаемом формате (SVG не работает в большинстве соцсетей — используйте JPG или PNG). og:title совпадает с HTML title — упущенная возможность адаптировать заголовок для соцсетей. og:image указывает на относительный путь вместо абсолютного URL.