Миниатюра ссылки на Facebook - PullRequest
Новая
       41

Миниатюра ссылки на Facebook

9 голосов
/ 04 августа 2011

При публикации ссылки на веб-сайт в Facebook (Google+ и остальные счетчики тоже) вам предоставляется эскиз или выбор миниатюр на выбор. Это теги из HTML.

Я всегда придерживался мнения, что было бы неплохо сделать мой логотип фоновым изображением внутри тега h1 с помощью CSS. Я делаю тег h1 ссылкой на домашнюю страницу и скрываю текст заголовка с чем-то вроде {text-indent: -9999px}, оставляя прекрасный семантический заголовок HTML. Вот ссылка на мой сайт, если вы хотите посмотреть: http://tempertemper.net

Проблема в том, что, поскольку это фоновое изображение, оно упускается из виду.

Будет ли хорошей идеей размещать пользовательский элемент в верхней части HTML только для этой цели и скрывать его вне страницы? Я не знаю, кажется немного грязным. Я мог бы просто вставить метку в h1, но логотип был бы неправильной формы, так как он предназначен для конкретной цели.

Может быть, есть мета-тег для этой цели, или, может быть, есть метод заставить FB вытягивать определенное изображение, которое обычно не загружается? У кого-нибудь есть идеи или советы для этого?

Ответы [ 5 ]

16 голосов
/ 04 августа 2011

Да, вы можете установить метатег, чтобы Facebook знал, какое изображение выбрать.

См .: https://developers.facebook.com/docs/opengraph/

В частности, это свойство og:image, и он сообщит сценарию обмена ссылками Facebook выбрать это изображение в качестве эскиза.

Имейте в виду, что Facebook выполняет некоторое кэширование, поэтому, если вы уже поделились ссылкой, она все равно может «застрять» при использовании старого изображения.

Вы можете увидеть, что Facebook выходит из вашего сайта, используя Facebook URL Linter.См .: http://developers.facebook.com/tools/lint/ (Использование URL Linter также восстановит кеш Facebook)

10 голосов
/ 04 августа 2011

Существует метатег, позволяющий приложению (например, FB) знать, что вы хотите сделать конкретное изображение вместо того, чтобы позволить пользователю выбрать его. 

<link rel="image_src" href="http://link.to/image.png" />

Для Facebook есть и другой способ добиться этого с помощью Open Graph Protocol .

Вам необходимо подготовить свой веб-сайт для использования тегов og: путем добавления пространства имен og в тег html: 

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

Тогда вы можете использовать мета-теги og: 

<meta property="og:title" content="Any title here" />
<meta property="og:type" content="website" />
<meta property="og:image" content="http://link.to/image.png" />

Для Facebook требуется шесть мета-тегов:

  • ог: название
  • ог: тип
  • OG: изображение
  • ог: URL
  • ог: site_name
  • og: admins или og: app_id

Дополнительную информацию о других типах можно найти по адресу: https://developers.facebook.com/docs/opengraph/

0 голосов
/ 25 мая 2019

Как и другие ответили, но это работает только для меня, когда я использую (https) 

<meta property="og:image" content="https://link.to/image.png" />

Вместо 

<meta property="og:image" content="http://link.to/image.png" />
0 голосов
/ 09 марта 2015

Как уже говорилось: лучше всего использовать метатег со свойством opengraph og:image.

Кроме того: Facebook - не единственная платформа, использующая метатеги opengraph.Также Google+ или Xing предпочитают это.Не уверен насчет других ...

0 голосов
/ 04 августа 2011

что делать, если вам нравится img, но в css put 

#logo{
display: none; }

<img id="logo" src="yourlogohere.jpg">

изображение не будет отображаться на странице, но я не знаю, увидит ли Facebook изображение

...