С чем вам помочь?

Задавайте вопрос или опишите проблему, с которой Вы столкнулись

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

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

Как работать с сео можете ознакомиться по адресу:
http://www.advantshop.net/help/pages/settings-of-seo-module

"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 и поставьте галочку в строке «выводить разметку»


Рисунок 3.

 

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

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

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


Рисунок 4.

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


Рисунок 5.

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


Рисунок 6.

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

Более подробно Вы можете почитать на facebook
https://developers.facebook.com/docs/sharing/opengraph

Открыть онлайн чат? Открыть
Статья оказалась полезной? Да Нет
Как мы можем улучшить статью?
Благодарим за отзыв.
Благодарим за отзыв. Мы улучшим эту статью.
Произошла ошибка.
Не нашли нужную статью? Предложить тему
Не нашли нужную статью?
Благодарим за отзыв.
Произошла ошибка.

Общие настройки магазина

Настройка email почты магазина Как подключить почту для сайта? Статические блоки (CMS) Как привязать магазин к домену (доменному имени)? Товары, мета по умолчанию - параметр "дополнительное описание" Как разместить ссылку на скачивание документа (файла) Настройка кнопок авторизации Open ID Google Запуск задач по расписанию Как изменить номер телефона на главной странице магазина Структура URL в интернет-магазине Как поменять текст Copyright внизу главной страницы Как сменить пароль администратора для магазина версии 5.0 Добавление карты Google в статическую страницу Управление видом вывода товаров в каталоге Письма клиентам Бренды (производители) Описание форматов писем Как разместить в карточке товара баннер, единый для всех товаров Как отключить фильтр производителей Как настроить отображение остатка в карточке товара Как переместить товары не в наличии в конец списка Как настроить отображение остатка в карточке товара Как настроить синхронизацию магазина с 1С Как добавить отзыв товару Как разместить свойство в карточке товара над ценой Как настроить отображение товаров на странице Бренды Подвал сайта Настройка сертификатов\купонов в корзине Поиск Микроразметка «Протокол Open Graph» Как изменить количество товаров на главной Менеджеры Мобильная версия сайта Запуск задач по расписанию для версии 5.0 Экспорт-импорт 301 редиректов Создание пунктов главного меню Работа со статическими страницами Онлайн консультант Как загрузить фотографию в текст страницы, описания или новости Сообщение - Магазин в настоящее время недоступен Подключение к Google Analytics API Добавление карты Yandex в статическую страницу "Контакты" Как подключить мобильный шаблон для интернет-магазина Валюта в магазине. Настройка валюты в магазине Как сменить пароль администратора Как войти в панель администрирования Настройка СЕО (SEO) модуля Документация AdVantShop.NET Добавление карты Google в статическую страницу Контакты Как подключить счетчики статистики на сайте Настройка конфигуратора интернет-магазина (инсталлятора) Настройка внешнего вида интернет-магазина Настройка почты и управление рассылками Работа со статическими блоками Установка счетчиков статистики. Яндекс.Метрика Настройка редиректа сайта с www на без www Установка счетчика посещаемости Liveinternet Установка счетчика посещаемости Google Analytics Установка счетчика статистики Google Analytics Карта сайта (sitemap) Редактирование блоков и текстов на главной странице Разграничение прав доступа в панель администрирования Как прописать дополнительные опции к товару Интеграция с системой MailChimp: подключение сервиса Добавление новости в интернет магазин AdVantShop.NET Настройка файла robots.txt Подтверждение владения сайтом Подтверждение права владения сайтом: загрузка файла в корень
© AdvantShop. Платформа для открытия интернет-магазина.