Тег <​title​> в HTML: как задать заголовок страницы
2026-02-21 05:46 Diff
https://skillbox.ru/media/code/teg-title-v-html-kak-zadat-zagolovok-stranicy/

#статьи

  • 5 сен 2025
  • 0

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

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

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

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

Содержание

Тег <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> — важный элемент 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>. Добавить к нему class, id, style, lang и другие атрибуты нельзя — браузеры их просто игнорируют.

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

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

Заголовок можно менять динамически в зависимости от ситуации. Например, владельцы интернет-магазинов используют это, чтобы добавить в заголовок количество товаров в корзине: пользователь переходит на другую вкладку, видит, что в заголовке написано «(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(); Курс с трудоустройством: «Профессия Фронтенд-разработчик + ИИ» Узнать о курсе