<title>: Элемент заголовка документа

Базовая линия Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с июля 2015 года.

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

html

<title>Grandma's Heavy Metal Festival Journal</title>

Атрибуты

В этом элементе используются только глобальные атрибуты.

Примечания по использованию

Элемент <title> всегда используется внутри блока <head> страницы.

Заголовки страниц и SEO

Содержание заголовка страницы может существенно влиять на оптимизацию для поисковых систем (SEO). В общем случае, более длинный и описательный заголовок работает лучше, чем короткий или общий. Содержание заголовка является одним из компонентов, используемых алгоритмами поисковых систем для определения порядка отображения страниц в результатах поиска. Кроме того, заголовок является первоначальным «крючком», с помощью которого вы привлекаете внимание читателей, просматривающих страницу результатов поиска.

Несколько рекомендаций и советов по составлению хороших заголовков:

Избегайте заголовков из одного или двух слов. Используйте описательную фразу или пару «термин-определение» для страниц глоссария или справочных страниц.
Поисковые системы обычно отображают около первых 55–60 символов заголовка страницы. Текст, выходящий за эти пределы, может быть потерян, поэтому старайтесь, чтобы заголовки не были длиннее этого. Если вам необходимо использовать более длинный заголовок, убедитесь, что важные части находятся в начале, и что ничего важного не находится в части заголовка, которая, вероятно, будет отброшена.
Не используйте «сгустки ключевых слов». Если ваш заголовок представляет собой просто список слов, алгоритмы часто снижают позицию вашей страницы в результатах поиска.
Постарайтесь, чтобы ваши заголовки были максимально уникальными на вашем сайте. Дублированные или близкие к дублированию заголовки могут привести к неточным результатам поиска.

Доступность

Важно предоставлять точный и краткий заголовок, описывающий назначение страницы.

Распространённый метод навигации для пользователей с вспомогательными технологиями — это чтение заголовка страницы и вывод содержащейся информации. Это связано с тем, что навигация по странице для определения её содержимого может быть трудоёмким и потенциально запутанным процессом. Заголовки должны быть уникальными для каждой страницы сайта, предпочтительно отображая основную цель страницы в первую очередь, а затем и имя сайта. Следование этому шаблону поможет гарантировать, что первоначальная цель страницы будет объявлена считывателем экрана в первую очередь. Это обеспечит гораздо лучший опыт, чем прослушивание названия сайта перед уникальным заголовком страницы для каждой страницы, на которую пользователь переходит на том же сайте.

Примеры

html

<title>Menu - Blue House Chinese Food - FoodYum: Online takeout today!</title>

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

html

<title>
  2 errors - Your order - Sea Food Store - Food: Online takeout today!
</title>

Примечание: в настоящее время динамическое обновление заголовка страницы не будет автоматически объявляться считывателями экрана. Если вы собираетесь обновлять заголовок страницы, чтобы отразить значительные изменения состояния страницы, может потребоваться использование областей ARIA Live.

Примеры

html

<title>Awesome interesting stuff</title>

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

Техническое резюме

Категории контента	Метаданные.
Разрешённое содержание	Текст, который не содержит межэлементные пробелы.
Пропуск тега	Требуются и открывающий, и закрывающий теги. Обратите внимание, что пропуск `</title>` должен привести к игнорированию браузером остальной части страницы.
Разрешённые родительские элементы	Элемент `<head>`, который не содержит других элементов `<title>`.
Неявная роль ARIA	Отсутствует соответствующая роль
Разрешённые роли ARIA	Не разрешены `role`.
Интерфейс DOM	`HTMLTitleElement`

Спецификации

Спецификация
HTML Стандарт # the-title-element

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`title`	1	12	1	15	1	18	4	14	1	1.0	4.4

См. также

SVG <title> элемент

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title