Изображение ссылки на сообщение в Facebook

Question 1

Когда кто-то публикует ссылку на facebook, сценарий обычно сканирует эту ссылку на наличие изображений и отображает миниатюру рядом с публикацией. Однако для некоторых URL (включая мой) FB, похоже, ничего не улавливает, несмотря на то, что на этой странице есть несколько изображений.

Я читал, что FB предпочитает тег rel "image_src" для изображения, которое пользователь хочет указать, но это также не создает миниатюру для моего сайта.

Мой URL-адрес идет непосредственно в DNS и не пересылается, поэтому я не думаю, что это может быть проблемой.

Кто-нибудь знает, почему FB не может генерировать эскизы с моего сайта?

Question 2

Самый простой способ - это просто тег ссылки:

<link rel="image_src" href="http://stackoverflow.com/images/logo.gif" />

Но есть и другие вещи, которые вы можете добавить на свой сайт, чтобы сделать его более удобным для социальных сетей:

Теги Open Graph

Теги Open Graph - это теги, которые вы добавляете в <head>свой веб-сайт, чтобы описать сущность, которую представляет ваша страница, будь то группа, ресторан, блог или что-то еще.

Тег Open Graph выглядит так:

<meta property="og:tag name" content="tag value"/>

Если вы используете теги Open Graph, требуются следующие шесть:

og:title - Название объекта.
og:type- Тип сущности. Вы должны выбрать тип из списка типов Open Graph.
og:image- URL-адрес изображения, представляющего объект. Изображения должны быть не менее 50 на 50 пикселей. Лучше всего подходят квадратные изображения, но вы можете использовать изображения, ширина которых в три раза превышает их высоту.
og:url- Канонический постоянный URL-адрес страницы, представляющей объект. Когда вы используете теги Open Graph, кнопка Like отправляет ссылку на og:urlвместо URL-адреса в коде кнопки Like.
og:site_name - Удобочитаемое имя вашего сайта, например «IMDb».
fb:adminsили fb:app_id- разделенный запятыми список идентификаторов администраторов страниц Facebook или идентификаторов приложений платформы Facebook. Как минимум, укажите только свой собственный идентификатор Facebook.

Дополнительную информацию о тегах Open Graph и подробности об администрировании страницы можно найти в документации протокола Open Graph.

http://developers.facebook.com/docs/reference/plugins/like

Question 3

Я знаю, что это старый вопрос, но недавно я столкнулся с той же проблемой и пару недель обдумывал ее. Многочисленные поисковые запросы в Google дали много полезной информации, но большая часть ее была сосредоточена на тегах Open Graph, которые мне было неинтересно использовать. Оказалось, что на моем сайте было несколько проблем, но вот некоторые из основных.

Как сказал EightyEight, убедитесь, что ваш HTML действителен - и то же самое касается вашего javascript и серверного кода (PHP, ASP и т. Д.). У меня была небольшая ошибка PHP в фрагменте кода, который выполнялся как отдельный вызов сервера с главной страницы. Из-за ряда странных совпадений этот код генерировал ошибку 500 - но ТОЛЬКО для IE6 и механизмов строгого анализа, таких как валидатор W3C и сканер страниц Facebook. Проблема не проявлялась в современных браузерах (Chrome 4, FF 3.5, IE 8 и т. Д.), Поэтому я не сразу ее заметил, но старые / более строгие клиенты каждый раз показывали 500, и это была основная причина, по которой FB не работал. не сканировал нашу страницу (когда все остальное казалось правильным).
Что касается ответа Рэнди, он прав в том, что Facebook будет хранить старую кэшированную копию вашей страницы еще долго после того, как вы ее обновили. FB утверждает, что он держится всего 24 часа, но я испытал гораздо больше времени, чем это. К счастью, FB выпустил свой инструмент «URL Linter», который покажет вам предварительный просмотр того, как ваша страница будет выглядеть при публикации на FB, и заставит FB немедленно обновить свой кеш вашей страницы. Это был инструмент для спасения жизни. Вы можете найти его на http://developers.facebook.com/tools/lint/
Что касается инструмента URL Linter, имейте в виду, что каждый вариант URL-адреса кэшируется отдельно на Facebook, поэтому «www.example.com» - это не то же самое, что «example.com». Кроме того, уникальные заглавные буквы также сохраняются, поэтому "ExampleOne.com" не то же самое, что "exampleone.com". (Это привело к большой путанице между мной и моим клиентом, когда мне показалось, что кеш был обновлен нормально, и клиент утверждал, что не видит обновлений. Оказалось, что я смотрел на exampleone.com и использовал ЛИНТЕР для обновления кеша, но они смотрели на exampleOne.com, который я не отправлял в ЛИНТЕР. В итоге я отправил в ЛИНТЕР довольно много вариантов URL, чтобы охватить основы.)
Совет WyrdNEXUS использовать тег ссылки image_src точен. Это позволяет вам быть уверенным, что FB скребет для вашей страницы наилучшее возможное изображение. Есть несколько различных рекомендаций о том, какие спецификации должен иметь файл изображения, но я успешно использовал квадратное изображение 128 пикселей и видел, как изображение размером 130x97 также проходит. Вот официальная документация Facebook с http://developers.facebook.com/docs/reference/plugins/like/ :

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

Очевидно, что FB изменит размер большого изображения за вас, но вы почти всегда получите лучшие результаты, если измените его размер заранее.
Что касается ссылки Майка Купера на статью eHow, избегайте использования шага №1 в этой статье. Это был действительный совет, когда была написана статья и когда Майк опубликовал ссылку, но теперь лучше использовать инструмент URL Linter для предварительного просмотра того, как ваша страница будет выглядеть при публикации. Используя ЛИНТЕР, вы не заставите FB кэшировать (потенциально) плохую копию страницы, прежде чем у вас появится возможность ее настроить.

Question 4

Используйте линттер facebook, доступный здесь. http://developers.facebook.com/tools/lint/

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

Или попробуйте это - https://developers.facebook.com/tools/debug

Question 5

Чтобы изменить заголовок, описание и изображение, нам нужно добавить несколько метатегов под тегом заголовка.

ШАГ 1. Добавьте метатеги под тегом заголовка

<html>
<head>
<meta property="og:url" content="http://www.test.com/" />
<meta property="og:image" content="http://www.test.com/img/fb-logo.png" />
<meta property="og:title" content="Prepaid Phone Cards, low rates for International calls with Lucky Prepay" />
<meta property="og:description" content="Cheap prepaid Phone Cards. Low rates for international calls anywhere in the world." />

СЛЕДУЮЩИЙ ШАГ: нажмите на ссылку ниже https://developers.facebook.com/tools/debug

Добавьте свой URL в текстовое поле (например, http://www.test.com/ ), где вы упомянули теги. Нажмите кнопку DEBUG.

Это сделано.

Вы можете проверить здесь https://www.facebook.com/sharer/sharer.php?u=http://www.test.com/

В указанном выше URL u = ссылка на ваш сайт

НАСЛАЖДАТЬСЯ !!!!

Question 6

попробуйте это: http://www.ehow.com/how_4938148_thumbnail-show-up-facebook-share.html

Question 7

Действителен ли HTML-код сайта? Запустите его через службу проверки w3c .

Question 8

Фактически, если вы уже пытались связать эту страницу в Facebook ПЕРЕД добавлением ссылки «image_src», Facebook продолжит использовать старую кэшированную копию и даже не увидит ваши изменения. Попробуйте изменить URL-адрес, удалив или добавив «www», или продублируйте свою страницу, чтобы проверить это.

Question 9

Я заметил, что Facebook не берет эскизы с веб-сайтов, если они начинаются с https. Возможно, это ваш случай?

Question 10

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

Question 11

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

FB, похоже, больше не любит длинные URL-адреса - если вы используете сокращение URL-адресов, такое как goo.gl или bitly.com, миниатюра из вашей ссылки / сообщения появится в вашем обновлении FB.

Question 12

Попробуйте использовать что-то вроде этого:

<link rel="image_src" href="http://yoursite.com/graphics/yourimage.jpg" /link>`

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

Проблема в том, что он по какой-то причине смещается вниз по вертикали. Изображение 200 x 200, как я рекомендовал где-то читать.

Question 13

Если вы использовали какой-либо плагин для SEO, проверьте сначала настройки вашего плагина seo. Затем найдите параметр Noindex, если Enable Media for Noindex, затем отключите его.

Answer 1

95

Когда кто-то публикует ссылку на facebook, сценарий обычно сканирует эту ссылку на наличие изображений и отображает миниатюру рядом с публикацией. Однако для некоторых URL (включая мой) FB, похоже, ничего не улавливает, несмотря на то, что на этой странице есть несколько изображений.

Я читал, что FB предпочитает тег rel "image_src" для изображения, которое пользователь хочет указать, но это также не создает миниатюру для моего сайта.

Мой URL-адрес идет непосредственно в DNS и не пересылается, поэтому я не думаю, что это может быть проблемой.

Кто-нибудь знает, почему FB не может генерировать эскизы с моего сайта?

facebook thumbnails ГЕОЧЕТ
источник

Было бы полезно, если бы вы дали нам ссылку на свой сайт (или другой, который не работает) - это может спровоцировать некоторые идеи.

Ник Фортескью,

Здесь вы можете увидеть, как это работает! Я создаю его с помощью PHP + jQuery. Исходный код доступен для скачивания. Надеемся, вам понравится! lab.leocardz.com/facebook-link-preview-php--jquery

Леонардо Кардосо

и если вы хотите сделать то же самое в Google Plus, вот лучшая ссылка, которую я смог найти: stackoverflow.com/questions/7985398/…

cregox

возможный дубликат Как Facebook Sharer выбирает изображения?

dcorking

Answer 2

Было бы полезно, если бы вы дали нам ссылку на свой сайт (или другой, который не работает) - это может спровоцировать некоторые идеи.

Ник Фортескью,

Answer 3

Здесь вы можете увидеть, как это работает! Я создаю его с помощью PHP + jQuery. Исходный код доступен для скачивания. Надеемся, вам понравится! lab.leocardz.com/facebook-link-preview-php--jquery

Леонардо Кардосо

Answer 4

и если вы хотите сделать то же самое в Google Plus, вот лучшая ссылка, которую я смог найти: stackoverflow.com/questions/7985398/…

cregox

Answer 5

возможный дубликат Как Facebook Sharer выбирает изображения?

dcorking

Answer 6

Самый простой способ - это просто тег ссылки:

<link rel="image_src" href="http://stackoverflow.com/images/logo.gif" />

Но есть и другие вещи, которые вы можете добавить на свой сайт, чтобы сделать его более удобным для социальных сетей:

Теги Open Graph

Теги Open Graph - это теги, которые вы добавляете в <head>свой веб-сайт, чтобы описать сущность, которую представляет ваша страница, будь то группа, ресторан, блог или что-то еще.

Тег Open Graph выглядит так:

<meta property="og:tag name" content="tag value"/>

Если вы используете теги Open Graph, требуются следующие шесть:

og:title - Название объекта.
og:type- Тип сущности. Вы должны выбрать тип из списка типов Open Graph.
og:image- URL-адрес изображения, представляющего объект. Изображения должны быть не менее 50 на 50 пикселей. Лучше всего подходят квадратные изображения, но вы можете использовать изображения, ширина которых в три раза превышает их высоту.
og:url- Канонический постоянный URL-адрес страницы, представляющей объект. Когда вы используете теги Open Graph, кнопка Like отправляет ссылку на og:urlвместо URL-адреса в коде кнопки Like.
og:site_name - Удобочитаемое имя вашего сайта, например «IMDb».
fb:adminsили fb:app_id- разделенный запятыми список идентификаторов администраторов страниц Facebook или идентификаторов приложений платформы Facebook. Как минимум, укажите только свой собственный идентификатор Facebook.

Дополнительную информацию о тегах Open Graph и подробности об администрировании страницы можно найти в документации протокола Open Graph.

http://developers.facebook.com/docs/reference/plugins/like

Answer 7

5

Я получил эту ошибку от инструмента lint.

All the images referenced by og:image must be at least 200px in both dimensions. Please check all the images with tag og:image in the given url and ensure that it meets the minimum specification.

. Just a fyi

Trevor

Answer 8

Я добавил теги og в свой код, и когда я тестировал его с помощью инструмента отладчика объектов og в facebook, он показывает мне правильную информацию, которую я сохранил в тегах og, но когда я пытаюсь связать страницу в моей учетной записи fb, он показывает только кешированная копия. Сколько времени fb хранит кешированную копию? Есть ли другой способ сбросить кешированную копию?

KAsh

Answer 9

Просто чтобы вы знали, единственный способ добавить изображение в сообщение при использовании AppLinks ( applinks.org ) в приложении facebook - это использовать тег <link>, а тег <meta> с og: image НЕ будет работать .

Emerino

Answer 10

Здесь есть список типов и т.д., а также другая полезная информация.

Wilf

Answer 11

Я знаю, что это старый вопрос, но недавно я столкнулся с той же проблемой и пару недель обдумывал ее. Многочисленные поисковые запросы в Google дали много полезной информации, но большая часть ее была сосредоточена на тегах Open Graph, которые мне было неинтересно использовать. Оказалось, что на моем сайте было несколько проблем, но вот некоторые из основных.

Как сказал EightyEight, убедитесь, что ваш HTML действителен - и то же самое касается вашего javascript и серверного кода (PHP, ASP и т. Д.). У меня была небольшая ошибка PHP в фрагменте кода, который выполнялся как отдельный вызов сервера с главной страницы. Из-за ряда странных совпадений этот код генерировал ошибку 500 - но ТОЛЬКО для IE6 и механизмов строгого анализа, таких как валидатор W3C и сканер страниц Facebook. Проблема не проявлялась в современных браузерах (Chrome 4, FF 3.5, IE 8 и т. Д.), Поэтому я не сразу ее заметил, но старые / более строгие клиенты каждый раз показывали 500, и это была основная причина, по которой FB не работал. не сканировал нашу страницу (когда все остальное казалось правильным).
Что касается ответа Рэнди, он прав в том, что Facebook будет хранить старую кэшированную копию вашей страницы еще долго после того, как вы ее обновили. FB утверждает, что он держится всего 24 часа, но я испытал гораздо больше времени, чем это. К счастью, FB выпустил свой инструмент «URL Linter», который покажет вам предварительный просмотр того, как ваша страница будет выглядеть при публикации на FB, и заставит FB немедленно обновить свой кеш вашей страницы. Это был инструмент для спасения жизни. Вы можете найти его на http://developers.facebook.com/tools/lint/
Что касается инструмента URL Linter, имейте в виду, что каждый вариант URL-адреса кэшируется отдельно на Facebook, поэтому «www.example.com» - это не то же самое, что «example.com». Кроме того, уникальные заглавные буквы также сохраняются, поэтому "ExampleOne.com" не то же самое, что "exampleone.com". (Это привело к большой путанице между мной и моим клиентом, когда мне показалось, что кеш был обновлен нормально, и клиент утверждал, что не видит обновлений. Оказалось, что я смотрел на exampleone.com и использовал ЛИНТЕР для обновления кеша, но они смотрели на exampleOne.com, который я не отправлял в ЛИНТЕР. В итоге я отправил в ЛИНТЕР довольно много вариантов URL, чтобы охватить основы.)
Совет WyrdNEXUS использовать тег ссылки image_src точен. Это позволяет вам быть уверенным, что FB скребет для вашей страницы наилучшее возможное изображение. Есть несколько различных рекомендаций о том, какие спецификации должен иметь файл изображения, но я успешно использовал квадратное изображение 128 пикселей и видел, как изображение размером 130x97 также проходит. Вот официальная документация Facebook с http://developers.facebook.com/docs/reference/plugins/like/ :

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

Очевидно, что FB изменит размер большого изображения за вас, но вы почти всегда получите лучшие результаты, если измените его размер заранее.
Что касается ссылки Майка Купера на статью eHow, избегайте использования шага №1 в этой статье. Это был действительный совет, когда была написана статья и когда Майк опубликовал ссылку, но теперь лучше использовать инструмент URL Linter для предварительного просмотра того, как ваша страница будет выглядеть при публикации. Используя ЛИНТЕР, вы не заставите FB кэшировать (потенциально) плохую копию страницы, прежде чем у вас появится возможность ее настроить.

Answer 12

Я боролся в течение нескольких дней и неправильно обновлял мой эскиз. Инструмент Facebook Linter сразу решил мою проблему - он заставил facebook обновить свой кеш! Ура!

Hady

Answer 13

Большое спасибо за этот инструмент для линтера. В некоторых сообщениях в моем блоге были изображения, в других - нет, несмотря на то, что это сайт, управляемый базой данных. Помещение URL-адреса страницы-нарушителя в URL-ЛИНТЕР заставило его кэшировать изображение! У-У-У!

Кристина Чайлдс

Answer 14

4

инструмент lint изменил название. теперь это просто отладка : developers.facebook.com/tools/debug - насколько я могу судить, это tl; dr версия всего этого: просто используйте инструмент!

cregox

Answer 15

Используйте линттер facebook, доступный здесь. http://developers.facebook.com/tools/lint/

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

Или попробуйте это - https://developers.facebook.com/tools/debug

Answer 16

Чтобы изменить заголовок, описание и изображение, нам нужно добавить несколько метатегов под тегом заголовка.

ШАГ 1. Добавьте метатеги под тегом заголовка

<html>
<head>
<meta property="og:url" content="http://www.test.com/" />
<meta property="og:image" content="http://www.test.com/img/fb-logo.png" />
<meta property="og:title" content="Prepaid Phone Cards, low rates for International calls with Lucky Prepay" />
<meta property="og:description" content="Cheap prepaid Phone Cards. Low rates for international calls anywhere in the world." />

СЛЕДУЮЩИЙ ШАГ: нажмите на ссылку ниже https://developers.facebook.com/tools/debug

Добавьте свой URL в текстовое поле (например, http://www.test.com/ ), где вы упомянули теги. Нажмите кнопку DEBUG.

Это сделано.

Вы можете проверить здесь https://www.facebook.com/sharer/sharer.php?u=http://www.test.com/

В указанном выше URL u = ссылка на ваш сайт

НАСЛАЖДАТЬСЯ !!!!

Answer 17

Пожалуйста, не публикуйте один и тот же ответ на несколько вопросов: либо он не подходит для всех, либо вопросы дублируются, и их следует пометить / закрыть как таковые.

kleopatra

Answer 18

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

Gaurav123

Answer 19

@ Gaurav123 тестовая ссылка мертва. Тем не менее, я проверил это, написав себе на Facebook. Большое спасибо за очень полезный ответ!

gsamaras

Answer 20

6

попробуйте это: http://www.ehow.com/how_4938148_thumbnail-show-up-facebook-share.html

источник

Answer 21

2

Действителен ли HTML-код сайта? Запустите его через службу проверки w3c .

Восемьдесят восемь
источник

Answer 22

Фактически, если вы уже пытались связать эту страницу в Facebook ПЕРЕД добавлением ссылки «image_src», Facebook продолжит использовать старую кэшированную копию и даже не увидит ваши изменения. Попробуйте изменить URL-адрес, удалив или добавив «www», или продублируйте свою страницу, чтобы проверить это.

Answer 23

Я заметил, что Facebook не берет эскизы с веб-сайтов, если они начинаются с https. Возможно, это ваш случай?

Answer 24

1

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

Диего
источник

Answer 25

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

FB, похоже, больше не любит длинные URL-адреса - если вы используете сокращение URL-адресов, такое как goo.gl или bitly.com, миниатюра из вашей ссылки / сообщения появится в вашем обновлении FB.

Answer 26

Попробуйте использовать что-то вроде этого:

<link rel="image_src" href="http://yoursite.com/graphics/yourimage.jpg" /link>`

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

Проблема в том, что он по какой-то причине смещается вниз по вертикали. Изображение 200 x 200, как я рекомендовал где-то читать.

Answer 27

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

user2494810

Answer 28

Если вы использовали какой-либо плагин для SEO, проверьте сначала настройки вашего плагина seo. Затем найдите параметр Noindex, если Enable Media for Noindex, затем отключите его.

Изображение ссылки на сообщение в Facebook

Ответы: