MODX: Как правильно вывести Open Graph

Назад → MODX: Как правильно вывести Open Graph
Дата публикации: 2018-12-26 13:10:00
Обложка статьи

Привет, друзья! Сегодня поговорим о том, как вывести микроразметку Open Graph на своем сайте. Соответственно, для системы управления контентом - MODX. Статья написана на версии 2.7.1.

Что такое Open Graph

Open Graph - это протокол, позволяющий любой веб-странице стать полноценным объектом в социальных сетях. Если непонятно, то просто посмотрите на картинку ниже. Это и есть Open Graph. Красивая картинка и заголовок для какой-нибудь интернет страницы.

Конечно, сейчас уже 2019 год и есть определенные особенности, которые надо учесть при настройке микроразметки. Речь идет, конечно же, о размерах изображений. В своей практике я встречался с более менее универсальными размерами, о них сегодня и будем говорить. Скриншот ниже - это пример работы микроразметки.

пример работы open graph

Код микроразметки Open Graph

На самом деле все очень просто и можно сделать за 5-10 минут. В целом столько же потратится времени на установку какого-либо модуля.

Ниже показываю код. Не беспокойтесь - сейчас я все объясню.

Для удобства я взял весь <head> из чанки, просто потому что так удобней показывать. Обратите внимание на три основные вещи. Буду ссылаться на номер строки в примере.

1. <html prefix="og: http://ogp.me/ns#"> (1 строка).

Префикс, это обязательная вещь (хотя у меня и без нее работало). Проще говоря, мы оповещаем “робота” соц. сети что здесь будет Open Graph.

2. Код после <!-- OpenGraph --> (17 строка).

Тут идет код самого Open Graph.

3. Код после <!-- Twitter --> (28 строка).

Для Twitter используется чуть-чуть другой формат, поэтому прикрепил в статью его код для комплекта. Все покажу на примере Open Graph, а с Twitter разберетесь чисто логически. Хотя, кое-что все равно отметим.

пример кода open graph для копирования

1. Данный пункт отвечает за язык сайта. Мне известны ru_RU и en_US, en_GB.

2. Тип ресурса. Всего существует несколько типов, я знаю только website и article, но никогда не видел чтобы кто-то указывал что-то кроме website в этом поле.

3. Здесь указывается имя сайта, в поле content=”” я указал “переменную” из MODX, которая хранит в себе URL адрес сайта (хоста, т.е только kolmogorov.pro). Вы тоже можете ее использовать, она уже создана/объявлена при создании сайта.

4. Og:title это заголовок под изображением. Посмотрите на первый скриншот. “Первая стекольная компания” - это заголовок (og:title).

В поле content=”” я объявил свое TV-поле. Если вы не знаете как создать TV поле, то объясню в конце статьи.

5. Обозначение картинки. Вы можете поставить туда одну статичную ссылку и забыть данный пункт. А можете сделать как я. Сначала стоит “переменная” из MODX, которая хранит в себе адрес сайта (хоста). Потом идет мое собственное TV поле, которое хранит в себе изображение записи блога.

6 и 7. Og:image:widht и og:image:height - или на русском: ширина и длина изображения, которое должно придти в социальную сеть. Лучше их объявить здесь, чтобы не было неожиданностей. В моем примере используются размеры картинок, но вот только я их всех самостоятельно стараюсь поджимать под прихоти Open Graph. Вам рекомендую использовать ширину 968, а высоту 504. Это что-то вроде универсального разрешения, которое в 80% случаев отображается как надо.

8. Данное поле отвечает за URL адрес статьи.

В content=”” формируем URL адрес страницы. Все с помощью уже объявленных переменных MODX.  Знакомый ++site_url хранит в себе адрес хоста, *alias - соответственно алиас.

что такое алиас

Внимание: должны быть включены дружественные URL.

9. В описание я просто поместил переменную из MODX, которая отвечает за аннотацию. *description - смотрите скриншот выше.

10. Тут уже разбираем twitter. Просто запомните, что это всегда должно быть summary.

11-12. Эти метатеги хранят в себе адрес страницы создателя и автора твита. В целом, чаще всего, всегда одинаковые обозначения. Укажите свой Twitter аккаунт.

Краткий итог

Чтобы вам сделать такой же Open Graph необходимо три вещи. Создать два TV поля (хотя можете для og:title использовать переменную MODX *longtitle - расширенный заголовок) и включить дружественные URL.

Как включить дружественные URL

Это очень легко.

включаем дружественные url на modx

Идем в настройки, далее системы настройки. В фильтре по разделу (3 шаг) набираем “URL” и выбираем “Дружественные URL”. Ниже в списке ищем “Использовать дружественные URL” и вместо “Нет” выбираем “Да” (для изменения просто кликните на “Нет” или “Да”).

Как создать TV поле

Тоже легко.

как создать tv поля на modx

Идем в элементы, далее жмем “Плюс” в разделе “Дополнительные поля”. Заполняем нужную вам информацию во вкладках “Общая информация”. Далее идем в “Параметры ввода” и выбираем ЧТО будет хранить в себе TV поле: текст, картинку или тег.

Не забудьте про следующую вкладку “Доступно для шаблонов”, выберите нужные шаблоны (я выбрал все и подгружаю к каждой странице нужную мне картинку).

Вот и все, друзья. Если помог, жадно лайкните или напишите коммент. Это мотивирует дальше писать статьи.

Отправь свой вопрос.

Я с радостью тебе отвечу, правда. Особенно если это касается блога или сотрудничества.