В социальных сетях всегда делятся ссылками. Facebook и некоторые другие социальные сети изначально никак не обрабатывали те ссылки, которые публиковали их пользователи. Затем стало понятно, что лучше как-нибудь вычленять информацию из ссылки и показывать её рядом со ссылкой.
Мы знаем, что у правильной веб-страницы есть метатеги. Поэтому имея на руках URL можно запросить страницу и узнать:
<meta name="description"...
, <meta name="keywords"
)К тому же можно взять первую достаточно большую картинку со страницы и считать её обложкой.
Когда Facebook стал не просто популярным сайтом, а по-настоящему глобальной социальной сетью, компания решила создать специальный формат разметки, чтобы веб-мастеры могли чётко задать информацию для вывода в ленте Facebook.
Этот формат называется OpenGraph, и его распознают не только Facebook, но и ВКонтакте, Twitter и LinkedIn.
OpenGraph-теги (или og-теги) — это специальные параметры для стандартного элемента meta
, который размещается внутри head
.
Вот простой пример:
<html prefix="og: http://ogp.me/ns#">
<head>
<title>Hexlet</title>
<meta property="og:title" content="Курсы Hexlet" />
<meta property="og:description" content="Курсы по программированию и веб-разработке. Видео, практика и реальные проекты." />
<meta property="og:image" content="https://something.io/cover.jpeg" />
...
</head>
</html>
Эта информация никак не видна на самой странице, но если ссылку на такую страницу запостить в социальную сеть, то автоматически «подцепятся» заголовок, описание и обложка.
Также можно указать язык (og:locale
), тип содержания — будь это статья, видео, аудио и т.д (og:type
) и другие данные.
В большинстве случаев задача OpenGraph — это оформление ссылок в соцсетях. Но суть OpenGraph чуть шире: это попытка сделать протокол для семантического веба.
Давняя мечта инженеров и учёных, в том числе самого Тима Бернерса-Ли, создателя WWW — сделать надстройку над текущим вебом, позволяющую машинам однозначно определять смысл разных блоков на странице.
Один из подходов — добавить специальную разметку. Например, вместо какого-нибудь стандартного <div>
вы можете обернуть статью в своём блоге в тег <article>
. Поисковые роботы и любые другие машины тогда явно поймут: это статья, и вот её границы. Кроме <article>
в современном HTML5 присутствуют теги <aside>
для сайдбаров, <nav>
для меню и элементов навигации, <header>
и <footer>
для заголовка и «подвала» страницы, соответственно, <section>
для раздела страницы, и некоторые другие. Технически они ничем не отличаются от div-элементов и ведут себя так же (это блочные элементы).
OpenGraph позволяет добавить смысловую разметку на уровне страницы. С его помощью можно, например, указать, песни каких исполнителей присутствуют или упоминаются на странице, о каком фильме идёт речь, какие актёры описаны в тексте и так далее. См. соответствующие параметры на официальном сайте OG Protocol.
К сожалению, подавляющее большинство страниц в интернете не имеет никакой сколько-нибудь полезной семантической надстройки. OpenGraph частично улучшил ситуацию, но обычно работа по добавлению OG-тегов ограничивается добавлением базовых свойств «чтобы в социалках нормально выглядело».
Проверить разметку OpenGraph можно, используя специальные валидаторы. Основным инструментом является официальный Debugger от Facebook. Просто вставьте ссылку на вашу страницу и валидатор покажет, как будет выглядеть страница при вставке в социальные сети, а также покажет все задействованные поля в разметке OpenGraph.
В следующих курсах мы поговорим подробнее о том, как использовать подходы и идеи семантического веба для улучшения доступности вашего сайта и поисковой оптимизации.
Twitter распознаёт og-теги, но вы можете указать специальные данные конкретно для этой соцсети. Их формат называется Twitter Cards, и позволяет, кроме прочего, указать самого автора (@username).
Некоторые социальные сети также имеют собственные особенности или форматы для метаинформации. Вы можете найти их по запросу вроде "linkedin meta tags".
Вам ответят команда поддержки Хекслета или другие студенты.
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно
Наши выпускники работают в компаниях:
Зарегистрируйтесь или войдите в свой аккаунт