Открывали когда-нибудь исходник старой страницы и видели <font color="red">, <center> или таблицу, растянутую на весь экран? Эти теги ещё отображаются в браузере, но для поисковиков и пользователей это технический долг. Рассказываю, какие HTML-теги устарели, почему они мешают продвижению и как постепенно перевести сайт на семантическую вёрстку безболезненно. Заодно разберём, где прячутся устаревшие теги и как не сломать рабочую страницу во время чистки.
Какие HTML-теги устарели и мешают SEO
Многие элементы всё ещё работают: браузер их рисует, и на первый взгляд «ничего критичного». Но с точки зрения современного HTML это устаревшие (deprecated) теги и атрибуты. Они не ломают страницу, но создают три проблемы, которые прямо или косвенно бьют по SEO.
Во-первых, хуже доступность. Экранные читалки плохо понимают <font>, <center> или <marquee> — пользователь скринридера видит «разорванное» содержимое. А доступность сейчас часть UX-сигналов и Core Web Vitals.
Во-вторых, сложнее поддержка и единый дизайн. Презентационная логика размазана по сотням строк inline-стилей: чтобы сменить цвет бренда или отступ, приходится лазить в код каждой страницы.
Во-третьих, тяжелее вёрстка. Таблицы для макета, лишние обвёртки и старые атрибуты увеличивают размер и усложняют адаптив.
Отдельно про «штраф». Прямого штрафа за <font> в поиске обычно нет: Google не демотирует страницу только потому, что там устаревший тег. Но совокупность эффектов — плохая доступность, тяжёлый адаптив, особенно на мобильных — влияет на ранжирование опосредованно. Об этом напишу ниже.
К устаревшим относятся: <font> (color, size, face), <center>, <blink>, <marquee>, <big>, презентационные атрибуты align, valign, bgcolor, nowrap, табличная вёрстка всей страницы, а также <frameset> и <frame>. Отдельно про <b> и <i> — читайте в FAQ.
Табличные верстки, font, center, blink и другие
Самые частые находки на старых сайтах — это то, что раньше называли «верстка таблицами» и инлайн-теги оформления. Разберём по пунктам, что именно устарело и чем его заменять.
Таблица для макета страницы. Раньше блоки раскладывали в <table>, потому что float ещё не умели надёжно. Сегодня это главная проблема: таблица не сжимается на мобильном, текст «плывёт», а скринридер воспринимает макет как таблицу данных. На узком экране ячейки схлопываются не туда, и пользователю приходится горизонтально прокручивать страницу — такой опыт поисковики оценивают низко. Решение — CSS Grid или Flexbox с медиазапросами под разные экраны.
<font color="red">. Инлайн-цвет текста. Устарел ещё в HTML 4. Заменяется на color в CSS или на класс из дизайн-системы, чтобы цвет менялся один раз во всей теме.
<center>. Центрирование блока. Сейчас это flex, grid или text-align: center для строчных элементов.
<marquee> и <blink>. Анимированный бегущий текст и мигающий текст — технически почти не поддерживаются в современных стандартах. Заменяются на CSS-анимацию, а мигание вообще лучше убрать: это и недоступно, и раздражает посетителей.
<b> ради SEO. Миф, что жирный текст помогает по SEO, жив до сих пор. Тег <b> не означает важность — для акцента используйте <strong> (или стиль заголовка). Сам по себе <b> не запрещён, но «жирнить» слова ради ранжирования бесполезно, а на качество разметки ещё и плохо влияет.
| Было | Стало |
|---|---|
<font color> |
CSS color или классы темы |
<center> |
flex, grid, text-align: center |
<b> ради SEO |
<strong> или стиль заголовка |
| Таблица для вёрстки | CSS Grid / Flexbox |
<marquee> |
CSS-анимация (или убрать) |
Таблица для данных — это другое. Цены, характеристики, расписания в таблице уместны и даже полезны: семантическая таблица с <th> и <caption> помогает понять структуру страницы поисковику. Запрещена только таблица как способ разложить всю страницу.
Как найти устаревшие теги (поиск по коду, валидатор)
Прежде чем чистить, нужно найти. Есть два пути — ручной и автоматизированный.
Ручной поиск по коду подходит, если у вас есть доступ к шаблонам. Простая команда находит вставки в папке templates:
grep -E 'font|center|bgcolor|align' templates/
Если страниц много или нет доступа к файлам, нужен краулинг: выгрузите HTML страниц и пробейте по тем же паттернам. Так удобнее делать выборку прямо в отчёте SEO-аудита — там уже будут URL с проблемными тегами.
Автоматизация даёт более точную картину. Валидатор W3C (validator.w3.org/nu) по стандарту HTML покажет конкретные строки с obsolete- и deprecated-элементом. Lighthouse дополнительно оценит доступность (раздел Accessibility) и покажет, где скринридеры теряются. Комбинация «валидатор + Lighthouse» обычно закрывает 90% вопросов по поиску.
Как заменить на семантическую вёрстку
Чистку лучше вести волнами, а не пытаться переписать всё сразу. Первый проход — общие шаблоны: header и footer, потому что они на каждой странице и дают максимальный эффект. Второй — карточки товаров и архивы. Третий — старые посты по мере их редактирования.
Конкретные замены:
<font color>→colorв CSS или класс темы. Один раз задали цвет — меняете бренд везде.<center>→ flex/grid для блоков,text-align: centerдля текста.- Таблица-макет → CSS Grid или Flexbox с медиазапросами под мобильный.
<marquee>→ CSS-анимация, а<blink>просто уберите.<b>ради акцента →<strong>или оформите как заголовок.- Инлайн-стили
style="..."на элементах → вынесите в CSS-классы темы, чтобы дизайн оставался единым.
Отдельно про конструкторы. Старые лендинги на конструкторах часто тянут inline-стили и table-layout. При переезде на CMS не копируйте HTML «как есть» — перенесите смысл в компоненты темы. Это разовая работа, которая снимает сотни мелких ошибок валидации сразу.
Ещё один частый источник — админка. Атрибуты align и bgcolor на <table> часто тянутся из Excel-экспорта. Замените их на класс из дизайн-системы: так проще сменить тему и не искать inline-стили по всей базе постов.
Frameset и frame ещё встречаются на внутренних порталах. Для публичного SEO такие страницы лучше закрыть от индексации или перевести на нормальный layout — мобильный браузер ошибок вёрстки не прощает, а мобильный трафик у большинства сайтов основной.
Важно: таблицы для реальных данных (цены, характеристики) оставляйте. Deprecated-статус не запрещает семантические таблицы с <th> и подписью <caption>.
Как проверить в seoquest.ru (/check/free)
После правки шаблона нужно убедиться, что ничего не сломалось, и зафиксировать результат. Запустите бесплатную проверку сайта на /check/free: сервис считает Health Score и прогонит SEO-аудит по ключевым параметрам. Проверьте главную, типовую статью и форму обратной связи — именно на этих страницах чаще всего прячутся оставшиеся проблемы.
В отчёте вы увидите, какие URL ещё тянут legacy-разметку, сколько осталось проблемных тегов и как чистка вёрстки повлияла на доступность и скорость. Удобно, что проверку можно гонять после каждой волны миграции и следить за динамикой, а не делать всё сразу и надеяться на лучшее.
Связывайте задачи по устаревшим тегам со смежными темами: правильная HTML-структура документа снижает число проблем с тегами изначально, а грамотная внутренняя перелинковка равномерно распределяет вес между чистыми страницами. И не забывайте про мобильную версию сайта — именно там устаревшая табличная вёрстка проявляется сильнее всего.
Часто задаваемые вопросы
Убрать всё сразу?
Рискованно на большом сайте. Сначала общие шаблоны, затем контент по приоритету трафика. Так вы получаете эффект раньше и не роняете рабочие страницы.
Запрещены ли <b> и <i> ?
Нет, сами теги не запрещены. Но для обозначения важности используйте <strong> и <em>, а для визуального жирного шрифта — CSS. «Жирнить» слова по SEO-соображениям не нужно.
Таблицы нельзя использовать?
Можно, но только для табличных данных — цен, характеристик, расписаний. С разметкой всей страницы через <table> — нет, это вёрстка, которую надо переводить на Grid/Flexbox.
Влияют ли устаревшие теги на скорость?
Косвенно да. Старая тяжёлая вёрстка, лишние обвёртки и инлайн-стили увеличивают размер страницы и усложняют рендеринг, особенно на мобильных.
Как понять, что тег действительно устарел?
Сравните с актуальным стандартом HTML и MDN. Если элемент помечен как obsolete или deprecated в текущей спецификации — его нужно планировать к миграции.