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

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
— dcorking

Ответы:

119

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

<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

— WyrdNEXUS
источник
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
Я добавил теги og в свой код, и когда я тестировал его с помощью инструмента отладчика объектов og в facebook, он показывает мне правильную информацию, которую я сохранил в тегах og, но когда я пытаюсь связать страницу в моей учетной записи fb, он показывает только кешированная копия. Сколько времени fb хранит кешированную копию? Есть ли другой способ сбросить кешированную копию?
— KAsh
Просто чтобы вы знали, единственный способ добавить изображение в сообщение при использовании AppLinks ( applinks.org ) в приложении facebook - это использовать тег <link>, а тег <meta> с og: image НЕ будет работать .
— Emerino
Здесь есть список типов и т.д., а также другая полезная информация.
— Wilf
61

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

  1. Как сказал EightyEight, убедитесь, что ваш HTML действителен - и то же самое касается вашего javascript и серверного кода (PHP, ASP и т. Д.). У меня была небольшая ошибка PHP в фрагменте кода, который выполнялся как отдельный вызов сервера с главной страницы. Из-за ряда странных совпадений этот код генерировал ошибку 500 - но ТОЛЬКО для IE6 и механизмов строгого анализа, таких как валидатор W3C и сканер страниц Facebook. Проблема не проявлялась в современных браузерах (Chrome 4, FF 3.5, IE 8 и т. Д.), Поэтому я не сразу ее заметил, но старые / более строгие клиенты каждый раз показывали 500, и это была основная причина, по которой FB не работал. не сканировал нашу страницу (когда все остальное казалось правильным).

  2. Что касается ответа Рэнди, он прав в том, что Facebook будет хранить старую кэшированную копию вашей страницы еще долго после того, как вы ее обновили. FB утверждает, что он держится всего 24 часа, но я испытал гораздо больше времени, чем это. К счастью, FB выпустил свой инструмент «URL Linter», который покажет вам предварительный просмотр того, как ваша страница будет выглядеть при публикации на FB, и заставит FB немедленно обновить свой кеш вашей страницы. Это был инструмент для спасения жизни. Вы можете найти его на http://developers.facebook.com/tools/lint/

  3. Что касается инструмента URL Linter, имейте в виду, что каждый вариант URL-адреса кэшируется отдельно на Facebook, поэтому «www.example.com» - это не то же самое, что «example.com». Кроме того, уникальные заглавные буквы также сохраняются, поэтому "ExampleOne.com" не то же самое, что "exampleone.com". (Это привело к большой путанице между мной и моим клиентом, когда мне показалось, что кеш был обновлен нормально, и клиент утверждал, что не видит обновлений. Оказалось, что я смотрел на exampleone.com и использовал ЛИНТЕР для обновления кеша, но они смотрели на exampleOne.com, который я не отправлял в ЛИНТЕР. В итоге я отправил в ЛИНТЕР довольно много вариантов URL, чтобы охватить основы.)

  4. Совет WyrdNEXUS использовать тег ссылки image_src точен. Это позволяет вам быть уверенным, что FB скребет для вашей страницы наилучшее возможное изображение. Есть несколько различных рекомендаций о том, какие спецификации должен иметь файл изображения, но я успешно использовал квадратное изображение 128 пикселей и видел, как изображение размером 130x97 также проходит. Вот официальная документация Facebook с http://developers.facebook.com/docs/reference/plugins/like/ :

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

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

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

— OneRuler
источник
Я боролся в течение нескольких дней и неправильно обновлял мой эскиз. Инструмент Facebook Linter сразу решил мою проблему - он заставил facebook обновить свой кеш! Ура!
— Hady
Большое спасибо за этот инструмент для линтера. В некоторых сообщениях в моем блоге были изображения, в других - нет, несмотря на то, что это сайт, управляемый базой данных. Помещение URL-адреса страницы-нарушителя в URL-ЛИНТЕР заставило его кэшировать изображение! У-У-У!
— Кристина Чайлдс
4
инструмент lint изменил название. теперь это просто отладка : developers.facebook.com/tools/debug - насколько я могу судить, это tl; dr версия всего этого: просто используйте инструмент!
— cregox
11

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

ШАГ 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 = ссылка на ваш сайт

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

— Gaurav123
источник
Пожалуйста, не публикуйте один и тот же ответ на несколько вопросов: либо он не подходит для всех, либо вопросы дублируются, и их следует пометить / закрыть как таковые.
— kleopatra
Привет, Клеопатра, я думал опубликовать ответ, чтобы помочь другим. Я думаю, ваша точка зрения полностью верна. Я позабочусь об этом. Спасибо, друг
— Gaurav123
@ Gaurav123 тестовая ссылка мертва. Тем не менее, я проверил это, написав себе на Facebook. Большое спасибо за очень полезный ответ!
— gsamaras
2

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

— Рэнди
источник
1

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

— raRaRa
источник
1

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

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

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

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

— Карен Куф
источник
0

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

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

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

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

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

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

— Милон Патовари
источник
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.