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

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


preview image facebook
person Mark    schedule 14.07.2011    source источник

Ответы (4)


arrow_upward
244
arrow_downward

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 " Debugger ", если изображение отображается некорректно. Также обратите внимание, что при первом совместном использовании он все равно не будет отображаться, если также не указаны высота и ширина, см. Поделиться в Facebook - эскиз не отображается для первый раз

person Shef    schedule 14.07.2011
comment
Кэширует ли facebook изображения на сайте? Я попытался установить эти настройки, но FB не хочет использовать мое изображение по умолчанию. Вместо этого он находит старые изображения, которые были на сайте вчера. - person Martin; 02.12.2011
comment
@ Мартин, я не в курсе. Может быть, и есть, но я не вижу упоминания об этом в документах протокола Open Graph. Попробуйте отладчик, чтобы увидеть, отображаются ли кешированные значения для вашего сайта. Кажется, есть еще один вопрос по SO с названием Facebook Open Graph, не очищающий кеш, связанный с к этому вопросу. - person Shef; 02.12.2011
comment
Комментарий от @KDog: Возникли проблемы? Проверьте свои коды в инструменте отладки facebook. Facebook кеширует изображение, заголовок и основной текст. Я изменил заголовок при добавлении xml на свой веб-сайт, и поскольку я случайно создал несколько ошибок проверки, в предварительном просмотре общих ресурсов Facebook ничего не изменилось. Facebook использовал действующий кеш вместо отображения недействительных новых данных. Мне удалось устранить эти ошибки с помощью developers.facebook.com/tools/debug. После этого сразу же отображаются мой новый заголовок и изображения. - person Jeremy Thompson; 21.01.2013
comment
@Shef Распространяется ли это решение и на кнопки Like? - person SaidbakR; 01.02.2013
comment
Это работает ... вроде как. Когда я добавляю эти изменения в тег ‹html› и эти метатеги, FB определенно видит изображение, которое я вставил в этот метатег. Но происходит следующее: FB игнорирует все остальные изображения на странице, НЕ упомянутые в заголовке. - person ScotterMonkey; 21.03.2014
comment
@ScotterMonkey: Да, это ожидаемое поведение. Вы можете указать FB, какой контент использовать. Кстати, вы можете добавить несколько <meta property="og:image" content="your_image_here" /> между элементом head, чтобы вы могли выбирать при публикации в FB. - person Shef; 21.03.2014
comment
Это прекрасно работает. И совет использовать отладчик и просто вставить в него URL-адрес вашего приложения ... он предоставит вам всю необходимую информацию, и вы можете настроить свой html для получения желаемого результата. - person Craig; 18.09.2014
comment
Пропустил ту штуку с fb в html-объявлении. Спас мой день! (даже если это пост трехлетней давности). Большое спасибо! - person bestprogrammerintheworld; 30.01.2015
comment
Возможно ли иметь более одного изображения og, так что FB будет генерировать предварительный просмотр с более чем одним изображением в нем? - person Ivan Dossev; 31.01.2015
comment
@Dabbu: Да, вы можете добавить несколько метатегов изображений, но FB сгенерирует предварительный просмотр со списком изображений, из которого вы должны выбрать, какое из них использовать. Он не будет использовать все изображения для опубликованного объекта, если вы так думаете. - person Shef; 31.01.2015
comment
@Shef: Спасибо. Похоже, мне нужно будет заставить сервер генерировать дополнительное комбинированное изображение из других изображений, чтобы действительно достичь результата желаний. - person Ivan Dossev; 31.01.2015
comment
Ссылка содержимого - это реальный URL-адрес, а не относительная ссылка, которую я обнаружил. т.е. http://mywebsite.com.au/Images/prettypic.png, а не /Images/prettypic.png - person JumpingJezza; 16.04.2015
comment
@Shef: можно ли использовать одно и то же пространство имен для URL-адреса linkedin, иначе лучше просто указать xmlns: og = ogp.me/ns# - person Mohamed Hussain; 10.09.2015
comment
здесь находятся другие теги developers.facebook.com/docs/sharing/webmasters#markup - person alexandre1985; 30.04.2016
comment
Не понимаю - я сделал это для веб-сайта, который кодирую вручную, пошел в отладчик объектов, увидел, что изображение, отображаемое в отладчике (он распознал ссылку на мое изображение), но когда я вставляю URL-адрес веб-сайта в сообщение FB, все еще нет изображение. Вверху отладчика объекта было свойство 'fb: app_id' должно быть явно указано, но у меня нет идентификатора приложения - это просто сайт, закодированный вручную. Я что-то упускаю? Я использую полный URL. - person youcantryreachingme; 16.02.2017
comment
Хотел бы я раньше видеть комментарий @JumpingJezza. Изображение будет отображаться в инструменте отладки, указанном выше, но не будет отображаться при совместном использовании ссылки, если у вас нет полного не относительного URL! - person rageandqq; 04.10.2017

arrow_upward
4
arrow_downward

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

person davea0511    schedule 19.09.2016

arrow_upward
2
arrow_downward

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

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

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

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

person krubo    schedule 08.12.2016

arrow_upward
0
arrow_downward

Проходят годы и эта проблема с кешем facebook еще не решена ... Почему facebook не помещает кнопку для полной очистки кеша в Debug Tools ???? Насколько это сложно?

ОК ... Теперь окончательное решение:

Используйте это на og: image ....: ?[sequentialNumber] пример: ?1 / ?2 / ?3 .....

Пример использования:

<meta property="og:image" content="http://example.com/image.jpg?1" />

Вы меняли имидж? Добавьте 1 к числу ...

<meta property="og:image" content="http://example.com/image.jpg?2" />

Каждый раз при изменении изображения добавляйте 1 к числу

Это можно сделать вручную или динамически, например, с помощью PHP.

У меня это работает очень хорошо, надеюсь, я помог.

person maPer77    schedule 09.04.2021