Как вам помочь ?

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

Статья актуальна для версии магазина: 10.0 | 8.0 | 6.0 | 5.0

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

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

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

 

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

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

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

(рис. 1 и 2):

 

Микроразметка "Протокол Open Graph" - 1470
Рисунок 1.

Микроразметка "Протокол Open Graph" - 6065
Рисунок 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):

Микроразметка "Протокол Open Graph" - 3854
Рисунок 3.

 

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

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

Микроразметка "Протокол Open Graph" - 8204
Рисунок 4.

Микроразметка "Протокол Open Graph" - 7239
Рисунок 5.

"fb:admins" - id пользователей/администраторов приложения, если несколько администраторов, указывать можно через запятую. Данное перечисление необходимо, если у Вас подключен со стороны facebook плагин комментариев и необходимо модерировать комментарии. Подробнее можете уточнить информацию по ссылке https://developers.facebook.com/docs/plugins/comments/?translation

 

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

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

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

Микроразметка "Протокол Open Graph" - 8235
Рисунок 6.

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

Микроразметка "Протокол Open Graph" - 2029
Рисунок 7.

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

Микроразметка "Протокол Open Graph" - 1340
Рисунок 8.

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

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

Более подробно Вы можете почитать на facebook.

Другие статьи по теме

Статья оказалась полезной?
Благодарим за отзыв.

Как мы можем улучшить статью?

Не нашли нужную статью? Предложить свою тему

Не нашли нужную статью?

Благодарим за отзыв.

Тэги: open graph, протокол, метаданные, мета, разметка, микроразметка, соц.сети, facebook, vk, Twitter, Google+, Вконтакте, Одноклассники, Pinterest

Мы используем cookies. Подробнее...
0