Не работает изображение для соцсетей в Shopify
Shopify выбирает изображение для предпросмотра ссылок в строго определенном порядке: сначала код темы, затем настройки темы и только потом изображение в разделе «Настройки». Загрузка не в то место — самая распространенная причина.
Последнее обновление
Быстрое решение
Проверьте URL магазина с помощью инструмента проверки метатегов.
Сначала проверьте настройки изображения для соцсетей в вашей теме; они имеют приоритет над «Настройками».
В противном случае установите его в разделе «Интернет-магазин» > «Настройки» > «Изображение для публикации в соцсетях и SEO».
Обновите ссылку в отладчике репостов Facebook (Sharing Debugger).
Почему изображение в Shopify не отображается
Тема переопределяет настройки (Preferences). Shopify использует изображения в следующем порядке: жестко заданные в коде темы, затем настройки темы для социальных сетей или оформления заказа, затем изображение из раздела Preferences.
Ваша тема использует только собственные настройки. Некоторые темы полностью игнорируют изображение из Preferences.
У страницы есть собственное изображение. В бесплатных темах Shopify для ссылок на товары, коллекции и записи блога используется главное изображение (featured image) этой страницы.
Изображение не задано вообще, поэтому Shopify по умолчанию использует ваш логотип, дополняя его полями с цветом фона.
Платформа сохранила старое превью в кэше.
Как это исправить
Откройте URL-адрес в инструменте проверки метатегов и посмотрите, какой
og:imageон отдает.В разделе Online Store > Themes > Edit theme > Theme settings найдите пункт Social media или Social sharing и задайте изображение там, если эта опция доступна.
Если в теме таких настроек нет, перейдите в Online Store > Preferences и добавьте изображение в блоке Social sharing image and SEO.
Для товаров, коллекций и публикаций установите главное изображение (featured image) для соответствующего элемента.
Снимите пароль с витрины перед тестированием. Служба поддержки сообщества Shopify отмечает, что страница ввода пароля скрывает ваши теги.
Нажмите кнопку Scrape Again в Facebook Sharing Debugger.
Теги, создаваемые темами Shopify
Бесплатные темы Shopify автоматически добавляют теги Open Graph: og:title, og:description, og:url и og:image. Пользовательские темы могут отличаться, поэтому проверяйте актуальный HTML-код.
Требования к размеру изображений
Facebook: рекомендуется 1200 x 630 px, минимум 200 x 200 px, макс. 8 МБ
LinkedIn: минимум 1200 x 627 px, макс. 5 МБ
WhatsApp: до 600 КБ
Shopify добавляет поля к логотипам, которые не соответствуют рекомендуемому размеру или имеют прозрачный фон. Вместо этого используйте изображение во весь размер без полей. Проверьте файл с помощью инструмента проверки размера OG-изображений.
Как принудительно обновить кэш
Shopify не может очистить кэш Facebook или LinkedIn. Используйте инструменты Sharing Debugger и Post Inspector, а также отправляйте URL-адрес со строкой запроса (параметром) в X, Slack и Discord. В инструменте обновления подробно описан каждый шаг.
Источники
Частые вопросы
Почему изображение из настроек Shopify не отображается, когда я делюсь ссылкой?
В вашей теме есть собственная настройка изображения для соцсетей или жестко заданные теги, которые переопределяют настройки. Задайте изображение в настройках темы.
Какое изображение Shopify использует для ссылок на товары?
В бесплатных темах Shopify это главное изображение товара. То же самое касается коллекций и записей блога.
Почему мой логотип отображается с цветной рамкой?
Изображение для публикации не задано, поэтому Shopify использует логотип и заполняет пространство цветом фона вашей темы.
Проверьте свою страницу, затем обновите предпросмотр
Вставьте свой URL в бесплатный инструмент проверки, чтобы увидеть, какие именно теги считывает каждое приложение. Как только теги будут настроены правильно, воспользуйтесь инструментом обновления, чтобы очистить старый предпросмотр.
Похожие руководства
Предпросмотр ссылки в Facebook не отображается или не обновляется
Facebook считывает теги Open Graph с помощью собственного краулера и кэширует результат на срок до 30 дней. Исправьте теги и изображение, а затем повторно выполните проверку URL.
Изображение OG в WordPress не отображается при публикации записи
В WordPress метатеги Open Graph генерируются SEO-плагином или темой оформления. Конфликт двух источников, кэширование страницы или слишком маленькое изображение — самые частые причины проблем.
Не работает изображение Open Graph в Webflow
В Webflow разметка Open Graph настраивается отдельно для каждой страницы, а не глобально. Для шаблонных страниц CMS требуется поле «Изображение», и все изображения в этой коллекции должны быть одного размера.