Добавляем OpenGraph разметку в VamShop!

Семантическая микро-разметка по умолчанию уже есть в VamShop.

Подробнее — http://blog.vamshop.ru/2014/02/03/микроразметка-семантическая-размет/

В данной заметке добавим OpenGraph разметку.

Что такое OpenGraph разметка?!

Open Graph – протокол, который позволяет сформировать необходимое превью при публикации ссылки в социальных сетях.

По-другому Open Graph называют словарь микроданных, который был разработан компанией Facebook специально для решения проблемы с отображением ссылок в соцсети.

На сегодняшний день Open Graph используется в Facebook, Вконтакте, Google+, Twitter, Linkedin, Pinterest. Например, Яндекс использует Open Graph для формирования заголовка сниппета и передачи данных в сервис Яндекс Видео.

В Админке — Оформление — Шаблоны — Основной шаблон, например после {metadata}, добавляем

{if {page_name} != ""}<meta property="og:title" content="{page_name}" />{/if}
{if {meta_description} != ""}<meta property="og:description" content="{meta_description}" />{/if}
{if {content_images number=1 template=opengraph} != ""}<meta property="og:image" content="{$smarty.const.FULL_BASE_URL}{content_images number=1 template=opengraph}" />{/if}
{if {page_url} != ""}<meta property="og:url" content="{$smarty.const.FULL_BASE_URL}{page_url}" />{/if}

В Админке — Расширения — Тэги заходите в тэг content_images, нажимаете внизу Создать микро-шаблон из тэга.

Создаёте шаблон с псевдонимом opengraph

и редактируете шаблон, оставив только: 

{$images.0.image}

Тогда, по идее, выведется только url картинки, если он задан.

т.е. получится на выходе что-то вроде:

<meta property="og:title" content="Samsung GALAXY Note 3" />
<meta property="og:description" content="Samsung GALAXY Note 3" />
<meta property="og:image" content="http://vamcart.loc/img/content/samsung-galaxy-note-3-1.png" />
<meta property="og:url" content="http://vamcart.loc/product/samsung-galaxy-note-3.html" />

Оставьте комментарий

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