MODX: Как правильно вывести Open Graph
Привет, друзья! Сегодня поговорим о том, как вывести микроразметку Open Graph на своем сайте. Соответственно, для системы управления контентом - MODX. Статья написана на версии 2.7.1.
Что такое Open Graph
Open Graph - это протокол, позволяющий любой веб-странице стать полноценным объектом в социальных сетях. Если непонятно, то просто посмотрите на картинку ниже. Это и есть Open Graph. Красивая картинка и заголовок для какой-нибудь интернет страницы.
Конечно, сейчас уже 2019 год и есть определенные особенности, которые надо учесть при настройке микроразметки. Речь идет, конечно же, о размерах изображений. В своей практике я встречался с более менее универсальными размерами, о них сегодня и будем говорить. Скриншот ниже - это пример работы микроразметки.
Код микроразметки Open Graph
На самом деле все очень просто и можно сделать за 5-10 минут. В целом столько же потратится времени на установку какого-либо модуля.
Ниже показываю код. Не беспокойтесь - сейчас я все объясню. А под картиной будет ссылка для скачивание этого кода с Github.com
Документ opengraph.html доступен по ссылке.
Для удобства я взял весь <head> из чанки, просто потому что так удобней показывать. Обратите внимание на три основные вещи. Буду ссылаться на номер строки в примере.
1. <html prefix="og: http://ogp.me/ns#"> (1 строка).
Префикс, это обязательная вещь (хотя у меня и без нее работало). Проще говоря, мы оповещаем “робота” соц. сети что здесь будет Open Graph.
2. Код после <!-- OpenGraph --> (17 строка).
Тут идет код самого Open Graph.
3. Код после <!-- Twitter --> (28 строка).
Для Twitter используется чуть-чуть другой формат, поэтому прикрепил в статью его код для комплекта. Все покажу на примере Open Graph, а с Twitter разберетесь чисто логически. Хотя, кое-что все равно отметим.
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
Это очень легко.
Идем в настройки, далее системы настройки. В фильтре по разделу (3 шаг) набираем “URL” и выбираем “Дружественные URL”. Ниже в списке ищем “Использовать дружественные URL” и вместо “Нет” выбираем “Да” (для изменения просто кликните на “Нет” или “Да”).
Как создать TV поле
Тоже легко.
Идем в элементы, далее жмем “Плюс” в разделе “Дополнительные поля”. Заполняем нужную вам информацию во вкладках “Общая информация”. Далее идем в “Параметры ввода” и выбираем ЧТО будет хранить в себе TV поле: текст, картинку или тег.
Не забудьте про следующую вкладку “Доступно для шаблонов”, выберите нужные шаблоны (я выбрал все и подгружаю к каждой странице нужную мне картинку).
Вот и все, друзья. Если помог, подумайте обо мне что-нибудь хорошее и на этом сочтемся.
Опубликовано: 2018-12-26 13:10