Клавиша / esc

<title>

Заголовок на вкладке страницы в браузере.

Время чтения: меньше 5 мин

Кратко

Скопировано

Чтобы дать документу название, используй элемент <title>. Название, или заголовок документа, будет видно только в строке заголовка браузера или на вкладке страницы.

Из названия страницы <title> пользователь узнаёт, что на ней находится. Если он захочет добавить страницу в избранное, то браузер предложит <title> в качестве названия закладки.

Как пишется

Скопировано

Тег <title> прописывается в контейнере <head> и может содержать только текст. На странице может быть только один элемент <title>.

        
          
          <head>  <title>Заголовок твоей страницы</title></head>
          <head>
  <title>Заголовок твоей страницы</title>
</head>

        
        
          
        
      
🧩 На самом деле смайлики и служебные символы тоже можно 😉 Но осторожно!
Пример использования смайла в title

Если добавите внутрь <title> другие теги, для браузера они будут частью текста.

Как написать хороший заголовок

Скопировано
  • Текст должен быть кратким (не больше 60 символов), понятным, однозначным и хорошо описывать содержимое страницы.
  • Не включайте в заголовки ключевые слова и не используйте их для привлечения внимания.
  • Делайте заголовки уникальными для каждой страницы.
  • Если на сайте много страниц, добавьте в заголовок название раздела или сайта. Уникальное описание страницы расположите на первом месте, а за ним уже всё остальное. Например, «Краски для потолка — Стройматериалы — Мир красок».

Ключевые слова в заголовке не помогут продвинуться выше в выдаче. Даже наоборот, Google понизит такой сайт в ней.

Доступность

Скопировано

Текст из <title> — это первое, что слышат пользователи скринридеров, когда попадают на вкладку. Так что тег важен с точки зрения доступности.

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

О важности <title> для доступности говорит и WCAG — Руководства по доступности веб-интерфейсов. В руководствах есть отдельный критерий про заголовки страниц.

Подсказки

Скопировано

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

💡 Не путай <title> с тегом <h1>, который создаёт заголовок уже на странице.

💡 Если не закрыть тег </title>, то браузер не покажет остальное содержимое страницы.

💡 Если пользователь решит добавить твою страницу в закладки или сохранить её у себя на компьютере, то эти символы из вашего <title> — , /, :, *, ?, ", <, >, | — будут заменены автоматически на допустимые для имени файла. Поэтому их лучше не использовать.

На практике

Скопировано

Дока Дог советует

Скопировано

🛠 С <title> всё просто: это название страницы, которое выводится на вкладке браузера. Но желательно, чтобы <title> совпадал с тегом <h1>. Плюс, в <title> должно быть упоминание бренда компании, например «Продаю бойлеры для частного дома — ВасяСтрой». ВасяСтрой должен быть на всех страницах сайта: это очень хорошо для индексации в поисковых системах. Если всё будет настроено так, то есть вероятность, что по запросу «продаю бойлеры для дома» поисковые системы поставят тебя повыше в выдаче 🤷🏼‍♂️