Разметка 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. Внедрение в макет кода формы с reCaptcha
HOSTCMS v.6. Внедрение в макет кода формы с reCaptcha

Хочу поделиться с вами кодом, который размещается в макете страницы и подгружает в нее форму с reCaptcha...

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

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

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

Используем готовые шаблоны для сайтов
Используем готовые шаблоны для сайтов

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

Показ отложенных товаров в краткой корзине (для сайтов на HostCMS v6)
Показ отложенных товаров в краткой корзине (для сайтов на HostCMS v6)

После последнего обновления 6.1.4 появилась возможность показать пользователю в краткой корзине отложенные им товары. Удобная функция, особенно для тех интернет-магазинов, в которых пользователи обычно покупают сразу несколько товаров за раз...

HostCMS v.6. Вертикальное меню на jQuery
HostCMS v.6. Вертикальное меню на jQuery

Простой пример левого вертикального выпадающего меню для групп товаров интернет магазина. Простая установка и настройка...

HOSTCMS v.6. Выводим производителей с разбивкой по алфавиту
HOSTCMS v.6. Выводим производителей с разбивкой по алфавиту

Если у вас в интернет-магазине много производителей (брендов), то приведенное нами решение поможет организовать показ всех производителей с разбивкой по алфавиту...

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