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

156

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

image facebook preview отметка
источник

Ответы:

234

1. Включите расширение пространства имен Open Graph XML в ваше объявление HTML

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:fb="http://ogp.me/ns/fb#">

2. Внутри вас <head></head>используйте следующий метатег, чтобы определить изображение, которое вы хотите использовать

<meta property="og:image" content="fully_qualified_image_url_here" />

Подробнее о протоколе открытых графов читайте здесь.

После выполнения вышеизложенного, используйте Facebook «Object Debugger», если изображение не отображается правильно. Также обратите внимание, что в первый раз, когда он был опубликован, он по-прежнему не будет отображаться, если только не указана высота и ширина, см. Поделиться на Facebook - миниатюра не отображается в первый раз

Shef
источник

@ Мартин, я не в курсе. Может быть, они и делают, но я не вижу, чтобы это упоминалось в документах Open Graph Protocol . Попробуйте отладчик, чтобы увидеть, отображаются ли кэшированные значения для вашего сайта. Похоже, есть еще один вопрос на SO под названием Open Open Graph, не очищающий кеш, связанный с этой проблемой.

Шеф

Комментарий @KDog: Проблемы? Проверьте свои коды в инструменте отладки facebook. Facebook кэширует изображение, заголовок и основной текст. Я изменил название при добавлении xml на свой веб-сайт, и поскольку я случайно создал несколько ошибок проверки, ничего не изменилось в предварительном просмотре акций Facebook. Facebook использовал действительный кеш вместо показа недействительных новых данных. Мне удалось устранить эти ошибки с помощью developers.facebook.com/tools/debug . После этого мой новый заголовок и изображения отображаются сразу.

Джереми Томпсон

@ScotterMonkey: Да, это ожидаемое поведение. Вы можете сказать FB, какой контент использовать. Кстати, вы можете добавить несколько элементов <meta property="og:image" content="your_image_here" />между headэлементами, чтобы вы могли выбирать, когда вы публикуете на FB.

Shef

Пропустил эту вещь с fb в html-объявлении. Спас мой день! (даже если это трехлетний пост). Большое спасибо!

bestprogrammerintheworld

ссылка на контент - это фактическая ссылка, а не относительная ссылка, которую я обнаружил. то есть http://mywebsite.com.au/Images/prettypic.png, нет/Images/prettypic.png

JumpingJezza

Также обратите внимание, что если у вас WordPress, просто прокрутите вниз до нижней части веб-страницы в режиме редактирования и выберите «Избранные изображения» (нижняя правая часть экрана).

davea0511
источник

Если вы используете Weebly , начните с просмотра опубликованного сайта и щелкните правой кнопкой мыши изображение, чтобы скопировать адрес изображения. Затем в Weebly, зайдите в Редактировать сайт, Страницы, нажмите на страницу, которую вы хотите использовать, Настройки SEO, под заголовком Код введите код из ответа Шефа:

<meta property="og:image" content="/uploads/..." />

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

Вы можете пропустить часть ответа Шефа о пространстве имен, потому что это уже установлено по умолчанию в Weebly.

krubo
источник