Чтобы сделать заголовок сайта, сначала определите, что именно нужно изменить: текст во вкладке браузера, главный заголовок страницы или крупную надпись в макете. Обычно первые два задаются элементами <title> и <h1>. Они могут быть похожими по смыслу, но отвечают за разные места страницы. Ниже есть безопасный порядок правки и проверка, которая не зависит от конкретного конструктора.
Title, H1 и крупный текст: чем они отличаются
Короткий ответ: title описывает весь HTML-документ и показывается на вкладке браузера, а h1 обозначает главный заголовок внутри содержимого. Любая крупная надпись, сделанная обычным блоком или картинкой, визуально похожа на заголовок, но не становится h1 автоматически.
<title>находится внутри<head>. По справке MDN, браузер использует его для названия вкладки или окна.<h1>находится в видимой части документа. Элементы отh1доh6задают уровни заголовков и структуру содержимого, это описано в справке MDN о заголовках.- Крупный текст в первом экране может быть абзацем, элементом
div, частью изображения или отдельным рекламным слоганом. Его роль нужно проверять в HTML, а не угадывать по размеру шрифта.
Поисковая система тоже не обязана показывать в выдаче точное содержимое title. Google сообщает, что формирует ссылку-заголовок автоматически и учитывает title, главный видимый заголовок, элементы вроде h1, og:title и другие сигналы. Если на странице несколько одинаково заметных заголовков или они противоречат друг другу, система может выбрать другой текст. Подробности есть в официальном руководстве Google.
Теория понятна, дальше нужен ваш сайт, а не пример из статьи. На бесплатном вебинаре страницу собирают с нуля и сразу публикуют в интернете.
Собрать свой сайтСформулируйте пару title и H1
Сначала напишите один прямой ответ на вопрос: что находится на этой странице. Из него сделайте пару. H1 оставьте естественным заголовком для человека, а в title при необходимости добавьте уточнение и название проекта. Смысл пары должен совпадать.
- Назовите тип страницы: услуга, товар, статья, контакты или главная.
- Добавьте предмет и важное отличие, которое действительно видно в содержимом.
- Уберите обещания, которых нет на странице, и список однотипных слов через запятую.
- Прочитайте
H1отдельно. Человек должен понять тему без текста вкладки. - Сравните
titleиH1. Они могут различаться словами, но не должны вести к разным ожиданиям.
Безопасный пример для страницы мастерской: title может быть «Ремонт кофемашин в Бишкеке | Мастерская Луна», а H1 может быть «Ремонт кофемашин в Бишкеке». Название мастерской помогает различать вкладки, но его не нужно механически повторять в каждом видимом заголовке.
Правило проверки: если после чтения title человек ожидает одну страницу, а после H1 видит другую тему, исправляйте смысл до публикации. Размер шрифта и повтор нужных слов эту ошибку не устраняют.
По теме: Как сделать зеркало сайта: копия, тест и SEO без дублей
Подготовьте изменение без риска для сайта
Не начинайте с редактирования первого найденного файла. Один заголовок может приходить из поля страницы, общего шаблона, SEO-настройки или кода приложения. Сначала определите источник и подготовьте возврат к прежнему значению. Порядок ролей, журнала и отката подробнее разобран в материале как управлять сайтом.
- Скопируйте прежние значения
titleиH1в заметку вместе с адресом страницы. - Проверьте, есть ли предпросмотр или черновик. Используйте его до изменения опубликованной версии.
- Уточните область действия поля. Настройка шаблона может изменить сразу все страницы одного типа.
- Если доступен журнал версий, убедитесь, что знаете, где вернуть предыдущую редакцию.
- Меняйте одну страницу и одну пару заголовков за раз, чтобы источник ошибки был понятен.
Один собранный сайт учит больше десяти инструкций, потому что ошибки видны сразу. На бесплатном эфире по вайбкодингу показывают, как описать идею словами и получить работающую страницу, а участникам достаётся гайд.
Собрать сайт с ИИИзмените заголовок в панели или HTML
В конструкторе или CMS найдите отдельно название страницы и настройки для браузера или SEO. Поле с подписью «заголовок страницы» может управлять H1, title или обоими значениями, поэтому сохраните черновик и проверьте результат. Если сайт состоит из HTML-файлов, структура выглядит так:
<head>
<title>Ремонт кофемашин в Бишкеке | Мастерская Луна</title>
</head>
<body>
<main>
<h1>Ремонт кофемашин в Бишкеке</h1>
</main>
</body>У страницы должен быть понятный собственный смысл. Не путайте его с именем бренда и доменом: выбор имени, адреса и общего названия разобран в статье как сделать название сайта. После изменения откройте предпросмотр, затем опубликуйте только подготовленную страницу.
По теме: Как сделать сайт как Twitch: плеер, чат и стримы в 2026
Проверьте результат в браузере и HTML
Проверка нужна в трёх местах, потому что красивый первый экран ещё не доказывает правильность HTML. Выполните её в обычном и узком окне браузера.
- Откройте опубликованный адрес в новой вкладке и проверьте текст на самой вкладке. Это быстрый сигнал для
title. - Найдите главный видимый заголовок. Он не должен обрезаться, перекрываться меню или исчезать на мобильной ширине.
- Откройте инструменты разработчика, выберите главный текст и посмотрите имя элемента. Нужный заголовок должен быть
h1, а не только стилизованнымdiv. - В консоли браузера выполните
document.titleи сравните ответ с подготовленным значением. - Откройте HTML-код страницы и найдите
<title>и<h1>. Убедитесь, что в документ не попали старое и новое значения одновременно. - Перейдите по основным ссылкам и отправьте тестовую форму без реальной оплаты. Изменение шаблона не должно ломать соседние элементы.
Для согласования внешнего вида можно сохранить снимок всей страницы. В инструкции как сделать полный скрин сайта есть способы для Firefox, Chrome и повторяемой проверки. Скрин дополняет просмотр HTML, но не заменяет его.
Диагностика по симптому
Если результат отличается от ожидаемого, не переписывайте заголовок повторно наугад. Сопоставьте симптом с источником.
- На вкладке старый текст, а H1 новый: проверьте отдельное поле
title, общий шаблон и кэш опубликованной страницы. - На странице два H1: найдите заголовок в шаблоне и в содержимом. Оставьте один очевидный главный заголовок, остальные уровни выстройте ниже.
- В панели всё правильно, а в HTML другое: возможно, опубликован не тот черновик или заголовок подставляет шаблон приложения.
- На компьютере всё помещается, а на телефоне заголовок обрезан: проверьте перенос строк, фиксированную высоту блока и длинные слова.
- Google показывает другую формулировку: сначала устраните противоречия между
title, H1 и заметными надписями. После этого дождитесь повторного обхода страницы, мгновенная замена не гарантируется.
По теме: Как сделать сайт прозрачным: фон и карточки в 2026
Когда этот способ не подходит
Эта инструкция подходит для обычной страницы, у которой можно изменить HTML или поля CMS. Она не решает смену домена, логотипа и названия компании. Для каталога с сотнями карточек ручная правка каждой страницы тоже не подходит: сначала исправляют шаблон и правила подстановки, затем проверяют несколько разных карточек.
- Если приложение меняет содержимое без перезагрузки, проверьте обновление
document.titleдля каждого состояния. - Если у вас нет права на публикацию, подготовьте точные старое и новое значения и передайте владельцу сайта.
- Если крупный заголовок нарисован внутри изображения, добавьте обычный текстовый H1 в структуру страницы, а не пытайтесь распознать картинку средствами поиска.
Частые вопросы
Title и H1 должны совпадать дословно?
Нет. Они должны описывать одну страницу без противоречий. В title можно добавить краткое уточнение или название проекта, а H1 оставить более естественным для чтения.
Можно сделать заголовок просто крупным текстом?
Визуально можно, но структура документа от этого не меняется. Проверьте элемент в инструментах разработчика и задайте главному заголовку правильный уровень.
Почему новое название не появилось на вкладке?
Чаще всего изменено поле H1, а не title, либо браузер показывает сохранённую версию. Сравните document.title, HTML и настройки шаблона.
Нужно ли менять адрес страницы вместе с заголовком?
Не обязательно. Если адрес уже опубликован и соответствует теме, отдельная смена заголовка не требует нового URL. Изменение адреса планируйте отдельно с перенаправлением и проверкой ссылок.
Хотите собрать страницу целиком, а не остановиться на одном заголовке? На воркшопе вы пройдёте путь от структуры и текста до опубликованного сайта с проверкой результата.
Записаться на воркшоп