Как использовать метатег 'og' (Open Graph) для общего доступа Facebook

Facebook извлекает все фотографии с моего сайта.

Я хочу поделиться только одним изображением, которое находится на этой странице.

Я слышал о метатеге og, но я не знаю, как это сделать.

Ответ 1

Использование:

<!-- For Google -->
<meta name="description" content="" />
<meta name="keywords" content="" />

<meta name="author" content="" />
<meta name="copyright" content="" />
<meta name="application-name" content="" />

<!-- For Facebook -->
<meta property="og:title" content="" />
<meta property="og:type" content="article" />
<meta property="og:image" content="" />
<meta property="og:url" content="" />
<meta property="og:description" content="" />

<!-- For Twitter -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="" />
<meta name="twitter:description" content="" />
<meta name="twitter:image" content="" />

Заполните содержимое = "..." в соответствии с содержимым вашей страницы.

Для получения дополнительной информации посетите 18 мета-тегов Каждая веб-страница должна иметь в 2013 году.

Ответ 2

Facebook использует то, что называется Open Graph Protocol, чтобы решить, что показывать, когда вы делитесь ссылкой. OGP просматривает вашу страницу и пытается решить, какой контент показывать. Мы можем протянуть руку и на самом деле сообщить Facebook, что взять с нашей страницы.

То, как мы это делаем, с тегами og:meta.

Теги выглядят примерно так:

  <meta property="og:title" content="Stuffed Cookies" />
  <meta property="og:image" content="http://fbwerks.com:8000/zhen/cookie.jpg" />
  <meta property="og:description" content="The Turducken of Cookies" />
  <meta property="og:url" content="http://fbwerks.com:8000/zhen/cookie.html">

Вам нужно разместить эти или подобные метатеги в <head> вашего HTML файла. Не забывайте подставлять свои значения!

Для получения дополнительной информации вы можете прочитать все о том, как Facebook использует эти метатеги в своей документации. Вот один из уроков оттуда - https://developers.facebook.com/docs/opengraph/tutorial/

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

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

Ответ 3

Я построил инструмент для генерации мета. Он предварительно настраивает записи для Facebook, Google+ и Twitter, и вы можете использовать их бесплатно здесь: http://www.groovymeta.com

Чтобы ответить на вопрос немного больше, теги OG (Open Graph) работают аналогично метатегам и должны быть помещены в раздел HEAD вашего HTML файла. См. лучшие практики Facebook для получения дополнительной информации о том, как эффективно использовать теги OG.