Добавление метатегов для социальных сетей (Opencart — добавление meta property og) в <head> CMS Opencart (название — og:title, описание — og:description, изображение — og:image и ссылки — og:url).
Код который представлен ниже был написан уже довольно таки давно, не самый актуальный вариант, если интересно как это можно сделать, рекомендую ознакомиться. Если просто нужно вывести теги — вот здесь есть решение (не мое) посвежее, с различными размерами изображений и ценами.
Рекомендованные Для Фейсбука, Вконтакта, Одноклассников
<meta property="og:type" content="website"> <meta property="og:site_name" content="Название сайта"> <meta property="og:title" content="Заголовок"> <meta property="og:description" content="Описание."> <meta property="og:url" content="https://example.com/page.html"> <meta property="og:locale" content="ru_RU"> <meta property="og:image" content="https://example.com/img.jpg"> <meta property="og:image:width" content="968"> <meta property="og:image:height" content="504">
Для Твиттера и Вконтакта (ВКонтакт выберет для заголовка тот title, который в коде будет расположен ниже):
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Заголовок"> <meta name="twitter:description" content="Описание."> <meta name="twitter:image:src" content="https://example.com/img.jpg"> <meta name="twitter:url" content="https://example.com/page.html"> <meta name="twitter:domain" content="example.com"> <meta name="twitter:site" content="@"> <meta name="twitter:creator" content="@...">
Выбор картинки подходящего размера — основная проблема. Даже внутри одной соцсети есть сценарии, в которых изображения безбожно кропятся.
Да, 968×504 пискеля это меньше минимально рекомендованных Фейсбуком 1200×630. Зато при таком размере и ратио картинку нигде не кропят, и выглядит она отлично.
Кстати, соцсети кэширует вашу страницу, и это сводит с ума во время отладки, пока вы не научитесь сбрасывать кэш: VK pages.clearCache, Facebook Open Graph Object Debugger.
Итак приступим…..
Для начала добавим og:title и og:description — самое простое, достаточно внести изменения в header.tpl шаблона, используя текущие title и description.
Откроем /catalog/view/theme/ВАШ_ШАБЛОН/template/common/header.tpl и добавим два этих тега.
Для Opencart 1.5-2.3
Находим:
<?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 — после:
$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 — ширина. Так же можно использовать изменение размера в соответствие с конфигом, здесь намеренно указал размеры…
Ну и самое интересное — размеры изображений для социальных сетей и проверка работы.
Facebook
Картинка к внешним ссылкам: 1200 x 630 px
Картинка для поста: 1200 x 630 px
Обложка: 820 х 312 px
Фото профиля: 170х170 px
Вконтакте
Картинка к внешним ссылкам: 537 x 240 px
Картинка для поста: 700 x 500 px
Фото профиля: 200 х 500 px
Twitter
Картинка для твита: 1024 x 512 px
Обложка: 1500 х 500 px
Фото профиля: 400 x 400 px
Instagram
Картинка для поста: 1080 x 1080 px
Фото профиля: 110 x 110 px
YouTube
Картинка поверх видео: 1280 x 720 px
Обложка канала: 2560 x 1440 px
Фото профиля: 800 x 800 px
Pinterest
Картинка для пина: 735 x 1102 px
Фото профиля: 165 x 165 px
Linkedin
Картинка к внешним ссылкам: 180 х 110 px
Картинка для поста: 350 x 230 px
Обложка: 646 x 220 px
Фото профиля: 400 х 400 px
OK.ru
Картинка для поста: 1680 х 1680 px
Обложка: 1340 x 320 px
Фото профиля: 190 х 190 px
Оптимальный размер для картинки типа og: — 968×504
Да, 968×504 пискеля это меньше минимально рекомендованных Фейсбуком 1200×630. Зато при таком размере и ратио картинку нигде не кропят, и выглядит она отлично.
Инструмет для отладки от Facebook.
and then Add to Home Screen.