Как Facebook Sharer выбирает изображения и другие метаданные при публикации моего URL? - PullRequest
389 голосов
/ 16 июля 2009

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

Ответы [ 12 ]

587 голосов
/ 02 октября 2011

Как мне сообщить 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="/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 Tool , который они запустили в июне 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">  
36 голосов
/ 18 октября 2010

Когда вы публикуете для 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 /

28 голосов
/ 15 октября 2013

Начиная с 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 любым удобным для вас способом.

13 голосов
/ 16 июля 2009

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

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

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

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

12 голосов
/ 30 января 2013

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

http://www.facebook.com/sharer.php?s=100&p[title]=THIS МОЕ НАЗВАНИЕ & p [резюме] = ЭТО МОЕ РЕЗЮМЕ & 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

11 голосов
/ 02 сентября 2010

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

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

Отмечено новым способом, также не работает:

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

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

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

10 голосов
/ 20 февраля 2014

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

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

НАСЛАЖДАЙТЕСЬ !!!!

2 голосов
/ 28 декабря 2012

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

<meta property="og:image:secure_url" content="https://image.path.png" />
1 голос
/ 04 апреля 2017

Используйте диалог подачи в 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
1 голос
/ 23 мая 2013

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...