Загрузка...

Заголовок страницы HTML

Эмодзи живут в текстовом потоке страницы. Заголовок страницы делает другую работу: он называет весь документ для интерфейса браузера и для систем обнаружения. Пользователи видят его на вкладке, в истории и при создании закладки. Поисковые системы часто используют его как сильный сигнал для текста ссылки в выдаче. Учебные сайты и документация продукта должны освоить это рано: слабый title тратит внимание ещё до того, как кто-то прочитает первый абзац.

Что такое элемент title

Элемент HTML title принадлежит разделу head документа. Его текстовое содержимое — метаданные для страницы в целом. Это не стилизованный заголовок, который появляется в body. Вам по-прежнему нужны h1 (и другие заголовки) для видимого оглавления, по которому читатели сканируют саму страницу.

Прямой ответ

Поместите ровно один <title>...</title> внутрь <head>. Пишите короткий, конкретный, человекочитаемый текст — например City Guide — Home или HTML Page Title — не Untitled, не сырое имя файла и не груду ключевых слов, которую никто не захочет видеть на вкладке. Title не заменяет видимый h1. Оба часто делят одну тему; при этом остаются разными элементами с разными задачами.

Где он живёт в документе

Минимальная страница ясно показывает связь: DOCTYPE, html, head с title, затем body с видимым заголовком и содержимым.

Title в head

html
HTML Code 
<!DOCTYPE html>
<html>
<head>
<title>City Guide — Home</title>
</head>
<body>
<h1>Welcome to the City Guide</h1>
<p>The h1 is visible on the page; the title labels the browser tab.</p>
</body>
</html>

Чтение примера

  • <title>City Guide — Home</title> находится внутри head
  • Вкладка браузера должна показать эту метку (точный вид UI немного зависит от браузера)
  • <h1>Welcome to the City Guide</h1> — то, что читатели видят в теле страницы
  • Закрывающие теги и вложенность остаются обычным HTML — никакого особого синтаксиса title сверх самого элемента

title и h1 с первого взгляда

📊 title versus h1

Тема title h1
Место в документе Внутри head Внутри body
Пользователь видит как Вкладка / закладка / многие заголовки в выдаче Главный заголовок на странице
Роль в SEO Сильный сигнал метки документа Помогает оглавлению и релевантности
Сколько Один на документ Обычно один главный h1 (дальше есть h2+)
Заменяет другой? Нет Нет

Почему важен хороший title

Вкладки быстро заполняются, когда люди учатся с множеством открытых страниц. Точный title помогает вернуться к нужному уроку. Закладки наследуют тот же текст. В поисковой выдаче title часто становится кликабельным заголовком. Размытые названия вроде Document или Page 2 заставляют открывать вкладку только чтобы вспомнить, что это было.

Как писать ясный текст title

Стремитесь к фразе, которую человек узнает в густой полосе вкладок. Включайте тему и, когда полезно, контекст сайта или урока. Проверяйте, что текст можно прочитать вслух. Не набивайте в одну строку все синонимы. Предпочитайте HTML Lists — Practice, а не lists ul ol html tutorial best seo lists lists.

Ясный title против слабого

html
HTML Code 
<!-- Prefer -->
<title>HTML Lists — Practice</title>

<!-- Avoid -->
<title>Untitled</title>
<title>aaaaaaaa</title>
<title>lists lists lists seo seo seo</title>

Паттерны, которые работают для начинающих

  • Сначала тема, затем короткий контекст: Forms — Contact page
  • Курс или бренд после длинного тире, когда несколько сайтов делят похожие темы
  • Соответствуйте обещанию страницы: если урок про title — так и скажите
  • Обновляйте title, когда копируете файл как новый урок — не оставляйте вчерашнюю метку

Один элемент title на страницу

HTML-документы рассчитаны на один title в head. Несколько элементов title путают инструменты и не создают полезную многострочную вкладку. Если шаблон по ошибке выводит два title, исправьте шаблон, а не «добавляйте ещё метки».

Title и SEO без мифов

Ясный title помогает поисковым системам понять страницу и помогает людям кликнуть нужный результат. Это не магический чит-код ранжирования. Набивка ключевых слов, которая портит опыт вкладки, обычно вредит больше, чем помогает. Сначала пишите для человека, который сканирует вкладки и выдачу; польза для поиска следует за честной маркировкой.

Практика в редакторе

  1. Создайте минимальную HTML-страницу с head и body.
  2. Задайте <title> ясной фразой о вашей учебной странице.
  3. Добавьте h1, который делит тему, но использует другую формулировку.
  4. Откройте файл и прочитайте текст вкладки браузера.
  5. Измените только title, сохраните, обновите — убедитесь, что вкладка обновилась, а h1 остался прежним.
  6. Перепишите слабый title (Untitled) в конкретный и сравните, как ощущается вкладка.

Лёгкие ошибки

  • Поместить title в body вместо head
  • Оставить Untitled document или временное имя файла навсегда
  • Ожидать, что title отрисуется как крупный заголовок на странице (это h1)
  • Набивать title повторяющимися ключевыми словами, пока он не станет нечитаемым как метка вкладки
  • Копировать один и тот же title на много разных уроков, чтобы все вкладки выглядели одинаково
  • Использовать только эмодзи или только пунктуацию как весь title

Итог

  • title принадлежит head и подписывает весь документ
  • Пользователи встречают его на вкладках, в закладках и часто в поисковой выдаче
  • h1 — главный видимый заголовок в body — родственная тема, другая задача
  • Пишите один ясный, конкретный title на страницу
  • Предпочитайте человекочитаемые метки вместо Untitled или груд ключевых слов

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓
7
Вопросы
🎯
70%
Для Прохождения
♾️
∞
Время
🔄
∞
Попытки

📝 Инструкции

  • Внимательно прочитайте каждый вопрос
  • Выберите лучший ответ на каждый вопрос
  • Вы можете пересдавать тест столько раз, сколько захотите
  • Ваш прогресс будет показан вверху
Тема 1 из 1
Html Урок