ПОСТЫ
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, то ссылка на мануал далее. Если же речь идет о сайте на своих шаблонах и рендерах, то добавляется это все следующим образом:
- Большинство соц. сетей сами понимают, что сайт использует OpenGraph и читают сразу мета-данные, однако иногда, например в случае Telegram, нужно указывать это явно с помощью аттрибута:
|
|
- Далее указываем сами типы, файлы и тд.:
|
|
- Опционально, но часто важно, если ссылка уже была обработана соц. сетью.
- Если Telegram, нужно найти бота @WebpageBot, и перепарсить контент и превью.
- Для Facebook, Pinterest, LinkedIn и Twitter нужно открыть соответствующую консоль разработчика и перепарсить тут, заодно там же можно получить полезную стату по твоему сайту. Мануалы здесь.
Подключение OpenGraph в hugo
OpenGraph является стандартным встроенным в hugo компонентом, поэтому для любых шаблонов все подключается просто через конфиг: мануал.
Ссылки
- Главная страница проекта - ссылка
- Краткое описание на Вики - ссылка
- Как перепарсить свой сайт в соц. сетях - ссылка
- Как перепарсить сайт в Telegram и почему префикс это важно - ссылка
- Как перепарсить сайт в Telegram - ссылка
- Мануал на русском языке - ссылка
- Подключение OpenGraph в hugo - ссылка