Картинки в посте для Facebook

  • Картинки в посте для Facebook

    Антон Долганин 4 Февраля 2015 8:26 15446
    Не могу понять по какому принципу Facebook цепляет такую большую картинку при шаринге ссылки. Но есть подозрение.

    Наверное, многие пользователи facebook встречали такое красивое оформление ссылки при постинге:

    111.png

    Вот пример такого поста.  Думаете всему виной og:image? А может сама большая картинка? Ничего подобного, посмотрите на этот пост.
    Шарим:

    222.png

    Все то же самое, тот же ресурс, та же картинка. Но облом.
    Причем! Если отмотать назад в моем аккаунте FB, то увидим, что первый постинг оригинального поста тоже привел к фейлу:

    333.png

    Какие выводы я сделал? FB замеряет или активность перехода по ссылке, или кол-во лайков, и только после этого САМ подставляет большую картинку при постинге.
    Как по мне, абсолютное отсутствие логики у FB-вев.

    Буду рад какому-то скрытому хаку, о котором я не знаю.

    UPD:

    Всем спасибо, господа, тайна Facebook разгадана.

    Все просто:
    • Ставьте og:image, чтобы наверняка.
    • Кеш, всему виной конечно же кеш. Если пост свежайший, то добавьте ссылку в форму Facebook, тот подгрузит ссылку, почти наверняка БЕЗ картинки. Чуть-чуть подождите, секунд несколько. Обновите страницу FB. Можно публиковать.
    • В картинке не должно быть спец.символов. В частности пробелов.
Антон Долганин
4 Февраля 2015 8:37
А этот пост сразу же расшарил - все ок :)
https://www.facebook.com/antonds83/posts/794296517285448?pnref=story

Может у него есть какой-то ранк ресурса внутренний. А может баги в разработке FB, изредка всплывающие.

Ну да ладно.  
idler
4 Февраля 2015 8:46
og:image работает железно, насколько мне показалось.
В таком виде:
<met a property="og:image" content="/upload/iblock/a40/a40625f0afa1ea691cae6f5fe9910c7e.jpg" />

У ФБ бывают свои странности с кэширование и прочим.
Те если идет процесс разработки и отладки, то всякое лезет)

Но когда все стабильно уже - og:image пашет
Алексей Мокрушин
4 Февраля 2015 8:56
Антон "Выж программист" ))) у фейсбука есть секция для программистов, там описан и интервал кеширования/обновления информации и требования к картинкам (рекомендуемые изображения >300px по ширине, а лучше больше - им прерогатива отдается, даже если в og:image будет нужная картинка но меньшей величины, значит вероятность "подгребания" первичной картинки со страницы большего размера очень высока
Вот пример заголовков одной из статей блога
<met a property="og:image" content="">
<met a property="og:title" content="Убийца времени номер один: «это не занимает много времени»">
<met a property="og:Description" content="Скоро будет большой пост о планировании рабочего времени. Поделюсь опытом, советами. А пока факт. Я сейчас активно борюсь за время, ищу его убийц. Решил точнее анализировать каждый день, чтобы понять причины. Решил посмотреть сколько я трачу времени ...">
<met a property="og:url" content=".../dev/the-organization-of-time-zatrocca/">
<met a property="og:image" content="....upload/main/049/salvador-dali-the-persistence-of-memory.jpg">
Как видно 2 метатега и один из них почему-то пустой )

Есть еще один лайфхак: как можно выше на странице ставить нужную картинку в хорошем размере >600px, но ужимая средствfми <img> до 1 пикселя. Соцсети игнорируют ваши размеры - а берут истинный размер картинки. Тестируйте.

П.С. Ну и хтмл префикс не тот -  http://ogp.me/
Дима
4 Февраля 2015 12:39
Имеет смысл проверять ссылки для расшаривания в [в этом месте была бы ссылка на девелоперский инструмент фейсбука, но ваш сайт ее не пропустил] — если ФБ заругается, то будет подсасывать данные непредсказуемо. У вас как раз тот случай.
Антон
4 Февраля 2015 12:57
developers.face_book_.com/tools/debug/og/object/
позваляет удобно скинуть кеш ФБ (например когда подсунул новые картинки), да и вообще для дебага полезно - показывает почему и какая картинка взялась или нет.

P.S. Сообщение содержит запрещенный домен developers.....
так что урл поменять :)
Николай
4 Февраля 2015 13:44
Image Optimization for Link Page Posts
Если изображение больше, чем 600 x 315 - будет отображаться большая картинка.
Антон Долганин
8 Февраля 2015 12:58
Всем спасибо, господа, тайна Facebook разгадана.  

Все просто:
  • Ставьте og:image, чтобы наверняка.
  • Кеш, всему виной конечно же кеш. Если пост свежайший, то добавьте ссылку в форму Facebook, тот подгрузит ссылку, почти наверняка БЕЗ картинки. Чуть-чуть подождите, секунд несколько. Обновите страницу FB. Можно публиковать.
  • В картинке не должно быть спец.символов. В частности пробелов.
Гаврил Скрябин
10 Февраля 2015 10:29
Помните, я Вам писал (маркетплейс.1с-битрикс.ru/solutions/asd.share/):
__________________________________________________________________________
Гаврил Скрябин 10.03.2014
Я тут голову себе уже сломал с выводом картинки в Facebook - никак не получается, пробовал всяко-разно (инструкцию перечитал вдоль и поперек). На всех сайтах где ставил - не выводится картинка :-( Помогите, плиз, с адрес.сайта.ру

Антон Долганин (разработчик) 10.03.2014
Гаврил, у вас не передается картинка
Что-то недопередали. К сожалению, тут помочь не смогу.
__________________________________________________________________________

Вот недавно изменил как описано здесь и все заработало :-) - дев.1с-битрикс.ru/community/webdev/user/30640/blog/
Как Вы и сказали, - дело в кеше
Антон Долганин
11 Февраля 2015 14:01
Странно. Тот компонент шаринга должен полноценно передать все картинки в теги (что собственно и описано в посте). Но дело оказалось все равно в кеше, да.
Дмитрий
24 Марта 2015 9:29
Facebook использует OpenGraph
http://ydmitriy. ru/blog/sotsialnye-meta-tegi/
.
Антон Долганин
24 Марта 2015 10:18
Дмитрий
25 Марта 2015 7:54
...и поэтому корректность отображения ссылки на статью лучше проверять соответствующим валидатором. Он покажет как действительно все должно отображаться. Сразу стало бы понятно, в верстке проблема или в фэйсбуке :D
Антон Долганин
25 Марта 2015 8:19
Вы не читали пост (после UPD по крайней мере). Проблема как раз была в фейсбуке.
Вера
21 Января 2016 11:29
Всем добрый день! Так фэйсбук может ещё картинку вообще не по теме постав  выставить. Уже столько раз с этим сталкивалась. Делишься какой-нибудь ссылкой, а он картинку не из статьи сайта кидает, а вообще ту, которая  сбоку стояла как реклама. Или вообще из другой статьи этого же  может кинуть картинку.
Детворам
9 Февраля 2018 21:57
Делаю пост в ФБ со ссылкой на видео  YouTubе, всегда некоррекьное отображение превью, хотя изображение  п ревью достаточно большое делаю 1920 на 1080.