Не работает изображение Open Graph в Webflow
В Webflow разметка Open Graph настраивается отдельно для каждой страницы, а не глобально. Для шаблонных страниц CMS требуется поле «Изображение», и все изображения в этой коллекции должны быть одного размера.
Последнее обновление
Быстрое решение
Откройте «Настройки страницы», затем «Настройки Open Graph» для страницы, которой вы делитесь.
В шаблонах CMS выберите поле изображения из коллекции.
Используйте JPG или PNG с разрешением 1200 x 630 пикселей, одинакового размера для всей коллекции.
Опубликуйте, затем обновите ссылку с помощью инструмента обновления.
Почему изображение Webflow не отображается
На странице нет изображения Open Graph. Webflow не позволяет задавать теги Open Graph глобально; для каждой страницы их нужно настраивать отдельно.
В коллекции CMS нет поля Image, поэтому выпадающий список для изображения Open Graph в шаблоне пуст.
Изображения в коллекции имеют разные размеры. Webflow требует, чтобы все изображения Open Graph в рамках одной коллекции имели одинаковые пропорции и разрешение.
Изображение сохранено в формате WebP или AVIF. Панель выбора медиафайлов отображает только JPG и PNG. Webflow отмечает, что некоторые платформы, включая LinkedIn, не поддерживают WebP или AVIF в этом случае.
Изменения еще не опубликованы, либо платформа закешировала старую карточку.
Как это исправить
На панели Pages откройте Page settings, затем Open Graph settings.
Нажмите Select image и выберите файл JPG или PNG из ваших ресурсов либо вставьте публичный URL изображения.
Для страницы шаблона CMS выберите поле Image (например, главное изображение) в выпадающем списке Open Graph image.
Если все изображения одного размера, добавьте
og:image:widthиog:image:heightв Site settings, Custom code, Head code.Опубликуйте сайт и проверьте опубликованный URL с помощью инструмента проверки метатегов.
Теги, которые генерирует Webflow
og:title(или ваш SEO-заголовок, если вы установили соответствующий флажок)og:descriptionog:imageВсе остальное, например
og:image:width, добавляется через пользовательский код
Требования к размеру изображений
Не менее 1200 x 630 px с соотношением сторон 1.91:1, согласно руководству Webflow
Формат JPG или PNG из панели выбора медиафайлов
Единый размер для всех изображений Open Graph в коллекции
Избегайте сильного сжатия; Webflow рекомендует загружать несжатую копию для Open Graph
Как принудительно обновить превью
Публикация не очищает кеш сторонних платформ. Проверьте URL через Sharing Debugger от Facebook и Post Inspector от LinkedIn, а также добавьте строку параметров запроса при публикации в X, Slack или Discord. Наш инструмент обновления кеша объединяет ссылки на них.
Источники
Частые вопросы
Могу ли я задать одно изображение Open Graph для всего сайта Webflow?
Нет. Webflow заявляет, что теги Open Graph применяются только к той странице, на которой вы их настроили, поэтому задавайте их для каждой страницы отдельно.
Почему выпадающий список изображений Open Graph пуст в моем шаблоне CMS?
В этой коллекции нет поля для изображения. Добавьте его, заполните для каждого элемента и выберите в настройках Open Graph.
Можно ли использовать WebP для изображения Open Graph в Webflow?
Только вставив URL-адрес; в окне выбора отображаются только JPG и PNG. Webflow рекомендует JPG или PNG, поскольку некоторые платформы не поддерживают WebP.
Проверьте свою страницу, затем обновите предпросмотр
Вставьте свой URL в бесплатный инструмент проверки, чтобы увидеть, какие именно теги считывает каждое приложение. Как только теги будут настроены правильно, воспользуйтесь инструментом обновления, чтобы очистить старый предпросмотр.
Похожие руководства
Превью для соцсетей во Framer не обновляется
Framer позволяет настроить общее превью для соцсетей на весь сайт, переопределить его для отдельных страниц и задать изображения для каждого элемента CMS. Если новое изображение уже опубликовано, но все еще отображается старое, причина в кэше платформы.
Не работает изображение для соцсетей в Shopify
Shopify выбирает изображение для предпросмотра ссылок в строго определенном порядке: сначала код темы, затем настройки темы и только потом изображение в разделе «Настройки». Загрузка не в то место — самая распространенная причина.
Предпросмотр ссылки в LinkedIn не работает или не обновляется
LinkedIn формирует превью из четырех тегов og: и сохраняет кэшированную копию. Исправьте теги, а затем обновите данные страницы с помощью Post Inspector в LinkedIn.