Как оформлять статьи на сайте

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

Что оформление делает для читателя и для поиска

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

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

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

Элемент оформления	Задача, которую он решает
Заголовки H2–H3	Показывают карту материала, дают навигацию по разделам, размечают темы для поиска
Короткие абзацы	Снижают порог входа, дают глазу точки отдыха, удерживают внимание на длинной странице
Маркированные списки	Разбивают перечисления на отдельные пункты, которые видны при беглом просмотре
Нумерованные списки	Передают последовательность действий, по которой можно идти шаг за шагом
Таблицы	Сравнивают несколько объектов по нескольким признакам без пересказа в прозе
Изображения и схемы	Объясняют то, что тяжело описать словами, и разбивают длинные текстовые блоки
Выделение жирным	Помечает опорные мысли, за которые цепляется взгляд при сканировании
Оглавление с якорями	Даёт перейти к нужному разделу без прокрутки всей страницы
Блок частых вопросов	Закрывает побочные вопросы, ради которых человек ушёл бы обратно в поиск

Заголовки: один H1, иерархия и понятные формулировки

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

Дальше идут H2 — разделы. Внутри раздела при необходимости H3 — подразделы. Уровни не перепрыгивают: после H2 не может сразу идти H4 только потому, что он мельче выглядит. Размер шрифта задаётся стилями, а тег отвечает за уровень вложенности, не за внешний вид.

H4 и ниже в статье обычно не нужны. Если материал требует четвёртого уровня вложенности, чаще всего это признак того, что раздел пора выносить в отдельную статью, а здесь оставлять ссылку.

• Один H1 на страницу, дублировать его в тексте не нужно.
• Разделы — только H2, подразделы внутри них — H3.
• Пропуск уровня (H2, затем H4) ломает структуру документа.
• Заголовком нельзя выделять обычное предложение ради крупного шрифта.
• Внутри заголовка не должно быть ссылок, картинок и списков.

Есть простая проверка: выпишите все заголовки статьи подряд, без текста между ними, и прочитайте получившийся список. Если по нему понятно, о чём материал и что человек узнает, — заголовки рабочие. Если вместо смысла получилось «Введение», «Основная часть», «Немного теории», «Заключение», — читатель по такой карте ничего не найдёт, и поиск тоже.

Заголовок должен называть содержание раздела, а не его место в композиции. Вместо «Введение» — «Зачем вообще размечать статью». Вместо «Заключение» — «Что проверить перед публикацией». Вместо «Немного о картинках» — «Изображения: вес, размеры и alt». Формулировка длиной в пять-восемь слов почти всегда информативнее двухсловной.

Второй ориентир — заголовок как ответ на вопрос читателя. Люди приходят с формулировками вида «как сделать», «сколько стоит», «чем отличается», «что будет, если». Заголовок, повторяющий такую формулировку, одновременно и понятен человеку, и совпадает с тем, что набирают в строке поиска.

Первый экран: ответ в первых двух абзацах

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

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

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

Абзац в две-четыре строки

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

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

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

Смежный материал по теме — «Как актуализировать старые статьи на сайте чтобы они выходили в ТОП Яндекс».

Отдельно — про длину строки. На широком мониторе текст в контейнере на всю ширину экрана даёт строки по 150–200 знаков, и на такой строке глаз теряет начало следующей. Комфортная ширина колонки — 60–90 знаков, это примерно 700–800 пикселей при обычном размере шрифта.

Списки — тегами, а не дефисами в строку

Перечисление, набранное дефисами внутри абзаца, списком не является ни для читателя, ни для браузера, ни для поиска. Визуально это тот же сплошной текст, просто с дефисами. Список — это теги <ul> с пунктами <li> для перечислений и <ol>, когда порядок важен.

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

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

Таблицы и обязательная прокрутка на мобильных

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

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

Таблица собирается по-честному: <table>, шапка в <thead>, содержимое в <tbody>. Шапка нужна не только для внешнего вида — она сообщает, что первая строка описывает столбцы, а не является данными. Вёрстка таблиц пробелами или картинкой с таблицей внутри убивает и мобильную адаптацию, и возможность скопировать данные.

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

<div style="overflow-x:auto">
  <table>
    <thead><tr><th>Параметр</th><th>Значение</th></tr></thead>
    <tbody><tr><td>Ширина</td><td>100%</td></tr></tbody>
  </table>
</div>

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

Изображения: вес, размеры, alt и подписи

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

Второй сюжет — прыгающая вёрстка. Если у изображения не заданы ширина и высота, браузер не знает, сколько места под него зарезервировать, и рисует текст, а потом сдвигает его вниз, когда картинка догрузилась. Человек в этот момент уже начал читать или тянулся к ссылке — и попадает не туда. Атрибуты width и height в разметке решают проблему полностью.

Атрибут alt — текстовое описание того, что на картинке. Он читается вслух программами для незрячих, показывается вместо изображения, если оно не загрузилось, и участвует в поиске по картинкам. Описание должно быть осмысленным: «схема структуры заголовков в статье», а не «image-2024-final-1» и не набор ключевых слов через запятую.

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

Требование	Как надо	Что будет иначе
Формат	WebP для фото и сложных изображений, SVG для схем и иконок	Файл в 2–3 раза тяжелее без выигрыша в качестве
Ширина файла	Не больше ширины блока в макете, с запасом на экраны с высокой плотностью	Браузер грузит лишние мегабайты и сам сжимает картинку
Вес	Обычно до 150–200 КБ на изображение после сжатия	Долгая загрузка страницы, особенно на мобильном интернете
Размеры в коде	Атрибуты width и height у каждой картинки	Вёрстка прыгает при догрузке, промахи по ссылкам
Атрибут alt	Короткое описание содержимого, одна фраза	Картинка выпадает из поиска, недоступна для чтения с экрана
Отложенная загрузка	loading=»lazy» для всех картинок, кроме первой на экране	Страница грузит сразу все изображения, включая невидимые
Имя файла	Латиницей, по смыслу, через дефис	Кириллица в URL превращается в нечитаемый набор символов

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

Выделения: жирный, курсив и капслок

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

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

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

Если нужны детали, смотрите «Как правильно писать статьи для продвижения сайта».

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

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

Цитаты, врезки и блоки с кодом

Цитата оформляется тегом <blockquote>, а не кавычками с курсивом. Внутри цитаты — чужие слова: фрагмент документа, формулировка из справки сервиса, реплика эксперта. Обязательно указывают, откуда взято, — цитата без источника выглядит как выдумка.

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

Команды, куски кода, названия файлов и параметров оформляются тегом <code> внутри строки и <pre><code> для многострочных блоков. Причина не только в моноширинном шрифте: в обычном абзаце редактор может заменить прямые кавычки на «ёлочки», дефис на тире и сломать команду, которую читатель скопирует.

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

Оглавление с якорями и видео в статье

Материалу длиннее примерно 8–10 тысяч знаков нужно оглавление. Оно решает две задачи: показывает объём и охват темы, чтобы человек понял, что здесь есть его вопрос, и даёт перейти к нужному разделу одним нажатием вместо долгой прокрутки.

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

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

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

Блок частых вопросов в конце

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

Формат жёсткий: вопрос формулировкой читателя, ответ — три-пять предложений по существу. Не абзац рассуждений, не отсылка «смотрите выше», не реклама услуги. Пять-семь вопросов достаточно; двадцать превращают блок в отдельную статью, которую не читают.

Вопросы берут из реальных источников: что спрашивают клиенты, что пишут в комментариях, какие уточняющие формулировки есть в подсказках поиска. Придуманные удобные вопросы вроде «Почему стоит заказать у нас?» бесполезны и заметны сразу.

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

Подробнее об этом — в статье «Блог на коммерческом сайте».

Внутренние ссылки и ссылка на услугу

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

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

• Две-четыре осмысленные ссылки на статью работают лучше пятнадцати механических.
• Внешние ссылки открывают в новой вкладке, внутренние — в текущей.
• Ссылки на удалённые страницы нужно вычищать: битая ссылка тратит время читателя.
• Одна ссылка на коммерческую страницу в конце уместна; три по тексту выглядят навязчиво.

Типографика: тире, кавычки и невидимые символы

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

Что	Как правильно	Частая ошибка
Тире в предложении	Длинное тире с пробелами: слово — слово	Дефис вместо тире: слово — слово
Дефис	Внутри слова без пробелов: интернет-магазин	Пробелы вокруг дефиса в составных словах
Диапазоны	Короткое тире без пробелов: 10–15 минут	Дефис или длинное тире с пробелами
Кавычки	Ёлочки: «Название»; вложенные — „лапки“	Прямые кавычки из редактора кода
Числа с единицами	Неразрывный пробел: 200 КБ, 15 %	Единица измерения переносится на новую строку
Инициалы и сокращения	Неразрывный пробел: и т. д., 2024 г.	Разрыв строки посередине сокращения
Многоточие	Один символ многоточия	Три точки подряд, иногда четыре

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

Лечится это просто: перед публикацией текст прогоняют через очистку от невидимых символов, а не полагаются на глаз. Заодно вычищают двойные пробелы, пробелы перед запятыми и точками и пустые абзацы, которыми редакторы любят разделять блоки.

Мобильная проверка перед публикацией

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

Проверять надо на реальном узком экране, а не на уменьшенном окне браузера: некоторые вещи, вроде поведения фиксированных панелей и всплывающих окон, на десктопе не воспроизводятся. Минимальный набор проверок короткий.

1. Нет горизонтальной прокрутки страницы. Провести пальцем вбок — страница не должна сдвигаться. Виноваты обычно широкие таблицы, картинки без ограничения ширины, блоки кода и длинные ссылки без переносов.
2. Размер основного шрифта — от 16 пикселей. Мельче человек будет увеличивать страницу пальцами, а после увеличения появляется та самая горизонтальная прокрутка.
3. Межстрочный интервал в тексте — примерно 1,5. Плотно набранный текст на маленьком экране читать тяжело.
4. Кнопки и ссылки нажимаются пальцем: область нажатия не меньше 44 пикселей, соседние ссылки не слипаются в одну строку.
5. Таблицы прокручиваются внутри своей области, а не тянут страницу.
6. Картинки не вылезают за границы экрана и не заставляют прокручивать половину статьи, чтобы их пройти.
7. Всплывающие окна закрываются: крестик должен быть на экране, а не за его пределами.

Ошибки оформления и как их исправить

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

Ошибка	Чем мешает	Что сделать
Абзацы по 10–15 строк	Текст выглядит непроходимым, его закрывают не читая	Разбить по смыслу на блоки в 2–4 строки
Заголовки «Введение» и «Заключение»	Не сообщают содержания, не помогают навигации	Переписать в конкретные формулировки по теме раздела
Два H1 на странице	Дублируется главный заголовок, размывается структура	Убрать повтор заголовка из тела статьи
Перечисление дефисами в абзаце	Не читается как список, не размечается	Переверстать тегами ul или ol
Таблица без обёртки	Тянет горизонтальную прокрутку всей страницы на мобильных	Обернуть в блок с overflow-x: auto
Картинки по 2–4 МБ	Страница грузится долго, особенно с телефона	Сжать, перевести в WebP, уменьшить до ширины макета
Нет width и height у картинок	Вёрстка прыгает при загрузке	Проставить размеры в разметке
Пустой или мусорный alt	Картинка выпадает из поиска и недоступна незрячим	Написать короткое описание содержимого
Жирный в каждом абзаце	Выделения перестают работать, страница пестрит	Оставить одно-два выделения на экран текста
Вступление на 1500 знаков	Читатель уходит, не дойдя до ответа	Дать суть ответа в первых двух абзацах
Прямые кавычки и дефисы вместо тире	Текст выглядит неотредактированным	Прогнать через типографскую обработку
Невидимые символы из редактора	Ломают поиск по странице и совпадение фраз	Очистить текст перед публикацией
Видео с автозапуском и звуком	Раздражает, страницу закрывают сразу	Отключить автозапуск, подключать по нажатию
Нет оглавления в длинной статье	Нужный раздел приходится искать прокруткой	Добавить список якорных ссылок после лида

Чек-лист перед публикацией

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

Что проверяем	Критерий
Заголовок H1	Один на странице, не продублирован в тексте
Иерархия заголовков	H2 и H3 без пропусков уровней
Список заголовков подряд	По нему понятно содержание статьи
Первые два абзаца	Содержат ответ, а не подводку к нему
Длина абзацев	Нет блоков длиннее пяти строк
Перечисления	Оформлены тегами списков, не дефисами
Таблицы	Есть thead и tbody, работает прокрутка внутри блока
Изображения	Сжаты, в WebP, с размерами, alt и отложенной загрузкой
Выделения	Не чаще раза в три-четыре абзаца, капслока нет
Код и команды	В code и pre, кавычки не заменены на ёлочки
Оглавление	Есть для длинного материала, ссылки ведут в нужные разделы
Видео	Без автозапуска, подстраивается под ширину экрана
Блок вопросов	Пять-семь реальных вопросов с короткими ответами
Ссылки	Осмысленный текст, ничего не битого, есть ссылка на услугу
Типографика	Тире, ёлочки, неразрывные пробелы в числах
Невидимые символы	Текст очищен, двойных пробелов нет
Мобильный вид	Нет горизонтальной прокрутки, шрифт от 16 пикселей, кнопки нажимаются
Скорость	Страница открывается без заметной паузы на мобильном интернете

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

Материалы под собранный спрос с нормальным оформлением — это SEO-статьи, которые я пишу сам.

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

Сколько заголовков H2 должно быть в статье?
Жёсткой нормы нет, ориентир — раздел на каждые 800–1200 знаков текста. В материале на 12 тысяч знаков это примерно 12–16 разделов. Важнее не количество, а то, чтобы каждый H2 отвечал за отдельную мысль и не дублировал соседний. Если два раздела говорят об одном, их объединяют.

Нужно ли оглавление в короткой статье?
Нет. В материале на 4–5 тысяч знаков оглавление занимает первый экран и отодвигает ответ вниз, то есть вредит. Порог, с которого оно начинает окупаться, — примерно 8–10 тысяч знаков и от восьми разделов. Ниже этого достаточно внятных заголовков.

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

Что делать со старыми статьями, свёрстанными плохо?
Разбирать не все подряд, а начиная с тех, у которых есть трафик или позиции близко к первой странице. Там оформление даёт быструю отдачу. Порядок работ обычно такой: разбить полотна на абзацы, добавить заголовки разделов, переверстать перечисления списками, сжать картинки и проставить alt.

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

Отдельно о том, как защитить свои тексты от копирования:

4:23

Коротко

• Структура важнее украшений: один H1, H2 и H3 без пропусков, заголовки, по которым понятно содержание без текста.
• Ответ — в первых двух абзацах, абзацы по две-четыре строки, перечисления только тегами списков.
• Таблицы с thead и tbody прокручиваются внутри своего блока, картинки сжаты, с размерами, alt и отложенной загрузкой.
• Выделения редкие и по смыслу, капслока нет, код в code и pre, длинному материалу нужны оглавление и блок вопросов.
• Перед публикацией — типографика, очистка от невидимых символов и проверка на телефоне: прокрутки вбок нет, шрифт от 16 пикселей, кнопки нажимаются.