Тег HTML <title>
Тег HTML <title> задаёт заголовок HTML-документа. Он отображается на вкладке браузера и в результатах поиска.
Тег HTML <title> определяет заголовок документа. Это элемент метаданных документа: он не отображается нигде внутри самой страницы, но управляет тем, как страница обозначается везде, где на неё ссылаются, — на вкладке браузера, в закладке, в результате поиска и в ссылке в социальных сетях.
На этой странице объясняется, почему каждая страница должна содержать ровно один <title>, где он должен располагаться и как написать хороший заголовок, удобный для пользователей и поисковых систем.
Почему <title> важен
<title> — один из немногих элементов, обязательных в корректном HTML-документе. Браузеры и поисковые системы воспринимают его как каноническое, понятное человеку название страницы, поэтому он появляется одновременно во многих местах:
- Вкладка / окно браузера — текст на вкладке является заголовком страницы.
- Закладки — когда пользователь добавляет страницу в закладки, заголовок становится именем закладки по умолчанию.
- Результаты поиска (SERP) — заголовок обычно используется как синяя кликабельная ссылка в результате поиска, что напрямую влияет на кликабельность (CTR).
- Публикации в социальных сетях — когда ссылка публикуется в мессенджере или социальной сети, заголовок попадает в карточку предпросмотра ссылки (вместе с мета-тегами, такими как Open Graph).
- Доступность — программы чтения с экрана объявляют заголовок при загрузке страницы, помогая пользователям понять, где они находятся.
Поскольку заголовок используется многими инструментами, чёткий и точный заголовок улучшает как UX (пользователи легко находят нужную вкладку или результат), так и SEO (поисковые системы ранжируют страницу по релевантным запросам).
Заголовок должен содержать наиболее важные ключевые слова страницы, чтобы поисковые системы ранжировали её по релевантным запросам, — но пишите его в первую очередь для людей.
Где размещать: ровно один, внутри <head>
<title> должен находиться внутри раздела <head>, который предназначен для метаданных документа, и документ должен содержать ровно один <title>. <head> хранит информацию о странице (заголовок, кодировка, viewport, данные meta), а не видимое содержимое, поэтому заголовок естественным образом находится там вместе с остальными описательными данными страницы.
Синтаксис
Элемент <title> используется парно. Текст пишется между открывающим тегом <title> и закрывающим </title>, и он может содержать только текст — никаких других HTML-элементов.
Пример тега HTML <title>:
Тег HTML <title>
<!DOCTYPE html>
<html>
<head>
<title>W3Docs - learn HTML, CSS, PHP, JavaScript online.</title>
</head>
<body>
<p>The main content of the page.</p>
</body>
</html>Как писать хороший заголовок: слабый vs. оптимизированный
Расплывчатый или отсутствующий заголовок вынуждает браузеры отображать URL, а поисковые системы могут его переписать или проигнорировать. Сравните два примера ниже.
Слабый заголовок — слишком короткий и общий:
<head>
<title>Home</title>
</head>Оптимизированный заголовок — описательный, по шаблону Название страницы | Название сайта:
<head>
<title>HTML <title> Tag: Syntax, SEO and Examples | W3Docs</title>
</head>Шаблон Название страницы | Название сайта — распространённое и надёжное соглашение: уникальная, богатая ключевыми словами часть заголовка идёт первой (где она наиболее заметна в результате поиска и на узкой вкладке браузера), а название сайта — в конце для узнаваемости бренда. В качестве разделителя обычно используется вертикальная черта (|) или тире (-).
Практические рекомендации
- Держите длину около 55–60 символов. Это рекомендация, а не жёсткое ограничение — поисковые системы обрезают длинные заголовки, поэтому ставьте важные слова в начало.
- Будьте конкретны. Избегайте заголовков из одного-двух слов; используйте осмысленную фразу, резюмирующую содержание страницы.
- Делайте каждый заголовок уникальным на сайте, чтобы каждая страница легко отличалась на вкладках и в результатах поиска.
- Избегайте переспама ключевыми словами. Набор слов воспринимается как спам и никому не помогает.
- Избегайте нестандартных специальных символов, которые разные браузеры могут отображать непоследовательно.
Атрибуты
Тег <title> поддерживает глобальные атрибуты. На практике значимым является только lang — он объявляет язык текста заголовка, что полезно, когда заголовок отличается от языка документа. Такие атрибуты, как id, class и style, принимаются парсером, но не оказывают никакого эффекта, поскольку заголовок никогда не отображается внутри страницы, где могли бы применяться стили или скрипты.