Оценок: 2

Opencart - добавление тегов Open Graph (meta property og)

Добавление метатегов для социальных сетей (Opencart - добавление meta property og) в <head> CMS Opencart (название - og:title, описание - og:description, изображение - og:image и ссылки - og:url).

Код который представлен ниже был написан уже довольно таки давно, не самый актуальный вариант, но для понимания откуда что берется - рекомендую. Если просто нужно вывести теги - вот здесь есть решение (не мое) посвежее, с различными размерами изображений и ценами.

Для начала добавим og:title и og:description - самое простое, достаточно внести изменения в header.tpl шаблона, используя текущие title и description. 

Откроем шаблон и добавим два этих тега.

Для Opencart 1.5-2.3 - /catalog/view/theme/ВАШ_ШАБЛОН/template/common/header.tpl

Находим:

<?php if ($description) { ?>
    <meta name="description" content=" <?php echo $description; ?>" />
<?php } ?>

И добавим сюда:

<meta property="og:description" content=" <?php echo $description; ?>" />

Получим:

<?php if ($description) { ?>
    <meta name="description" content=" <?php echo $description; ?>" />
    <meta property="og:description" content=" <?php echo $description; ?>" />
<?php } ?>

Теперь аналогично для title, находим:

<title><?php echo $title; ?></title>

И после добавляем:

<meta property="og:title" content="<?php echo $title; ?>" />

Для Opencart 3.x — /catalog/view/theme/default/template/common/header.twig, получим:

og:title

<meta property="og:title" content="{{ title }}" />

og:description

{% if description %}
    <meta name="description" content="{{ description }}" />
    <meta property="og:description" content="{{ description }}" />
{% endif %}

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

Кроме header.tpl, изменения в который будут внесены позже, необходимо так же изменить другие файлы:

Начнем с /system/library/document.php

Сразу после

private $keywords;

Добавим

private $ogimage;	
private $ogurl;

Затем после

public function getKeywords() {
    return $this->keywords;
}

Добавим

public function setOgimage($ogimage) {
	$this->ogimage = $ogimage;
}
public function getOgimage() {
	return $this->ogimage;
}
public function setOgurl($ogurl) {
	$this->ogurl = $ogurl;
}
public function getOgurl() {
	return $this->ogurl;
}

Теперь перейдем к файлу /catalog/controller/common/header.php и здесь нужно найти:

Для Opencart 1.5

$this->data['keywords'] = $this->document->getKeywords();

Сразу после добавляем:

$this->data['ogimage'] = $this->document->getOgimage();
$this->data['ogurl'] = $this->document->getOgurl();

Для Opencart 2 и 3 - находим:

$data['keywords'] = $this->document->getKeywords();

Сразу после добавляем:

$data['ogimage'] = $this->document->getOgimage();
$data['ogurl'] = $this->document->getOgurl();

Далее осталось вывести это в шаблон header - /catalog/view/theme/ВАШ_ШАБЛОН/template/common/header.tpl:

После

<?php if ($keywords) { ?>
    <meta name="keywords" content="<?php echo $keywords; ?>" />
<?php } ?>

Для Opencart 1.5-2.3 добавим:

<?php if ($ogimage) { ?>
    <meta property="og:image" content="<?php echo $ogimage; ?>" />
<?php } ?>
<?php if ($ogurl) { ?>
    <meta property="og:url" content="<?php echo $ogurl; ?>" />
<?php } ?>

Для Opencart 3.x:

{% if ogimage %}
    <meta property="og:image" content="{{ ogimage }}" />
{% endif %}
{% if ogurl %}
    <meta property="og:url" content="{{ ogurl }}" />
{% endif %}

На этом основная часть сделана, теперь можно добавлять присвоение данных тегов в нужные контроллеры. Далее на примере контроллера товара (/catalog/controller/product/product.php). Здесь в качестве ссылки возьму урл canonical (не вижу смысла в передаче данных с неканонических страниц), а в качестве изображения - основное изображение товара.

После

$this->document->addLink($this->url->link('product/product', 'product_id=' . $this->request->get['product_id']), 'canonical');

Добавим

$this->document->setOgurl($this->url->link('product/product', 'product_id=' . $this->request->get['product_id']));

Для opencart 1.5 - после:

$this->data['popup'] = $this->model_tool_image->resize($product_info['image'], $this->config->get('config_image_popup_width'), $this->config->get('config_image_popup_height'));

Для Opencart 2 - 3 - после:

$data['popup'] = $this->model_tool_image->resize($product_info['image'], $this->config->get('config_image_popup_width'), $this->config->get('config_image_popup_height'));
В opencart 3 этот код немного отличается, ищем по $data['popup']

Добавим

$this->document->setOgimage($this->model_tool_image->resize($product_info['image'], 500, 300));

Здесь - 500 - ширина изображения в пикселях, 300 - ширина. Так же можно использовать изменение размера в соответствие с конфигом, здесь намеренно указал размеры..

Оценок: 2

Комментарии (53)

  1. Отличная статья, спасибо.

    Вадим 13 сентября 2022, 12:35 0
    • Спасибо большое! Помогло!

      Александр 11 сентября 2022, 22:08 +1
      • Добрый день. Статья очень помогла. Спасибо. Картинка товаров выводится и все супер. Но как бы так сделать что бы и на обычных страницах подтягивало первую картинку.

        Fr85 06 декабря 2021, 15:07 0
        • В контроллере любой страницы (информация, категория) по аналогии. Найти вывод изображения и после добавить (пример для категории):

          Показать код
          $this->document->setOgimage($this->model_tool_image->resize($category_info['image'], 500, 300));

          Владимир 06 декабря 2021, 15:26 0
          • Спасибо большое за вашу помощь.

            Fr85 06 декабря 2021, 15:50 0
        • Спасибо огромное. Получилось!!! Для тех у кого ocStore 3.0.2.0 и при репосте в соц сети отображается логотип сайта вместо фото товара нужно добавить только одну строку.
          В (/catalog/controller/product/product.php)
          Ищем строку
          $data['thumb'] = $this->model_tool_image->resize($product_info['image'], $this->config->get('theme_'. $this->config->get('config_theme'). '_image_thumb_width'), $this->config->get('theme_'. $this->config->get('config_theme'). '_image_thumb_height'));
          после нее вставляем
          $this->document->setOgimage($this->model_tool_image->resize($product_info['image'], 500, 300));
          Радуемся))

          Евгений 26 января 2021, 16:54 0
          • Подскажите как поправить в коде Open Graph для ocStore 3. По какой то непонятной причине всегда подтягивает лого а не фото товара.

            Пример:
            https://domoteh.com/bytovaja-tehnika/elektrochajniki/elektrochajnik-aurora-au-010

            Показать код
            <meta property="og:image" content="https://domoteh.com/image/catalog/Design/Logo-DomoTeh.png" />

            Serg 08 ноября 2019, 17:16 0
            • Так а в таком варианте кроме логотипа и не может быть ничего.

              Показать код
              <?php if ($ogimage) { ?>
              <meta property="og:image" content="<?php echo $ogimage; ?>" />
              <?php } ?>
              Вот так можно вывести изображение текущего товара, а у Вас просто ссылка на логотип

              Владимир 14 ноября 2019, 21:00 0
            • В общем всё сделано по инструкшен. У меня даже в исходном коде не пахнет выводом инфы. Даже og: тайтл не видит.
              В чем может быть проблема? Даже модуль ставлю, полностью игнорируется всё… Версия OC 3.0.2.0 с шаблоном ZEMEZ.
              До этого разметка через модуль работала, правда как-то через энное место. Установил, ошибки на сайте, отключил, разметка осталась, ошибок не осталось. Мистика…

              Сергей Гриднев 08 августа 2019, 14:31 0
              • Если файлы изменены, а в коде страницы нет изменений, первое что я бы посмотрел — кеш модификаторов (а может быть и темы)

                Владимир 08 августа 2019, 14:56 0
                • Всё проверял.

                  Сергей Гриднев 09 августа 2019, 12:20 0
              • $this->document->addLink($this->url->link('product/product', 'product_id='. $this->request->get['product_id']), 'canonical');
                Добавим

                $this->document->setOgurl($this->url->link('product/product', 'product_id='. $this->request->get['product_id']));

                в каких файлах делать последние изменения указанные выше

                asa 13 апреля 2018, 10:08 0
                • В контроллерах, /catalog/controller/…

                  Владимир 13 апреля 2018, 10:22 0
                  • во всех файлах контроллеров? укажите пожалуйста конкретно, а то как будто съели пол фразы:
                    Цитирую:
                    Для Opencart 3.x:

                    {% if ogimage %}
                    />
                    {% endif %}
                    {% if ogurl %}
                    />
                    {% endif %}
                    На этом основная часть сделана, теперь можно добавлять присвоение данных тегов в нужные контроллеры. Далее на примере контроллера товара. Здесь в качестве ссылки возьму урл canonical (не вижу смысла в передаче данных с неканонических страниц), а в качестве изображения — основное изображение товара.

                    После

                    $this->document->addLink($this->url->link('product/product', 'product_id='. $this->request->get['product_id']), 'canonical');
                    Добавим

                    $this->document->setOgurl($this->url->link('product/product', 'product_id='. $this->request->get['product_id']));

                    И хрен поймешь какой файл затронуть. Хорошо хоть с системой знаком. Для пользователей: нужно добавить эти строки в catalog/controller/product/product.php

                    invays 13 апреля 2018, 20:38 0
                    • Добавил, но там и так было указано «на примере контроллера товара»… в опенкарт очень понятная структура каталогов, такое уточнение на мой взгляд даже лишнее. Прописывать нужно в тех контроллерах, которые отвечают за вывод страниц (главная, категория, товар, поиск,..). Отличия будут но не большие, здесь главное сам принцип.

                      Владимир 14 апреля 2018, 10:14 0
                • А как с 3-й версией? этот код неработает в ОС 3.

                  Тарас 11 февраля 2018, 03:49 0
                  • Обновил материал. Все работает как и в опенкарт 2, разница только в шаблоне. Не забываем почистить кеш шаблона

                    Владимир 19 февраля 2018, 02:40 0
                  Надежный хостинг VPS серверов
                  • Свои ISO образы
                  • VDS с оплатой раз и навсегда
                  • Аренда VDS на любой срок, с оплатой по дням
                  • Большое разнообразие конфигураций
                  • Дата-центры в ЕС и России
                  + скидка 10%