Домой / HELP / Добавление тегов Open Graph (meta property og) в Opencart

Добавление тегов Open Graph (meta property og) в Opencart

Добавление метатегов для социальных сетей (Opencart — добавление meta property og) в <head> CMS Opencart (название — og:title, описание — og:description, изображение — og:image и ссылки — og:url).

Код который представлен ниже был написан уже довольно таки давно, не самый актуальный вариант, если интересно как это можно сделать, рекомендую ознакомиться. Если просто нужно вывести теги — вот здесь есть решение (не мое) посвежее, с различными размерами изображений и ценами.

Рекомендованные Для Фейсбука, Вконтакта, Одноклассников

Для Твиттера и Вконтакта (ВКонтакт выберет для заголовка тот title, который в коде будет расположен ниже):

Выбор картинки подходящего размера — основная проблема. Даже внутри одной соцсети есть сценарии, в которых изображения безбожно кропятся.

Да, 968×504 пискеля это меньше минимально рекомендованных Фейсбуком 1200×630. Зато при таком размере и ратио картинку нигде не кропят, и выглядит она отлично.

Кстати, соцсети кэширует вашу страницу, и это сводит с ума во время отладки, пока вы не научитесь сбрасывать кэш: VK pages.clearCacheFacebook Open Graph Object Debugger.

Итак приступим…..

Для начала добавим og:title и og:description — самое простое, достаточно внести изменения в header.tpl шаблона, используя текущие title и description.

Откроем /catalog/view/theme/ВАШ_ШАБЛОН/template/common/header.tpl и добавим два этих тега.

Для Opencart 1.5-2.3

Находим:

И добавим сюда:

Получим:

Теперь аналогично для title, находим:

И после добавляем:

Для Opencart 3.x — /catalog/view/theme/default/template/common/header.twig получим:

og:title

og:description

Дальше перейдем к добавлению двух других тегов — изображение и ссылка.

Кроме header.tpl, изменения в который будут внесены позже, необходимо так же изменить другие файлы:

Начнем с /system/library/document.php

Сразу после

Добавим

Затем после

Добавим

Теперь перейдем к файлу /catalog/controller/common/header.php и здесь нужно найти:

Для Opencart 1.5

После

Добавим

Для Opencart 2 и 3 — находим:

И добавляем после

Далее осталось вывести это в шаблон header — /catalog/view/theme/ВАШ_ШАБЛОН/template/common/header.tpl:

После

Для Opencart 1.5-2.3 добавим:

Для Opencart 3.x:

На этом основная часть сделана, теперь можно добавлять присвоение данных тегов в нужные контроллеры. Далее на примере контроллера товара (/catalog/controller/product/product.php). Здесь в качестве ссылки возьму урл canonical (не вижу смысла в передаче данных с неканонических страниц), а в качестве изображения — основное изображение товара.

После

Добавим

Для opencart 1.5 — после:

Для Opencart 2 — после:

В opencart 3 этот код немного отличается, ищем по $data[‘popup’] Добавим

Здесь — 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.

Про Александр

Здравствуйте, меня зовут Александр Мороз. Профессионально занимаюсь созданием сайтов . Выражаюсь на диалектах PHP, SQL, JavaScript, HTML, CSS, XML, jQuery. Иногда и матом в особо сложных случаях :)

Проверьте также

Сортировка по поступлению на страницах товаров Opencart

Как добавить «сортировка по поступлению» на страницах товаров и вообще где правиться это выпадающее меню …

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *