Бесплатный генератор Open Graph. Поможет создать правильное превью при публикации ссылки в социальных сетях и других сервисах.
Для начала работы, необходимо к тегу html добавить нужный prefix
Пример:
<html prefix="og: https://ogp.me/ns#"> - общий<html prefix="og: https://ogp.me/ns/website#"> - для вебсайта
<html prefix="og: https://ogp.me/ns/article#"> - для статьи<html prefix="og: https://ogp.me/ns/book#"> - для книги<html prefix="og: https://ogp.me/ns/profile#"> - для профиля
пользователя
Стандарт Open Graph разработан социальной сетью Facebook*. Он позволяет контролировать превью, которое формируется при публикации ссылки на сайт в социальных сетях, и передавать информацию другим интернет-сервисам.
Несмотря на то, что существует множество различных технологий и схем, которые могут быть объединены вместе, не существует единой технологии, предоставляющей достаточно информации для полноценного представления любой веб-страницы в социальном графе. Протокол Open Graph основан на этих существующих технологиях и предоставляет разработчикам одну вещь для реализации. Простота для разработчиков является ключевой целью протокола Open Graph, который повлиял на многие технические решения при проектировании.
В стандарте Open Graph одна страница описывает только один объект — человека, компанию или продукт. Для этого объекта и указываются все данные. Чтобы передать информацию сервисам, необходимо в HTML-код (в элемент head) добавить следующие обязательные метатеги:
og:title — название объекта.og:type — тип объекта, например, video.movie (фильм). Если у вас несколько
объектов на странице, выберите один из них (главный). В зависимости от типа можно
указать дополнительные свойства.
og:image — URL изображения, описывающего объект.og:url — канонический URL объекта, который будет использован в качестве
постоянного идентификатора.
og:audio — URL-адрес аудиофайла, сопровождающего этот объект.og:description — Описание вашего объекта в количестве одного-двух
предложений.
og:locale — Язык, в котором отмечены эти теги. Формата language_TERRITORY.
Значение по умолчанию равно en_US.
og:site_name — Если ваш объект является частью более крупного веб-сайта,
имя, которое должно отображаться для всего сайта. например, "IMDb".
og:video - URL-адрес видеофайла, который дополняет этот объект.К некоторым свойствам могут быть прикреплены дополнительные метаданные. Они задаются таким же
образом, как и другие метаданные с помощью property и content, но
property будут иметь дополнительные :.
og:image Свойство имеет некоторые необязательные структурированные свойства:
og:image:url - Идентичен og:image.og:image:secure_url - Альтернативный URL-адрес для использования, если веб-страница
требует HTTPS.og:image:type - MIME-тип для этого изображения.og:image:width - Количество пикселей в ширину.og:image:height - Количество пикселей в высоту.og:image:alt - Описание того, что находится на изображении (не подпись). Если на
странице указано изображение og:, оно должно указывать og:image:alt.Если тег может иметь несколько значений, просто разместите несколько версий одного тега на своей странице. Первому тегу (сверху вниз) отдается предпочтение во время конфликтов.
<meta property="og:image" content="https://example.com/rock.jpg" />
<meta property="og:image" content="https://example.com/rock2.jpg" />