Проверка OG-изображений
Проверьте изображение Open Graph перед публикацией
Вставьте URL-адрес, чтобы увидеть метатег og:image и то, как это изображение выглядит в превью ссылок. Находите отсутствующие, обрезанные, размытые или поврежденные изображения для соцсетей до того, как опубликуете ссылку.
Изображение найдено
Убедитесь, что на странице есть тег og:image с абсолютным URL-адресом HTTPS. Без него платформы выберут случайное изображение со страницы или вовсе не будут отображать картинку.
Название
Описание
framer.com
Размер и соотношение сторон
Используйте разрешение 1200 x 630 пикселей (соотношение сторон 1,91:1). Меньшие изображения могут отображаться в виде маленькой миниатюры, а при других соотношениях они будут обрезаться по-разному на каждой платформе.
Название
Описание
framer.com
Файл и формат
Используйте формат JPG или PNG размером до 5 МБ. Располагайте важный текст и логотипы подальше от краев, так как в некоторых приложениях изображение может обрезаться до квадрата или более узкой карточки.
Предварительный просмотр платформы
Сравните, как одно и то же изображение выглядит в LinkedIn, X, Slack, WhatsApp и Google, чтобы превью везде оставалось четким и соответствовало вашему бренду.
Название
Описание
framer.com
Практическое руководство по OG-изображениям
OG-изображение обычно является самой крупной частью превью ссылки, поэтому оно сильно влияет на то, перейдут ли по ней пользователи. Вот как его проверить и улучшить.
Что такое OG-изображение?
OG-изображение — это картинка, заданная метатегом og:image протокола Open Graph. Социальные сети и мессенджеры используют её для создания карточки предварительного просмотра, когда кто-то делится вашей ссылкой.
Какой оптимальный размер изображения Open Graph (OG)?
Размер 1200 x 630 пикселей подходит практически для всех платформ. Он соответствует большой карточке 1.91:1 в LinkedIn, Facebook и X. Добавьте теги og:image:width и og:image:height, чтобы платформы могли быстрее отображать изображение.
Как проверить изображение Open Graph (OG)
Введите URL страницы и запустите проверку. Убедитесь, что изображение загружается, имеет правильные пропорции и хорошо читается в небольшом размере. Затем просмотрите предпросмотр для каждой платформы на предмет обрезки или слишком мелкого текста.
Почему не отображается моё OG-изображение?
Частые причины: относительный URL изображения, изображение заблокировано файлом robots.txt или экраном входа, слишком большой размер файла, неверный тип контента или устаревшее превью в кэше. Исправьте тег, опубликуйте страницу заново и обновите кэш в отладчике платформы.
OG-изображение против изображения карточки Twitter
X сначала считывает twitter:image, а если он отсутствует, использует og:image. Укажите для twitter:card значение summary_large_image, чтобы отображалась большая карточка с изображением. В большинстве случаев одного изображения размером 1200 x 630 будет достаточно для обоих вариантов.
Советы по созданию кликабельных OG-изображений
Используйте понятный заголовок или фотографию продукта, высокую контрастность и узнаваемый логотип. Текст должен быть коротким и крупным. Для важных страниц создавайте уникальные изображения, а не используйте одну и ту же картинку для всего сайта.
Найдите идеи для OG-изображений
Просмотрите галерею LinkPreview, чтобы увидеть, как более 1700 сайтов оформляют свои изображения Open Graph, а затем проверьте свой собственный URL-адрес для сравнения.
Другие бесплатные инструменты: проверка размера изображений OG, валидатор карточек Twitter, проверка фавикона и генератор метатегов.