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

MasterNik / 28 февраля 2019 г. / 3961

Для начала узнаем, что такое 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 — канонический урл, который будет использоваться как постоянный идентификатор объекта.