Как добавить микроразметку 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 на сайт.

Что будем добавлять:

1. og:title — название страницы
2. og:description — описание страницы
3. og:image — изображение страницы
4. 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 %}