FB OpenGraph og:изображение не тянет изображения (возможно https?)

Первый:не считаю, что это дубликат вопрос. Я искал такие же или подобные проблемы так широко, и из-за характера устранения неполадок, прежде чем спрашивать, я считаю, что эта проблема уникальна.



Facebook не может понять мой og:image файлы и я пробовал все обычные решения. Я начинаю думать, что это может иметь какое-то отношение к https://...




  • я проверил http://developers.facebook.com/tools/debug и имеют нулевые предупреждения или ошибки.

  • он находит изображения, которые мы связали в "og:image", но они отображаются пустыми. Когда мы нажимаем на изображение(ы), однако, они существуют, и он принимает прямо к ним.

  • он показывает одно изображение - изображение, размещенное на сервере без https.

  • мы пробовали площади изображения, Изображения в формате JPEG, PNG файлов, больших размеров и маленьких размеров. Мы поместили изображения прямо в public_html. Ноль появляются.

  • это не ошибка кэширования, потому что когда мы добавляем еще один og:image к мета, Линтер FB действительно находит и читает это. Он показывает предварительный просмотр. Предварительный просмотр. Элемент только исключение мы получаем для изображений, которые не находятся на этом сайте.

  • мы думали, может быть, там был какой-то анти-выщелачивания на cpanel или .htaccess это мешало отображению изображений, поэтому мы проверили. Но его не было. Мы даже сделали быстрый < img src="[remote file]" > на совершенно другом сервере, и изображение отображается нормально.

  • мы думали, может быть, это было og:type и еще одна странность с другим мета-тег. Мы удалили все из них, по одному за раз и проверили его. Никакое изменение. Просто предупреждения.

  • тот же код на другом веб-сайте появляется без каких-либо проблем.

  • мы думали может быть он не вытягивал изображения, потому что мы используем одну и ту же страницу продукта для нескольких продуктов (изменяя ее на основе о значении get, т. е. " детали.php?id=xxx"), но он все еще тянет одно изображение (из другого url).

  • оставив og:image или image_src выключен, FB не находит никаких изображений.


я в конце моей веревки. Если бы я сказал, сколько времени я и другие потратили на это, вы были бы шокированы. Вопрос в том, что это интернет-магазин. Мы абсолютно, положительно не можем не иметь образов. Мы должны. У нас есть десять или около того других сайтов... Это единственный с og:image проблемы. Это также единственный на https, так что мы подумали, может быть, в этом и была проблема. Но мы не можем найти прецедента нигде в интернете для этого.



это мета-теги:



<meta property="og:title" content="[The product name]" /> 

<meta property="og:description" content="[the product description]" /> 

<meta property="og:image" content="https://www.[ourwebsite].com/images/shirts/overdriven-blues-music-tshirt-details-black.png" />

<meta property="og:image" content="https://www.[ourwebsite].com/images/shirts/overdriven-blues-music-tshirt-art-black.png" />

<meta property="og:image" content="http://www.[ADIFFERENTwebsite].com/wp-content/uploads/2011/06/ARS-Header-Shine2.png" />

<meta property="og:image" content="https://www.[ourwebsite].com/images/ARShopHeader.png" />

<meta property="og:image" content="http://www.[ourwebsite].com/overdriven-blues-music-tshirt-art-black.JPG" />

<meta property="og:type" content="product"/>

<meta property="og:url" content="https://www.[ourwebsite].com/apparel-details.php?i=10047" />

<meta property="og:site_name" content="[our site name]" />      

<meta property="fb:admins" content="[FB-USER-ID-NUMBER]"/>

<meta name="title" content="[The product name]" />

<meta name="description" content="[The product description]" />

<link rel="image_src" href="https://www.[ourwebsite].com/images/shirts/overdriven-blues-music-tshirt-details-black.png" />

<meta name="keywords" content="[four typical keywords]">

<meta name="robots" content="noarchive">


если вы хотите, вот ссылка на одну из наших страниц продукта, над которой мы работали. [Ссылка сокращена, чтобы попытаться ограничить это попадание в Результаты поиска для нашего сайта]:http://rockn.ro/114



EDIT - - - -



ссылка "См. что facebook видит " скребок инструмент, мы смогли увидеть следующее:



"image": [          

      {

         "url": "https://www.[httpSwebsite].com/images/shirts/soul-man-soul-music-tshirt-details-safari.png"

      },

      {

         "url": "https://www.[httpSwebsite].com/images/shirts/soul-man-soul-music-tshirt-art-safari.png"

      },

      {

         "url": "http://www.[theotherNONSECUREwebsite].com/wp-content/uploads/2011/06/ARS-Header-Shine2.png"

      }

   ],


мы проверили все ссылки, которые он нашел для одной страницы. Все они были совершенно правильными изображениями.



редактировать 2 ----



мы попробовали тест и добавили поддомена на небезопасный сайт (с которого изображения фактически видны через facebook). Поддомен был http://img. [nonsecuresite]. com.затем мы помещаем все изображения в основную папку поддомена и ссылаемся на них. Оно не будет тянуть эти изображения в FB. Однако он по-прежнему будет извлекать любые изображения, на которые ссылаются в небезопасном основном домене.



ОПУБЛИКОВАНО ОБХОДНОЙ ПУТЬ - - - -



благодаря Keegan, теперь мы знаем, что это ошибка в Facebook. Чтобы обойти эту проблему, мы разместили поддомен на другом веб-сайте без HTTPS и сбросили в него все изображения. Мы ссылались на координационный http://img.otherdomain.com/[like-image.jpg] фото og:image на каждой странице товара. Затем нам пришлось пройти через FB Linter и запустить каждую ссылку для обновления данные OG. Это сработало, но решение является обходным путем, и если https проблема исправлена, и мы возвращаемся к использованию естественного домена https, FB будет кэшировать изображения с другого веб-сайта, что усложняет дело. Надеюсь, эта информация поможет спасти кого-то еще от потери 32 часов кодирования их жизнь.

1379   18  

18 ответов:

Я столкнулся с той же проблемой и сообщил об этом как об ошибке на сайте разработчика Facebook. Кажется довольно ясным, что og: image URI с использованием HTTP работают просто отлично, а URI с использованием HTTPS-нет. Теперь они признали, что они " изучают это."

ошибка можно увидеть здесь: https://developers.facebook.com/bugs/260628274003812

75  
2012-01-18 15:25:16

некоторые свойства могут иметь дополнительные метаданные, присоединенные к ним. Они задаются так же, как и другие метаданные с помощью property и content, а property дополнительные :

The og:image свойство имеет некоторые необязательные структурированные свойства:

  • og:image:url - идентично og: изображение.
  • og:image:secure_url - An альтернативный url-адрес для использования, если веб-страница требует HTTPS.
  • og:image:type - A Тип MIME для этого изображения.
  • og:image:width - количество пикселей в ширину.
  • og:image:height - количество пикселей в высоту.

полный пример изображения:

<meta property="og:image" content="http://example.com/ogp.jpg" />
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" /> 
<meta property="og:image:type" content="image/jpeg" /> 
<meta property="og:image:width" content="400" /> 
<meta property="og:image:height" content="300" />

так что вам нужно изменить og:image свойство для ваших https URLs to og:image:secure_url

Ex:

МЕТАТЕГ HTTPS ДЛЯ ИЗОБРАЖЕНИЯ:

<meta property="og:image:secure_url" content="https://www.[YOUR SITE].com/images/shirts/overdriven-blues-music-tshirt-details-black.png" />

HTTP МЕТА-ТЕГ ДЛЯ ИЗОБРАЖЕНИЯ:

<meta property="og:image" content="http://www.[YOUR SITE].com/images/shirts/overdriven-blues-music-tshirt-details-black.png" />

источник: http://ogp.me/#structured

надеюсь, что это поможет вам.

EDIT: не забудьте пинговать серверы facebook после обновления кодов -URL Linter

116  
2013-06-27 13:21:19

Я не знаю, если это только со мной, но для меня og:image не работает, и он выбирает логотип моего сайта, хотя facebook debugger показывает правильное изображение.

но изменение og:image до og:image:url работал для меня. Надеюсь, это поможет кому-нибудь еще, кто сталкивается с подобной проблемой.

12  
2014-12-11 22:37:44

получил здесь от Google, но это не было большой помощью для меня. Оказалось, что для логотипа требуется минимальное соотношение сторон 3:1. Мой был почти 4:1. Я использовал Gimp, чтобы обрезать его точно до 3: 1 и вуаля - мой логотип теперь показан на FB.

8  
2012-06-20 13:38:40

tl; dr -будьте терпеливы

Я оказался здесь, потому что я видел пустых изображений с сайта https. Однако проблема была совсем другой:

при первом совместном использовании контента искатель Facebook будет очищать и кэшировать метаданные из общего URL-адреса. Искатель должен увидеть изображение хотя бы один раз, прежде чем его можно будет отобразить. Это означает, что первый человек, который разделяет часть контента, не увидит визуализацию изображение

[https://developers.facebook.com/docs/sharing/best-practices/#precaching]

во время тестирования, он взял facebook 10 минут наконец-то показать изображения. Поэтому, пока я чесал голову и бросал случайные теги og в facebook (и подозревая проблему https, упомянутую здесь), все, что мне нужно было сделать, это подождать.

Как это может действительно остановить людей от обмена ссылками в первый раз, FB предлагает два способа обойти это поведение: a) запуск отладчика OG на всех ваших ссылках: изображение будет кэшировано и готово к совместному использованию через ~10 минут или b) указание og:image:width и og:image:height. (Подробнее читайте в ссылке выше)

все еще интересно, хотя что занимает их так долго ...

6  
2017-07-02 20:35:42

У меня была та же ошибка, и ничто из предыдущего не помогло, поэтому я попытался следовать оригинальной документации Открыть Графе Протокола и я добавил атрибут префикса к моему тегу html, и все стало потрясающим.

<html prefix="og: http://ogp.me/ns#">
4  
2015-11-08 00:46:09

У меня были похожие проблемы. Я удалил свойство=" og:image:secure_url " и теперь он будет скраб только с og:image. Иногда, чем меньше, тем больше

1  
2013-04-23 01:00:09

Я обнаружил другой сценарий, который может вызвать эту проблему. Я прошел все шаги, описанные в вопросе и ответах, но проблема осталась.

Я проверил свои изображения и обнаружил, что некоторые из моих сообщений были слишком большие миниатюры изображений в og:image в диапазоне нескольких тысяч пикселей и нескольких мегабайт.

Это произошло из-за недавней миграции из WP в Jekyll, я оптимизировал свои изображения с помощью gulp, но использовал оригинал изображения в OG:изображение по ошибке.

Facebook дает нам следующие рекомендации на сегодняшний день:

для лучшего отображения используйте изображения размером не менее 1200 x 630 пикселей устройства с высоким разрешением. Как минимум, вы должны использовать изображения, которые 600 х 315 пикселей, чтобы отобразить ссылку на страницу с более крупными изображениями. Изображения могут быть размером до 8 МБ.

таким образом, существует верхний предел 8 МБ.

1  
2016-03-31 13:56:17

я столкнулся с той же проблемой, а затем я заметил, что у меня был другой домен для og:url

как только я убедился, что домен был одинаковым для og:url и og:image это сработало.

надеюсь, что это помогает.

1  
2016-08-03 00:04:19

Не забудьте обновить серверы через:

Facebook Debugger

и нажмите на кнопку "собрать новую информацию"

1  
2017-07-24 21:48:48

в моем случае проблема была в не предоставлении корневой сертификат CA. Я понял это после использования:https://www.ssllabs.com/ssltest/analyze.html для анализа конфигурации SSL.

1  
2017-11-10 02:57:09

Я вижу, что отладчик извлекает 4 og:image теги С вашего URL.

первое изображение является самым большим и поэтому занимает больше времени для загрузки. Попробуйте уменьшить это первое изображение или изменить порядок, чтобы сначала показать меньшее изображение.

0  
2012-01-14 01:44:44

кроме того, эта проблема также возникает при добавлении пользовательской истории (где вы не используете og:image). Например:

POST /me/cookbook:eat?
  recipe=http://www.example.com/recipes/pizza/&
  image[0][url]=http://www.example.com/recipes/pizza/pizza.jpg&
  image[0][user_generated]=true&
  access_token=VALID_ACCESS_TOKEN

выше будет работать только с http, а не с https. Если вы используете https, вы получите сообщение об ошибке:: Прикрепленное изображение () не удалось загрузить

0  
2013-09-14 01:48:51

как я случайно обнаружил, прозрачное пустое изображение поставляется с заголовком ответа, указывающим на возможную причину проблемы.

  1. перейдите в отладчик по адресу https://developers.facebook.com/tools/debug/og/object/
  2. поместите свой URL
  3. в нижней части facebook показывает ваше "изображение" (прозрачный 1x1 GIF)
    1. изображение связано с вашим исходным изображением - нет смысла нажимать на него
    2. нажмите вправо и просмотрите изображение (вы получите что-то вроде https://external-ams3-1.xx.fbcdn.net/safe_image.php?d=...&url=...)
  4. включите вкладку Net на firebug/developer tools, обновите страницу, если это необходимо
  5. вы получаете x-error-detail заголовок ответа с объяснением

например, в моем случае это был Invalid image extension for URL: https://[mydomain]/[myfilename].jpg

реальная проблема в моем случае была связана с prerender.io.

как оказалось, если изображение запрашивается через prerender, оно преобразуется в HTML. Что-то вроде это:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head><meta http-equiv="content-type" content="text/html; charset=utf-8"></head>
<body style="margin: 0px;"><img style="-webkit-user-select: none; cursor: -webkit-zoom-in; " src="https://[yourdomain].com/[yourfilename].jpg" width="1078" height="718"></body>
</html>

это либо ошибка в самом пререндере, либо он должен быть настроен в вашем прокси, чтобы не использовать пререндер для *.jpg запросы (даже если они запрашиваются ботом Facebook).

это действительно трудно заметить, так как prerender используется только на некоторых заголовках user-agent.

0  
2016-03-31 22:07:55

из того, что я наблюдал, я вижу, что когда ваш сайт является общедоступным и даже если url-адрес изображения https, он просто отлично работает.

0  
2016-09-07 13:42:48

для меня это работает:

<meta property="og:url" content="http://yoursiteurl" />
    <meta property="og:image" content="link_to_first_image_if_you_want" />
    <meta property="og:image" content="link_to_second_image_if_you_want" />
    <meta property="og:image:type" content="image/jpeg" /> 
    <meta property="og:image:width" content="400" /> 
    <meta property="og:image:height" content="300" />
    <meta property="og:title" content="your title" />
    <meta property="og:description"  content="your text about homepage"/>
0  
2018-01-29 13:48:14

подобные симптомы (Facebook и др. Не правильно извлекая og:изображение и другие активы по https) могут возникать, когда сертификат https сайта не полностью соответствует.

https-сертификат вашего сайта может показаться действительным (Зеленый ключ в браузере и все), но он не будет правильно очищаться, если отсутствует промежуточный или цепной сертификат. Это может привести к потере многих часов проверки и перепроверки всех различных кэшей и мета-тегов.

возможно, это не ваш проблема, но могут быть другие с аналогичными симптомами (как у меня). Есть много способов проверить ваш сертификат - тот, который я случайно использовал:https://www.sslshopper.com/ssl-checker.html

0  
2018-05-01 05:38:03

после нескольких часов тестирования и пробовать...

Я решил эту проблему как можно более простым. Я замечаю, что они используют "тестовые страницы" внутри страницы разработчиков Facebook, которая содержит только теги "og" и некоторый текст в теге body, который ссылается на эти теги og.

Так что же я сделал?

Я создал второе представление в своем приложении, содержащее те же самые вещи, которые они используют.

и как я знаю, это Facebook, который получает доступ к моей странице, так что я могу изменить вид? У них есть уникальный пользовательский агент: "facebookexternalhit / 1.1"

-3  
2013-04-01 22:01:22

Comments

    Ничего не найдено.
Click here to cancel reply.