HTML-тег <title>

HTML-тег <title> определяет заголовок веб-страницы. Этот заголовок отображается в строке заголовка браузера, на вкладках и в закладках. Поисковые системы также используют его в качестве кликабельного заголовка в результатах поиска, что делает его критически важным компонентом SEO(поисковой оптимизации) и пользовательского опыта.

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

Базовый синтаксис HTML-тега <title>

Базовая структура тега <title> следующая: 

<!DOCTYPE html>
<html>
    <head>
        <title>Your Webpage Title</title>
    </head>
    <body>
        <h1>Welcome to My Website</h1>
    </body>
</html>
HTML-заголовок Пример тега

Пояснение: Текст внутри тега <title> («Заголовок вашей веб-страницы») отображается на вкладке браузера и в результатах поисковой системы.

Пример четко определенного заголовка

В следующем примере показан понятный и лаконичный заголовок веб-страницы: 

<!DOCTYPE html>
<html>
    <head>
        <title>Best Recipes for Healthy Living</title>
    </head>
    <body>
        <h1>Healthy Recipes for Every Meal</h1>
        <p>Explore our collection of nutritious recipes.</p>
    </body>
</html>
Пример четко определенного заголовка

Пояснение: заголовок является конкретным и описательным, улучшает как удобство использования, так и SEO, четко передавая цель веб-страницы.

Важность тега <title>

  • Поисковая оптимизация(SEO): Поисковые системы используют заголовок для определения релевантности веб-страницы запросам пользователей. Правильно составленный заголовок улучшает видимость.
  • Пользовательский интерфейс: Заголовки отображаются на вкладках браузера, помогая пользователям легко находить открытые страницы и переключаться между ними.
  • Закладки: когда страница добавлена в закладки, ее заголовок отображается как имя закладки, что облегчает ее распознавание в дальнейшем.

Рекомендации по использованию тега <title>

  • Будьте описательными: четко опишите содержание страницы в заголовке.
  • Соблюдайте краткость: ограничьте заголовок 50–60 символами, чтобы он полностью отображался в результатах поиска.
  • Включайте ключевые слова: включайте основные ключевые слова, релевантные содержанию страницы, для улучшения рейтинга в поисковых системах.
  • Сделайте его уникальным: используйте уникальные заголовки для каждой страницы, чтобы избежать дублирования и путаницы.
  • Отразите брендинг: добавьте название своего бренда или веб-сайта для большей узнаваемости, особенно на домашних и целевых страницах.

Пример заголовка с брендингом

Вот пример заголовка, включающего брендинг: 

<!DOCTYPE html>
<html>
    <head>
        <title>Contact Us - Healthy Living Recipes</title>
    </head>
    <body>
        <h1>Get in Touch</h1>
        <p>We’d love to hear from you. Contact us today!</p>
    </body>
</html>

Пояснение: Заголовок четко указывает на цель страницы(«Связаться с нами»), одновременно отражая бренд(«Рецепты здорового образа жизни»).

Стилизация или изменение заголовков с помощью JavaScript

Вы можете динамически изменять тег <title> с помощью JavaScript: 

<!DOCTYPE html>
<html>
    <head>
        <title>Welcome</title>
    </head>
    <body>
        <h1>Welcome to Our Website</h1>
        <script>
            document.title = "Updated Title - Our Website";
        </script>
    </body>
</html>
Стилизация или изменение заголовков с помощью JavaScript

Результат: Первоначально заголовок отображается как «Добро пожаловать», но при выполнении скрипта динамически меняется на «Обновленный заголовок – Наш веб-сайт».

Практическое применение тега <title>

  • SEO-оптимизация: используйте релевантные ключевые слова для улучшения рейтинга и показателя кликабельности.
  • Дифференциация страниц: присваивайте пользователям уникальные заголовки, чтобы помочь им идентифицировать определенные страницы веб-сайта.
  • Динамические заголовки: используйте JavaScript для обновления заголовков на основе действий пользователя или динамических изменений контента.
  • Улучшенный пользовательский интерфейс: предоставляйте понятные и лаконичные заголовки для лучшей навигации в браузере и закладок.