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

118

Facebook загружает все изображения с моего сайта.

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

Я слышал о ogметатеге, но не знаю, как его выразить.

facebook-opengraph meta Винеш Бабу MD
источник

Ответы:

355

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

<!-- 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="" />

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

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

CarlosPinedaT
источник

Знаете ли вы, должен ли authorтег содержать имя автора или ссылку на URL-адрес профиля?

tobek 04

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

jurihandl 06

метатег authorозначает автора веб-сайта или автора текущей статьи (пример в статье в блоге)?

LuiGi

Это хорошее исполнение? Не найдет ли в этом Google / Facebook / Twitter ошибок?

Jeromie Devera

1) Facebook прочитает тег <meta name = "author"> и отобразит его в предварительном просмотре, когда кто-то поделится страницей 2) Facebook теперь поддерживает <meta property = "article: author"> (подробности на giannopoulos.net/ 2015/06/20 /… ) и отобразит ссылку на ваш профиль в Facebook (если вы действительно поместите ссылку на него в статье: автор) 3) Google теперь ищет расширенные данные в форме того, что он называет «Rich Snippets» ( developers.google.com/structured-data )

MarkG

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

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

Lix
источник

В своем описании я вижу html-теги. Вы знаете, как это обойти?

Нил

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

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

Луи Отто
источник

Спасибо @Mogsdad. Я расширил свой ответ соответственно.

Луи Отто

Ссылка битая, к сожалению!

Винсент Селс