Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 <h3>OpenGraph в простейшем случае</h3>

2 <p>В социальных сетях всегда делятся ссылками. Facebook и некоторые другие социальные сети изначально никак не обрабатывали те ссылки, которые публиковали их пользователи. Затем стало понятно, что лучше как-нибудь вычленять информацию из ссылки и показывать её рядом со ссылкой.</p>

3 <p>Мы знаем, что у правильной веб-страницы есть метатеги. Поэтому имея на руках URL можно запросить страницу и узнать:</p>

4 <ul><li>язык страницы</li>

5 <li>заголовок</li>

6 <li>описание и, возможно, ключевые слова (<meta name="description"..., <meta name="keywords")</li>

7 </ul><p>К тому же можно взять первую достаточно большую картинку со страницы и считать её обложкой.</p>

8 <p>Когда Facebook стал не просто популярным сайтом, а по-настоящему глобальной социальной сетью, компания решила создать специальный формат разметки, чтобы веб-мастеры могли чётко задать информацию для вывода в ленте Facebook.</p>

9 <p>Этот формат называется<a>OpenGraph</a>, и его распознают не только Facebook, но и ВКонтакте, Twitter и LinkedIn.</p>

10 <p>OpenGraph-теги (или og-теги) - это специальные параметры для стандартного элемента meta, который размещается внутри head.</p>

11 <p>Вот простой пример:</p>

12 <p>Эта информация никак не видна на самой странице, но если ссылку на такую страницу запостить в социальную сеть, то автоматически "подцепятся" заголовок, описание и обложка.</p>

13 <p>Также можно указать язык (og:locale), тип содержания - будь это статья, видео, аудио и т.д (og:type) и другие данные.</p>

14 <h3>OpenGraph и семантический веб</h3>

15 <p>В большинстве случаев задача OpenGraph - это оформление ссылок в соцсетях. Но суть OpenGraph чуть шире: это попытка сделать протокол для семантического веба.</p>

16 <p>Давняя мечта инженеров и учёных, в том числе самого Тима Бернерса-Ли, создателя WWW - сделать надстройку над текущим вебом, позволяющую машинам однозначно определять смысл разных блоков на странице.</p>

17 <p>Один из подходов - добавить специальную разметку. Например, вместо какого-нибудь стандартного <div> вы можете обернуть статью в своём блоге в тег <article>. Поисковые роботы и любые другие машины тогда явно поймут: это статья, и вот её границы. Кроме <article> в современном HTML5 присутствуют теги <aside> для сайдбаров, <nav> для меню и элементов навигации, <header> и <footer> для заголовка и "подвала" страницы, соответственно, <section> для раздела страницы, и некоторые другие. Технически они ничем не отличаются от div-элементов и ведут себя так же (это блочные элементы).</p>

18 <p>OpenGraph позволяет добавить смысловую разметку на уровне страницы. С его помощью можно, например, указать, песни каких исполнителей присутствуют или упоминаются на странице, о каком фильме идёт речь, какие актёры описаны в тексте и так далее. См. соответствующие параметры на официальном сайте<a>OG Protocol</a>.</p>

19 <p>К сожалению, подавляющее большинство страниц в интернете не имеет никакой сколько-нибудь полезной семантической надстройки. OpenGraph частично улучшил ситуацию, но обычно работа по добавлению OG-тегов ограничивается добавлением базовых свойств "чтобы в социалках нормально выглядело".</p>

20 <p>Проверить разметку OpenGraph можно, используя специальные валидаторы. Основным инструментом является официальный<a>Debugger от Facebook</a>. Просто вставьте ссылку на вашу страницу и валидатор покажет, как будет выглядеть страница при вставке в социальные сети, а также покажет все задействованные поля в разметке OpenGraph.</p>

21 <h3>Schema Markup, SEO и будущее семантического веба</h3>

22 <p>В следующих курсах мы поговорим подробнее о том, как использовать подходы и идеи семантического веба для улучшения доступности вашего сайта и поисковой оптимизации.</p>

23 <h3>Twitter Cards и пр.</h3>

24 <p>Twitter распознаёт og-теги, но вы можете указать специальные данные конкретно для этой соцсети. Их формат называется<a>Twitter Cards</a>, и позволяет, кроме прочего, указать самого автора (@username).</p>

25 <p>Некоторые социальные сети также имеют собственные особенности или форматы для метаинформации. Вы можете найти их по запросу вроде "linkedin meta tags".</p>