Дима Яковлев

Как использовать любые метатеги в шаблоне Jekyll

Разработчики тем оформления для Jekyll в своих шаблонах позволяют пользователю использовать заранее определённый набор метатегов для вывода в заголовках страниц веб-сайта. Как правило это наиболее популярные теги, такие как, author, description, keywords и теги для социальных сетей. Это работает до тех пор, пока не встаёт задача использовать редкие или собственные метатеги.

Стандартный путь добавления таких метатегов — редактирование шаблонов пользователем, а значит возможные будущие проблемы при обновлении версии темы оформления. Предлагаю рассмотреть концепцию универсального решения, дающего возможность задавать любое количество метатегов, не прибегая к внесению множественных изменений в код шаблонов.

Для примера рассматриваю работу с метатегами группы NAME. Такие метатеги состоят из атрибута name, определяющего имя тега, и связанного атрибута content, определяющего содержание тега. Например, к группе метатегов NAME относится популярный ранее в среде SEO тег keywords.

<meta name="keywords" content="meta, tag, jekyll">

Метатеги задаются в YAML заголовке страницы или шаблона в ассоциативном массиве meta_name, где ключ это имя метатега. При обработке метатеги страницы и шаблона не объединяются — при заданных метатегах страницы, метатеги шаблона будут полностью проигнорированы.

Пример YAML заголовка страницы, в котором задаются три метатега: yandex-verification, server и theme-color:

---
title: Страница с метатегами
meta_name:
  yandex-verification: '123456789'
  server: 'VDS/01'
  theme-color: '#4281a1'
---

Следующий Liquid код размещается непосредственно в шаблоне страницы в блоке <head> ... </head> или подключается туда же из внешнего файла директивой {% include file_with_code.html %}.

<head>
{%- assign meta_name = page.meta_name | default: layout.meta_name %}
{%- if meta_name %}
    {%- for tag in meta_name %}
    <meta name="{{ tag[0] }}" content="{{ tag[1] | escape }}">
    {%- endfor %}
{%- endif %}
</head>

Результат выполнения кода:

<head>
    <meta name="yandex-verification" content="123456789">
    <meta name="server" content="VDS/01">
    <meta name="theme-color" content="#4281a1">
</head>

Аналогично можно работать с метатегами группы HTTP-EQUIV, служащими для управления HTTP заголовками, и даже отказаться от применения некоторых плагинов.

Чтобы избежать потери метатегов шаблона и максимально сохранить скорость формирования страниц, можно организовать независимый последовательный вывод метатегов для шаблона и для страницы. При этом дублирование метатегов не проверяется.

<head>
{%- if layout.meta_name %}
    {% comment %} код {% endcomment %}
{%-endif %}
{%- if page.meta_name %}
    {% comment %} код {% endcomment %}
{%-endif %}
</head>

Кроме страниц и шаблонов, набор метатегов может быть определён в файле настроек Jekyll _config.yml. Тогда в Liquid коде вместо page.meta_name или layot.meta_name метатеги доступны в переменной site.meta_name.

Рекомендую использовать рассмотренную концепцию работы с метатегами в ваших новых темах оформления для Jekyll.