ПОСТЫ

OpenGraph: предпросмотр ссылок в Telegram и Facebook

О чем это всё

Недавно(нет) я заметил, что ссылки на мои статьи неправильно “предпоказываются” в Telegram(и как выяснилось в facebook), несмотря на то, что я включил OpenGraph в hugo. Почему? Сейчас разберемся, а также глянем, что такое OpenGraph в целом.

OpenGraph

OpenGraph это разработка всем известного the facebook. Смысл в том, чтобы облегчить в первую очередь себе, но заодно и всем другим социальным платформам(в данном контексте любое место, где можно делиться контентом, в том числе и ссылками) взаимодействие со сторонними ресурсами. Что все это значит для пользователя? Ссылка оставленная в соц. сети выглядит не так:

А так:

Как? С помощью мета-данных. Не знаю точно, но могу даже предположить, что парсеру не нужно читать страницу дальше </head>, ведь именно там и задаются мета-данные. Краткий обзор на то, какие определены стандартом:

  • og:locale — указывает локализацию (язык сайта), можно использовать значение “ru_RU” по умолчанию.
  • og:type — указывает тип страницы (статья, новость, видео, категория и т. д.), можно использовать по умолчанию “article”.
  • og:title — указывает заголовок статьи.
  • og:description — указывает краткое описание, которое выводится при формировании превью ссылки.
  • og:url — ссылка на страницу сайта.
  • og:image — ссылка на картинку, которая будет отображаться в посте.
  • og:site_name — название сайта.
  • og:video - ссылка на видео, если тип будет video, то подтянет данный видео-файл.
  • og:audio - ссылка на аудио, тоже самое что и video. Также есть og:music

На самом деле еще очень много разных типов и расширений у них, так что для полного ознакомления лучше почитать на главной странице проекта/стандарта.

Как начать использовать

Если речь идет про hugo, то ссылка на мануал далее. Если же речь идет о сайте на своих шаблонах и рендерах, то добавляется это все следующим образом:

  1. Большинство соц. сетей сами понимают, что сайт использует OpenGraph и читают сразу мета-данные, однако иногда, например в случае Telegram, нужно указывать это явно с помощью аттрибута:
1
2
3

<html prefix="og: http://ogp.me/ns#">
    *  *  *
</html>
  1. Далее указываем сами типы, файлы и тд.:
1
2
3
4
5
6
7

<meta property="og:type" content="article">
<meta property="og:title" content="Vue и Битрикс24">
<meta property="og:description" content="Однажды мне пришлось…">
<meta property="og:url" content="https://slnt-opp.xyz/posts/code_n_shit/bx24/">
<meta property="og:image" content="https://slnt-opp.xyz/images/bx24_vue.png">
<meta property="og:video" content="https://slnt-opp.xyz/mov/bx24.mov">
<!-- Кстати пока что видео еще нигде не спарсилось -->
  1. Опционально, но часто важно, если ссылка уже была обработана соц. сетью.
    1. Если Telegram, нужно найти бота @WebpageBot, и перепарсить контент и превью.
    2. Для Facebook, Pinterest, LinkedIn и Twitter нужно открыть соответствующую консоль разработчика и перепарсить тут, заодно там же можно получить полезную стату по твоему сайту. Мануалы здесь.

Подключение OpenGraph в hugo

OpenGraph является стандартным встроенным в hugo компонентом, поэтому для любых шаблонов все подключается просто через конфиг: мануал.

Ссылки

  • Главная страница проекта - ссылка
  • Краткое описание на Вики - ссылка
  • Как перепарсить свой сайт в соц. сетях - ссылка
  • Как перепарсить сайт в Telegram и почему префикс это важно - ссылка
  • Как перепарсить сайт в Telegram - ссылка
  • Мануал на русском языке - ссылка
  • Подключение OpenGraph в hugo - ссылка