Если у вас есть вопросы по статье или нужна помощь в создании сайта, пишите нам в чат на сайте или Вконтакте. Не забудьте оставить свой e-mail и мы ответим в самое ближайшее время.
Разметка 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 — канонический урл, который будет использоваться как постоянный идентификатор объекта.
