/ ↲
    Расширенный поиск

    HTML

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

    Читайте также