Чистый html код — влияние на SEO продвижение

Чистый html код влияет на SEO продвижение косвенно, и вокруг этого накопилось столько мифов, что владельцы сайтов регулярно платят за работы, которые не дают ничего. За «грязную» вёрстку никто не понижает, валидатор W3C фактором ранжирования не является, устаревшие теги сами по себе позиции не роняют. Но раздутая разметка замедляет отрисовку, ломает структуру документа и мешает роботу понять, о чём страница, — а вот это уже стоит позиций и денег.

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

Что действительно влияет

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

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

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

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

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

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

Что не влияет, хотя об этом постоянно говорят

Распространённое мнение	Как на самом деле
Нужно пройти валидатор W3C без ошибок	Не фактор ранжирования; в топе полно сайтов с сотнями замечаний
Инлайновые стили вредят продвижению	Не вредят напрямую, но мешают кешированию и увеличивают вес каждой страницы
Комментарии в коде утяжеляют страницу	Влияние ничтожно, если это не гигантские закомментированные блоки разметки
Табличная вёрстка ухудшает позиции	Сама по себе нет, но обычно идёт в комплекте с неработающей мобильной версией
Семантические теги HTML5 нужны везде	Полезны для доступности, на ранжирование влияют минимально
Минификация кода даёт прирост позиций	Даёт экономию веса, измеряемую процентами; позиции меняет только через скорость

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

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

Смежный материал по теме — «Влияние Rel=canonical на SEO продвижение».

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

Отношение кода к тексту: как посчитать и зачем

Показатель простой: сколько килобайт HTML приходится на страницу и какая доля из них — видимый текст. Считается без сервисов: сохраните страницу как HTML, посмотрите размер файла, затем скопируйте видимый текст в редактор и посмотрите число знаков.

• До 100 КБ разметки на страницу. Нормально для большинства сайтов, вопросов не вызывает.
• 100–250 КБ. Терпимо, если это интернет-магазин с большим каталогом на странице. Для статьи блога — повод посмотреть, что там лежит.
• Больше 250 КБ. Почти всегда встроенные стили, дублирующиеся скрипты и обёртки конструктора. Здесь чистка окупается.
• Сниппет

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

8:14

Что чистить в первую очередь

1. Встроенный CSS в шапке документа. На популярных темах это бывают десятки килобайт в каждой странице сайта. Вынос в отдельный файл сокращает вес и включает кеширование: на одном своём сайте я убрал таким образом около 66 КБ с каждой страницы, и это единственная правка, которая дала измеримое ускорение сразу.
2. Скрипты, блокирующие отрисовку. Всё, что не нужно для первого экрана, получает атрибут defer или загружается после события загрузки страницы. Счётчики, чаты, карты, слайдеры внизу страницы — всё туда.
3. Неиспользуемые плагины и виджеты. Каждый добавляет свои стили и скрипты на все страницы сайта, даже там, где не работает. На запущенном сайте это обычно главный источник лишнего веса.
4. Шрифты. Три семейства по четыре начертания — это десятки лишних килобайт и задержка отрисовки текста. Обычно хватает двух начертаний одного семейства.
5. Лишние обёртки конструктора. Если правите вёрстку вручную, уберите вложенность, которая ничего не делает. Если сайт на конструкторе, эту часть просто пропустите — она не стоит усилий.
6. Устаревшие теги. Оформление шрифтом и центрированием прямо в разметке не вредит, но выдаёт возраст шаблона и обычно идёт в комплекте с отсутствующей мобильной версией.

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

Структурные теги: где ломается разбор

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

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

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

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

Если нужны детали, смотрите «Влияние robots.txt на SEO продвижение».

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

Таблицы, собранные из блоков. Визуально таблица, в разметке — набор контейнеров. Сравнительные данные из такой конструкции не извлекаются.

Ссылки без текста. Иконки и стрелки, обёрнутые в ссылку без подписи. Для системы это ссылка с пустым анкором, а для человека с экранным диктором — тупик.

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

Ещё одна вещь, которую стоит проверить один раз и забыть, — коды ответа сервера. Страница, которой нет, должна отдавать 404, а не 200 с текстом «ничего не найдено»: во втором случае сайт плодит бесконечное число адресов с одинаковым содержанием. Перенесённая страница отдаёт 301 на новый адрес, а не отправляет человека на главную. Проверяется массово любым краулером за один проход и обычно вскрывает десятки проблем, о которых владелец не подозревал.

Микроразметка: единственный валидатор, который важен

Из всех проверок кода практический смысл имеет ровно одна — валидатор структурированных данных Яндекса. Он показывает, что система смогла извлечь из вашей разметки, и его замечания стоит исправлять в отличие от замечаний W3C.

• Организация. Название, адрес, телефон, часы работы. Ставится на всех страницах или хотя бы на контактах и главной.
• Товар. Название, цена, валюта, наличие, рейтинг. Даёт расширенный сниппет с ценой — самое заметное улучшение кликабельности из всех.
• Хлебные крошки. Показывают структуру раздела прямо в выдаче вместо длинного адреса.
• Вопросы и ответы. Размечается блок частых вопросов, при удаче попадает в выдачу раскрывающимся списком.
• Статья. Заголовок, автор, дата, изображение. Работает на материалы блога.
• Сниппет

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

Чем проверять

1. Исходный код страницы в браузере. Открыть и посмотреть глазами на объём шапки документа. Если там сотни строк стилей — вот вам первая задача.
2. PageSpeed Insights. Показывает блокирующие ресурсы, неиспользуемый CSS и то, когда фактически появляется содержимое первого экрана. Ориентироваться на список рекомендаций, а не на итоговый балл.
3. Валидатор микроразметки Яндекса. Единственный валидатор, ошибки которого нужно исправлять обязательно.
4. Вебмастер, раздел диагностики. Дубли, отсутствующие описания, страницы с ошибками — часть этого напрямую следствие проблем в разметке.
5. Просмотр страницы с отключёнными стилями. Быстрый способ увидеть реальную структуру документа: если без оформления страница читается как связный текст с заголовками и списками, со структурой всё в порядке.
6. Мобильный телефон, а не эмулятор. Открыть сайт на своём телефоне по мобильной сети и засечь, через сколько секунд стало видно предложение.

Порядок работ и разумные ориентиры

Что	Ориентир	Кто делает
Вес HTML страницы	до 100–150 КБ для обычных страниц	верстальщик
Вес страницы целиком со всеми ресурсами	до 1,5 МБ	верстальщик
Ответ сервера	до 0,5 секунды	хостинг, разработчик
Появление первого экрана на мобильном	до 2,5 секунды	верстальщик
Блокирующие скрипты в шапке	ноль, кроме критически необходимых	верстальщик
Ошибки в валидаторе микроразметки	ноль	разработчик

Цифры не догма, а точка отсчёта для постановки задачи. Формулировка «сделайте код чище» не выполняется никем; формулировка «вес страницы до 150 КБ, первый экран до 2,5 секунды на мобильном, ноль ошибок микроразметки» выполняется и проверяется.

Подробнее об этом — в статье «Влияние карты сайта на SEO продвижение».

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

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

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

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

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

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

Нужно ли убирать комментарии из кода? Не нужно. Исключение — закомментированные куски старой вёрстки на десятки килобайт, которые остались после переделок.

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

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

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

Коротко

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

Если непонятно, что именно в вашем случае тормозит сайт и мешает ему подниматься, приходите на SEO-консультацию: посмотрим код и скорость ваших страниц, отделим то, что реально мешает, от того, что не стоит внимания, и составим список задач для верстальщика с конкретными цифрами.