Open Graph

15 Июля 2020 12:29

Теги Open Graph позволяют соц. сетям подтянуть определенное изображение при размещении ссылки сайта где то - в комментариях, в личных сообщениях и т.д.

HTML

<meta property="og:title" content="Заголовок страницы" />
<meta property="og:description" content="Описание страницы" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://site.ru/" />
<meta property="og:image" content="https://site.ru/media/images/logo-og.png" />

Параметры:

  1. og:title - Заголовок страницы, будет выведен вместе с изображением;
  2. og:description - Описание страницы, будет выведено под заголовком;
  3. og:type - Тип контента. website, video, article и т.д.
  4. og:url - Абсолютный путь до страницы;
  5. og:image - Абсолютный путь до изображения.

Примечание. Оптимальное разрешение изображения - 1200х630. Если изображение будет меньше 600х315 то оно будет выведено как миниатюра. Размер изображения не должен превышать 5МБ.

 Для проверки результата можно использовать плагин для Google Chrome - OpenGraph Preview