Атрибуты rel и target для ссылок

Библиотека Markdown-it предоставляет мощный инструмент для рендеринга Markdown в HTML с возможностью расширения и настройки поведения ссылок. Два ключевых атрибута ссылок, которые часто используются в веб-разработке — это rel и target. Они позволяют контролировать безопасность, поведение открытия и SEO-свойства ссылок.

Атрибут target

Атрибут target определяет, где будет открываться ссылка при клике. Наиболее часто встречающиеся значения:

  • _blank — открытие ссылки в новой вкладке или окне браузера.
  • _self — стандартное поведение, открытие в том же окне.
  • _parent — открытие в родительском фрейме (актуально для iframe).
  • _top — открытие в верхнем уровне фреймов, игнорируя вложенные iframe.

В Markdown стандартного синтаксиса для задания target нет. В Markdown-it можно использовать плагин markdown-it-link-attributes или собственный renderer rule, чтобы автоматически добавлять target="_blank" для внешних ссылок.

Пример настройки с плагином:

const MarkdownIt = require('markdown-it');
const mila = require('markdown-it-link-attributes');

const md = new MarkdownIt();
md.use(mila, {
  pattern: /^https?:\/\//,
  attrs: {
    target: '_blank'
  }
});

const result = md.render('[Пример](https://example.com)');
console.log(result);
// <a href="https://example.com" target="_blank">Пример</a>

Такой подход позволяет безопасно открывать внешние ссылки, не изменяя вручную каждый Markdown-файл.

Атрибут rel

Атрибут rel определяет отношения между текущей страницей и целевым URL. Наиболее важные значения для безопасности и SEO:

  • nofollow — поисковые системы не учитывают ссылку при ранжировании.
  • noopener — предотвращает возможность открытия новой вкладки для взаимодействия с исходной страницей через window.opener.
  • noreferrer — убирает информацию о реферере при переходе.
  • external — семантическое обозначение внешней ссылки.

Особенно важен атрибут noopener при использовании target="_blank". Без него новая вкладка получает доступ к объекту window.opener и потенциально может изменять исходную страницу, создавая уязвимость.

Пример автоматического добавления rel через плагин:

md.use(mila, {
  pattern: /^https?:\/\//,
  attrs: {
    target: '_blank',
    rel: 'noopener noreferrer'
  }
});

const result = md.render('[Внешняя ссылка](https://example.com)');
console.log(result);
// <a href="https://example.com" target="_blank" rel="noopener noreferrer">Внешняя ссылка</a>

Настройка через собственный renderer rule

Если не хочется использовать сторонние плагины, можно переопределить поведение рендерера ссылок напрямую:

const md = new MarkdownIt();

const defaultRender = md.renderer.rules.link_open || function(tokens, idx, options, env, self) {
  return self.renderToken(tokens, idx, options);
};

md.renderer.rules.link_open = function(tokens, idx, options, env, self) {
  const hrefIndex = tokens[idx].attrIndex('href');
  if (hrefIndex >= 0) {
    const href = tokens[idx].attrs[hrefIndex][1];
    if (href.startsWith('http')) {
      tokens[idx].attrPush(['target', '_blank']);
      tokens[idx].attrPush(['rel', 'noopener noreferrer']);
    }
  }
  return defaultRender(tokens, idx, options, env, self);
};

const html = md.render('[GitHub](https://github.com)');
console.log(html);
// <a href="https://github.com" target="_blank" rel="noopener noreferrer">GitHub</a>

Такой метод предоставляет полный контроль и позволяет интегрировать логику добавления атрибутов по любому критерию — по домену, по типу файла, по имени ссылки.

Комбинированное использование rel и target

Правильная комбинация атрибутов обеспечивает:

  1. Безопасность — target="_blank" + rel="noopener noreferrer" предотвращает атаки через window.opener.
  2. SEO и индексацию — nofollow позволяет исключать определённые внешние ссылки из подсчета ссылочной массы.
  3. UX — пользователи не теряют текущую вкладку при переходе на внешний ресурс.

Пример:

<a href="https://example.com" target="_blank" rel="noopener noreferrer nofollow">Example</a>

Выводы по применению в Markdown-it

  • target="_blank": открытие внешних ссылок в новой вкладке.
  • rel="noopener noreferrer": защита от window.opener и скрытие реферера.
  • rel="nofollow": управление передачей веса ссылок для SEO.
  • Использование плагинов или собственных renderer rules обеспечивает автоматизацию этих атрибутов и делает Markdown более безопасным и гибким.

Эти подходы позволяют управлять безопасностью, поведением и SEO-свойствами ссылок прямо на этапе рендеринга Markdown, не вмешиваясь в исходный текст документа.

Оглавление