Разметка текста кажется мелочью, пока не начинаешь разбирать страницы, которые не растут. Открываешь исходный код — и видишь абзацы, собранные из переносов строк, заголовки, сделанные жирным шрифтом покрупнее, списки из дефисов в начале строк. Для человека выглядит нормально. Для программы, которая разбирает страницу, это сплошное полотно без структуры. Я в SEO с 2005 года и до сих пор нахожу такие тексты на сайтах, где всё остальное сделано аккуратно.
Зачем вообще думать о тегах
Любая программа, которая работает с вашей страницей, — поисковый робот, программа чтения с экрана, режим чтения в браузере, сервис, собирающий цитату для ответа, — опирается на разметку. Она не видит шрифт и кегль, она видит теги. Если абзац оформлен тегом абзаца, а важный термин — тегом значимости, программа понимает: вот единица текста, вот акцент. Если то же самое достигнуто отступами и цветом, для неё это просто символы подряд.
Второй эффект — читаемость. Правильная разметка почти автоматически даёт нормальную типографику: отступы между абзацами, маркеры списков, отбивку цитат. Текст становится удобнее сканировать глазами, а это уже влияет на то, дочитает человек страницу или уйдёт.
Визуальное выделение против смыслового
Это ключевое различие, которое стоит понять один раз. В HTML есть пары тегов, дающих одинаковый вид, но разный смысл.
| Тег | Как выглядит | Что означает | Когда использовать |
|---|---|---|---|
<strong> |
Полужирный | Высокая важность содержимого | Предупреждения, ключевые условия, главный вывод абзаца |
<b> |
Полужирный | Просто визуальное выделение без смысла | Название товара в перечислении, ключевое слово в оглавлении |
<em> |
Курсив | Смысловое ударение, меняющее прочтение фразы | Акцент на слове, от которого зависит смысл предложения |
<i> |
Курсив | Другой характер текста без ударения | Термин на латыни, название судна, иноязычное вкрапление |
Практический совет: в девяти случаях из десяти в обычной статье нужен <strong>, а не <b>. Различие не даёт мгновенного роста позиций, но влияет на то, как страницу озвучивает программа чтения и как алгоритм определяет опорные точки текста. Заодно это дисциплинирует автора: если выделять только действительно важное, выделений в тексте становится в разы меньше — и они начинают работать.
Основные теги оформления текста
- Абзац —
<p>. Базовая единица текста. Не переносы строк, не пустые блоки, а именно абзац. - Заголовки — от
<h1>до<h6>. Задают иерархию:<h1>один на страницу, дальше<h2>на разделы,<h3>на подразделы. Пропускать уровни не нужно. - Списки —
<ul>и<ol>с пунктами<li>. - Цитата —
<blockquote>для чужого текста блоком,<q>для короткой цитаты внутри строки. - Технический фрагмент —
<code>, а для многострочного блока он оборачивается в<pre>. - Таблица —
<table>с обязательными<thead>,<tbody>и ячейками заголовков<th>. - Расшифровка сокращения —
<abbr>с атрибутом полного названия. - Время и дата —
<time>с машинным форматом в атрибуте.
Этого набора хватает для девяноста процентов текстов. Всё остальное — оформление, которое делается стилями, а не тегами.
Списки: маркированный или нумерованный
Правило простое: если порядок пунктов важен — нумерованный список, если нет — маркированный. Инструкция «как настроить» — нумерованный, перечень преимуществ — маркированный. Ошибка, которую вижу постоянно: нумерованный список для перечисления характеристик товара. Читатель подсознательно воспринимает нумерацию как последовательность и ищет в ней логику, которой нет.
Второй момент — не превращать в список то, что списком не является. Три полноценных предложения с придаточными, поставленные в столбик с маркерами, читаются хуже обычного абзаца. Список хорош для коротких однородных пунктов.
Цитаты и вставки чужого текста
Цитата — это чужие слова. Не ваш вывод, набранный курсивом для красоты, а именно фрагмент из другого источника. Тег <blockquote> сообщает об этом явно, и у него есть атрибут для указания источника. Когда цитату используют как декоративную врезку с собственным текстом, разметка начинает врать: программа считает, что абзац принадлежит не вам.
Для выноса собственной мысли в отдельный блок правильнее использовать обычный абзац с оформлением через стили. Разница невидима глазу, но принципиальна для разбора страницы — а он всё чаще определяет, попадёт ли ваш фрагмент в готовый ответ поисковой системы.
Тег code и технические фрагменты
Тег <code> нужен для имён файлов, команд, названий параметров, фрагментов разметки, значений настроек. Он даёт моноширинный шрифт и, что важнее, сообщает: это не проза, это фрагмент кода, его нельзя переносить и переформулировать. Внутри такого тега специальные символы обязательно экранируются, иначе браузер попытается их выполнить как разметку.
| Что размечаем | Правильно | Частая ошибка |
|---|---|---|
| Название файла | Тег кода | Курсив или кавычки |
| Многострочный блок команд | Блок с сохранением форматирования плюс тег кода внутри | Обычные абзацы с переносами, которые схлопываются |
| Значение параметра в тексте | Тег кода | Полужирный шрифт |
| Цитата из документации | Блочная цитата | Блок кода |
Как теги влияют на разбор страницы и читаемость
Прямой зависимости «поставил тег — вырос в выдаче» нет, и обещать её было бы нечестно. Влияние работает иначе, через три механизма. Первый: структурированный текст лучше разбирается на смысловые блоки, и у страницы больше шансов попасть в блок быстрого ответа или расширенный сниппет — особенно это касается таблиц и списков. Второй: разметка задаёт визуальную иерархию, человек быстрее находит нужное, дольше остаётся, реже возвращается в выдачу. Третий: доступность. Пользователи программ чтения с экрана перемещаются по странице по заголовкам и спискам; без разметки страница для них — сплошной поток.
| Элемент разметки | Что даёт машине | Что даёт человеку |
|---|---|---|
| Заголовки по уровням | Карту разделов и тему каждого блока | Возможность найти нужный раздел за секунды |
| Таблица с шапкой | Готовую пару «параметр — значение» | Сравнение без перечитывания абзацев |
| Нумерованный список | Признак пошаговой инструкции | Понятную последовательность действий |
| Тег важности | Опорные точки текста | Акцент на условии, которое нельзя пропустить |
| Блочная цитата | Указание, что фрагмент не авторский | Отделение чужого мнения от вашего |
Когда мы готовим SEO-статьи для проектов, разметка — обязательная часть работы наравне с текстом: заголовки по уровням, таблицы вместо перечислений через тире, выделения только по делу. Разница в поведении читателей на размеченном и неразмеченном материале видна в аналитике по глубине просмотра.
Практический разбор: чистка текста после редактора
Самый частый источник мусорной разметки — копирование из текстового редактора в визуальный редактор сайта. Вставляется не текст, а его оформление: инлайновые стили, пустые абзацы, теги переносов, лишние обёртки. Внешне статья выглядит прилично, а в исходном коде каша.
Порядок чистки, который я использую. Сначала вставляю текст как обычный неформатированный, теряя всё оформление. Затем расставляю разметку заново: абзацы, заголовки нужных уровней, списки, таблицы. Отдельно проверяю заголовки — не должно быть двух первого уровня и не должно быть пропусков в иерархии. Дальше просматриваю выделения: если полужирного в статье больше десяти процентов текста, убираю лишнее. И наконец смотрю исходный код глазами: пустых абзацев и одиночных тегов переноса быть не должно. Такая же проверка входит в аудит сайта, когда причина слабых позиций неочевидна.
Чего делать не стоит
- Делать заголовки полужирным текстом. Визуально похоже, структурно — ничего. Заголовок должен быть тегом заголовка.
- Использовать несколько заголовков первого уровня. Иерархия ломается, главная тема страницы размывается.
- Выделять полужирным ключевые фразы ради поиска. Приём из нулевых, сейчас работает против сайта.
- Верстать абзацы тегами переноса строки. Текст превращается в один длинный блок без границ.
- Оформлять таблицы списками, а списки таблицами. Каждая структура должна соответствовать содержимому.
- Оставлять пустые абзацы для отступов. Отступы — работа стилей, а не разметки.
Частые вопросы
Есть ли разница для поиска между полужирным и тегом важности? Прямого влияния на позиции нет, но смысловой тег корректнее описывает содержимое и лучше обрабатывается вспомогательными технологиями. Затраты на правильный выбор нулевые, так что смысла экономить нет.
Сколько выделений допустимо в статье? Ориентир — не больше нескольких на экран. Если выделено каждое второе предложение, читатель перестаёт замечать акценты, и выделение теряет функцию.
Можно ли ставить заголовки подряд без текста между ними? Технически можно, структурно это признак проблемы: раздел без содержимого либо не нужен, либо не дописан.
Нужно ли размечать текст вручную, если есть визуальный редактор? Редактор справляется с типовыми задачами, но результат стоит проверять в режиме исходного кода. Особенно после вставки из внешних источников.
С чего начать, если разметку никогда не изучал? С десятка тегов из этой статьи — их достаточно для любого текста на сайте. Дальше вопрос практики: на любом курсе по обучению SEO разметка разбирается в первых занятиях, потому что без неё остальные работы теряют часть эффекта.
Чеклист по разметке текста
- Каждый абзац обёрнут тегом абзаца, переносы строк не используются вместо абзацев.
- На странице ровно один заголовок первого уровня.
- Уровни заголовков идут по порядку, без пропусков.
- Перечисления оформлены списками, порядок пунктов соответствует типу списка.
- Смысловые выделения сделаны тегом важности, декоративные — визуальным тегом.
- Полужирного в тексте немного, выделены только опорные места.
- Чужой текст оформлен блочной цитатой, свои мысли — нет.
- Технические фрагменты обёрнуты тегом кода, спецсимволы экранированы.
- Таблицы имеют строку заголовков и корректное разделение на шапку и тело.
- В исходном коде нет пустых абзацев, лишних обёрток и остатков стилей из редактора.
Разметка — это не украшение и не формальность, а способ объяснить машине то, что человеку понятно из вида страницы. Она стоит нескольких минут работы на текст и остаётся с сайтом навсегда.
Если нужно SEO-специалист Анатолий Кузнецов — помогу вывести сайт в топ Яндекса и удержать позиции.
Увеличьте позиции и продажи вашего сайта
Профессиональное SEO-продвижение с гарантией результата. Выберите подходящую услугу:
Остались вопросы по продвижению?
Меня зовут Анатолий Кузнецов, я SEO-оптимизатор с 20-летним стажем. Разберу ваш сайт, отвечу на вопросы и подскажу, что улучшить для роста позиций в Яндексе и Google.
Связаться со мной →
Старт 
Стандарт 
Премиум 
