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

В чем разница между title и h1?

1.0 Junior🔥 132 комментариев
#HTML и CSS

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

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

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

В чем разница между title и h1?

title и h1 — это два совершенно разных HTML элемента с разными целями. title — это метаданные страницы (видны в браузере и поисковиках), а h1 — это заголовок видимого контента на странице.

title — метаданные страницы

title это элемент в секции head HTML документа. Он содержит название страницы и показывается:

  • В закладке браузера
  • В истории браузера
  • В результатах поиска Google
  • При шаринге ссылки в соцсетях (частично)
  • В закладках браузера
<!DOCTYPE html>
<html>
<head>
  <title>Купить iPhone 15 - лучшая цена на AliExpress</title>
  <!-- Браузер покажет эту строку в закладке -->
</head>
<body>
  <!-- контент страницы -->
</body>
</html>

Title — это важно для SEO. Google использует title как основной текст для заголовка в результатах поиска.

Результат поиска Google:
┌─────────────────────────────────────────────┐
│ Купить iPhone 15 - лучшая цена на AliExpress │  <- title отсюда
│ www.aliexpress.com › electronics › phones    │
│ Оригинальный iPhone 15 с гарантией, скидка.. │  <- meta description
└─────────────────────────────────────────────┘

h1 — заголовок видимого контента

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

<!DOCTYPE html>
<html>
<head>
  <title>Купить iPhone 15 - лучшая цена</title>
</head>
<body>
  <!-- h1 виден пользователю на странице -->
  <h1>iPhone 15 Pro Max 256GB</h1>
  
  <h2>Характеристики</h2>
  <p>Экран: 6.7 дюймов...</p>
</body>
</html>

На странице пользователь увидит:

┌──────────────────────────────┐
│ iPhone 15 Pro Max 256GB      │  <- h1 видна пользователю
│                              │
│ Характеристики              │  <- h2
│ Экран: 6.7 дюймов...        │
└──────────────────────────────┘

Сравнение

Аспектtitleh1
Где находитсяВ head документаВ body, видна на странице
Видна пользователюТолько в закладке браузераДа, в контенте
Для SEOОчень важна (основной результат поиска)Важна (структура, релевантность)
КоличествоДолжна быть ровно однаДолжна быть ровно одна (best practice)
Пример содержимогоКраткий заголовок страницыОсновной заголовок контента
CSS стилиНельзя стилизовать (не элемент)Можно стилизовать

Реальный пример

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width" />
  <!-- title в закладке браузера -->
  <title>Лучшие рецепты пасты - готовим дома</title>
  <!-- meta description в результатах поиска -->
  <meta name="description" content="Пошаговые рецепты пасты для начинающих. Советы шефа-повара, ингредиенты, видеоуроки." />
</head>
<body>
  <header>
    <nav>Меню</nav>
  </header>
  
  <main>
    <!-- Основной заголовок контента -->
    <h1>Как готовить пасту карбонара - классический рецепт</h1>
    
    <article>
      <section>
        <h2>Ингредиенты</h2>
        <ul>
          <li>Паста - 400г</li>
          <li>Бекон - 200г</li>
          <li>Яйца - 2 шт</li>
        </ul>
      </section>
      
      <section>
        <h2>Пошаговая инструкция</h2>
        <h3>Шаг 1: Подготовка ингредиентов</h3>
        <p>...</p>
        <h3>Шаг 2: Варка пасты</h3>
        <p>...</p>
      </section>
    </article>
  </main>
</body>
</html>

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

Лучшие рецепты пасты - готовим дома
www.mycookingblog.com › recipes › pasta
Пошаговые рецепты пасты для начинающих...

React/Next.js примеры

Next.js с Head компонентом

import Head from 'next/head';

function BlogPost({ post }) {
  return (
    <>
      <Head>
        {/* title в закладке и в результатах поиска */}
        <title>{post.title} - My Blog</title>
        <meta name="description" content={post.excerpt} />
      </Head>
      
      <main>
        {/* h1 видна в контенте */}
        <h1>{post.title}</h1>
        <article>{post.content}</article>
      </main>
    </>
  );
}

React Helmet

import { Helmet } from 'react-helmet';

function Page() {
  return (
    <>
      <Helmet>
        <title>Моя страница - сайт</title>
      </Helmet>
      <h1>Добро пожаловать!</h1>
    </>
  );
}

Правила для title и h1

Title

  • Оптимальная длина — 50-60 символов (в Google отображается до 60 символов)
  • Должен содержать ключевое слово в начале
  • Один title на страницу
  • Уникален для каждой страницы
  • Читаемый для человека
// Хорошо
<title>Купить велосипед горный Trek - скидка 20% | VeloShop</title>

// Плохо
<title>Товар</title>  // слишком короткий
<title>Велосипед велосипед велосипед - купить велосипед</title>  // спам

h1

  • Один h1 на страницу (лучшая практика)
  • Должен быть уникальным контентом страницы
  • Может быть похож на title, но не идентичен
  • Структурирован (h1 > h2 > h3)
// Хорошо
<title>Как готовить пасту - рецепты</title>
<h1>Паста карбонара - классический рецепт</h1>

// Плохо
<h1>Товар</h1>
<h2>Товар</h2>
<h2>Товар</h2>  // плохая структура

Влияние на SEO

Title

  1. Основной фактор ранжирования — Google использует title для понимания темы страницы
  2. CTR (Click-Through Rate) — хороший title привлекает клики из результатов поиска
  3. На результат поиска влияет больше всего

h1

  1. Вспомогательный фактор — помогает Google понять структуру контента
  2. Структурирование — h1->h2->h3 помогает роботам
  3. Менее влиятельна чем title, но важна для UX

Проверка в DevTools

// В консоли браузера

// Получить title
console.log(document.title);
// Output: "Купить велосипед - VeloShop"

// Получить все h1
console.log(document.querySelectorAll('h1').map(el => el.textContent));
// Output: ["Велосипеды", "Горные велосипеды", "Шоссейные велосипеды"]

// Проверить, есть ли h1
if (document.querySelectorAll('h1').length === 0) {
  console.warn('Внимание: h1 не найдена на странице!');
}

Контрольный список

При создании страницы проверь:

  • title присутствует и уникален
  • title содержит 50-60 символов
  • title не содержит спама и дублирования слов
  • h1 присутствует ровно одна
  • h1 релевантна контенту страницы
  • h1 отличается от title (но похожа по смыслу)
  • Структура заголовков логична (h1 > h2 > h3, без пропусков)
  • meta description есть (дополняет title)

Ключевые выводы

  • title — метаданные для браузера и поисковиков, видна в закладке
  • h1 — видимый заголовок контента, часть структуры документа
  • Обе важны для SEO, но title больше влияет на результаты поиска
  • Оба должны быть уникальны и содержать ключевые слова
  • h1 может быть более специфичной, чем title
  • Хорошее содержимое title привлекает клики из поиска, h1 структурирует контент
В чем разница между title и h1? | PrepBro