Добавление метатегов для социальных сетей (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'));Добавим
$this->document->setOgimage($this->model_tool_image->resize($product_info['image'], 500, 300));Здесь - 500 - ширина изображения в пикселях, 300 - ширина. Так же можно использовать изменение размера в соответствие с конфигом, здесь намеренно указал размеры..
Отличная статья, спасибо.
Спасибо большое! Помогло!
Добрый день. Статья очень помогла. Спасибо. Картинка товаров выводится и все супер. Но как бы так сделать что бы и на обычных страницах подтягивало первую картинку.
В контроллере любой страницы (информация, категория) по аналогии. Найти вывод изображения и после добавить (пример для категории):
Спасибо большое за вашу помощь.
Спасибо огромное. Получилось!!! Для тех у кого 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));
Радуемся))
Подскажите как поправить в коде Open Graph для ocStore 3. По какой то непонятной причине всегда подтягивает лого а не фото товара.
Пример:
https://domoteh.com/bytovaja-tehnika/elektrochajniki/elektrochajnik-aurora-au-010
Так а в таком варианте кроме логотипа и не может быть ничего.
В общем всё сделано по инструкшен. У меня даже в исходном коде не пахнет выводом инфы. Даже og: тайтл не видит.
В чем может быть проблема? Даже модуль ставлю, полностью игнорируется всё… Версия OC 3.0.2.0 с шаблоном ZEMEZ.
До этого разметка через модуль работала, правда как-то через энное место. Установил, ошибки на сайте, отключил, разметка осталась, ошибок не осталось. Мистика…
Если файлы изменены, а в коде страницы нет изменений, первое что я бы посмотрел — кеш модификаторов (а может быть и темы)
Всё проверял.
$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/…
во всех файлах контроллеров? укажите пожалуйста конкретно, а то как будто съели пол фразы:
Цитирую:
Для 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
Добавил, но там и так было указано «на примере контроллера товара»… в опенкарт очень понятная структура каталогов, такое уточнение на мой взгляд даже лишнее. Прописывать нужно в тех контроллерах, которые отвечают за вывод страниц (главная, категория, товар, поиск,..). Отличия будут но не большие, здесь главное сам принцип.
А как с 3-й версией? этот код неработает в ОС 3.
Обновил материал. Все работает как и в опенкарт 2, разница только в шаблоне. Не забываем почистить кеш шаблона
