О чем это всё
Недавно(нет) я заметил, что ссылки на мои статьи неправильно "предпоказываются" в 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, нужно указывать это явно с помощью аттрибута:
<html prefix="og: http://ogp.me/ns#">
* * *
</html>
- Далее указываем сами типы, файлы и тд.:
<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">
<!-- Кстати пока что видео еще нигде не спарсилось -->
- Опционально, но часто важно, если ссылка уже была обработана соц. сетью.
- Если Telegram, нужно найти бота @WebpageBot, и перепарсить контент и превью.
- Для Facebook, Pinterest, LinkedIn и Twitter нужно открыть соответствующую консоль разработчика и перепарсить тут, заодно там же можно получить полезную стату по твоему сайту. Мануалы здесь.
Подключение OpenGraph в hugo
OpenGraph является стандартным встроенным в hugo компонентом, поэтому для любых шаблонов все подключается просто через конфиг: мануал.