Как добавить микроразметку Facebook (Meta) Open Graph для изображений Opencart 2, 3, 1.5
Решение для Opencart 2, Opencart 3.
Социальные сети Instagram, Facebook Meta.
Многие сталкиваются с проблемой: при отправке ссылки в директе Instagram или при добавлении товара в пост Facebook Meta подтягивается неправильное изображение. Иногда это просто случайная картинка, иногда фото первого товара (в категории).
Данную проблему нужно исправлять, так как выглядит это не профессионально.
Для того, чтоб в директе Инстаграма или в постах Facebook Meta отображалось правильное изображение, нужно внедрить микроразметку Open Graph в код интернет-магазина на Opencart.
Правильное изображение — это:
Для товаров — изображение товара.
Для категорий — изображение категории.
Для остальных страниц — логотип магазина.
Вместе с изображением добавим и другие метаданные Open Graph на сайт.
Что будем добавлять:
- og:title — название страницы
- og:description — описание страницы
- og:image — изображение страницы
- og:url — адрес страницы
Как добавить метаданные og:image
и og:url в Opencart 2 и Opencart 3
Первым делом делаем одно из самых важных свойств, если планируется вестись активная социальная деятельность связанная с магазином (отправка ссылок, постинг в Facebook Meta).
Добавляем метаданные og:image
и og:url
— изображение и ссылка.
Открываем файл
/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();
Открываем файл:
/catalog/view/theme/тема/template/common/header.tpl
Где «тема» — это шаблон вашего магазина (если используется тема по умолчанию с коробки Opencart 2 или Opencart 3, то «тема» — это default)
Ищем строку:
<?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 %}
Задаем значения og:image и og:url в контроллере товара
Осталось задать значения всем объявленным переменным в контроллерах. Начнем с страницы товара.
Открываем файл:
catalog/controller/product/product.php
В качестве og:url (ссылки товарной страницы) присваиваем канонический URL (canonical), в качестве og:image (изображения товара) — основное изображение товара.
Добавление og:url
Находим строки:
$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']));
Добавляем og:image
Для версии 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'));
После добавляем:
$this->document->setOgimage($this->model_tool_image->resize($product_info['image'], 500, 500));
Для версии Opencart 2.0-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, 500));
Для версии Opencart 3.x
Находим часть строки:
$data['popup']
После неё добавляем:
$this->document->setOgimage($this->model_tool_image->resize($product_info['image'], 500, 500));
В выводе изображения 500, 500 — это размеры изображения, которые будут передаваться в тег og:image. Его можно подтянуть с настроек магазина, просто скопировав данную часть с объявления главного изображения товара.
Получим код:
$this->document->setOgimage($this->model_tool_image->resize($product_info['image'], $this->config->get('config_image_popup_width'), $this->config->get('config_image_popup_height'));
Задаем значения og:image и og:url в контроллере категории
Открываем файл:
catalog/controller/product/category.php
Находим строки:
if ($category_info['image']) {
$data['thumb'] = $this->model_tool_image->resize($category_info['image'], $this->config->get('config_image_category_width'), $this->config->get('config_image_category_height'));
} else {
$data['thumb'] = '';
}
После них добавляем:
$this->document->setOgimage($this->model_tool_image->resize($category_info['image'], 500, 500));
Осталось вывести тег <meta property=»og:image» /> в шаблон шапки сайта.
Выводим og:image и og:url в шаблон header.tpl
Открываем файл:
/catalog/view/theme/тема/template/common/header.tpl
Где «тема» — это папка используемого шаблона магазина.
Находим строки:
<?php if ($keywords) { ?>
<meta name="keywords" content= "<?php echo $keywords; ?>" />
<?php } ?>
После них добавляем вывод Open Graph:
<?php if ($ogimage) { ?>
<meta property="og:image" content="<?php echo $ogimage; ?>" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="400" />
<?php } else { ?>
<meta property="og:image" content="<?php echo $logo; ?>" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="400" />
<?php } ?>
<meta property="og:url" content="<?php echo $ogurl; ?>" />
Где og:image:width — это ширина изображения, а og:image:height — высота. Эти свойства желательно указать, так как Фейсбук Мета может не всегда подтягивать фото, если указаны не все свойства.
og:image:type — это формат изображения.
<meta property="og:image" content="<?php echo $logo; ?>" />
Эта строка передаст логотип, если изображение не задано, либо это другая страница (главная, блог и т.д.).
Как добавить og:title и og:description на Opencart 2 и Opencart 3
Самое простое — это добавление названия и описания, так как для этого можно использовать стандартный вывод title и description. Для того, чтоб добавить свойства og:title и og:description — нужно править файл шаблона шапки сайта (header.tpl).
Открываем файл:
/catalog/view/theme/тема/template/common/header.tpl
Где «тема» — это папка используемого шаблона (темы) интернет-магазина.
Код вывода Open Graph в Opencart 1.5-2.3
Вывод og:description
Ищем строки:
<?php if ($description) { ?><meta name="description" content=" <?php echo $description; ?>" /><?php } ?>
И после строки:
<meta name="description" content=" <?php echo $description; ?>" />
Добавляем этот код:
<meta property="og:description" content="<?php echo $description; ?>" />
С помощью переменной $description выводим стандартное мета описание страницы в тег со свойством og:description.
Получаем следующее:
<?php if ($description) { ?><meta name="description" content=" <?php echo $description; ?>" /><meta property="og:description" content=" <?php echo $description; ?>" /><?php } ?>
Вывод og:title
Все то же делаем для title (заголовка страницы):
Ищем строку:
<title><?php echo $title; ?></title>
После нее вставляем строку вывода Open Graph:
<meta property="og:title" content="<?php echo $title; ?>" />
Получаем следующий код:
<title><?php echo $title; ?></title>
<meta property="og:title" content="<?php echo $title; ?>" />
Здесь проверка на пустоту не нужна, так как в Опенкарте 2 нельзя создать страницу с пустым тайтлом.
Код вывода Open Graph для Opencart 3.x
Открываем файл:
/catalog/view/theme/тема/template/common/header.twig получим:
Где «тема» — это папка используемого шаблона интернет-магазина.
Вывод og:title
Ищем строку:
<title>{{ title }}</title>
Сразу после неё добавляем:
<meta property="og:title" content="{{ title }}" />
Вывод og:description
Ищем строки:
{% if description %}<meta name="description" content="{{ description }}" />{% endif %}
После <meta name="description" content="{{ description }}" />
добавляем:
<meta property="og:description" content="{{ description }}" />
Получаем:
{% if description %}<meta name="description" content="{{ description }}" /><meta property="og:description" content="{{ description }}" />{% endif %}
