FB OpenGraph og: изображение не тянет изображения (возможно, https?) - PullRequest
284 голосов
/ 13 января 2012

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

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

  • Я проверил http://developers.facebook.com/tools/debug и у меня ноль предупреждений или ошибок.
  • Он находитизображения, на которые мы ссылаемся в «og:image», но они отображаются пустыми.Когда мы щелкаем по изображениям, они, тем не менее, действительно существуют, и для этого требуется прямо.
  • Это показывает одно изображение - изображение, размещенное на сервере, не являющемся https.
  • Мы пробовали квадратные изображения, JPEG, PNG, большие размеры и меньшие размеры.Мы поместили изображения прямо в public_html.Появляется ноль.
  • Это не ошибка кэширования, потому что, когда мы добавляем еще один og:image в мету, линтер FB находит и читает это.Это показывает предварительный просмотр.Предварительный просмотр пуст.Исключение only , которое мы получаем, относится к изображениям, которых нет на этом веб-сайте.
  • Мы подумали, что, возможно, на cpanel или .htaccess было предотвращено какое-либо предотвращение выщелачиванияизображения появляются, поэтому мы проверили.Там не было.Мы даже сделали быстрый < img src="[remote file]" > на совершенно другом сервере, и изображение выглядит хорошо.
  • Мы подумали, что это может быть og:type или другая странность с другим метатегом.Мы удалили их все по одному и проверили.Без изменений.Просто предупреждения.
  • Тот же код на другом сайте появляется без каких-либо проблем.
  • Мы подумали, возможно это не было извлечение изображений, потому что мы используем одни и те же страницы продукта для нескольких продуктов (меняя его в зависимости от значения get, то есть "details.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

РЕДАКТИРОВАТЬ ----

Используя скребковый инструмент «посмотри, что видит 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 ----

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

POSTED WORKAROUND ----

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

Ответы [ 21 ]

126 голосов
/ 14 января 2012

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

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

  • og:image:url - идентичен og: image.
  • og:image:secure_url - альтернативный URL для использования, если веб-странице требуется HTTPS.
  • og:image:type - 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 для ваших URL-адресов HTTPS на og:image:secure_url

Например:

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

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

HTTP-мета-тег HTTP для изображения:

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

Источник: http://ogp.me/#structured <- Вы можете посетить этот сайт для получения дополнительной информации. </p>

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

РЕДАКТИРОВАТЬ: Не забудьте проверить связь с серверами facebook после обновления ваших кодов - URL Linter

82 голосов
/ 18 января 2012

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

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

14 голосов
/ 11 декабря 2014

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

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

8 голосов
/ 02 июля 2017

тл; д-р - терпение

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

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

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

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

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

Тем не менее, интересно, что же так долго ...

8 голосов
/ 20 июня 2012

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

5 голосов
/ 08 ноября 2015

У меня была та же ошибка, и ничто из предыдущего не помогло, поэтому я попытался следовать оригинальной документации Open Graph Protocol , и я добавил префиксный атрибут в свой HTML-тег, и все стало замечательно.

<html prefix="og: http://ogp.me/ns#">
2 голосов
/ 23 июня 2017

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

Отладчик Facebook

и нажмите «Собрать новую информацию»

1 голос
/ 23 апреля 2013

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

1 голос
/ 30 марта 2016

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

  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, при необходимости обновите страницу
  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>

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

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

1 голос
/ 31 марта 2016

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

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

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

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

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

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

...