Не могу понять по какому принципу Facebook цепляет такую большую картинку при шаринге ссылки. Но есть подозрение.
Наверное, многие пользователи facebook встречали такое красивое оформление ссылки при постинге:
Вот . Думаете всему виной og:image? А может сама большая картинка? Ничего подобного, посмотрите на .
Шарим:
Все то же самое, тот же ресурс, та же картинка. Но облом.
Причем! Если отмотать назад в моем аккаунте FB, то увидим, что первый постинг оригинального поста тоже привел к фейлу:
Какие выводы я сделал? FB замеряет или активность перехода по ссылке, или кол-во лайков, и только после этого САМ подставляет большую картинку при постинге.
Как по мне, абсолютное отсутствие логики у FB-вев.
Буду рад какому-то скрытому хаку, о котором я не знаю.
UPD:
Всем спасибо, господа, тайна Facebook разгадана.
Все просто:
Ставьте og:image, чтобы наверняка.
Кеш, всему виной конечно же кеш. Если пост свежайший, то добавьте ссылку в форму Facebook, тот подгрузит ссылку, почти наверняка БЕЗ картинки. Чуть-чуть подождите, секунд несколько. Обновите страницу FB. Можно публиковать.
В картинке не должно быть спец.символов. В частности пробелов.
Антон "Выж программист" ))) у фейсбука есть секция для программистов, там описан и интервал кеширования/обновления информации и требования к картинкам (рекомендуемые изображения >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 пикселя. Соцсети игнорируют ваши размеры - а берут истинный размер картинки. Тестируйте.
Имеет смысл проверять ссылки для расшаривания в [в этом месте была бы ссылка на девелоперский инструмент фейсбука, но ваш сайт ее не пропустил] — если ФБ заругается, то будет подсасывать данные непредсказуемо. У вас как раз тот случай.
developers.face_book_.com/tools/debug/og/object/
позваляет удобно скинуть кеш ФБ (например когда подсунул новые картинки), да и вообще для дебага полезно - показывает почему и какая картинка взялась или нет.
P.S. Сообщение содержит запрещенный домен developers.....
так что урл поменять
Кеш, всему виной конечно же кеш. Если пост свежайший, то добавьте ссылку в форму Facebook, тот подгрузит ссылку, почти наверняка БЕЗ картинки. Чуть-чуть подождите, секунд несколько. Обновите страницу FB. Можно публиковать.
В картинке не должно быть спец.символов. В частности пробелов.
Помните, я Вам писал (маркетплейс.1с-битрикс.ru/solutions/asd.share/):
__________________________________________________________________________
Гаврил Скрябин 10.03.2014
Я тут голову себе уже сломал с выводом картинки в Facebook - никак не получается, пробовал всяко-разно (инструкцию перечитал вдоль и поперек). На всех сайтах где ставил - не выводится картинка Помогите, плиз, с адрес.сайта.ру
Антон Долганин (разработчик) 10.03.2014
Гаврил, у вас не передается картинка
Что-то недопередали. К сожалению, тут помочь не смогу.
__________________________________________________________________________
Вот недавно изменил как описано здесь и все заработало - дев.1с-битрикс.ru/community/webdev/user/30640/blog/
Как Вы и сказали, - дело в кеше
Странно. Тот компонент шаринга должен полноценно передать все картинки в теги (что собственно и описано в посте). Но дело оказалось все равно в кеше, да.
...и поэтому корректность отображения ссылки на статью лучше проверять соответствующим валидатором. Он покажет как действительно все должно отображаться. Сразу стало бы понятно, в верстке проблема или в фэйсбуке
Всем добрый день! Так фэйсбук может ещё картинку вообще не по теме постав выставить. Уже столько раз с этим сталкивалась. Делишься какой-нибудь ссылкой, а он картинку не из статьи сайта кидает, а вообще ту, которая сбоку стояла как реклама. Или вообще из другой статьи этого же может кинуть картинку.
Может у него есть какой-то ранк ресурса внутренний. А может баги в разработке FB, изредка всплывающие.
Ну да ладно.
В таком виде:
Те если идет процесс разработки и отладки, то всякое лезет)
Но когда все стабильно уже - og:image пашет
Вот пример заголовков одной из статей блога
Есть еще один лайфхак: как можно выше на странице ставить нужную картинку в хорошем размере >600px, но ужимая средствfми <img> до 1 пикселя. Соцсети игнорируют ваши размеры - а берут истинный размер картинки. Тестируйте.
П.С. Ну и хтмл префикс не тот -
позваляет удобно скинуть кеш ФБ (например когда подсунул новые картинки), да и вообще для дебага полезно - показывает почему и какая картинка взялась или нет.
P.S. Сообщение содержит запрещенный домен developers.....
так что урл поменять
Если изображение больше, чем 600 x 315 - будет отображаться большая картинка.
Все просто:
__________________________________________________________________________
Гаврил Скрябин 10.03.2014
Я тут голову себе уже сломал с выводом картинки в Facebook - никак не получается, пробовал всяко-разно (инструкцию перечитал вдоль и поперек). На всех сайтах где ставил - не выводится картинка
Антон Долганин (разработчик) 10.03.2014
Гаврил, у вас не передается картинка
Что-то недопередали. К сожалению, тут помочь не смогу.
__________________________________________________________________________
Вот недавно изменил как описано здесь и все заработало
Как Вы и сказали, - дело в кеше