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

Разметка 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. Вывод товаров по значению дополнительного свойства типа строка
HostCMS v.6. Вывод товаров по значению дополнительного свойства типа строка

Вам нужно вывести товары интернет-магазина по какому-то, заранее определенному, признаку? Для начала создаем дополнительное свойство товара, пройдя по цепочке «Интернет-магазин ⇒ Товар ⇒ Свойства товара».

HOSTCMS v.6. Полезные php коды
HOSTCMS v.6. Полезные php коды

Некоторые полезные php коды для вывода данных на странице сайта.

HOSTCMS v.6. Красивое горизонтальное выпадающее меню на CSS
HOSTCMS v.6. Красивое горизонтальное выпадающее меню на CSS

Меню адаптированно к использованию на сайтах под администрированием редакции HostCMS v.5 для вывода элементов каталога товаров. В выпадающем меню также выводится изображение подгруппы.

9 шагов для создания веб-сайта на HostCMS
9 шагов для создания веб-сайта на HostCMS

Вы можете создать веб-сайт менее чем за 1 час. Вам также не нужно быть техническим мастером.

Неважно, для бизнеса это или для удовольствия. Вам не нужен модный дизайнер или дорогой разработчик. Просто следуйте простым нашим шагам, и вы будете онлайн в кратчайшие сроки.

HOSTCMS v.6. Ссылка на все товары производителя в карточке товара
HOSTCMS v.6. Ссылка на все товары производителя в карточке товара

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

Кредитная кнопка (для сайтов на HostCMS v.6)
Кредитная кнопка (для сайтов на HostCMS v.6)

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

Мы используем cookie-файлы, чтобы получить статистику, которая помогает нам обеспечивать вас лучшим контентом. Вы можете прочитать подробнее о cookie-файлах или изменить настройки браузера. Отключение cookie-файлов может привести к неполадкам в работе сайта. Продолжая пользоваться сайтом без изменения настроек, вы даете согласие на использование ваших cookie-файлов. Это совершенно безопасно!