Матвей Земсков

Заметки веб-мастера

Немного о веб-технологиях

Мой блог содержит заметки о различных веб-технологиях, как клиентских, так и серверных. Здесь будут раскрыты вопросы html-верстки, программирования на javaScript и jQuery,разработки на PHP. Не останутся без внимания популярные системы управления сайтом «1С-Битрикс», Joomla и другие. О работе с ними, я также буду писать.

Мои заметки предназначены в основном для начинающих веб-мастеров. Несмотря на это, опытные разработчики также найдут здесь что-нибудь интересное для себя.

В своем блоге я собираюсь публиковать статьи о современных веб-технологиях (HTML5, CSS3 и других). Если в процессе работы над проектами я открываю для себя «свежее» решение какой-либо задачи, я записываю сюда информацию об этом, что позволяет мне при необходимости применять полученные знания в будущем.

Надеюсь информация будет полезна для посетителей.

 
Суббота, 15 августа 2020 15:06

OpenGraph разметка на сайте под управлением 1С-Битрикс

Оцените материал
(0 голосов)

На сайте одного из наших клиентов нужно было внедрить микроразметку OpenGraph. Сделать это нужно было не только на статических страницах сайта, но и на страницах с динамической информацией.

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

Как известно, OpenGraph разметка используется для отображения анонса страницы при размещении ссылки на нее в социальных сетях. Обычно для внедрения данной микроразметки использовать основные метаданные:

  • og:title – заголовок страницы без названия сайта (брать из тега <title>);
  • og:type – тип мультимедиа, к которому относятся материалы, по умолчанию использовать значение website;
  • og:url – канонический URL страницы без переменных сеанса, параметров для идентификации пользователей и счетчиков;
  • og:description – краткое описание страницы (брать из meta-описания description);
  • og:image – URL изображения, описывающего объект.

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

Также можно почитать документацию на русском.

Для проверки результатов работы по внедрению можно с помощью сервиса Яндекса. Также существует сторонний сервис для проверки.

Для статичных страниц нам нужно добавить свойство страницы для хранения ссылки на изображение (og:image). Делаем это в административной части в разделе Настройки модуля «Управление структурой».

Ссылка на изображение в свойствах страницы

Теги og:title и og:description будут заполняться значениями стандартных свойств страницы («Заголовок» и «Описание»).

Значение og:type в данном случае зависит от информации, которая будет выводится на странице если это новости, статьи или описание товаров, оно будет равно article. Иначе – website.

Далее добавляем код для вывода разметки в файл header.php шаблона сайта. Он будет работать на страницах и со статической, и с динамической информацией.

В самом начале фрагмента кода мы вычисляем url текущей страницы, чтобы вывести его в атрибуте content свойства og:url.

Также обращу ваше внимание на значение og:locale и og:site_name, вывод которых размещен в конце описываемого фрагмента кода. Значение этих свойств одинаковое на всех страницах.

Для og:locale это ru_RU, а для og:site_name - $_SERVER['SERVER_NAME'].

Также уточню, что на демо-сайте, шаблон которого мы редактируем существуют следующие разделы, содержащие динамическую информацию: /news, /catalog и /can_buy.

PHP

	$cur_page = $APPLICATION->GetCurPage();
	$curPageUrl = (CMain::IsHTTPS()) ? "https://" : "http://";
    $curPageUrl .= $_SERVER["HTTP_HOST"].$cur_page;
	?>	
	<meta property="og:title" content="<?$APPLICATION->ShowTitle();?>" />
	<?if (strpos($APPLICATION->GetCurPage(), 'news') !== false || strpos($APPLICATION->GetCurPage(), 'catalog') !== false || strpos($APPLICATION->GetCurPage(), 'can_buy') !== false):?>
	<meta property="og:type" content="article" />
	<?else:?>
	<meta property="og:type" content="website" />
	<?endif;?>
	<meta property="og:url" content="<?=$curPageUrl;?>" />
	<meta property="og:description" content="<?$APPLICATION->ShowProperty('description');?>" />	
	<meta property="og:image" content="<?$APPLICATION->ShowProperty('og_image');?>" />
	<meta property="og:locale" content="ru_RU" />
	<meta property="og:site_name" content="<?=$_SERVER['SERVER_NAME']?>" />

В указанных выше разделах на страницах размещены компоненты для вывода динамической информации. Например, bitrix:news, bitrix:catalog и другие. Если на статических страницах значения тега og_image бралось из свойства страницы, то сейчас его будем получать из поля изображения для анонса элементов соответствующих инфоблоков. Нам нужно кастомизировать шаблоны простых компонентов (в каталоге – список товаров и карточку товара, для новостей – детальную новость). Добавляем в шаблоны компонентов 2 файла (result_modifier.php и component_epilog.php) со следующим содержанием:

PHP

/**
 * result_modifier.php
 * add preview picture array
 */
$cp = $this->__component; // объект компонента
if (is_object($cp))
    $cp->SetResultCacheKeys(array('PREVIEW_PICTURE'));

PHP

/**
 * component_epilog.php
 * setting the value of og_image page property
 */
global $APPLICATION;
if(!empty($arResult['PREVIEW_PICTURE']['SRC'])){
	$ogImageUrl = ($request->isHttps()) ? "https://" : "http://";
	$ogImageUrl .= $server->getHttpHost();
	$ogImageUrl .= $arResult['PREVIEW_PICTURE']['SRC'];
	$APPLICATION->SetPageProperty("og_image", $ogImageUrl);
}

Для показа корректных значений og:title и og:description не забудем указать значение параметров 'SET_META_DESCRIPTION'=>'Y' и 'SET_TITLE'=>'Y' в вызовах компонентов catalog.section и news.list.

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

Прочитано 182 раз

Добавить комментарий


Свежие заметки
Последние комментарии
Наверх