Як я можу встановити зображення веб-сайту, яке відображатиметься як попередній перегляд у Facebook?

156

Якщо ви поділитеся посиланням у facebook, він автоматично знайде зображення на веб-сайті та випадково вибере одне у вигляді попереднього перегляду. Як можна впливати на попередній перегляд зображення? Коли людина ділиться посиланням на веб-сайт у своєму facebook?

image facebook preview

— Позначити
джерело

Відповіді:

234

1. Додайте розширення простору імен Open Graph XML до своєї декларації HTML

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:fb="http://ogp.me/ns/fb#">

2. Всередині <head></head>використовуйте наступний метатег, щоб визначити зображення, яке ви хочете використовувати

<meta property="og:image" content="fully_qualified_image_url_here" />

Детальніше про протокол відкритого графіка читайте тут.

Зробивши вищесказане, використовуйте на Facebook «Об’єкт налагодження», якщо зображення не відображається правильно. Також зауважте, що перший раз, коли він поділився, він досі не відображатиметься, якщо не вказані також висота та ширина, див. Поділитися у Facebook - Ескіз не відображається вперше

— Шеф
джерело

@Martin Я не знаю. Можливо, вони є, але я не бачу цього згадувати в Документах протоколу Open Graph . Спробуйте налагоджувач, щоб побачити, чи відображаються кешовані значення для вашого сайту. Мабуть, є ще одне запитання щодо програми " Відкрита графіка " у Facebook, що не очищає кеш, пов'язаний з цим питанням.

— Шеф

Коментар @KDog: Проблеми? Перевірте свої коди на інструменті налагодження у Facebook. Образ кеша Facebook, заголовок та текст тексту кешу. Я змінив назву, додавши xml на свій веб-сайт, і тому, що випадково створив кілька помилок перевірки, нічого не змінилося в попередньому перегляді акцій Facebook. Facebook використовував дійсний кеш, а не показував недійсні нові дані. Мені вдалося усунути ці помилки за допомогою developers.facebook.com/tools/debug . Після цього моє нове заголовок та зображення з’являються одразу.

— Джеремі Томпсон

@ScotterMonkey: Так, така очікувана поведінка. Ви можете сказати FB, який вміст використовувати. До речі, ви можете додати кілька елементів <meta property="og:image" content="your_image_here" />між headелементом, щоб мати можливість вибору, коли ви публікуєте повідомлення на FB.

— Шеф

Пропустив цю річ із fb у html-декларації. Врятував мій день! (навіть якщо це трирічна посада). Дуже дякую!

— bestprogrammerintworld

Посилання на вміст - це фактичний URL - не відносне посилання, яке я дізнався. тобто http://mywebsite.com.au/Images/prettypic.png, не/Images/prettypic.png

— JumpingJezza

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

— davea0511
джерело

Якщо ви використовуєте Weebly , почніть з перегляду опублікованого сайту та клацання правою кнопкою миші на зображення, щоб скопіювати зображення зображення. Потім у Weebly перейдіть до редагування сайту, сторінки, натисніть сторінку, яку ви хочете використовувати, Налаштування SEO, під заголовком Код введіть код із відповіді Шефа:

<meta property="og:image" content="/uploads/..." />

просто замінюючи / завантажуючи / ... скопійованою адресою зображення. Клацніть Опублікувати, щоб застосувати зміни.

Ви можете пропустити частину відповіді Шефа щодо простору імен, оскільки це вже встановлено за замовчуванням у Weebly.

— крубо
джерело