Facebook Open Graph Нет изображения Первый раз

Я пытаюсь настроить кнопку share/send со ссылкой. Я правильно настроил открытые графические теги изображений на странице, но при первом открытии диалога share/send изображение не отображается. Не обновляя страницу, во второй раз открывая диалог share/send, изображение показывается. URL-адрес страницы и изображений все в HTTP (вместо HTTPS).

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

Было бы очень полезно помочь:)

Ответы

Ответ 1

Нашел проблему. Как-то эта проблема возникает, если вы неправильно устанавливаете свои открытые графические теги.

Неправильно:

<meta property="og:image" content="http://asdfg.com/<%= videoId %>/image" />

Правильно:

<meta property="og:image" content="http://asdfg.com/<%= videoId %>/image" />
<meta property="og:image:secure_url" content="https://asdfg.com/<%= videoId %>/image" /> 
<meta property="og:image:width" content="640" /> 
<meta property="og:image:height" content="442" />

Ответ 2

UPDATE

Это решение с iframe больше не работает! Работает с 06 февраля 2017 года. Facebook просто установил X-Frame-Options как DENY, чтобы вы не могли загрузить URL-адрес получателя в iFrame.

Я добавил og: image: width и og: image: height, проверил все мои теги свойств и проблема все еще была там.

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

<iframe style="width: 0px; height: 0px; margin: 0px; padding: 0px;" src="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.example.com"></iframe>

Ответ 3

Это может кому-то помочь.

Я обнаружил, что Facebook не нравится квадратное изображение, которое я использовал (1000px x 1000px),
поэтому я обрезал его до 660px x 315x и Facebook принял это.

Установка og: width и height не помогла, и речь шла буквально о размерах изображения.

Ответ 4

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

Ответ 5

Вы должны правильно указать ссылку изображения в свойстве og:image. Если вы еще не получили миниатюру, добавьте изображение height и width следующим образом:

<meta property="og:image:width" content="450" />
<meta property="og:image:height" content="298" />

Ответ 6

Возможно, это поможет кому-то. Не знаю, почему, но после удаления этого из моего блока "head"

<link rel="image_src" href="{MY_IMAGE_URI_HERE}" />

Проблема решена.

Здесь мои метатеги

...
<meta property="fb:app_id" content="{APP_ID}"/>
<meta property="og:image" content="https://{IMAGE_THUMB_URI}" /> 
<meta property="og:image:secure_url" content="https://{IMAGE_THUMB_URI}" /> 
<meta property="og:image:width" content="450" /> 
<meta property="og:image:height" content="236" />
<meta property="og:url" content="{PAGE_URI}"/>
<meta property="og:title" content="{PAGE_TITLE}"/>
<meta property="og:description" content="{PAGE_DESC.}"/>
...

Я использую "https" в обоих метатегах (og: image и og: image: secure_url), потому что веб-сайт использует ssl.

Ответ 7

Если у вас все еще есть проблемы, вам также может понадобиться добавить свойство MIME type, например:

<meta property="og:image:type" content="image/jpeg">

ПРИМЕЧАНИЕ: это image/jpeg не image/jpg - (вы должны иметь e там)

FB сканер принимает image/gif, image/jpeg, image/png