Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#статьи</a>

2 <ul><li>5 сен 2025</li>

3 <li>0</li>

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

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

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

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

8 Содержание

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

10 <li><a>Как написать хороший заголовок страницы</a></li>

11 <li><a>Как <title> влияет на SEO</a></li>

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

13 <li><a>Тег <title> и атрибуты</a></li>

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

15 <li><a>Примеры использования динамических заголовков</a></li>

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

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

18 <head> <title>Интернет-магазин электроники</title> </head>Текст из тега <title> можно увидеть в нескольких местах:

19 <ul><li>В названии вкладки браузера - заголовок помогает пользователю быстро найти нужную страницу среди открытых.</li>

20 <li>В истории и закладках - именно это название сохранится в списке.</li>

21 <li>В результатах поиска - поисковики чаще всего берут именно <title>, чтобы показать ссылку на страницу.</li>

22 <li>В социальных сетях - при публикации ссылки заголовок используется в карточке поста.</li>

23 </ul>Пример:

24 <head> <title>Купить ноутбук ASUS ZenBook | TechShop</title> </head> <body> <h1>Ноутбуки ASUS ZenBook</h1> </body>На вкладке браузера будет показан текст "Купить ноутбук ASUS ZenBook | TechShop", а на самой странице пользователь увидит только <h1> - "Ноутбуки ASUS ZenBook".

25 Скриншот: Google Chrome / Skillbox MediaХороший заголовок страницы помогает и пользователю, и поисковой системе. Он должен быть ясным, уникальным и отражать содержание страницы.

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

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

28 <title>Готовим борщ: пошаговый рецепт для начинающих</title>Такой заголовок сразу говорит, о чём страница, и помогает не запутаться.

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

30 <ul><li>используйте разделители (-, |, :), чтобы сделать заголовок читаемым;</li>

31 <li>проверяйте его на слух - если фраза звучит естественно, значит, пользователю будет легко её воспринимать;</li>

32 <li>можно добавить спецсимвол или эмодзи, но только если это уместно и не мешает чтению.</li>

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

34 <ul><li>делайте его уникальным для каждой страницы;</li>

35 <li>включайте одно-два ключевых слова (без переспама);</li>

36 <li>следите за длиной - около 50-60 символов достаточно, чтобы заголовок не обрезался в результатах поиска.</li>

37 </ul>Пример:

38 <title>Купить велосипед Trek - скидка 15% и бесплатная доставка | BikeStore</title>В начале указано ключевое слово "купить велосипед Trek", затем добавлено описание выгоды для пользователя, а в конце - название бренда. Такой порядок помогает и человеку, и поисковой системе.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

55 <button onclick="document.title = 'Вы нажали на кнопку!'"> Нажми меня </button>Когда пользователь кликнет по кнопке, текст во вкладке браузера обновится.

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

57 html

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

59 // Задаём начальное время (в секундах) // Здесь это 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%!" будет мигать или чередоваться с названием сайта, если вкладка неактивна. Это пример агрессивной рекламы, в реальных проектах так лучше не делать, но давайте попробуем сделать такую страницу в учебных целях.

60 html

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

62 // Запоминаем исходный заголовок страницы 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);Есть и более технический способ применения: в тестировании интерфейсов разработчики используют изменение заголовка для отладки - например, чтобы видеть, на какой стадии загрузки находится приложение или какой режим сейчас включён.

63 html

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

65 // Массив с этапами загрузки приложения let stages = [ "Загрузка данных", "Инициализация UI", "Подключение к серверу", "Готово" ]; // Номер текущего этапа (начинаем с нуля) let currentStage = 0; // Функция, которая переключает этапы function nextStage() { // Проверяем, не закончились ли этапы if (currentStage < stages.length) { // Ставим в заголовок текущий этап document.title = stages[currentStage]; // Переходим к следующему этапу currentStage++; // Запускаем функцию снова через 1,5 секунды setTimeout(nextStage, 1500); } } // Запускаем первую стадию nextStage();<a>Курс с трудоустройством: "Профессия Фронтенд-разработчик + ИИ" Узнать о курсе</a>