html теги для текста

HTML теги для текста решают, увидит ли поисковая система на странице структуру или сплошной поток символов, — и именно здесь совершается ошибка, которая ничего не стоит и много забирает. Подзаголовок оформляют жирным вместо <h2>, перечисление набирают дефисами внутри абзаца, отступы делают пустыми абзацами. На экране всё выглядит одинаково: человек видит заголовок, видит список, видит воздух между блоками. В коде разницы между структурированной страницей и однородной массой текста нет никакой — и в выдаче эта разница стоит расширенного сниппета, быстрых ссылок к разделам и правильного разбора содержания.

В SEO я с 2005 года и до сих пор нахожу такие страницы на сайтах, которыми занимаются профессиональные подрядчики. Правится это за час, отдача накопительная, а вложений не требует вообще — редкое сочетание. Ниже разберу теги, которые реально нужны для текста, правила их применения и типовые ошибки, включая те, что сидят в шаблоне и от автора материалов не зависят.

Заголовки: иерархия важнее размера шрифта

Заголовки — единственный тип разметки, который задаёт странице скелет. По ним строится оглавление, по ним формируются быстрые ссылки в выдаче, по ним система понимает, где начинается новая мысль.

Тег	Назначение	Правило применения
<h1>	Название страницы	Ровно один на странице, содержит основной запрос
<h2>	Разделы материала	Через каждые два-четыре абзаца, по смыслу
<h3>	Подразделы внутри раздела	Только там, где раздел действительно делится
<h4>–<h6>	Глубокая вложенность	Нужны редко: документация, справочники, инструкции

Два правила, которые нарушаются чаще остальных. Первое: иерархия не должна пропускать уровни — после <h2> идёт <h3>, а не <h4>. Пропуск не приводит к катастрофе, но ломает разбор структуры и обычно означает, что уровень выбран по внешнему виду. Второе: заголовок не выбирается по размеру шрифта. Если нужный вам заголовок второго уровня выглядит слишком крупно, размер меняется стилями, а не понижением уровня до <h4>.

Отдельно про содержание заголовков. Подзаголовок «Наши преимущества» не сообщает ни человеку, ни системе ничего. Подзаголовок «Что входит в стоимость монтажа» сообщает всё. По подзаголовкам страницу читают за десять секунд и решают, стоит ли углубляться, — поэтому информативность здесь важнее лаконичности.

Абзацы и переносы строк

Текст оформляется тегом <p> — по абзацу на каждую законченную мысль. Тег переноса <br> ставится только там, где нужна именно новая строка внутри одного смыслового блока: почтовый адрес, реквизиты, строки стихотворения. Для расстояния между абзацами он не предназначен.

Типовая картина на сайтах, куда текст переносили из текстового редактора: один гигантский абзац с десятком переносов внутри. Визуально он разбит на части, структурно это единый блок. То же относится к пустым абзацам ради отступа — наследие работы в редакторах, где пробелы и пустые строки были единственным способом управлять расстояниями. В вёрстке отступы задаются стилями.

Про длину. Три-пять строк на экране — рабочий ориентир для абзаца. На телефоне абзац из десяти строк занимает весь экран целиком, глазу не за что зацепиться, и такие блоки пролистывают не читая. Предложение до двадцати-двадцати пяти слов: то, что приходится перечитывать, чтобы понять, разбивается на два.

Списки и таблицы: где они выигрывают

Списки и таблицы — не украшение, а способ передать структуру данных. Разница между ними простая: список перечисляет однородные элементы, таблица сопоставляет их по нескольким признакам.

• <ul> — список без порядка, пункты равнозначны и переставляются без потери смысла.
• <ol> — нумерованный список, когда важна последовательность шагов и порядок нельзя менять.
• <li> — пункт внутри любого из двух.
• <table> — таблица с обязательными частями: <thead> с заголовками столбцов через <th> и <tbody> с данными через <td>.

Правило отбора формулируется так: три и больше однородных элемента подряд — кандидат на список. Два признака у каждого элемента — кандидат на таблицу. Перечисление через дефисы внутри абзаца не даёт ни человеку удобства сканирования, ни системе информации о том, что перед ней перечень.

Если нужны детали, смотрите «HTML теги для сайта».

Как оформлено	Что видит человек	Что видит поисковая система
Список тегами <ul> и <li>	Перечень, легко сканируется	Структуру перечня, годится для быстрого ответа
Перечисление дефисами в абзаце	Почти то же самое	Обычный абзац, перечня нет
Таблица с <thead> и <th>	Сравнение по столбцам	Связь значений с признаками, годится в сниппет
Таблица без заголовков столбцов	Похоже на таблицу	Набор ячеек без смысловых связей
Таблица для раскладки макета	Ровные колонки	Данные, которых на самом деле нет

Последняя строка про наследие старой вёрстки. Таблица нужна для сравнения данных, а не для расположения блоков на странице — для раскладки существуют стили. Старые страницы, свёрстанные таблицами, обычно ещё и разъезжаются на телефоне.

Выделения, цитаты и вставки кода

Помогу с продвижением: заказать продвижение сайта — вывожу сайты в топ Яндекса белыми методами.

Для выделения в тексте есть две пары тегов, и различие между ними смысловое, а не визуальное. <strong> означает важность, <em> — интонационный акцент. Теги <b> и <i> дают то же начертание без смысловой нагрузки — они остались для случаев, когда начертание нужно, а особой важности нет.

Если интересно направление с сайтами — базу даю в своём курсе:

8:14

Норма — два-четыре выделения на страницу, и только на действительно опорных мыслях. Когда жирным помечены все вхождения ключевого слова, это читается как переоптимизация, а не как оформление, и вдобавок обесценивает сам приём: если выделено всё, не выделено ничего.

• <blockquote> — развёрнутая цитата отдельным блоком, обычно с отступом.
• <q> — короткая цитата внутри строки.
• <code> — фрагмент кода или команда внутри текста.
• <pre> — блок с сохранением исходного форматирования: отступов, переносов, пробелов.

Частая ошибка с цитатами: их оформляют отступом через стили или курсивом, не используя тег. Внешне похоже, структурно цитаты на странице нет — а это как раз тот элемент, который системе полезно отличать от вашего собственного текста.

Ссылки внутри текста

Ссылка ставится тегом <a> с атрибутом href. Единственное содержательное требование к ней — анкор должен описывать, куда она ведёт. Формулировка «разбирал перелинковку отдельно» работает и для человека, и для системы. Слова «здесь», «тут», «подробнее», «по ссылке» не сообщают ничего: человек не знает, стоит ли нажимать, система не получает контекста о целевой странице.

Атрибуты, которые действительно нужны:

Подробнее об этом — в статье «Теги nofollow и noindex».

• rel=»nofollow» — на ссылки, за качество которых вы не ручаетесь: комментарии, пользовательские профили, внешние источники сомнительного происхождения.
• rel=»sponsored» — на рекламные и оплаченные размещения. Отдельный атрибут честнее, чем маскировка платной ссылки под обычную.
• target=»_blank» — только для внешних ссылок, и обязательно в паре с rel=»noopener». Открывать внутренние ссылки в новой вкладке не нужно: человек сам решает, как ему удобнее.

Про внутренние ссылки стоит сказать отдельно, потому что это самый недооценённый ресурс на большинстве сайтов. Ссылка из текста статьи на смежный материал по осмысленному анкору помогает индексации, перераспределяет вес и удерживает человека на сайте. При этом на типовом сайте половина страниц не имеет ни одной входящей внутренней ссылки, кроме как из меню и карты сайта.

Сводная таблица тегов и типовых ошибок

Всё, что разобрано выше, в одной сетке — её удобно держать под рукой при проверке чужого текста или шаблона.

Задача	Тег	Частая ошибка
Название страницы	<h1>	Несколько на странице из-за шаблона
Раздел материала	<h2>	Оформлен жирным текстом вместо тега
Подраздел	<h3>	Пропуск уровня: сразу <h4> после <h2>
Абзац	<p>	Один абзац с десятком <br> внутри
Перечисление	<ul>, <li>	Дефисы внутри абзаца
Последовательность шагов	<ol>, <li>	Ручная нумерация цифрами в тексте
Сравнение данных	<table>	Использование для раскладки макета
Смысловое выделение	<strong>	Выделены все вхождения ключевого слова
Ссылка	<a>	Анкор «здесь» или «подробнее»
Цитата	<blockquote>	Оформление отступом и курсивом без тега
Изображение	<img>	Отсутствие alt и размеров

Отдельная строка, которой в таблице нет, потому что она про то, чего вообще не должно быть: заголовок картинкой. Красиво оформленный баннер с текстом внутри — распространённое решение на главных страницах. Для системы этого текста не существует: изображение не читается, заголовка на странице нет, и страница остаётся без названия раздела.

Оформление и попадание в расширенные сниппеты

Разметка текста напрямую определяет, как выглядит ваша строка в выдаче, — и это самый наглядный аргумент в пользу правильных тегов.

• Списки становятся источником быстрых ответов. Система берёт пункты и показывает их прямо в выдаче над результатами.
• Таблицы попадают в сниппет по запросам на сравнение. «Чем отличается А от Б» — типовой случай, когда показывается фрагмент таблицы.
• Подзаголовки формируют быстрые ссылки к разделам. Человек попадает не просто на страницу, а сразу в нужное место.
• Блок вопросов и ответов с разметкой FAQPage разворачивается прямо под ссылкой и занимает в выдаче больше места.
• Заголовок и первый абзац чаще всего становятся источником текста самого сниппета.

Ни одно из перечисленного не сработает, если перечисление сделано дефисами, а подзаголовок — жирной строкой. Оформление здесь не эстетика и не педантизм, а условие попадания в расширенную выдачу. Разница в занимаемом месте между обычной строкой и строкой с быстрыми ссылками или списком — это разница в количестве переходов при одной и той же позиции.

Мобильное оформление: что учитывать отдельно

Если нужна помощь по теме — обучение SEO-продвижению.

Большая часть посетителей читает с телефона, и часть правил там ужесточается.

Параметр	Рабочее значение	Что происходит при нарушении
Основной размер шрифта	От 16 пикселей	Текст читается только с увеличением
Межстрочный интервал	Около 1,5	Строки сливаются на маленьком экране
Длина абзаца	3–5 строк на экране	Абзац занимает экран целиком, его пролистывают
Широкие таблицы	Прокрутка внутри своего блока	Страница разъезжается по горизонтали
Длинные слова и адреса	Разрешённый перенос	Вылезают за границу экрана, ломают вёрстку
Контраст текста	Тёмный на светлом без полутонов	Не читается при дневном свете на улице

Строка про таблицы — самая частая техническая беда. Таблица шире экрана без обёртки с горизонтальной прокруткой растягивает всю страницу, и человек листает её вбок, пытаясь вернуть текст на место. Обёртка ставится один раз в шаблоне и лечит все таблицы сайта разом.

Тему разбирал отдельно: «Мета теги для продвижения сайта».

Что проверить в шаблоне и на своих страницах

Часть ошибок оформления заложена в теме сайта, и автор материалов на них не влияет никак. Проверить шаблон стоит один раз — исправление действует сразу на все страницы, и по трудозатратам это самая выгодная правка из всех.

1. Логотип не обёрнут в <h1>. Иначе на каждой странице сайта окажется два заголовка первого уровня.
2. Название статьи в ленте выводится тегом <h2>. Если <h1>, то на странице категории будет десяток заголовков первого уровня.
3. В шапке есть метатег viewport. Без него мобильная версия не работает как мобильная.
4. У изображений есть alt, width и height. Размеры избавляют от сдвига вёрстки при загрузке, alt даёт содержание.
5. Хлебные крошки выводятся и размечены. Они попадают в выдачу вместо длинного адреса страницы.
6. Таблицы обёрнуты в блок с прокруткой. Проверять на реальной странице с широкой таблицей, а не в теории.

Дальше проверка своих страниц. Откройте исходный код и найдите <h1 — совпадение должно быть ровно одно. Посмотрите, оформлены ли подзаголовки тегами, а не жирным начертанием. Найдите перечисления, набранные дефисами внутри абзацев, и переделайте в списки. Пробегитесь по анкорам внутренних ссылок в поисках слов «здесь» и «подробнее». Откройте страницу на телефоне и посмотрите, не уезжают ли таблицы. Шесть действий занимают минут двадцать на страницу и закрывают большую часть типовых проблем.

Есть и наблюдение, которое объясняет, зачем всё это нужно помимо сниппетов. По записям визитов видно: страницы с плотной вёрсткой люди пролистывают быстрее и уходят раньше — не потому, что содержание хуже, а потому, что взгляду не за что зацепиться. Короткие абзацы с воздухом между ними, информативные подзаголовки, списки вместо перечислений, таблицы там, где сравниваются данные, оглавление в начале длинного материала — всё это увеличивает время до ухода, а значит, работает и на поведенческие сигналы.

Частые вопросы

Влияет ли жирный шрифт на позиции? Незначительно. Разумное выделение важных мыслей помогает человеку и слегка помогает разбору текста. Злоупотребление вредит заметнее, чем помогает аккуратное использование: страница с выделенными ключами читается как попытка манипуляции.

Сколько подзаголовков нужно на странице? По смыслу: каждые два-четыре абзаца. Формальной нормы нет, ограничений сверху тоже. На большом материале обычно получается от пяти до двенадцати разделов второго уровня, и это нормально.

Можно ли использовать <h3> без <h2>? Технически страница отобразится, но иерархия окажется нарушенной. Правильно — по порядку. Если хочется меньший размер шрифта, он задаётся стилями, а не понижением уровня.

Нужен ли alt для декоративных изображений? Атрибут нужен, значение может быть пустым. Тогда программы чтения с экрана пропустят картинку, а не станут зачитывать имя файла. Для содержательных изображений alt описывает, что изображено.

Что делать со старыми страницами, свёрстанными таблицами? Если они дают трафик — переверстать: там почти всегда ещё и мобильные проблемы. Если не дают, сначала решить, нужны ли они вообще. Переверстка бесполезной страницы — трата времени, её честнее объединить с другой или убрать.

Нужно ли размечать каждую мелочь семантическими тегами? Нет. Достаточно правильных заголовков, абзацев, списков, таблиц и ссылок. Погоня за полной семантической разметкой отнимает время, которое лучше потратить на содержание страницы.

Коротко

• Подзаголовки оформляются только тегами заголовков, иерархия идёт без пропуска уровней, а уровень выбирается по смыслу, а не по размеру шрифта.
• Списки и таблицы читаются лучше сплошного текста и дают шанс на расширенный сниппет; перечисление дефисами в абзаце такого шанса не даёт вообще.
• Два-четыре смысловых выделения на страницу; жирный на каждом вхождении ключа читается как переоптимизация.
• Анкор ссылки описывает цель перехода — «здесь» и «подробнее» не сообщают ничего ни человеку, ни системе.
• Заголовок картинкой, пустые абзацы вместо отступов и десяток переносов внутри одного абзаца лишают страницу структуры при нормальном внешнем виде.
• Часть ошибок сидит в шаблоне: лишний заголовок первого уровня, отсутствие viewport, таблицы без прокрутки — одна правка чинит сразу весь сайт.

Если не уверены, что оформление ваших страниц не мешает им попадать в расширенную выдачу, и не знаете, какие ошибки заложены в шаблоне сайта, приходите на SEO-консультацию — разберём код страниц вместе и составим список правок с приоритетом.