Блог

Разметка 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

Понравилась статья? Поделитесь

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

Наши услуги по созданию сайтов

WEB ДИЗАЙН

Разработка дизайна и создание интернет-сайта.

ПОДДЕРЖКА САЙТА

Поддержка работоспособности. Написание текстов и статей. Наполнение товарами.

ГОТОВЫЙ ДИЗАЙН

Готовые шаблоны интернет-магазинов и корпоративных сайтов на HostCMS.

БОЛЬШЕ УСЛУГ

Разработка логотипа. Редизайн сайта. Замена вашей CMS на HostCMS. Калькуляторы. Формы.