it-swarm.com.ru

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

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

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, то есть "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. Тем не менее, он по-прежнему будет тянуть любые изображения, на которые есть ссылки в незащищенном основном домене 

РАЗМЕЩЕНО ВРЕМЕННОЕ РЕШЕНИЕ ----

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

274
Cyprus106

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

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

78
Keegan Quinn

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

Свойство og:image имеет несколько дополнительных структурированных свойств:

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

Пример:

HTTPS META TAG ДЛЯ ИЗОБРАЖЕНИЯ:

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

HTTP META TAG ДЛЯ ИЗОБРАЖЕНИЯ:

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

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

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

Правка: Не забудьте проверить связь с серверами facebook после обновления ваших кодов - URL Linter

121
Syed I.R

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

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

13
lalit

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

8
priiiiit

tl; dr - наберитесь терпения

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

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

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

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

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

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

6
panepeter

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

<html prefix="og: http://ogp.me/ns#">
4
VoVaVc

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

Отладчик Facebook

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

2
Scaraux

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

1
HappaGirl

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

1
instead

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

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

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

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

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

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

1
Mark

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

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

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

1
Darren Hall

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

0
AK M

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

<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
Dr.MTR

Кроме того, эта проблема также возникает, когда вы добавляете сгенерированную пользователем историю (где вы не используете 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
Aamir Quraishi

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

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

0
Lix

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

  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 используется только для определенных заголовков пользовательских агентов.

0
Marius Balčytis

Я взял http:// из моего og:image и заменил его просто старым www., после чего он начал работать нормально.

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

0
Albert Renshaw

Сегодня у меня была похожая проблема, которую Sharing Debugger помог мне решить. Кажется, что Facebook не может (в настоящее время) понимать изображения со встроенными метаданными XMP. Когда я заменил изображения в наших статьях на версии без метаданных XMP и заново очистил страницу (используя Sharing Debugger), проблема исчезла. Шестнадцатеричный редактор поможет вам увидеть, содержит ли ваше изображение метаданные XMP.

0
Brett Donald

После того, как вы обновите метатег, убедитесь, что ссылка на контент (изображение) является абсолютным путем, и перейдите здесьhttps://developers.facebook.com/tools/debug/sharing введите ссылку на ваш сайт и нажмите scrape again на следующей странице

0
Thyagu

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

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

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

0
Lance