Микроразметка "Протокол Open Graph"

В данной статье рассмотрим микроразметку "Протокол Open Graph"

• Описание метаданных
• Подключение Open Graph на сайте
• Отображение

Open Graph Protocol представляет собой микроразметку от Facebook*, которая в 2010 году была разработана для того, чтобы интегрировать веб-сайты с соц. сетью. Сейчас данный формат используется в Twitter, Google+, Вконтакте, Одноклассники, Pinterest и т.д. С помощью протокола Open Graph можно управлять представлением контента в социальных медиа, тем самым улучшая его взаимодействие с пользователями. Например, мы можем определить, название, описание и фото, которое будет отображаться на странице в социальной сети и определить тип контента.

Другими словами, протокол Open Graph позволяет любой веб-странице стать полноценным объектом в социальных сетях. Предоставляет возможность связывать свой контент с социальными сетями, возможность правильно его там представлять.

Описание метаданных

В платформе AdvantShop используются следующие метаданные:

"og:site_name" - Если ваш объект является частью большого web-сайта, название, должно отображаться на всех страницах сайта. Т.е. это общее название, которое Вы указали в панели администрировании, пункт меню "Настройки->Общие настройки", строка "Название магазина"

Рисунок 1.

Рисунок 2.

"og:title" - название Вашего объекта, как он должен отображаться в графе, например название магазина. Данный текст будет браться из настроек SEO, строка title.

Как работать с сео можете ознакомиться по здесь.

"og:url" - канонический URL-адрес объекта, который будет использоваться в качестве его постоянного ID в графе. Т.е. в данном мета будет url страницы.

"og:description" - Одно-два предложения описания вашего объекта. Данный текст будет браться из настроек SEO, строка description.

"og:type" – Тип объекта.
Например, для продукта тип имеет значение product, для общих страниц на сайте тип будет website

"og:image" - URL-адрес изображения, который должен определить Ваш объект в графе для изображения.
Другими словами, это ссылка на картинку, которая будет отображена в социальных сетях.
Если это карточка товара, то ссылка будет на главную фотографию товара.
Если каталог, то на фотографию каталога.
Если новость или бренд, то ссылка будет на картинку из новости или производителя соответственно.

Все метаданные записываются в head страницы таким образом:

<meta property="og:title" content="Мой магазин на платформе AdvantShop.NET " />

В соц.сетях выглядеть будет так (рис. 3):

Рисунок 3.

Как подключить Open Graph на сайте

Для того, чтобы включить разметку на сайте, Вам необходимо перейти в панель администрирования, пункт меню "Настройки" "SEO и счетчики", вкладка "Open Graph" и поставьте галочку в строке "Выводить разметку" (рис. 4 и 5)

Рисунок 4.

Рисунок 5.

"fb:admins" - id пользователей/администраторов приложения, если несколько администраторов, указывать можно через запятую. Данное перечисление необходимо, если у Вас подключен со стороны facebook* плагин комментариев и необходимо модерировать комментарии.

Отображение на сайте и при размещении в соц.сетях

После того, как включили на сайте микроразметку, перейдите на любую страницу сайта в клиентской части. Например, в карточку товара.

Далее, нажмите правой кнопкой мыши и выберите "Просмотр кода страницы" (рис. 6)

Рисунок 6.

Откроется исходный код данной страницы. И в head можно увидеть микроразметку (рис. 7).

Рисунок 7.

При размещении в соц.сетях, страница будет выглядеть следующим образом: (рис. 8)

Рисунок 8.

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

Готово. Мы рассмотрели, что такое микроразметка Open Graph протокол, как ее включить на сайте и для чего она необходима.

* Facebook и Instagram принадлежат компании Meta, чья деятельность запрещена на территории России с 21 марта 2022 года.