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


12

Це питання про видавця Facebook . Коли я поділюсь посиланням, Facebook захопить текст, назвіть зображення із сайту та сконструює попередній перегляд для користувача. Потім користувач може редагувати попередній перегляд, вибравши одну з декількох мініатюр, а потім опублікувати це у своєму профілі Facebook.

Ось скріншот для ілюстрації пункту:

Знімок екрана з Facebook

Як додаток Publisher захоплює зображення та текст із Посилання? Чи є подібні додатки, які працюють для інших популярних веб-додатків, будь-яких додатків Google, блогів Wordpress тощо?

Я задав подібне запитання кілька місяців тому, і, схоже, Facebook використовує oEmbed , але, здається, oEmbed лише вкладає вміст. Я також читав, що oEmbed працює лише з постачальниками oEmbed. Видавець Facebook працює майже з усіма веб-сайтами.



@phwd: Схоже, @Edward говорить про помилку на своїй посаді. Він працював до "Але приблизно два тижні тому, ..."
Стефан Ласєскі

Відповіді:


10

Facebook використовуватиме будь-які метатеги відкритого графіка, якщо вони є для заголовка та зображення тощо (наприклад, og: назва). Документація у Facebook для протоколу Open Graph пояснює це детальніше:

Протокол Open Graph визначає чотири необхідні властивості:

og: title - Назва вашого об'єкта так, як вона повинна бути відображена у графіку, наприклад, "Скеля".

og: type - Тип об'єкта, наприклад, "фільм". Дивіться повний список підтримуваних типів.

og: image - URL-адреса зображення, яка повинна представляти ваш об’єкт у графіку. Зображення має бути не менше 50 пікселів на 50 пікселів і мати максимальне співвідношення сторін 3: 1.

og: url - канонічна URL-адреса вашого об’єкта, яка буде використовуватися як його постійний ідентифікатор у графіку, наприклад, http://www.imdb.com/title/tt0117500/ .

Крім того, ми розширили основні метадані, щоб додати два необхідних поля для з'єднання вашої сторінки з Facebook:

og: site_name - ім'я для Вашого веб-сайту, що читається людиною, наприклад, "IMDb".

fb: admins або fb: app_id - список розділених комами або ідентифікатори користувачів Facebook, або ідентифікатор програми Facebook Platform, яка адмініструє цю сторінку. Дійсно включити на свою сторінку як fb: admins, так і fb: app_id.

Також рекомендується включити наступне властивість, а також ці властивості з декількома частинами.

og: опис - опис вашої сторінки з одним до двох пропозицій.

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

Ви також можете скористатися налагоджувачем програми opengraph у фейсбуці, яка надасть інформацію про ваш попередній перегляд, а також (надзвичайно зручно) оновити кешоване посилання, якщо ви внесете зміни. Інакше ви можете внести зміни до посилання, яким ви хочете поділитися, і зміни не відображатимуться протягом днів:

https://developers.facebook.com/tools/debug


Вони використовуватимуть метатеги, якщо ви не надали теги відкритого графа. Теги OG є більш корисними, коли подобається веб-сторінка, оскільки вона створює сторінку у фейсбуці, а потім для сайту / URL
Umair Jabbar

4

Щоб сказати у фейсбуці, який текст та зображення потрібно забрати, потрібно додати конкретні мета-клавіші у голові сторінки.

    <meta name="title" content="title" />
    <meta name="description" content="description " />
    <link rel="image_src" href="thumbnail_image" / >

Я опублікував його деталі тут http://umairj.com/2010/10/modify-how-the-shared-item-appears-on-facebook/


1
Це цікаво, і ці метатеги є рекомендованою практикою для багатьох веб-майстрів (це допомагає пошуковим системам тощо). Проте подивіться на джерело для flowingdata.com/2010/09/15/… . Ця сторінка не містить цих тегів, а також <link rel=тег зображення на зображенні.
Стефан Ласєвський

@ Стефан, це дуже гарне питання, і що FB робить, якщо він не знаходить мета-теги нових тегів OpenGraph OG, то він збирає всі зображення та показує частину тексту з початку html цієї сторінки . Таким чином, користувач отримує вибір для зображень, але текст той самий. Крім того, відображаються лише ті зображення, які відповідають визначеним критеріям Facebook. співвідношення сторони
Умаїр Джаббар

1

Що для мене спрацювало - розмістити потрібне мініатюрне зображення на сторінці відразу після тегу і зробити його занадто малим, щоб побачити ..

<img src="imagename.jpg" width="1" height="1" />

Я не тестував його з висотою 0 і шириною 0, але, ймовірно, все одно буде працювати .. Це не гарантує, що користувач вибере це зображення ..

ТАКОЖ здається, що Facebook кешує ескізи на вашій сторінці і не перевіряє їх на нові. Спробуйте додати це на іншу сторінку вашого сайту, і ви побачите, що це працює.

Сподіваюсь, це допомагає.


0

Facebook використовує метатеги на сторінці, якою ви ділитесь, щоб визначити, яке зображення, заголовок та опис потрібно відображати під час публікації посилання. Синтаксис метатегів відповідає специфікації OpenGraph у Facebook .

Найважливіші метатеги, які потрібно визначити:

  • <meta property="og:title" content="The title of the sharing preview" />
  • $<meta property="og:description" content="The first few lines of content below the title" />
  • <meta property="og:image" content="http://site.com/your-image-1200x630px.jpg" />

Це, звичайно, працює лише в тому випадку, якщо ви повністю контролюєте веб-сайт, яким ви ділитесь. Якщо ви ділитесь зовнішнім посиланням (наприклад, новинною статтею), ви не маєте доступу до їх сайту і тому не можете змінити метатеги. Я використовую ShareKit.io , який дозволяє змінювати заголовок, опис та зображення будь-якого посилання, яким ви ділитесь, без необхідності поспіхувати з метатегами .


-1

Я б сказав, що відповідь на ваше запитання є досить складною, а також, швидше за все, чимось комерційною таємницею для Facebook. Їх здатність сканувати URL-адресу та підбирати відповідний вміст / медіа для відображення у потоці новин - одна з речей, яка робить їх послугу настільки унікальною та корисною для повсякденної людини, яка користується Facebook.

Це , так би мовити, я б сказав , що алгоритм НЕ буде дуже складним, він , ймовірно , використовує багато тих же правил Google використань до контенту зіскрібка з веб - сайтів ( у них є деякі загальні деталі опубліковані тут ). Я думаю, що потужність, що стоїть за видавцем, походить від безлічі спроб та помилок та перевірок інженерами Facebook.


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