Внедрение микроразметки OpenGraph на OpenCart 4
Open Graph — это протокол, разработанный Facebook в 2010 году, позволяющий веб-разработчикам добавлять метаданные на страницы своего сайта таким образом, чтобы социальные сети могли лучше понимать содержимое страниц и отображать превью ссылок более привлекательно и информативно.
Основные цели Open Graph:
- Создание красивого превью: Когда ссылка публикуется в социальной сети, контент страницы автоматически извлекается и показывается пользователю в удобочитаемом формате (заголовок, описание, изображение).
- Повышение вовлеченности: Привлекательные превью стимулируют пользователей переходить по ссылке, увеличивая трафик на сайт.
- Оптимизация взаимодействия: Метаданные помогают социальным сетям правильно классифицировать тип контента (например, статья, видеоролик, музыкальный альбом) и соответственно адаптировать поведение системы.
Примеры метатегов Open Graph
|
<meta property="og:title" content="Название вашей страницы"> |
Теперь переходим к внедрению данной разметки на OpenCart 4 (Version 4.0.2.2 (rs.1)).
Заходим в файловый менеджер на своем хостинге и следуем инструкции ниже:
В файле по пути /system/library/document.php
после строчки: private string $keywords = '';
вставляем данный код: private $ogimage;
В этом же документе после:
public function getKeywords(): string {
return $this->keywords;
}
вставляем:
public function setOgimage($ogimage) {
$this->ogimage = $ogimage;
}
public function getOgimage() {
return $this->ogimage;
}
Далее в файле по пути /catalog/controller/common/header.php
после: $data['keywords'] = $this->document->getKeywords();
вставляем: $data['og_url'] = 'https://' . $_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'];
$data['ogimage'] = $this->document->getOgimage();
Далее в файле: /catalog/view/theme/ВАШ_ШАБЛОН/template/common/header.twig
между <head> и </head>, рекомендуется после <meta name="keywords" content="{{ keywords }}"/>, добавляем эти мета-теги:
<meta property="og:title" content="{{ title }}" />
<meta property="og:description" content="{{ description }}" />
<meta property="og:image" content="{{ ogimage }}" />
<meta property="og:image:width" content="1500" />
<meta property="og:image:height" content="1500" />
<meta property="og:type" content="product" />
<meta property="og:url" content="{{ og_url }}" />
<meta property="og:site_name" content="Вписываете название вашего сайта" />
<meta property="og:locale" content="ru_RU" />
Далее в файле: /catalog/controller/product/product.php
после: if (is_file(DIR_IMAGE . html_entity_decode($product_info['image'], ENT_QUOTES, 'UTF-8'))) {
$data['popup'] = $this->model_tool_image->resize(html_entity_decode($product_info['image'], ENT_QUOTES, 'UTF-8'), $this->config->get('config_image_popup_width'), $this->config->get('config_image_popup_height'));
} else {
$data['popup'] = '';
}
вставляем этот код: $this->document->setOgimage($this->model_tool_image->resize($product_info['image'], 1500, 1500));
На этом всё. Проверяем исходный код страницы товара, должно это выглядеть примерно так:
Если затрудняетесь, или у Вас что-то не получается, могу помочь:
- Telegram: @Igor_Sayats
- Написать через обратную связь: Написать сообщение