PrepBro
← Назад к вопросам

За что отвечает тег title

1.0 Junior🔥 181 комментариев
#Soft Skills и рабочие процессы

Комментарии (1)

🐱
claude-haiku-4.5PrepBro AI2 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Тег title в HTML

Это базовый, но критически важный элемент HTML, который часто недооценивают. Title влияет на SEO, пользовательский опыт и поведение браузера.

Определение и расположение

Тег title - это элемент HTML, который определяет название страницы. Он размещается в секции head документа.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Это название страницы</title>
</head>
<body>
  <h1>Это содержимое страницы</h1>
</body>
</html>

За что отвечает title

1. Название вкладки браузера

Это первое и самое видимое применение. Текст из title отображается в заголовке вкладки.

<title>PrepBro - Подготовка к IT собеседованиям</title>

На экране пользователя:

┌─────────────────────────────────────────┐
│ PrepBro - Подготовка к IT... │ X │ + │
│────────────────────────────────────────│
│ (содержимое сайта)                      │
└─────────────────────────────────────────┘

2. Закладки (Bookmarks)

Когда пользователь добавляет страницу в закладки, по умолчанию используется текст из title.

<title>React Документация - Официальный гайд</title>

При добавлении в закладки:

Добавлено в закладки: React Документация - Официальный гайд

3. История браузера

В истории просмотров (History) отображается title страницы.

<title>Купить MacBook Pro 16"</title>

В истории:

[вчера] Купить MacBook Pro 16"
[сегодня] PrepBro - Подготовка

4. SEO (поисковая оптимизация)

Это один из самых важных факторов SEO. Title содержит ключевые слова для поиска.

<!-- Хороший title для SEO -->
<title>Купить MacBook Pro 16 дюймов | Официальный сайт Apple</title>

<!-- Плохой title для SEO -->
<title>Страница товара</title>

Google использует title в результатах поиска:

Google Search Result:
┌──────────────────────────────────────────────┐
│ Купить MacBook Pro 16 дюймов | Apple         │  <- title
│ https://www.apple.com/shop/...               │  <- URL
│ MacBook Pro 16 дюймов. Мощность на новом    │  <- description
│ уровне. Со сверхбыстрыми микросхемами M3...│
└──────────────────────────────────────────────┘

5. Социальные сети (Open Graph)

Хотя это отдельный механизм (Open Graph), title может использоваться как fallback.

<head>
  <title>Новая статья о React Hooks</title>
  
  <!-- Open Graph для соцсетей -->
  <meta property="og:title" content="Полный гайд по React Hooks" />
  <meta property="og:description" content="Учимся использовать Hooks эффективно" />
  <meta property="og:image" content="/og-image.jpg" />
</head>

При поделке в соцсетях:

┌─────────────────────────────────────┐
│ Полный гайд по React Hooks          │ <- og:title
│ [Image]                             │ <- og:image
│ Учимся использовать Hooks ...       │ <- og:description
└─────────────────────────────────────┘

Best Practices для title

1. Уникальность

Каждая страница должна иметь уникальный title.

<!-- Главная страница -->
<title>PrepBro - Подготовка к IT собеседованиям</title>

<!-- Страница вопросов -->
<title>Вопросы на собеседовании - PrepBro</title>

<!-- Страница профиля -->
<title>Мой профиль - PrepBro</title>

2. Длина title

Рекомендуемая длина: 30-60 символов. Google обычно показывает первые 50-60 символов.

<!-- Хорошо: 52 символа -->
<title>Python для начинающих - Бесплатный онлайн курс</title>

<!-- Плохо: слишком длинный -->
<title>Python для начинающих - Бесплатный онлайн курс с нуля за 2 недели и сертификатом от лучших учителей</title>

<!-- Плохо: слишком короткий -->
<title>Python</title>

3. Включение ключевых слов

Текст title должен содержать важные ключевые слова для SEO.

<!-- Хорошо: содержит главное ключевое слово -->
<title>Интернет-магазин электроники - GadgetShop</title>

<!-- Плохо: нет ключевых слов -->
<title>Добро пожаловать</title>

4. Структура title

Лучше начать с основного ключевого слова, потом название сайта.

<!-- Правильная структура -->
<title>Основной контент | Название сайта</title>
<title>Купить iPhone 15 | Apple</title>
<title>Как писать на TypeScript | Dev Academy</title>

<!-- Неправильная структура -->
<title>Название сайта | Основной контент</title>

5. Для динамических страниц (SPA и SSR)

В Single Page Applications (React, Vue) title часто нужно обновлять динамически.

// React компонент
import { useEffect } from 'react';

export function ProductPage({ productName }) {
  useEffect(() => {
    document.title = `${productName} - Интернет-магазин`;
  }, [productName]);

  return (
    <div>
      <h1>{productName}</h1>
      {/* содержимое */}
    </div>
  );
}

// Next.js (SSR) - рекомендуемый подход
import Head from 'next/head';

export default function ProductPage({ product }) {
  return (
    <>
      <Head>
        <title>{product.name} - E-shop</title>
        <meta name="description" content={product.description} />
      </Head>
      <h1>{product.name}</h1>
    </>
  );
}

// React с react-helmet (для SPA)
import { Helmet } from 'react-helmet-async';

export function ProductPage({ product }) {
  return (
    <>
      <Helmet>
        <title>{product.name} | Shop</title>
      </Helmet>
      <h1>{product.name}</h1>
    </>
  );
}

Примеры хороших titles

Ecommerce

<!-- Главная страница -->
<title>Nike - Официальный интернет-магазин</title>

<!-- Категория товаров -->
<title>Мужская одежда | Купить футболки и рубашки | Nike</title>

<!-- Конкретный товар -->
<title>Nike Air Force 1 | Кроссовки | Nike</title>

<!-- Корзина -->
<title>Корзина покупок | Nike</title>

SaaS приложение

<!-- Лендинг -->
<title>Notion - Все-в-одном рабочее пространство</title>

<!-- Документация -->
<title>Документация API | Notion Developer</title>

<!-- Блог -->
<title>Как использовать Databases | Notion Blog</title>

Новостной сайт

<!-- Главная -->
<title>BBC News - Последние новости, события и видео</title>

<!-- Новостная статья -->
<title>Изменение климата: новый отчет ООН выявил угрозы | BBC News</title>

Влияние на пользовательский опыт

Хороший title помогает пользователю

<title>Как установить Node.js на Ubuntu 20.04 | Dev Guide</title>

Пользователь из поиска видит:

  • Тему (установка Node.js)
  • ОС (Ubuntu 20.04)
  • Источник (Dev Guide)

Это помогает решить, нужна ли ему эта статья, прежде чем кликать.

Плохой title вводит в заблуждение

<title>Статья</title>

Пользователь не знает, о чем статья. Это снижает CTR (click-through rate).

Title и мета-теги для максимального SEO

<!DOCTYPE html>
<html lang="ru">
<head>
  <!-- Основные мета-теги -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <!-- Title и description (одни из самых важных) -->
  <title>Полный гайд по JavaScript | Dev Academy</title>
  <meta name="description" content="Научитесь JavaScript с нуля. Практические примеры, тесты и проекты. Более 500 уроков для всех уровней.">
  
  <!-- Open Graph для соцсетей -->
  <meta property="og:title" content="Полный гайд по JavaScript">
  <meta property="og:description" content="Научитесь JavaScript с нуля...">
  <meta property="og:image" content="/og-image.jpg">
  
  <!-- Twitter Card -->
  <meta name="twitter:title" content="Полный гайд по JavaScript">
  <meta name="twitter:description" content="Научитесь JavaScript с нуля...">
  
  <!-- Ключевые слова (меньше влияния на SEO, но всё ещё используется) -->
  <meta name="keywords" content="JavaScript, обучение, программирование, курс">
</head>
<body>
  <!-- содержимое -->
</body>
</html>

Частые ошибки

Ошибка 1: Title на всех страницах одинаковый

<!-- ПЛОХО: на всех страницах одно и то же -->
<title>Мой сайт</title>

Ошибка 2: Title содержит только ключевые слова (keyword stuffing)

<!-- ПЛОХО: спам ключевых слов -->
<title>купить купить купить товар цена предложение доставка</title>

Ошибка 3: Title не синхронизирован с содержимым

<title>О нас</title>
<!-- но на странице контакты, а не информация о компании -->
<h1>Свяжитесь с нами</h1>

Проверка title в инструментах

# Google Search Console показывает title в результатах
# SEO инструменты (Ahrefs, SEMrush) анализируют title

# В Chrome DevTools можно посмотреть
# Elements -> head -> title

# Или в консоли браузера
console.log(document.title); // выведет текущий title

# Изменение title во время работы
document.title = 'Новый title';

Заключение

Тег title - это простой, но мощный элемент HTML, который:

  1. Улучшает UX - показывает название в вкладке и закладках
  2. Важен для SEO - это один из топ факторов ранжирования
  3. Влияет на CTR - хороший title привлекает кликов в поиске
  4. Помогает доступности - скринридеры используют title
  5. Работает в соцсетях - используется как fallback для Open Graph

Всегда уделяй внимание title на каждой странице - это базовый, но критически важный элемент SEO.