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

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

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

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

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

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

 

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

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

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

Описание метаданных
Рисунок 1.

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

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

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

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

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

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

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

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

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

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

В соц.сетях выглядеть будет так
Рисунок 2.

 

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

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

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

 

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

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

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

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

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

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

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

При размещении в соц.сетях, страница будет выглядеть следующим образом
Рисунок 6.

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

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

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

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

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

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

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

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

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