Главная > Блог > Web-разработка > Разное >

Микроразметка страницы Open Graph

21.01.2019

Теги: HTML • SEO • Web-разработка • МетаТеги • СтраницаСайта

Социальными кнопками вроде «Поделиться», «Лайкнуть», «Share», «Like» и подобными на страницах современных сайтов сегодня никого не удивить. Их предназначение, ввиду огромной популярности социальных сетей, известно всем и каждому.

Однако если для миллионов рядовых пользователей Сети по всему миру они (эти самые кнопочки) — обычный инструмент размещения в своём аккаунте Facebook, Twitter или ВКонтакте анонса понравившейся статьи или новости, то для владельца сайта, откуда эти материалы берутся, такие кнопки вкупе с очевидной пользой могут представлять определённую головную боль.

Дело в том, что «лайки» и добавление нужной страницы в социальные сети далеко не всегда происходит корректно. Самый распространённый сбой состоит в том, что размещённое превью содержит не тот графический контент. В результате новость в социальной сети сопровождается не тематическим фото, а, скажем, рисунком рекламного баннера, который также присутствовал на странице, с которой эта новость была взята.

Протокол Open Graph от Facebook

Впрочем, это устраняется довольно просто — с помощью дополнительного стандарта микроразметки страницы Open Graph. Последний разработан Facebook и призван контролировать текстово-графический анонс, который формируется при добавлении ссылки на ресурс в социальную сеть.

На практике протокол Open Graph представляет собой особый набор мета-тегов, которые добавляются в html-код страницы (в пределах тега head) и обеспечивают нужное отображение превью страницы сайта в социальной сети. Несмотря на то, что Open Graph разработал и внедрил Facebook, сегодня данный стандарт разметки страницы используется другими известными социальными платформами.

Ключевые мета-теги Open Graph

В стандарте Open Graph одна страница описывает только один объект — человека, компанию или продукт. Для этого объекта и указываются все данные. Чтобы передать информацию соц.сетям, необходимо в элемент head добавить следующие метатеги:

og:title — название объекта;
og:type — тип объекта (website — универсальный, article — статья, video.movie — видео);
og:image — URL изображения, описывающего объект;
og:url — канонический URL объекта;

og:description — краткое описание объекта;
og:audio — URL звукового файла, который относится к описываемому объекту;
og:video — URL видео файла, который относится к описываемому объекту;
og:site_name — название сайта, на котором размещена информация об объекте;
og:locale — язык страницы (ru_RU, en_GB, de_DE).

Мета-теги og:title, og:type, og:image и og:url являются обязательными. Кроме того, для тега html необходимо добавить атрибут prefix.

<html prefix="og: http://ogp.me/ns#">
<head>
    ...
    <meta property="og:title" content="Ошибка в системе Google AdSense" />
    <meta property="og:type" content="article" />
    <meta property="og:image" content="http://server.com/upload/images/1051f4d0d4dee5fe79e56c59aa71c063.jpg" />
    <meta property="og:url" content="http://server.com/news/id/5396" />
    <meta property="og:description" content="Описание ошибки для новых пользователей в системе Google AdSense " />
    <meta property="og:locale" content="ru_RU" />
    ...
<head>

Подробное описание протокола Open Graph представлено здесь.

Сервис проверки Open Graph

Подводя итог, необходимо отметить, что контроль за разметкой страницы Open Graph можно вести посредством специализированного сервиса, разработанного социальной сетью Facebook. С его помощью вы будете знать, как Facebook будет отображать анонс той или иной внешней страницы. Владея такой информацией, всегда можно внести необходимые коррективы в тот или иной мета-тег для лучшего отображения превью в социальных медиа.

Дополнительно

Поиск: HTML • OpenGraph • SEO • Web-разработка • Соц сети • Страница сайта • Мета теги