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

393

При использовании Facebook Sharer, Facebook предложит пользователю возможность использовать 1 из нескольких изображений, взятых из источника, в качестве предварительного просмотра их ссылки. Как выбираются эти изображения и как я могу гарантировать, что любое конкретное изображение на моей странице всегда будет включено в этот список?

facebook facebook-opengraph facebook-sharer Сэмпсон
источник
Он действительно работает при использовании свойства meta, но это недопустимый HTML, который я нахожу очень странным! Попробуйте запустить его через валидатор, и вы увидите. Это сбивает с толку меня, почему на земле они не могут заставить это работать с действительным html ??
1
см. developers.facebook.com/docs/opengraph <html xmlns: og = " opengraphprotocol.org/schema " ...
cope360
3
Совет - после внесения изменений. Запустите вашу страницу через линтер, и Facebook обновит миниатюры и т. Д. Для этой страницы developers.facebook.com/tools/lint
Я также нашел следующую статью очень полезной: Как настроить, какой URL, текст и IMG делиться
J0ANMM

Ответы:

593

Как мне сообщить Facebook, какое изображение использовать, когда моя страница будет опубликована?

У Facebook есть набор метатегов с открытым графиком, на которые он смотрит, чтобы решить, какое изображение показывать.

Один из ключей для изображения Facebook:

<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" />

и он должен присутствовать внутри <head></head>тега в верхней части вашей страницы.

Если эти теги отсутствуют, он будет искать их более старый метод указания изображения: <link rel="image_src" href="https://stackoverflow.com/myimage.jpg"/> . Если ни того, ни другого нет, Facebook просмотрит содержимое вашей страницы и выберет на вашей странице изображения, которые соответствуют критериям его общего изображения: изображение должно иметь размер не менее 200 на 200 пикселей, максимальное соотношение сторон 3: 1 и PNG, JPEG или GIF формат.

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

Да, вам просто нужно добавить несколько метатегов изображения в том порядке, в котором вы хотите, чтобы они отображались. Затем пользователю будет предложено диалоговое окно выбора изображения:
Facebook Image Selector

Я указал соответствующие метатеги изображения. Почему Facebook не принимает изменения?

После публикации URL-адреса сканер Facebook, у которого есть пользовательский агент facebookexternalhit/1.1 (+https://www.facebook.com/externalhit_uatext.php), получит доступ к вашей странице и кеширует метаинформацию. Чтобы заставить серверы Facebook очищать кэш, используйте инструмент отладчика URL-адресов Facebook / Linter. который был запущен в июне 2010 года, чтобы обновить кеш и устранить любые проблемы с метатегами на вашей странице.

Кроме того, изображения на странице должны быть общедоступными для сканера Facebook. Вы должны указать абсолютные URL-адреса, такие как http://example.com/yourimage.jpg адреса вместо просто /yourimage.jpg.

Могу ли я обновить эти метатеги с помощью кода на стороне клиента, такого как Javascript или jQuery? Нет. Подобно сканерам поисковых систем, скребок Facebook не выполняет сценарии, поэтому любые метатеги, которые присутствуют при загрузке страницы, являются метатегами, которые используются для выбора изображения.

Добавление этих тегов приводит к тому, что моя страница больше не проверяется. Как я могу это исправить?

Вы можете добавить необходимые пространства имен Facebook в свой тег, и ваша страница должна пройти проверку:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:og="http://ogp.me/ns#"
      xmlns:fb="https://www.facebook.com/2008/fbml">
bkaid
источник
1
В другом месте это выглядит так: <link rel="apple-touch-icon" href="...">(Вот так получается изображение SO)
Ярин
2
@ Ярин Я не уверен, что это правда. StackOverflow имеет установленное свойство image_src, которое оно использует. Имя файла для apple-touch-icon отличается и не используется.
bkaid
3
Могу ли я выбрать порядок изображения? В моем случае перед изображением метатегов появляются другие изображения.
Висенреле
23
Минимальный размер изображения теперь 200x200px.
Tr1stan
1
Woot! Я установил размер img на 300px, теперь он работает. Спасибо @ Tr1stan
Урс
37

Когда вы делитесь для Facebook, вы должны добавить в свой HTML-код следующие метатеги: 

<meta property="og:title" content="title" />
<meta property="og:description" content="description" />
<meta property="og:image" content="thumbnail_image" />

И это все!

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

Вся необходимая информация находится на www.facebook.com/share/

Matias
источник
28

С 2013 года, если вы используете facebook.com/sharer.php (PHP), вы можете просто сделать любую кнопку / ссылку, например:

<a class="btn" target="_blank" href="http://www.facebook.com/sharer.php?s=100&amp;p[title]=<?php echo urlencode(YOUR_TITLE);?>&amp;p[summary]=<?php echo urlencode(YOUR_PAGE_DESCRIPTION) ?>&amp;p[url]=<?php echo urlencode(YOUR_PAGE_URL); ?>&amp;p[images][0]=<?php echo urlencode(YOUR_LINK_THUMBNAIL); ?>">share on facebook</a>

Параметры запроса ссылки:

p[title] = Define a page title
p[summary] = An URL description, most likely describing the contents of the page
p[url] = The absolute URL for the page you're sharing 
p[images][0] = The URL of the thumbnail image to be used as post thumbnail on facebook

Все просто: вам не нужны никакие js или другие настройки. Это просто необработанная HTML-ссылка. Стилизируйте тег A любым удобным для вас способом.

Антонио Макс
источник
p[images][0]было именно то, что мне было нужно. ogтеги работают для совместного использования одного и того же изображения, но мне нужно поделиться несколькими изображениями с одной страницы.
thekingoftruth
4
Это должен быть новый «принятый ответ» - такой простой и понятный. Спасибо за это, приятель.
Майк
Антонио, у вас есть ссылка на источник о том, что вы показали выше? Я пытаюсь посмотреть это на developers.facebook.com, но не могу найти ничего, кроме этого . Пожалуйста помоги.
Mr_Green
@Mr_Green вот и все. Эта функция «устарела», но теперь вернулась к официальным документам. Во всяком случае, я считаю, что мой ответ охватывает основные настройки для его работы.
Антонио Макс
@AntonioMax, пожалуйста, объясни, что s=100в твоем посте?
Mr_Green
13

Поместите следующий тег в head:

<link rel="image_src" href="/path/to/your/image"/>

С http://www.facebook.com/share_partners.php

Что касается того, что он выбирает по умолчанию при отсутствии этого тега, я не уверен.

Мэтт Бриджес
источник
12

По моему опыту, http://www.facebook.com/sharer.php не использует мета-теги. Он использует строку, которую вы передаете. См. ниже.

http://www.facebook.com/sharer.php?s=100&p[title]=ЭТО МОЕ НАЗВАНИЕ & p [summary] = ЭТО МОЕ РЕЗЮМЕ & p [url] = http: //www.MYURL.com&&p [images] [ 0] = Http: //www.MYURL.com/img/IMAGEADDRESS

Мета-теги работают с кнопками «Нравится» / «Отправить» от разработчика Facebook, как и другая информация Open Graph. Так что, если вы используете один из реальных элементов Facebook, таких как комментарии и тому подобное, все это будет связано с материалами Open Graph.

ОБНОВЛЕНИЕ: Есть два способа использования устройства для обмена *. Обратите внимание, что? S и значение? U в строке запроса
1 ==> STRING: http://www.facebook.com/sharer.php?s + содержимое сверху
~ ~> Будет извлекать информацию из строки.
2 ==> URL: http://www.facebook.com/sharer.php?u=url, где url равен фактическому url
~~> Очистит страницу, указанную в значении url
~~> Вы можете проверить значения здесь: https://developers.facebook.com/tools/debug

Джейсон Лидон
источник
Очень полезно. Спасибо! : D
Аарон Грей
Есть ли какой-либо законный способ использовать этот разделитель на другом веб-сайте для получения содержимого с URL-адреса? Я не очень разбираюсь в Facebook API и прочем ...
Lyth
Попробуйте использовать опцию URL. Если на странице есть теги OG, FB их очистит. Протестируйте страницу, которую вы хотите использовать здесь: developers.facebook.com/tools/debug
Джейсон Лидон,
11

Старый способ, больше не работает:

<link rel="image_src" href="http://yoururl/yourimage"/>

Сообщается по-новому, тоже не работает:

<meta property="og:image" content="http://yoururl/yourimage"/>

Он работал случайным образом и в течение первого дня, когда я его реализовал, с тех пор вообще не работал.

Страница Facebook linter, утилита, которая проверяет вашу страницу, сообщает, что все правильно, и отображает выбранный мной эскиз, просто что сама страница share.php не работает. Должно быть, это ошибка в Facebook, которую они, видимо, не хотят исправлять, так как все сообщения об ошибках, относящиеся к этой проблеме, которые я видел в их системе, все говорят, что они решены или исправлены.

Тео
источник
У меня тоже есть эта проблема. Линтер не сообщает об ошибке и правильно показывает мое изображение, но когда я нажимаю кнопку «Поделиться» на моем сайте, в интерфейсе общего доступа нет абсолютно никакого изображения.
Люк Гриффитс
image_src больше не работает для Facebook, НО некоторые службы все еще используют его (клиенты Telegram и т. д.)
Andres SK
10

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

ШАГ 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/ ), где вы упомянули теги. Нажмите на кнопку отладки.

Это сделано.

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

В приведенном выше URL, u = ссылка на ваш сайт

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

Gaurav123
источник
Отладчик был полезен.
konsolebox
2

Для безопасного HTTPS 

<meta property="og:image:secure_url" content="https://image.path.png" />
Стефан Мичев
источник
1

У меня была эта проблема, и я решил ее по предложению Мануэля-84. Использование изображения размером 400x400 пикселей работало замечательно, в то время как мое уменьшенное изображение никогда не показывалось в распределителе.

Обратите внимание, что Facebook рекомендует использовать квадратное изображение размером не менее 200 пикселей в виде тега og: image: https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content/#tags

Уильям
источник
1

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

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

Я не проверял его с высотой 0 и шириной 0, но он, вероятно, все еще будет работать .. Это не гарантирует, что пользователь выберет это изображение ..

ТАКЖЕ похоже, что Facebook кэширует миниатюры на вашей странице и не всегда проверяет их на наличие новых .. попробуйте добавить это на другую страницу вашего сайта, и вы увидите, что это работает.

Даниэль Бернал
источник
1
после тега - вы имеете в виду: «после тега BODY»?
Алексис Уилке
Да, я верю, что они имеют в виду. Я сделал это на сайте давным-давно, но использовал style="display:none;"вместо установки 1x1 пикселей.
Майк
1

Используйте диалог подачи в Facebook вместо диалога для показа пользовательских изображений

Пример:

https://www.facebook.com/dialog/feed?app_id=1389892087910588
&redirect_uri=https://scotch.io
&link=https://scotch.io
&picture=http://placekitten.com/500/500
&caption=This%20is%20the%20caption
&description=This%20is%20the%20description
kittu
источник
0

Я не мог заставить Facebook выбрать правильное изображение из определенного поста, поэтому я сделал то, что описано на этой странице:

/webapps/18468/adding-meta-tags-to-individual-blogger-posts

Другими словами, что-то вроде этого:

<b:if cond='data:blog.url == "http://urlofyourpost.com"'>
  <meta content='http://urlofyourimage.png' property='og:image'/>
 </b:if>

По сути, вы собираетесь жестко закодировать оператор if в HTML вашего сайта, чтобы заставить его изменять мета-контент для всего, что вы изменили для этого поста. Это грязное решение, но оно работает.

Мишель Глаузер
источник