Тег Base в HTML и относительные ссылки на сайте

HTML-элемент <base> устанавливает базовый URL, относительно которого браузер вычисляет адреса относительных ссылок и ресурсов документа. Это маленький элемент, способный изменить работу навигации, картинок, скриптов и якорей сразу на всей странице. Для SEO он важен не как «фактор ранжирования», а как источник возможных ошибок в адресах и обходе сайта.

Как работает <base href>

Элемент размещают в <head> перед элементами с URL-атрибутами. При отсутствии <base> относительные адреса вычисляются относительно текущего URL документа. При наличии href — относительно указанной базы. Браузер использует первый подходящий base href; второй элемент не создаёт последовательной цепочки базовых адресов.

<head>
  <base href="https://example.ru/catalog/">
  <link rel="stylesheet" href="css/main.css">
</head>

При такой базе css/main.css превращается в https://example.ru/catalog/css/main.css, даже если текущая страница находится по адресу /blog/article/. Это может быть ожидаемым решением приложения, а может незаметно сломать подключение CSS.

Относительные, корневые и абсолютные адреса: восемь примеров

Предположим, текущий адрес документа — https://example.ru/blog/guide.html, а в <head> есть <base href="https://example.ru/catalog/">.

Обратите внимание на #features: вместо якоря внутри текущей статьи переход разрешается относительно базы /catalog/. Именно такие баги трудно заметить: кнопка меню существует, но отправляет пользователя на другую страницу.

Если base href оканчивается именем файла, относительный путь разрешается относительно каталога этой базы; завершающий / имеет значение. У адреса вида /catalog и /catalog/ различное поведение в стандартном алгоритме URL.

Когда <base> полезен, а когда мешает

Обоснованный случай — автономная HTML-документация или приложение, которое заранее знает базовую директорию ресурсов и последовательно использует относительные пути. Но если CMS и так генерирует абсолютные или корневые URL, добавление <base> не даёт автоматического SEO-преимущества.

Риск возникает, когда проект частично использует корневые пути (/assets/style.css), частично относительные (images/a.jpg) и фрагменты (#faq). После внедрения элемента часть ссылок меняет назначение, а ошибка может затрагивать весь шаблон: логотип, пагинацию, canonical, изображения карточек, JavaScript-ресурсы.

<base target="_blank"> — отдельная возможность задавать контекст открытия ссылок. По соображениям пользовательского опыта и безопасности его не следует применять ко всему сайту без явной причины.

Почему base не устраняет дубли страниц

Дубли появляются, когда разные адреса возвращают одинаковый или близкий контент: например, ?sort=price, копии карточек, зеркала HTTP/HTTPS, разные регистры адресов в некорректно устроенном проекте. Само отсутствие <base> дубли не создаёт. Оно лишь влияет на то, куда ведёт относительная ссылка в конкретном документе.

Для управления дублями применяют корректные постоянные редиректы, понятную структуру URL, согласованный sitemap и rel="canonical" на дублирующихся или почти идентичных документах. Но canonical не исправит поломанную кнопку «Купить»: навигацию надо чинить отдельно.

Как проверить ошибку за пять минут

1. Откройте страницу в браузере и посмотрите <head>: нет ли нескольких <base>, откуда берётся href и когда тег появляется после JavaScript.
2. В консоли выполните document.baseURI и сравните с location.href. При необходимости проверьте document.querySelector('base')?.href.
3. Найдите проблемный элемент, например <a href="../delivery/">, и выполните new URL('../delivery/', document.baseURI).href.
4. Проверьте вкладку Network: куда фактически уходят запросы CSS, изображений, форм и скриптов.
5. Проверьте все якоря и относительные адреса при открытии страницы из sitemap и после редиректов.
6. Повторите проверку на вложенном URL и на главной, поскольку последствия могут отличаться по каталогам.

const relative = '../delivery/';
console.log('Текущая страница:', location.href);
console.log('Базовый URL:', document.baseURI);
console.log('Итоговый адрес:', new URL(relative, document.baseURI).href);

Для аудита большого сайта выгрузите исходные HTML-ссылки вместе с абсолютными разрешёнными адресами. Если /blog/article/ внезапно ссылается на /catalog/#comments, это важнее формального отчёта о «наличии base».

Что делать в WordPress, MODX и других CMS

Начните с проверки стандартного шаблона. Если система корректно формирует адреса без <base>, добавлять его только «для SEO» не нужно. При переносе сайта в поддиректорию, смене домена или подключении CDN проверьте относительные ссылки повторно. Лучше последовательно использовать корневые адреса для внутренних ресурсов или явно проверенные абсолютные ссылки там, где этого требует интеграция.

Частые вопросы. <base> не подменяет canonical. Он не создаёт 301-редирект и не меняет HTTP-код. Поисковый робот и браузер могут по-разному обрабатывать JS-изменения DOM, поэтому критичные навигационные адреса стоит отдавать в исходном HTML. Open Graph URL лучше задавать абсолютными адресами.

Связанные материалы: внутренняя оптимизация, canonical, 301-редирект.

Источники: MDN: элемент <base>; Google: указание canonical.

Архивные иллюстрации и первоначальные наблюдения

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

Показать архивные иллюстрации (1)

Связаться в Telegram

Следующие страницы вас также могут заинтересовать:

• Робототехника
• SEO-продвижение образовательного сайта: 7 лет — от старого HTML до AI Search
• Паллетирование: что это такое, технологии, оборудование и роботизация
• Промышленные роботы: что это, виды, устройство и применение
• Машинное зрение в робототехнике: что это, как работает и где применяется

Обновлено: 11.10.2026