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

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 - ширина. Так же можно использовать изменение размера в соответствие с конфигом, здесь намеренно указал размеры..

Оценок: 1

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

  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
              • У меня после внесения всех изменений сайт выдал 500 ошибку. сначала ставил модуль для open graf — 500 ошибка. снес его. затем решил ручками сделать, как тут на сайте, и опять 500 ошибка

                Амир 15 сентября 2017, 16:30 0
                • решил делать постепенно. header.tpl и header.php приянлись нормально. но dociment.php валит сайт сразу.

                  Амир 15 сентября 2017, 17:45 0
                  • в таких случаях лучше всего смотреть лог ошибок сервера

                    Владимир 15 сентября 2017, 21:04 0
                    • а лог файл где лежит? в админке знаю. но в админку тоже зайти никак, ибо отдает 500 ошибку тоже

                      Амир 15 сентября 2017, 22:08 0
                • Отлично сработало на 1.5, в ВК запостился полный урл и правильное изображение товара со страницы. Спасибо. Единственное, в инструкции не указано, что «присвоение данных тегов в нужные контроллеры» это правка файла catalog/controller/product/product.php, возможно у новичков вызвало бы сложности с поиском файла

                  wcp 25 июля 2017, 05:44 0