Як використовувати мета-тег 'og' (Відкритий графік) для спільного використання Facebook


118

Facebook отримує всі фотографії з мого сайту.

Я хочу поділитися лише однією картинкою, яка знаходиться на цій сторінці.

Я чув про ogметатег, але не знаю, як його поставити.

Відповіді:


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

Заповніть вміст = "..." відповідно до вмісту вашої сторінки.

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


Чи знаєте ви, чи authorповинен тег мати ім’я автора чи посилання на URL-адресу профілю?
tobek

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

meta тег authorозначає автора веб-сайту чи автора поточної статті (приклад використання у статті блогу)?
LuiGi

Це гарне виконання? Чи не знайде Google / Facebook / Twitter помилок з цим?
Jeromie Devera

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

41

Facebook використовує те, що називається протоколом відкритого графіка, щоб вирішити, які речі відображатимуться при спільному використанні посилання. 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-адреси.


Я бачу теги html у своєму описі, чи знаєте ви, як це обійти?
Ніл

28

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

Щоб відповісти на запитання трохи більше, OGтеги (Open Graph) працюють аналогічно метаметам, і їх слід розмістити в розділі HEAD вашого файлу HTML. Див . Кращі практики Facebook для отримання додаткової інформації про те, як ефективно використовувати теги OG.


1
Дякую @Mogsdad, я відповів на відповідь відповідно.
Луї Отто

1
Посилання розірвано, на жаль!
Вінсент Сельс
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.