Как Facebook Sharer выбирает изображения и другие метаданные при публикации моего URL-адреса?
https://stackoverflow.com/questions/1138460
-
16-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
При использовании Facebook Sharer Facebook предложит пользователю возможность использовать одно из нескольких изображений, извлеченных из источника, в качестве предварительного просмотра ссылки.Как выбираются эти изображения и как я могу гарантировать, что любое конкретное изображение на моей странице будет всегда включены в этот список?
Решение
Как сообщить 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 не принимает изменения?
После публикации 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">
Другие советы
Когда вы делитесь информацией для 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/
Начиная с 2013 года, если вы используете facebook.com/sharer.php (PHP), вы можете просто создать любую кнопку/ссылку, например:
<a class="btn" target="_blank" href="http://www.facebook.com/sharer.php?s=100&p[title]=<?php echo urlencode(YOUR_TITLE);?>&p[summary]=<?php echo urlencode(YOUR_PAGE_DESCRIPTION) ?>&p[url]=<?php echo urlencode(YOUR_PAGE_URL); ?>&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 любым удобным для вас способом.
Поместите следующий тег в head:
<link rel="image_src" href="/path/to/your/image"/>
От http://www.facebook.com/share_partners.php
Насчет того, что он выбирает по умолчанию при отсутствии этого тега, я не уверен.
По моему опыту, 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 ==> СТРОКА: 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
Старый способ больше не работает:
<link rel="image_src" href="http://yoururl/yourimage"/>
Сообщается новый способ, тоже не работает:
<meta property="og:image" content="http://yoururl/yourimage"/>
В первый день, когда я это реализовал, это случайным образом срабатывало, а с тех пор вообще не работало.
Страница линтера Facebook, утилита, которая проверяет вашу страницу, сообщает, что все правильно, и отображает выбранную мной миниатюру...просто сама страница Share.php, похоже, не работает.Должно быть, это ошибка в Facebook, которую они, очевидно, не хотят исправлять, поскольку в каждом отчете об ошибке, связанном с этой проблемой, которую я видел в их системе, говорится, что она решена или исправлена.
Чтобы изменить заголовок, описание и изображение, нам нужно добавить несколько метатегов под тегом заголовка.
ШАГ 1 :
Добавьте метатеги под тегом head.
<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 = ссылка на ваш сайт.
НАСЛАЖДАТЬСЯ !!!!
Для безопасного HTTPS
<meta property="og:image:secure_url" content="https://image.path.png" />
У меня была эта проблема, и я исправил ее по предложению Мануэля-84.Использование изображения размером 400x400 пикселей отлично сработало, в то время как мое изображение меньшего размера никогда не появлялось в общем доступе.
Обратите внимание, что Facebook рекомендует использовать квадратное изображение размером не менее 200 пикселей в качестве тега og:image: https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content/#tags
Вот что сработало для меня:Я поместил нужное миниатюрное изображение на страницу сразу после тега и сделал его слишком маленьким, чтобы его можно было увидеть.
<img src="imagename.jpg" width="1" height="1" />
Я не тестировал его с высотой 0 и шириной 0, но, вероятно, он все равно будет работать.Это не гарантирует, что пользователь выберет это изображение.
ТАКЖЕ похоже, что Facebook кэширует миниатюры на вашей странице и не всегда проверяет ее на наличие новых.попробуйте добавить это на другую страницу вашего сайта, и вы увидите, что это работает.
Используйте диалоговое окно ленты 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
Мне не удалось заставить 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 вашего сайта, чтобы заставить его изменять метаконтент для всего, что вы изменили для этого одного поста.Это грязное решение, но оно работает.
