Не работает изображение для соцсетей в Shopify

Shopify выбирает изображение для предпросмотра ссылок в строго определенном порядке: сначала код темы, затем настройки темы и только потом изображение в разделе «Настройки». Загрузка не в то место — самая распространенная причина.

Последнее обновление

Быстрое решение


  1. Проверьте URL магазина с помощью инструмента проверки метатегов.

  2. Сначала проверьте настройки изображения для соцсетей в вашей теме; они имеют приоритет над «Настройками».

  3. В противном случае установите его в разделе «Интернет-магазин» > «Настройки» > «Изображение для публикации в соцсетях и SEO».

  4. Обновите ссылку в отладчике репостов Facebook (Sharing Debugger).


Почему изображение в Shopify не отображается

  • Тема переопределяет настройки (Preferences). Shopify использует изображения в следующем порядке: жестко заданные в коде темы, затем настройки темы для социальных сетей или оформления заказа, затем изображение из раздела Preferences.

  • Ваша тема использует только собственные настройки. Некоторые темы полностью игнорируют изображение из Preferences.

  • У страницы есть собственное изображение. В бесплатных темах Shopify для ссылок на товары, коллекции и записи блога используется главное изображение (featured image) этой страницы.

  • Изображение не задано вообще, поэтому Shopify по умолчанию использует ваш логотип, дополняя его полями с цветом фона.

  • Платформа сохранила старое превью в кэше.

Как это исправить

  1. Откройте URL-адрес в инструменте проверки метатегов и посмотрите, какой og:image он отдает.

  2. В разделе Online Store > Themes > Edit theme > Theme settings найдите пункт Social media или Social sharing и задайте изображение там, если эта опция доступна.

  3. Если в теме таких настроек нет, перейдите в Online Store > Preferences и добавьте изображение в блоке Social sharing image and SEO.

  4. Для товаров, коллекций и публикаций установите главное изображение (featured image) для соответствующего элемента.

  5. Снимите пароль с витрины перед тестированием. Служба поддержки сообщества Shopify отмечает, что страница ввода пароля скрывает ваши теги.

  6. Нажмите кнопку 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 в бесплатный инструмент проверки, чтобы увидеть, какие именно теги считывает каждое приложение. Как только теги будут настроены правильно, воспользуйтесь инструментом обновления, чтобы очистить старый предпросмотр.