Главная // Блог // Разметка Open Graph для HostCMS v.6

Разметка Open Graph для HostCMS v.6

/ 28 февраля 2019 г. / 3779
Разметка Open Graph для HostCMS v.6
Разметка Open Graph для HostCMS v.6

Для начала узнаем, что такое Open Graph? Open Graph - это протокол, который формирует вид внешней ссылки в социальных сетях. Первоначально этот протокол был разработан для Facebook, однако сейчас используется и в других соцсетях.

Как работает протокол Open Graph?

Вначале разберём ситуацию, когда на вашем сайте нет этого протокола. Когда пользователь хочет поделиться статьей (страницей товара) вашего сайта в своей социальной сети, сайт самостоятельно загружает в превью любую картинку и текст, чаще всего то, что первое ему попадет. И не факт, что картинка будет по теме - это может быть какая-то иконка или картинка из дополнительного контента. Мало кто захочет оставлять у себя на стене такую ссылку. Возможно, что Пользователь откажется поделиться станицей вашего сайта.

Что же происходит, когда вы разместили на своем сайте протокол Open Graph:

  • в превью к ссылке подгружается релевантное изображение или видео и то, которое вы хотите, чтобы отображалось;
  • пост в соцсети можно сопроводить надлежащим текстом, описанием и слоганом;
  • публикация выглядит как полноценный объект.

Подведём итог. Использование Open Graph делает ссылку на ваш сайт в социальной сети более привлекательной. Пользователи соцсети охотнее перейдут по такой ссылке, так как им сразу видно, что их ожидает после посещения страницы вашего сайта.

А теперь самое главное - код Open Graph, который вам нужно разметить на сайте. Код размещается в Основном макете в блоке <HEAD>.

/ код OpenGraph

  <?php

  $bOpenGraph = FALSE;


// Open Graph

  if (is_object(Core_Page::instance()->object))

  {

  $bInformationItem = Core_Page::instance()->object instanceof Informationsystem_Controller_Show;

  $bShopItem = Core_Page::instance()->object instanceof Shop_Controller_Show;

  

  if ($bInformationItem || $bShopItem)

  {

  echo'<meta property="og:site_name" content="inikSite.ru">'; // замените на свой сайт

  if (Core_Page::instance()->object->item)

  {

  $bOpenGraph = TRUE;

  

  $aOpenGraph = array();

  

  $oEntity = $bInformationItem

  ? Core_Entity::factory('Informationsystem_Item', Core_Page::instance()->object->item)

  : Core_Entity::factory('Shop_Item', Core_Page::instance()->object->item);

  

  $type = $bInformationItem

  ? 'article'

  : 'product';

  

  $aOpenGraph['og:type'] = $type;

  $aOpenGraph['og:title'] =  $oEntity->name;

  $aOpenGraph['og:description'] = strip_tags(Core_Str::cutSentences($oEntity->description));


 $oSite = Core_Entity::factory('Site', CURRENT_SITE);

  $oSite_Alias = $oSite->getCurrentAlias();

  

  if ($oSite_Alias)

  {

  $sSiteURL = $oSite_Alias->name;

  

  $protocol = Core_Page::instance()->structure->https

  ? 'https://'

  : 'http://';

  

  $aOpenGraph['og:url'] = $protocol . $sSiteURL

  . Core_Page::instance()->structure->getPath()

  . $oEntity->getPath();

  

  if ($oEntity->image_large != '')

  {

  $aOpenGraph['og:image'] = $protocol . $sSiteURL . $oEntity->getLargeFileHref();

  $aOpenGraph['og:image:width'] = $oEntity->image_large_width;

  $aOpenGraph['og:image:height'] = $oEntity->image_large_height;

  }

  

  if ($bShopItem)

  {

  $aOpenGraph['product:price:amount'] = $oEntity->price;

  $aOpenGraph['product:price:currency'] = $oEntity->shop_currency->code;

  }

  

  }

  

  foreach ($aOpenGraph as $sProperty => $sContent)

  {

  ?><meta property="<?php echo htmlspecialchars($sProperty)?>" content="<?php echo htmlspecialchars($sContent)?>" /><?php

  

  echo PHP_EOL;

  }

  }

  elseif (Core_Page::instance()->object->group)

  {

  $bOpenGraph = TRUE;


 $aOpenGraph = array();

  

  $oEntity = $bInformationItem

  ? Core_Entity::factory('Informationsystem_Group', Core_Page::instance()->object->group)

  : Core_Entity::factory('Shop_Group', Core_Page::instance()->object->group);

  

  $type = $bInformationItem

  ? 'article'

  : 'website';

  

  $aOpenGraph['og:type'] = $type;

  $aOpenGraph['og:title'] = $oEntity->name;

  $aOpenGraph['og:description'] = $oEntity->seo_description;


 $oSite = Core_Entity::factory('Site', CURRENT_SITE);

  $oSite_Alias = $oSite->getCurrentAlias();

  

  if ($oSite_Alias)

  {

  $sSiteURL = $oSite_Alias->name;

  

  $protocol = Core_Page::instance()->structure->https

  ? 'https://'

  : 'http://';

  

  $aOpenGraph['og:url'] = $protocol . $sSiteURL

  . Core_Page::instance()->structure->getPath()

  . $oEntity->getPath();

  

  if ($oEntity->image_large != '')

  {

  $aOpenGraph['og:image'] = $protocol . $sSiteURL . $oEntity->getLargeFileHref();

  }else{

  $aOpenGraph['og:image'] = 'https://aquasan.ru/images/logo.jpg';

  }

  }

  

  foreach ($aOpenGraph as $sProperty => $sContent)

  {

  ?><meta property="<?php echo htmlspecialchars($sProperty)?>" content="<?php echo htmlspecialchars($sContent)?>" /><?php

  

  echo PHP_EOL;

  }

  }

  }

  }

  

  if (!$bOpenGraph && Core_Page::instance()->structure)

  {

  $aOpenGraph = array();

  

  $oEntity = Core_Page::instance()->structure;

  

  $type = 'website';

  

  $aOpenGraph['og:type'] = $type;

  $aOpenGraph['og:title'] = $oEntity->Site->name;

  $aOpenGraph['og:description'] = strip_tags(Core_Str::cutSentences($oEntity->seo_description));


 $oSite = Core_Entity::factory('Site', CURRENT_SITE);

  $oSite_Alias = $oSite->getCurrentAlias();


 if ($oSite_Alias)

  {

  $sSiteURL = $oSite_Alias->name;

  

  $protocol = Core_Page::instance()->structure->https

  ? 'https://'

  : 'http://';

  

  $aOpenGraph['og:url'] = $protocol . $sSiteURL

  . $oEntity->getPath();

  

  $aOpenGraph['og:image'] = 'https://aquasan.ru/images/logo.jpg';

  

  }

  

  foreach ($aOpenGraph as $sProperty => $sContent)

  {

  ?><meta property="<?php echo htmlspecialchars($sProperty)?>" content="<?php echo htmlspecialchars($sContent)?>" /><?php


 echo PHP_EOL;

  }

  }
?>

Для пояснения - данный код показывает разметку на страницах групп Информационных систем, в Статье, в группах Каталога товаров и в Карточке товара. В качестве изображений выбирается изображение информациооной группы, статьи, группы каталога или товара. Это же относится и к og:title и og:description.

Чтобы этот код прошёл валидацию в Яндекс, обязательно пропишите в <HEAD> префиксы для параметра product:

// обязательно для валидности добавить в head префиксы
<head prefix=
    "og: http://ogp.me/ns#
     fb: http://ogp.me/ns/fb#  
     product: http://ogp.me/ns/product#">

Основные теги Open Graph

  • og:title — указывает, какой заголовок будет ссылки;
  • og:description — описание к объекту, можно вместить больше 160 символов, но не стоит перегибать палку;
  • og:type — указывает тип объекта - article |  website | product (если объектов на странице несколько, то следует выбрать основной и указать его);
  • og:image — URL ссылка на нужное изображение ;
  • og:url — канонический урл, который будет использоваться как постоянный идентификатор объекта.
Разметка Open Graph для HostCMS v.6
HostCMS v.6, OpenGraph

Понравилась статья?
Будем признательны, если поделитесь в соцсетях или мессенджерах, а также присоединитесь к нашей группе Вконтакте. Будет интересно!

Вас может заинтересовать:

HOSTCMS v.6. Правильная семантическая микроразметка
HOSTCMS v.6. Правильная семантическая микроразметка
Не будем углубляться в терминологию и описание того, что означает микроразметка, т.к. об этом уже много чего написано и я беру за аксиому, что вы об этом уже знаете, раз читаете данную статью. Задача статьи описать более конкретный случай, а именно - использование микроразметки в XSL шаблонах HostCMS...
26 октября 2016 / 5688 ⤑
HostCMS v.6. Вывод товаров по значению дополнительного свойства типа строка
HostCMS v.6. Вывод товаров по значению дополнительного свойства типа строка
Вам нужно вывести товары интернет-магазина по какому-то, заранее определенному, признаку? Для начала создаем дополнительное свойство товара, пройдя по цепочке «Интернет-магазин ⇒ Товар ⇒ Свойства товара».
30 марта 2013 / 5808 ⤑
HOSTCMS v.6. Внедряем coin-slider
HOSTCMS v.6. Внедряем coin-slider
Coin-slider один из популярных слайдеров, который используется на сайтах. Чаще всего слайдеры используют на Главной странице, для придания ей динамики, привлечения внимания к «горячей» информации. В этой статье рассказывается, как внедрить этот слайдер XSL-шаблон сайта, разработанного на HostCMS.
6 июля 2013 / 6124 ⤑
Кредитная кнопка (для сайтов на HostCMS v.6)
Кредитная кнопка (для сайтов на HostCMS v.6)

Была такая задача в ТЗ клиента — внедрить «кредитную кнопку» Банка «Русский Стандарт» в корзину интернет-магазина. Возможно, кому-то это пригодится.

31 марта 2013 / 3203 ⤑
Показ отложенных товаров в краткой корзине (для сайтов на HostCMS v6)
Показ отложенных товаров в краткой корзине (для сайтов на HostCMS v6)
После последнего обновления 6.1.4 появилась возможность показать пользователю в краткой корзине отложенные им товары. Удобная функция, особенно для тех интернет-магазинов, в которых пользователи обычно покупают сразу несколько товаров за раз...
9 июля 2014 / 6576 ⤑
HOSTCMS v.6. Ссылка на все товары производителя в карточке товара
HOSTCMS v.6. Ссылка на все товары производителя в карточке товара
Если нужно дать возможность покупателю выбрать товары текущего производителя, когда он находится в карточке товара, то вам пригодится данная небольшая доработка...
21 августа 2013 / 3236 ⤑
Мы используем файлы cookie. Они помогают улучшить ваше взаимодействие с сайтом.