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

Гарантированные подарки!

Планируете открыть интернет-магазин? Сейчас самое время!

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

Актуально для версии магазина: 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):

 


Рисунок 1.


Рисунок 2.

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

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

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

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

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

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

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

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

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

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


Рисунок 3.

 

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

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


Рисунок 4.


Рисунок 5.

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

 

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

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

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


Рисунок 6.

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


Рисунок 7.

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


Рисунок 8.

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

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

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

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

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

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

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

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

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