Short tip how to add og:image to Opencart 3

In system/library/document.php after line

private $keywords;

add

private $ogimage;

After

public function getTitle() {
    return $this->title;
}

add

public function setOgImage($ogimage) {
    $this->ogimage = $ogimage;
}

public function getOgImage() {
    return $this->ogimage;
}

note: if you have some seo module, in this file this code may by already exist. check the code text.

In catalog/controller/product/product.php

after

if ($product_info['image']) {
    $data['popup'] = $this->model_tool_image->resize($product_info['image'], $this->config->get('theme_' . $this->config->get('config_theme') . '_image_popup_width'), $this->config->get('theme_' . $this->config->get('config_theme') . '_image_popup_height'));
} else {
    $data['popup'] = '';
}

add

$this->document->setOgImage($data['popup']);

In catalog/controller/common/header.php

after

$data['direction'] = $this->language->get('direction');

add

$data['image'] = $this->document->getOgImage();
if ($data['image'] == '') {
    $data['image'] = 'YOUR_DEFAULT_OGIMAGE';
}

where YOUR_DEFAULT_OGIMAGE will be an image for pages without a photo of a product, an example of a shop logo

In catalog/view/theme/your_theme_name/template/common/header.twig

after

{% if keywords %}
    <meta name="keywords" content="{{ keywords }}" />
{% endif %}

add

<meta name="twitter:image" content="{{ image }}">

or

<meta name="og:image" content="{{ image }}">

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.
The comment language code.