Что такое Предпросмотр Open Graph?

Open Graph Preview показывает, как именно ваш URL будет выглядеть при публикации в Facebook, Twitter, LinkedIn и других соцсетях. Введите значения OG-мета-тегов и увидите живой макет карточки для репоста до публикации.

Превью читает теги og:title, og:description, og:image, og:site_name и og:url и воспроизводит ту самую разметку, которую использует каждая соцсеть. Facebook обрезает заголовок около 88 символов, большая карточка Twitter требует соотношение 2:1, а LinkedIn укорачивает описание примерно до 200 символов с многоточием.

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

1. Введите Open Graph теги: заголовок, описание, URL изображения, название сайта и URL.
2. Смотрите предпросмотры карточек Google Поиска, Facebook, Twitter, LinkedIn, WhatsApp, Slack, Discord и Pinterest в реальном времени рядом друг с другом.
3. Корректируйте длину заголовка, описание и размеры изображения, пока превью не будет идеально выглядеть на всех платформах.

Когда использовать

• Перед публикацией статьи или маркетинговой страницы, которой будут делиться в соцсетях.
• Когда аудитируете старый сайт, у которого превью при шеринге ломаются или приходят без картинки.
• При разработке нового шаблона OG-изображения, чтобы убедиться, что заголовок не перекрывает картинку.

Результат

Перед публикацией нового поста в LinkedIn убедитесь, что OG-изображение не обрезается неудачно, а описание хорошо читается в пределах 200 символов карточки Twitter.

Частые вопросы

Какого размера должна быть OG-картинка?

1200x630 пикселей — безопасный вариант. Facebook и LinkedIn отображают её в соотношении 1.91:1, карточка summary_large_image в Twitter использует тот же формат. Файл держите меньше 5 МБ, формат JPEG или PNG.

Почему Facebook не обновляет превью после правки тегов?

Facebook кэширует OG-данные примерно на 24 часа. Вставьте URL в Meta Sharing Debugger и нажмите «Scrape Again», чтобы принудительно перечитать страницу. У LinkedIn такая же функция есть в Post Inspector.

Нужны ли теги twitter:*, если у меня уже есть og:*?

Twitter подхватывает og:title, og:description и og:image, когда twitter:* отсутствуют, поэтому базовая страница работает и без них. Добавляйте twitter:card и twitter:image только тогда, когда хотите отдельный заголовок или картинку именно для Twitter.

Чем отличаются summary и summary_large_image в Twitter?

summary показывает маленькую квадратную миниатюру рядом с текстом — подходит для новостей и статей. summary_large_image ставит широкую картинку над текстом и лучше работает для визуального контента: лендингов, видео.

Можно использовать анимированный GIF как og:image?

Соцсети примут GIF, но покажут только первый кадр. Лучше взять статичный PNG или JPEG, где ключевая информация видна на этом кадре, либо превратить анимацию в короткий MP4 и подключить его через og:video.

Похожие инструменты