it-roy-ru.com

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

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

389
Sampson

Как мне сообщить 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 очищать кеш, используйте Facebook Url Debugger/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">  
587
bkaid

Когда вы делитесь для 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/

36
Matias

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

28
Antonio Max

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

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

От http://www.facebook.com/share_partners.php

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

13
Matt Bridges

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

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

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

ОБНОВЛЕНИЕ: есть два способа использовать sharer *, отметьте? 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

12
Jason Lydon

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

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

Сообщили новый способ, также не работает:

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

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

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

11
theo

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

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

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

10
Gaurav123

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

<meta property="og:image:secure_url" content="https://image.path.png" />
2
Stefan Michev

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

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

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

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

1
daniel bernal

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

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

1
William

используйте диалог подачи в 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
kittu

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

https://webapps.stackexchange.com/questions/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 вашего сайта, чтобы заставить его изменять мета-контент для всего, что вы изменили для этого поста. Это грязное решение, но оно работает.

0
Michelle Glauser