5 сен 2025
0

Тег <title> в HTML: как задать заголовок страницы

Рассказываем, как правильно использовать тег <title> в HTML: для чего он нужен, как влияет на заголовок страницы, SEO и отображение в браузере.

Иллюстрация: Polina Vari для Skillbox Media

Марина Демидова

Программист, консультант, специалист по документированию. Легко и доступно рассказывает о сложных вещах в программировании и дизайне.

Тег <title> — это элемент HTML, который задаёт заголовок веб-страницы. Этот текст не отображается в самом содержимом страницы, но играет ключевую роль: его видно во вкладке браузера, в результатах поиска, в закладках и даже в социальных сетях.

Содержание

Как выглядит тег <title> и где он отображается
Как написать хороший заголовок страницы
Как <title> влияет на SEO
Как заголовок влияет на доступность страницы и взаимодействие с экранными читалками
Тег <title> и атрибуты
Как изменить заголовок страницы динамически с помощью JavaScript
Примеры использования динамических заголовков

Как выглядит тег <title> и где он отображается

Тег <title> парный, то есть ему нужен закрывающий тег </title>. Тег всегда располагается внутри секции <head> документа. На одной странице может быть только один тег <title>.

Пишется это так:

<head>
    <title>Интернет-магазин электроники</title>
</head>

Текст из тега <title> можно увидеть в нескольких местах:

В названии вкладки браузера — заголовок помогает пользователю быстро найти нужную страницу среди открытых.
В истории и закладках — именно это название сохранится в списке.
В результатах поиска — поисковики чаще всего берут именно <title>, чтобы показать ссылку на страницу.
В социальных сетях — при публикации ссылки заголовок используется в карточке поста.

Пример:

<head>
  <title>Купить ноутбук ASUS ZenBook | TechShop</title>
</head>
<body>
  <h1>Ноутбуки ASUS ZenBook</h1>
</body>

На вкладке браузера будет показан текст «Купить ноутбук ASUS ZenBook | TechShop», а на самой странице пользователь увидит только <h1> — «Ноутбуки ASUS ZenBook».

*Скриншот: Google Chrome / Skillbox Media*

Как написать хороший заголовок страницы

Хороший заголовок страницы помогает и пользователю, и поисковой системе. Он должен быть ясным, уникальным и отражать содержание страницы.

Для пользователя

Представьте, что человек открыл сразу десять вкладок. Чтобы он быстро понял, какая именно ему нужна, заголовок должен быть конкретным и информативным. Избегайте расплывчатых формулировок вроде «Главная» или «Страница 1».

Пример удачного заголовка:

<title>Готовим борщ: пошаговый рецепт для начинающих</title>

Такой заголовок сразу говорит, о чём страница, и помогает не запутаться.

Небольшие приёмы:

используйте разделители (—, |, :), чтобы сделать заголовок читаемым;
проверяйте его на слух — если фраза звучит естественно, значит, пользователю будет легко её воспринимать;
можно добавить спецсимвол или эмодзи, но только если это уместно и не мешает чтению.

Для поисковой системы

Поисковики тоже ориентируются на <title>. Чтобы заголовок содействовал продвижению сайта:

делайте его уникальным для каждой страницы;
включайте одно-два ключевых слова (без переспама);
следите за длиной — около 50–60 символов достаточно, чтобы заголовок не обрезался в результатах поиска.

Пример:

<title>Купить велосипед Trek — скидка 15% и бесплатная доставка | BikeStore</title>

В начале указано ключевое слово «купить велосипед Trek», затем добавлено описание выгоды для пользователя, а в конце — название бренда. Такой порядок помогает и человеку, и поисковой системе.

Как <title> влияет на SEO

Тег <title> — важный элемент HTML с точки зрения SEO. Он влияет на то, как страница будет ранжироваться и отображаться в поисковой выдаче.

Тема страницы. Содержимое тега подсказывает поисковой системе, по каким запросам можно показывать страницу. Если в заголовке есть ключевое слово, оно увеличивает релевантность страницы по этому запросу.

Если в <title> указано «Купить велосипед Trek — скидка 15% и бесплатная доставка», то страница будет релевантна запросам «купить велосипед Trek» или «велосипед Trek скидка».

Кликабельность. В поиске <title> обычно показывается как кликабельная синяя ссылка. Чем интереснее и понятнее заголовок, тем выше шанс, что пользователь кликнет по нему. Даже если позиции одинаковые, на страницы с интересным и чётким заголовком переходят чаще.

Уникальность. Если на сайте много страниц с одинаковым <title>, поисковики могут посчитать их дубликатами. Это снижает ценность каждой отдельной страницы и снижает её позицию. Поэтому для каждой страницы лучше писать уникальный заголовок.

Длина заголовка. Поисковики показывают примерно 50–60 символов (или до 580 пикселей ширины) в заголовке. Если он слишком длинный, он обрежется и часть важной информации может быть потеряна. Ключевые слова желательно ставить ближе к началу, чтобы они точно были видны в выдаче.

Переспам. Если в <title> слишком часто повторять ключевые слова («купить велосипед, велосипед купить, велосипед недорого»), поисковые системы могут посчитать это манипуляцией и снизить позиции страницы. Заголовок должен быть естественным и удобным для чтения.

Как заголовок влияет на доступность страницы и взаимодействие с экранными читалками

Когда пользователь открывает страницу, экранные читалки в первую очередь озвучивают именно её заголовок. Это помогает людям с нарушениями зрения сразу понять, где они находятся, не тратя время на чтение всего содержимого.

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

Эта мысль закреплена и в стандартах доступности WCAG 2.2: критерий 2.4.2 Page Titled требует, чтобы у каждой страницы был осмысленный заголовок. Его отсутствие считается серьёзным нарушением уровня A, то есть минимально необходимого уровня доступности.

Тег <title> и атрибуты

Тег <title> — это элемент метаданных, а не контент. Он не поддерживает ни глобальные, ни специальные атрибуты, — значение имеет только текст между <title> и </title>. Добавить к нему class, id, style, lang и другие атрибуты нельзя — браузеры их просто игнорируют.

<title>Мой сайт</title> <!-- Работает -->
<title class="red">Мой сайт</title> <!-- Атрибут class игнорируется -->

Так как <title> не отображается в теле страницы, его нельзя стилизовать с помощью CSS. Все изменения производятся только в самом тексте тега или в дополнительных метатегах (<meta>, Open Graph, Twitter Card) для отображения в соцсетях.

Как изменить заголовок страницы динамически с помощью JavaScript

Заголовок можно менять динамически в зависимости от ситуации. Например, владельцы интернет-магазинов используют это, чтобы добавить в заголовок количество товаров в корзине: пользователь переходит на другую вкладку, видит, что в заголовке написано «(3) Корзина», и сразу понимает, что товары ждут. В онлайн-чатах заголовок могут менять, когда приходит новое сообщение, чтобы привлечь внимание. А в одностраничных приложениях (SPA) заголовок часто меняется при переходе между разделами, ведь сама страница не перезагружается, а адрес и заголовок должны подстраиваться под новый контент.

Чтобы изменить заголовок, достаточно обратиться к свойству document.title. Оно отвечает за текст, который виден во вкладке браузера. Например:

<script>
  document.title = "Новый заголовок";
</script>

Этот код можно вставить прямо в HTML-файл внутри тега <script> или выполнить в консоли разработчика. После выполнения заголовок страницы тут же изменится.

Заголовок можно менять в ответ на действия пользователя:

<button onclick="document.title = 'Вы нажали на кнопку!'">
  Нажми меня
</button>

Когда пользователь кликнет по кнопке, текст во вкладке браузера обновится.

Примеры использования динамических заголовков

Таймер обратного отсчёта

В приложениях с таймерами заголовок часто используют как индикатор времени. Если идёт обратный отсчёт, заголовок можно обновлять каждую секунду: «Осталось 05:12». Так пользователь сможет перейти на другую вкладку, но всё равно видеть, сколько осталось времени. Давайте сделаем такой таймер.

html

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Таймер</title>
</head>
<body>
  <h1>Таймер работает</h1>
  <script src="script.js"></script>
</body>
</html>

JavaScript

// Задаём начальное время (в секундах)
// Здесь это 5 минут и 12 секунд
let time = 5 * 60 + 12;

// Функция, которая обновляет заголовок страницы
function updateTitle() {
  // Считаем минуты и секунды отдельно
  let minutes = String(Math.floor(time / 60)).padStart(2, '0');
  let seconds = String(time % 60).padStart(2, '0');

  // Записываем в заголовок, сколько осталось времени
  document.title = `Осталось ${minutes}:${seconds}`;

  // Уменьшаем время на 1 секунду
  if (time > 0) {
    time--;
  } else {
    // Когда время закончилось, останавливаем таймер
    clearInterval(timer);
    document.title = "Время вышло!";
  }
}

// Вызываем функцию сразу, чтобы первый раз заголовок обновился
updateTitle();

// Каждую секунду обновляем заголовок
let timer = setInterval(updateTitle, 1000);

Мигающий заголовок с напоминанием о скидках

В интернет-магазинах заголовок иногда меняют, чтобы напомнить о скидках или акциях. Например, «Сегодня скидка 20%!» будет мигать или чередоваться с названием сайта, если вкладка неактивна. Это пример агрессивной рекламы, в реальных проектах так лучше не делать, но давайте попробуем сделать такую страницу в учебных целях.

html

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Мой магазин</title>
</head>
<body>
  <h1>Добро пожаловать в магазин!</h1>
  <script src="script.js"></script>
</body>
</html>

JavaScript

// Запоминаем исходный заголовок страницы
let originalTitle document.title;

// Текст, который хотим показывать вместо заголовка
let discountTitle = "Сегодня скидка 20%!";

// Флаг, переключающийся между true и false
let showDiscount = false;
  
// Каждую секунду меняем заголовок
setInterval(() => {
  // Если showDiscount = true → показываем скидку
  // Если false → возвращаем исходный заголовок
  document.title = showDiscount ? discountTitle : originalTitle;

  // Переключаем значение флага (true → false или наоборот)
 showDiscount = !showDiscount;
}, 1000);

Заголовок для отладки интерфейса

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

html

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Загрузка...</title>
</head>
<body>
  <h1>Приложение загружается</h1>
  <script src="script.js"></script>
</body>
</html>

JavaScript

// Массив с этапами загрузки приложения
let stages = [
  "Загрузка данных",
  "Инициализация UI",
  "Подключение к серверу",
  "Готово"
];

// Номер текущего этапа (начинаем с нуля)
let currentStage = 0;

// Функция, которая переключает этапы
function nextStage() {
  // Проверяем, не закончились ли этапы
  if (currentStage < stages.length) {
    // Ставим в заголовок текущий этап
    document.title = stages[currentStage];

    // Переходим к следующему этапу
    currentStage++;

    // Запускаем функцию снова через 1,5 секунды
    setTimeout(nextStage, 1500);
  }
}

// Запускаем первую стадию
nextStage();