Зображення з посиланням на 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 плюс, тут найкраща посилання посилання я міг би знайти: stackoverflow.com/questions/7985398 / ...
— cregox
— коріння

Відповіді:

119

Найпростіший спосіб - це просто тег посилання:

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

Але є кілька інших речей, які ви можете додати на свій сайт, щоб зробити його більш зручним для соціальних мереж:

Відкрити теги графіків

Теги 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, кнопка "Подобається" розміщує посилання og:urlзамість URL-адреси в коді кнопки "Подобається".
  • og:site_name - Зрозуміле для користувача ім'я вашого сайту, наприклад, "IMDb".
  • fb:adminsабо fb:app_id- розділений комами список ідентифікаторів Facebook адміністраторів сторінок або ідентифікатора програми Facebook Platform. Як мінімум, включайте лише власний ідентифікатор Facebook.

Додаткову інформацію про теги Open Graph та деталі щодо адміністрування вашої сторінки можна знайти в документації протоколу Open Graph.

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

— WyrdNEXUS
джерело
5
Я отримав цю помилку за допомогою інструмента для ворсу. 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
— Тревор
я додав теги og у свій код, і коли я тестував його за допомогою інструмента налагодження об’єктів og facebook, він показує мені правильну інформацію, яку я зберігав у тегах og, але коли я намагаюся зв’язати сторінку в моєму обліковому записі fb, він показує лише кешована копія. Скільки часу fb зберігає кешовану копію? Чи існує інший спосіб очищення кешованої копії?
— KAsh
Щоб повідомити вас, єдиний спосіб додати зображення до публікації під час використання AppLinks ( applinks.org ) у програмі facebook - це використовувати тег <link>, використовуючи тег <meta> з og: image НЕ працюватиме .
— emerino
Тут є список типів тощо, а також є інша корисна інформація.
— Вільф
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 і використовував Linter для оновлення кеш-пам’яті, але вони дивилися на exampleOne.com, який я не надсилав Linter. В результаті, я в кінцевому підсумку подав чимало варіантів URL-адреси Linter лише для покриття основ.)

  4. Порада WyrdNEXUS використовувати тег посилання image_src є спотовою. Це дозволяє вам бути впевненим, що FB вишкрібає найкраще з можливих зображень для вашої сторінки. Існують різні вказівки щодо специфікацій, які повинен мати файл зображення, але я успішно використав квадратне зображення розміром 128 пікселів і побачив, як це робить і зображення розміром 130 х 97. Ось офіційна документація Facebook з http://developers.facebook.com/docs/reference/plugins/like/ :

    Зображення повинні мати розмір не менше 50 пікселів на 50 пікселів. Найкраще працюють квадратні зображення, однак дозволяється використовувати зображення шириною до трьох разів, ніж вони високі.

    Очевидно, що FB змінить розмір великого зображення для вас, але майже завжди ви отримаєте кращі результати, якщо заздалегідь зміните розмір.

  5. Щодо посилання Майка Купера на статтю eHow, уникайте кроку 1 у цій статті. Це була слушна порада, коли стаття була написана і коли Майк розмістив посилання, але тепер краще використовувати інструмент URL Linter для попереднього перегляду, як ваша сторінка буде виглядати під час спільного використання. Використовуючи Linter, ви не змусите FB кешувати (потенційно) погану копію сторінки, перш ніж ви отримаєте можливість її налаштувати.

— OneRuler
джерело
Я боровся цілими днями і не правильно оновлював ескіз. Інструмент Facebook Linter негайно вирішив мою проблему - він отримав Facebook для оновлення кешу! Ура!
— Хаді
ЩИРА ДЯКУЮ за цей інструмент лінтера. Деякі публікації в моєму щоденнику показували зображення, інші - незважаючи на те, що вони працюють на базі даних. Вставлення URL-адреси сторінки, що порушує, у URL Linter змусило її кешувати зображення! Ву-Ху!
— Крістіна Чайлдс
4
інструмент lint змінив свою назву. тепер це просто налагодження : developers.facebook.com/tools/debug - з усього, що я можу сказати, це tl; dr версія всього цього: просто використовуйте інструмент!
— cregox
11

Щоб змінити заголовок, опис та зображення, нам потрібно додати кілька мета-тегів під тегом head.

КРОК 1: Додайте мета-теги під тегом head

<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 = посилання на ваш веб-сайт

НАСЛАДУЙТЕ !!!!

— Гаурав123
джерело
Будь ласка, не публікуйте однакову відповідь на кілька запитань: або вона не підходить для всіх, або питання є дублікатами, які слід позначити / закрити як такі.
— 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.

— karen kouf
джерело
0

Спробуйте використати щось подібне:

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

Здається, це прекрасно працює у Firefox, якщо ви використовуєте повний шлях до вашого зображення.

Проблема полягає в тому, що він з якихось причин зміщується вертикально вниз. Зображення 200 х 200, як рекомендується десь я читав.

— користувач2494810
джерело
Я маю намір опублікувати код для тегу посилання, який не розміщував, бо я дурний. Вибачте.
— user2494810
-1

Якщо ви використовували будь-який плагін для seo, то перевірте 1-е налаштування вашого SEO-плагіна. Тоді з’ясуйте налаштування Noindex, якщо Enable Media for Noindex, а потім вимкніть його.

— Мілон Патоварі
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.