33  /  33

Как задать индивидуальное Open Graph-изображение для произвольной страницы в Аспро: Максимум

В этой статье разберём, как настроить отдельное изображение для превью страницы в Telegram, социальных сетях и мессенджерах, если страница создана обычным PHP-файлом и не является элементом инфоблока.

Исходная задача

Для страницы /company/ требовалось установить отдельное изображение Open Graph:

https://parfumersha.by/upload/og/parf-by-og-mobile-optimized.jpg

Это изображение должно было использоваться при отправке ссылки:

https://parfumersha.by/company/

в Telegram и другие сервисы, которые формируют превью страницы на основании метатега og:image.

В чём была проблема

Страница «О магазине» была создана как произвольная PHP-страница:

/company/index.php

Она не является элементом инфоблока, поэтому у неё нет стандартных полей:

  • «Картинка для анонса»;
  • «Детальная картинка»;
  • свойств элемента инфоблока.

У товарных карточек Аспро может автоматически брать Open Graph-изображение из картинки анонса или детальной картинки элемента. У обычной PHP-страницы такого источника нет.

Поэтому Аспро подставляло глобальное изображение сайта — логотип:

https://parfumersha.by/upload/CMax/543/54342cb11af388cb8af9e11b05224d45.png

В итоговом HTML выводилось: 

<meta property="og:image"
      content="https://parfumersha.by/upload/CMax/543/54342cb11af388cb8af9e11b05224d45.png">

<link rel="image_src"
      href="https://parfumersha.by/upload/CMax/543/54342cb11af388cb8af9e11b05224d45.png">

Почему нельзя было просто вставить метатег в HTML страницы

Сначала была попытка добавить метатег непосредственно в содержимое страницы: 

<meta property="og:image"
      content="https://parfumersha.by/upload/og/parf-by-og-mobile-optimized.jpg">

Но содержимое PHP-страницы выводится уже внутри тега <body>.

Метатеги Open Graph должны находиться внутри <head>. Если вставить их в контент страницы, они либо не будут использоваться, либо окажутся в неправильной части HTML-документа.

Кроме того, шаблон Аспро самостоятельно формирует свой набор Open Graph-тегов, поэтому простое добавление второго og:image могло привести к появлению дубликатов.

Как Аспро формирует Open Graph

В решении «Аспро: Максимум» для добавления индивидуальных метаданных используется метод:

\CMax::AddMeta()

Именно через него в товарных карточках передаются:

  • og:title;
  • og:description;
  • og:image;
  • другие Open Graph-параметры.

Чтобы сохранить штатную логику Аспро, для произвольной страницы лучше также использовать \CMax::AddMeta(), а не выводить метатеги вручную.

Первое рабочее решение

Для проверки в PHP-файл страницы был добавлен прямой вызов: 

\CMax::AddMeta(
    array(
        "og:image" => "/upload/og/parf-by-og-mobile-optimized.jpg",
    )
);

После очистки кеша в исходном коде страницы появилось: 

<meta property="og:image"
      content="https://parfumersha.by/upload/og/parf-by-og-mobile-optimized.jpg">

<link rel="image_src"
      href="https://parfumersha.by/upload/og/parf-by-og-mobile-optimized.jpg">

Это подтвердило, что метод \CMax::AddMeta() работает и корректно переопределяет стандартную картинку Аспро.

Недостаток прямого указания адреса

При прямой записи путь к изображению находился внутри PHP-кода: 

"og:image" => "/upload/og/parf-by-og-mobile-optimized.jpg"

Чтобы изменить картинку, администратору пришлось бы каждый раз открывать и редактировать файл:

/company/index.php

Это неудобно и создаёт лишний риск ошибки в PHP-коде.

Финальное решение

Для страницы было создано дополнительное пользовательское свойство:

OG_IMAGE

В свойство записывается путь к изображению:

/upload/og/parf-by-og-mobile-optimized.jpg

В PHP-файле страницы это свойство задаётся стандартным способом Битрикс: 

$APPLICATION->SetPageProperty(
    "OG_IMAGE",
    "/upload/og/parf-by-og-mobile-optimized.jpg"
);

Далее PHP-код получает значение этого свойства: 

$ogImage = trim(
    (string)$APPLICATION->GetPageProperty("OG_IMAGE")
);

Если поле заполнено, значение передаётся в штатный механизм Аспро: 

if ($ogImage !== "") {
    \CMax::AddMeta(
        array(
            "og:image" => $ogImage,
        )
    );
}

Полный рабочий блок

Этот код размещается в начале PHP-файла страницы после настройки заголовков и свойств страницы. 

<?
require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php");

$APPLICATION->SetPageProperty(
    "OG_IMAGE",
    "/upload/og/parf-by-og-mobile-optimized.jpg"
);

$APPLICATION->SetPageProperty("BLOG_PAGE", "N");
$APPLICATION->SetPageProperty("HIDE_LEFT_BLOCK", "Y");
$APPLICATION->SetPageProperty("WIDE_PAGE", "Y");

$APPLICATION->SetPageProperty(
    "description",
    "PARF.BY — магазин оригинальной парфюмерии в Минске. Товары в наличии и под заказ с получением в магазине по адресу: ул. Веры Хоружей, 2."
);

$APPLICATION->SetPageProperty(
    "keywords",
    "PARF.BY, магазин парфюмерии Минск, оригинальная парфюмерия"
);

$APPLICATION->SetPageProperty(
    "title",
    "О магазине PARF.BY — оригинальная парфюмерия в Минске"
);

$APPLICATION->SetTitle("О магазине PARF.BY");

/* Получаем индивидуальную Open Graph-картинку */
$ogImage = trim(
    (string)$APPLICATION->GetPageProperty("OG_IMAGE")
);

if ($ogImage !== "") {

    /*
     * Если путь указан без протокола и без начального слеша,
     * автоматически добавляем слеш.
     */
    if (
        strpos($ogImage, "http://") !== 0 &&
        strpos($ogImage, "https://") !== 0 &&
        strpos($ogImage, "/") !== 0
    ) {
        $ogImage = "/" . $ogImage;
    }

    \CMax::AddMeta(
        array(
            "og:image" => $ogImage,
        )
    );
}
?>

Какие значения можно указывать

Код поддерживает несколько вариантов значения свойства OG_IMAGE.

1. Относительный путь с начальным слешем

/upload/og/parf-by-og-mobile-optimized.jpg

Это рекомендуемый вариант для файлов, находящихся на текущем сайте.

2. Относительный путь без начального слеша

upload/og/parf-by-og-mobile-optimized.jpg

Код автоматически преобразует его в:

/upload/og/parf-by-og-mobile-optimized.jpg

3. Полный URL

https://parfumersha.by/upload/og/parf-by-og-mobile-optimized.jpg

Полный адрес также будет передан в Аспро без изменений.

4. Пустое значение

Если свойство OG_IMAGE не заполнено, вызов \CMax::AddMeta() не выполняется.

В этом случае Аспро продолжит использовать стандартную глобальную Open Graph-картинку сайта.

Возможные результаты

Вариант 1. Свойство OG_IMAGE заполнено

В <head> будет выведено индивидуальное изображение страницы: 

<meta property="og:image"
      content="https://parfumersha.by/upload/og/parf-by-og-mobile-optimized.jpg">
Вариант 2. Свойство OG_IMAGE не заполнено

Дополнительный метатег не создаётся. Аспро использует стандартное изображение, заданное в настройках решения.

Вариант 3. Указан неправильный путь

Метатег будет сформирован, но Telegram и другие сервисы не смогут загрузить файл. Поэтому после сохранения необходимо открыть URL изображения напрямую в браузере.

Что ещё было исправлено в HTML страницы

В PHP-файле после подключения:

/bitrix/header.php

находились повторные теги: 

</head>
<body>

Также весь контент страницы был ошибочно обёрнут в: 

<p>
    ...
</p>

Файл /bitrix/header.php уже формирует <head> и открывает <body>. Повторно добавлять эти теги в содержимое страницы нельзя.

Корректная структура произвольной страницы должна выглядеть так: 

<?
require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php");

/* PHP-настройки страницы */

?>

<style>
    /* Стили страницы */
</style>

<main class="company-page">
    Содержимое страницы
</main>

<script type="application/ld+json">
{
    /* Микроразметка */
}
</script>

<?
require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php");
?>

Как проверить результат

  1. Сохранить страницу.
  2. Очистить кеш Битрикс и композитный кеш.
  3. Открыть страницу в браузере.
  4. Нажать Ctrl + U или открыть исходный код страницы.
  5. Найти строку og:image.
  6. Убедиться, что в документе присутствует только один метатег og:image.

Ожидаемый результат: 

<meta property="og:image"
      content="https://parfumersha.by/upload/og/parf-by-og-mobile-optimized.jpg">

<link rel="image_src"
      href="https://parfumersha.by/upload/og/parf-by-og-mobile-optimized.jpg">

Проверка превью в Telegram

Telegram кеширует изображения и описание страниц. Поэтому после изменения Open Graph-тегов он может некоторое время показывать старую картинку.

Для повторной проверки можно временно добавить к адресу параметр:

https://parfumersha.by/company/?v=2

Страница останется той же, но Telegram воспримет URL как новый и может заново сформировать превью.

Итог

Для произвольных PHP-страниц в Аспро: Максимум индивидуальную Open Graph-картинку удобно хранить в пользовательском свойстве страницы OG_IMAGE.

PHP-код получает значение через GetPageProperty() и передаёт его в штатный метод \CMax::AddMeta().

В результате:

  • изображение можно менять через свойства страницы;
  • не нужно редактировать путь внутри рабочего PHP-кода;
  • не создаются дублирующие метатеги;
  • сохраняется штатный механизм Open Graph решения Аспро;
  • при пустом поле остаётся стандартная картинка сайта;
  • решение можно повторно использовать на других произвольных страницах.

Практический результат: страница https://parfumersha.by/company/ получила собственное изображение для превью, а управление адресом картинки было вынесено в дополнительное свойство OG_IMAGE.

0
Описание курса


Есть вопрос?

задать вопрос

Публикация новых ошибок

Написать