Исполняемые доки HTML: Тег title

Q: Как изменить заголовок страницы через JavaScript?

Присвойте значение document.title, например document.title = '(3) Inbox'. Браузер сразу обновляет вкладку, и так веб-приложения показывают количество непрочитанных.

Q: Тег title и атрибут title это одно и то же?

Нет. Элемент называет всю страницу. Атрибут title, который работает почти у любого элемента, добавляет всплывающую подсказку при наведении на этот элемент.

Где стоит тег title

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Chocolate Chip Cookies Recipe | Bake Club</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <h1>Chocolate chip cookies</h1>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent = 'document.title is: ' + document.title;
  </script>
</body>
</html>

Сам title никогда не появляется внутри страницы. Это превью к тому же работает внутри страницы документации Coddy, поэтому вкладка браузера продолжает показывать заголовок документации; небольшой скрипт выводит то, что показала бы вкладка, если открыть пример как отдельный файл. Измените текст в <title>, и строка обновится.

Как написать хороший title

Title часто первое, что человек читает о вашей странице, в результатах поиска или в ряду вкладок. Большинству страниц хватает нескольких правил:

Будьте конкретны и уникальны. У каждой страницы сайта должен быть свой title, который описывает именно ее: «Рецепт печенья с шоколадной крошкой», а не «Главная» или «Страница 1».
Ставьте важные слова первыми. Вкладки узкие, а результаты поиска обрезают длинные заголовки. Держите ключевую фразу примерно в первых 50 или 60 символах.
Добавляйте название сайта в конце через | или :, чтобы тема страницы по-прежнему шла первой.
Пишите для людей. Заголовок, набитый повторяющимися ключевыми словами, выглядит как спам, и поисковики могут его переписать.

Эта имитация вкладки обрезает title примерно по ширине настоящей вкладки. Попробуйте заголовок короче или длиннее:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>How to Bake Soft Chocolate Chip Cookies at Home | Bake Club</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .bar { background: #e5e7eb; padding: 8px 8px 0; border-radius: 8px 8px 0 0; }
    .tab {
      width: 200px; background: #fff; border-radius: 8px 8px 0 0;
      padding: 8px 12px; font-size: 13px;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
  </style>
</head>
<body>
  <div class="bar"><div class="tab" id="tab"></div></div>
  <p>Full title: <code id="full"></code> (<span id="len"></span> characters)</p>
  <script>
    document.getElementById('tab').textContent = document.title;
    document.getElementById('full').textContent = document.title;
    document.getElementById('len').textContent = document.title.length;
  </script>
</body>
</html>

Когда название сайта в конце, обрезанная вкладка все равно показывает, о чем страница. Поменяйте порядок («Bake Club | How to...»), и каждая вкладка вашего сайта будет начинаться с одних и тех же двух слов.

Тег title, h1 и атрибут title

	Где	Где виден	Задача
`<title>`	В `<head>`, один раз	Вкладка, закладки, результаты поиска	Называет страницу
`<h1>`	В `<body>`	На странице	Главный видимый заголовок
Атрибут `title="..."`	У любого элемента	Подсказка при наведении	Дополнительное пояснение к этому элементу

Title и <h1> обычно совпадают по смыслу, но title может быть сформулирован под поиск и содержать название сайта, а заголовок может быть короче. Атрибут title, несмотря на название, никак с ними не связан. Наведите курсор на подчеркнутое слово:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Title vs title attribute</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <h1>Welcome to Bake Club</h1>
  <p>We test every recipe in a
    <span title="An oven with a fan that moves hot air" style="text-decoration: underline dotted;">convection oven</span>.
  </p>
</body>
</html>

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

В title только текст

Браузер читает все между <title> и </title> как обычный текст. Теги не разбираются, но ссылки на символы вроде & декодируются, а серии пробелов схлопываются в один:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Salt &amp; Pepper   <b>Bold?</b></title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <p>document.title:</p>
  <pre id="out" style="background: #f3f4f6; padding: 8px;"></pre>
  <script>
    document.getElementById('out').textContent = document.title;
  </script>
</body>
</html>

Результат: Salt & Pepper <b>Bold?</b>: сущность стала &, три пробела стали одним, а теги <b> остались буквальными символами. Выделение в title невозможно.

Изменение title через JavaScript

document.title можно и читать, и записывать. Веб-приложения используют его, чтобы показывать на вкладке количество непрочитанных или текущее состояние:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Inbox</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .tab { display: inline-block; background: #e5e7eb; border-radius: 8px 8px 0 0; padding: 8px 14px; font-size: 13px; }
    button { font: inherit; margin-top: 10px; padding: 6px 12px; }
  </style>
</head>
<body>
  <div class="tab" id="tab">Inbox</div><br>
  <button id="add">New message</button>
  <button id="read">Mark all read</button>
  <script>
    let unread = 0;
    const show = () => {
      document.title = unread ? '(' + unread + ') Inbox' : 'Inbox';
      document.getElementById('tab').textContent = document.title;
    };
    document.getElementById('add').onclick = () => { unread++; show(); };
    document.getElementById('read').onclick = () => { unread = 0; show(); };
  </script>
</body>
</html>

На настоящей странице вкладка браузера меняется одновременно с имитацией вкладки здесь. Поисковики, которые выполняют JavaScript, видят title, заданный скриптом, но для всего, что должно индексироваться, надежнее title, записанный в HTML.

Частые ошибки

Нет title вообще. Браузер показывает вместо него URL или имя файла, а страница становится некорректным HTML. Добавьте его на каждую страницу, рядом с тегом meta viewport в вашем шаблоне.
Одинаковый title на всех страницах. Вкладки, закладки и результаты поиска становится невозможно различить.
<title> в <body>. Браузеры все равно его используют, но его место в <head>, и некоторые инструменты его не найдут.
Два элемента <title>. Учитывается только первый. Удалите остальные.
Название сайта в начале каждого title. Начинайте с темы страницы; название сайта идет в конце.

Часто задаваемые вопросы

Что такое тег title в HTML?

<title> задает название страницы. Браузеры показывают его на вкладке и в закладках, а поисковики обычно показывают его как кликабельный заголовок результата. Он стоит внутри <head> и содержит только текст.

Какой длины должен быть тег title?

Поисковики обрезают длинные заголовки по ширине отображения, поэтому держите важные слова примерно в первых 50 или 60 символах. Жесткого ограничения в HTML нет, но все, что дальше, может скрыться за многоточием.

Чем тег title отличается от h1?

<title> это метаданные: он называет страницу на вкладках и в результатах поиска и не показывается на самой странице. <h1> это видимый главный заголовок в body. Часто они говорят похожее, но title может содержать название сайта и быть сформулирован под поиск.

Можно ли вставлять HTML-теги внутрь title?

Нет. Элемент title содержит только текст. Теги внутри него показываются буквально, поэтому <title>A <b>B</b></title> дает вкладку с текстом «A <b>B</b>». Ссылки на символы вроде & работают.

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

Присвойте значение document.title, например document.title = '(3) Inbox'. Браузер сразу обновляет вкладку, и так веб-приложения показывают количество непрочитанных.

Тег title и атрибут title это одно и то же?

Нет. Элемент <title> называет всю страницу. Атрибут title, который работает почти у любого элемента, добавляет всплывающую подсказку при наведении на этот элемент.

Связанные концепции