Как редизайн сайта может повлиять на SEO

Обновлено: 24.09.2025

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

Что такое макет сайта

Макет веб-страницы – это расположение и представление элементов контента на веб-странице, включая текст, изображения, заголовки, ссылки и другие мультимедийные компоненты. Макет играет решающую роль в формировании пользовательского опыта (UX) и влияет на то, как посетители воспринимают контент и взаимодействуют с ним. Когда мы рассматриваем, как дизайн веб-страницы влияет на интерпретацию и контекст объектов, мы изучаем, как визуальные и структурные аспекты веб-страницы влияют на понимание и релевантность представленных объектов.

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

✅ Правильный пример:
На хорошо спроектированной веб-странице, посвященной смартфонам, технические характеристики продукта расположены в верхней части страницы, что позволяет пользователям быстро находить важные сведения о каждой модели смартфона. Макет включает четкие заголовки и разделы для различных характеристик, что повышает читабельность и позволяет пользователям легко понять контекст каждого объекта (модели смартфона), представленного на странице.

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

Комплекс макетов всех типов страниц, составляющий веб-сайт, называется шаблоном.

На что влияет шаблон сайта

Когда вы думаете о смене дизайна сайта, в первую очередь рассматриваются следующие моменты:

• Актуальность дизайна
• Способность лучше конвертировать посетителя в покупателя
• Адаптивный дизайн для мобильных устройств
• Личные предпочтения владельца сайта

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

Как поисковые роботы читают веб-страницы

Поисковые роботы, известные как “краулеры”, читают страницы сайтов в несколько автоматизированных этапов, чтобы собрать информацию и добавить её в базу данных (индекс).

• Первый этап – сканирование. Робот обнаруживает страницу и переходит на неё.
• Второй этап – анализ содержимого. В первую очередь робот анализирует HTML-код, обращая внимание на важнейшие контентные блоки (тайтлы, заголовки, текстовое содержимое и т.п.). На этом этапе анализируется текст, выявляются важнейшие ключевые слова, определяется тематика.

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

Робот идентифицирует и исключает из анализа сквозные блоки, рекламные вставки, меню и боковые панели. Если в шаблоне сайта используются некорректные названия элементов, классов и ID – важный контент может быть исключен из учёта и не учтён поисковой системой.

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

Типовые ошибки вёрстки, опасные для SEO

Вывод важного контента средствами Javascript и AJAX

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

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

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

Вывод. Не позволяйте верстальщику решать все вопросы с помощью JS без особой необходимости, и тестируйте шаблон на доступность для роботов.

Подробно о Javascript SEO в статье на vc.ru

Псевдоссылки вместо ссылок

Поисковые роботы ходят по ссылкам. Ссылка – это HTML-тэг <“a href=…”>, включающий в себя какой-то текст (анкор) или изображение. Лучшая ссылка – это тэг A, в анкор которого входит какое-то описание страницы, на которую ведёт ссылка. Благодаря ссылкам и их анкорам люди и поисковые системы могут увидеть структуру какого-то ресурса, связь между двумя ресурсами, предположить содержание документа, на который ведёт ссылка.

Псевдоссылками называют интерактивные элементы, которые ведут себя как ссылка – но ссылкой не являются, поскольку реализованы средствами JS. Либо же речь может идти о теге <a>, оборачивающем целый контентный блок – с какими-то ещё HTML-элементами, текстом, изображением и т.п. Такая вёрстка часто используется в интернет-магазинах для карточек товаров, категорий и т.п. В результате вы получаете полноценную, но безанкорную ссылку, которая не будет учитываться при расчётах уровня BM25, используемых при первичном ранжировании на уровне базовых текстовых метрик и оценке структуры сайта.

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

• Ссылка выводится средствами JS и в «сыром» HTML её попросту нет. Это значит, что при первичном сканировании робот её не увидит, и обнаружит только при следующих обходах сайта, после рендеринга JS.
• Вместо нормальной ссылки в HTML используется псевдоссылка, реализованная средствами JS, и для её выполнения поисковый робот должен этот JS выполнить. Соответственно, страница по ссылке будет найдена значительно позже, либо не найдена вообще.
• Отдельную проблему представляют собой анкоры псевдоссылок: они не могут участвовать в расчётах текстовых метрик страницы в качестве ссылок и рассматриваются как шинглы. Более подробно мы рассмотрим этот вопрос ниже, отдельно.
• Веб-структуры любого уровня представляют собой графы, состоящие из троек «субъект – предикат – объект», где связующим звеном выступают именно ссылки. Псевдоссылки в качестве предиката выступать не могут, а значит, их использование негативно сказывается на структурировании сайта в целом.

Вывод. Не используйте JS-ссылки, если не хотите эти ссылки скрыть от поисковиков. Не выводите ссылки средствами JS, если речь идёт о критически важном контенте, навигации, листингах товаров и услуг и т.п.

Безанкорные блочные ссылки

С помощью анализа ссылочных анкоров поисковая система может алгоритмически просчитать коммерческие метрики сайта. Если на странице категории товаров в интернет-магазине выводится 50 ссылок с анкором «Офисный стул…», а всего в категории 10 страниц – у вас неплохой ассортимент офисной мебели. А полнота ассортимента – один из важнейших сигналов для поисковой системы, означающих, что ваш сайт стоит показать на выдаче по запросам группы «купить офисные стулья».

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

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

 

Вывод. Использование безанкорных блочных ссылок может привести к полной утрате текстовой релевантности страницы и попаданию под текстовые фильтры за спамность. Такие ссылки полезнее псевдоссылок, реализованных средствами JS, но их нельзя признать эффективными с точки зрения SEO.

Неправильная структура страниц и сайта в целом

Разработка дизайна сайта невозможна без предварительного анализа поисковой семантики и основанной на ней структуры. Это касается как структуры сайта в целом, так и структуры отдельных типов страниц – главной, каталога, страниц категорий, товарных карточек и т.п. Игнорирование SEO-требований к структурированию может стать причиной множества серьёзных ошибок различного характера. Вот лишь некоторые:

• Появление страниц-дублей и каннибализация запросов
• Текстовая нерелевантность
• Низкие поведенческие метрики по причине недочётов UX
• Неконверсионность: сайт не продаёт

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

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

Вывод. Дизайн сайта в целом и отдельных типов страниц неэффективен без предварительной проработки структуры с опорой на поисковую семантику и коммерческие задачи сайта.

Когда дизайн сайта противоречит логике SEO

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

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

Для поискового робота максимально важен контент, размещенный на первых 2-3 экранах. Точно так же – и для человека: куда я попал? Соответствует ли это моим целям? Как это получить?

Казалось бы – всё просто. Но зайдите на каждый первый сайт, и вместо конкретики вы увидите огромный слайдер с мусорной информацией, размещенной по принципу «чтобы было» – просто потому, что так задумано дизайнером. А ведь это – самое драгоценное пространство на странице.

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

Как проверить шаблон сайта на ошибки

Проверка контента, выводимого средствами JS

Комплексный аудит сайта подразумевает обязательные проверки доступности основного контента при первичном сканировании его в формате HTML. Для этого вам понадобится парсер уровня Screaming Frog SEO Spider, который умеет эмулировать основных поисковых роботов, а также может сканировать сайт в трёх основных режимах: только текст, эмуляция сканирования кэшированного AJAX и режим рендеринга Javascript.

 

В результате такой проверки вы можете сравнить две версии сканирования: «сырой» HTML и вариант с рендерингом JS. В хорошем случае эти две версии практически не отличаются.

 

На отдельной вкладке можно посмотреть, какой контент и в каком объёме на заданном URL выводится средствами Javascript. Бывают случаи, когда средствами JS выводится второстепенный и неважный контент (чат с консультантом, дополнительные отзывы на товар, ссылки на соцсети), а бывает, что выводится практически всё – и вот это уже серьёзная проблема.

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

Второй способ – это оценка сохраненной копии (то, что сохранено в поисковом кэше). Как правило, при оценке сохраненной копии вам доступно две версии данных: полная версия в HTML и версия, включающая только текст. Таким образом, вы можете увидеть, что доступно роботу в настоящий момент, а какие блоки полностью выпадают из сканирования или ещё не просканированы.

Проверка базовой структуры DOM

Для оценки DOM (Document Object Model) веб-страницы необходимо проанализировать его структуру, сложность, производительность и доступность. Эффективная оценка DOM помогает выявить “узкие места”, которые замедляют загрузку страницы, усложняют её поддержку и ухудшают взаимодействие с пользователем.

Ключевые аспекты для оценки DOM:

• Размер и глубина структуры. Большое количество вложенных элементов (глубина) и общее число узлов (размер) напрямую влияют на производительность. Чем сложнее DOM, тем больше времени требуется браузеру на его обработку, стилизацию и отрисовку.
• Производительность (Performance). Оценивается, как быстро браузер строит DOM и как манипуляции с ним (например, с помощью JavaScript) влияют на скорость работы страницы. Длительные операции блокируют основной поток, что приводит к “зависанию” интерфейса.
• Доступность (Accessibility). Проверяется, насколько семантически корректно структурирован DOM, чтобы вспомогательные технологии (например, скринридеры) могли правильно интерпретировать контент.
• Валидность HTML (HTML Validity). Ошибки в разметке могут приводить к некорректному построению DOM-дерева, что вызывает проблемы с отображением и функциональностью.

Примечание. При оценке валидности HTML не надо пугаться всех обнаруженных ошибок. Это всего лишь сторонний веб-стандарт, мало на что влияющий в рамках SEO. Однако именно таким способом проще всего обнаружить ряд критически важных ошибок DOM, прямо влияющих на технические характеристики сайта. например, незакрытый тег или размещение метатегов в области <body> может привести к тому, что поисковый робот просто выбросит их из анализа или не сможет правильно выстроить объектную модель сайта с непредсказуемыми последствиями.

Инструменты для оценки DOM

Существует множество инструментов, встроенных в браузеры и доступных в виде сторонних сервисов, для комплексной оценки DOM.

Инструменты разработчика в браузерах (Browser Developer Tools)

Это основной и самый доступный набор инструментов для анализа DOM. Открыть их можно, как правило, клавишей F12 или через контекстное меню (“Просмотреть код” или “Исследовать элемент”).

• Панель Elements (Элементы) позволяет в реальном времени просматривать и редактировать DOM-дерево. Здесь можно увидеть структуру, применённые CSS-стили, вложенность элементов и их атрибуты.
• Панель Performance (Производительность): один из самых мощных инструментов. Позволяет записать профиль загрузки и взаимодействия со страницей. На графике можно увидеть, сколько времени уходит на парсинг HTML, расчёт стилей (Style), компоновку (Layout), отрисовку (Paint) и выполнение скриптов (Scripting). Длительные задачи (Long Tasks) подсвечиваются, указывая на проблемы с производительностью.
• Панель Lighthouse: встроенный инструмент для комплексного аудита страницы. Он анализирует производительность, доступность, SEO и другие параметры. В отчёте по производительности Lighthouse часто указывает на проблемы, связанные с DOM, например, “Avoid an excessive DOM size” (Избегайте избыточного размера DOM).

Специализированные онлайн-сервисы

• WebPageTest предоставляет глубокий анализ производительности загрузки страницы из разных точек мира и на разных устройствах. Его отчёты включают “водопадную” диаграмму загрузки ресурсов и время до ключевых событий, таких как DOMContentLoaded и load, которые напрямую связаны с готовностью DOM.
• GTmetrix: ещё один популярный сервис для анализа скорости сайта. Он использует Google Lighthouse и собственные метрики для оценки производительности и структуры страницы, предоставляя рекомендации по оптимизации, в том числе и по улучшению DOM.
• W3C Markup Validation Service: официальный валидатор от Консорциума Всемирной паутины. Он проверяет HTML-код на соответствие стандартам. Устранение ошибок, найденных валидатором, гарантирует корректное построение DOM-дерева браузером.

Инструменты для проверки доступности (Accessibility)

• Axe DevTools: расширение для браузера, которое анализирует страницу на соответствие стандартам веб-доступности (WCAG). Оно проверяет семантическую структуру DOM, наличие необходимых ARIA-атрибутов и другие важные для доступности аспекты. WCAG можно проверить и с помощью Screaming Frog SEO Spider.
• WAVE (Web Accessibility Evaluation Tool): одно популярное расширение и онлайн-инструмент, который визуально отображает проблемы доступности прямо на странице, анализируя её DOM.

Как проводить оценку: краткий чек-лист

1. Откройте Инструменты разработчика (F12) на интересующей вас странице.
2. Перейдите на вкладку Lighthouse, выберите категории (как минимум “Performance” и “Accessibility”) и запустите аудит. Проанализируйте предупреждения, особенно касающиеся размера DOM.
3. Перейдите на вкладку Performance. Запишите профиль загрузки страницы (нажмите “Reload”). Изучите диаграмму и найдите длительные задачи по пересчёту стилей и компоновке (Layout).
4. На вкладке Elements визуально оцените вложенность элементов. Если до нужного контента нужно “провалиться” на 15-20 уровней, это явный признак избыточной сложности.
5. Воспользуйтесь валидатором W3C, чтобы убедиться в отсутствии синтаксических ошибок в HTML.
6. Установите расширение Axe DevTools и запустите проверку, чтобы выявить проблемы с доступностью, связанные со структурой DOM.

Комплексный подход с использованием этих инструментов поможет получить полное представление о состоянии DOM вашей веб-страницы и найти пути для её оптимизации.

Отключаем CSS

Это очень простая и поверхностная проверка, однако и с её помощью можно оценить реальную структуру страницы благодаря отключению каскадных стилей оформления. Инструментарий – одно из браузерных расширений, например, SEO Toggle, где отключить на время все CSS можно одним кликом.

Что вы должны увидеть:

• Минимум второстепенных сквозных элементов в начале страницы
• Первые три экрана должны содержать основной контент страницы

Что должно насторожить:

• Большой объём сквозных и неуникальных в рамках сайта блоков на первых трех экранах (как минимум)
• Огромные меню с большой вложенностью, невидимые в обычном режиме с включенными CSS
• Дублирование меню (обычно речь идёт о меню для десктопа и адаптивное для смартфонов)
• Второстепенные блоки (боковая навигация и другие вспомогательные блоки) выше зоны основного контента

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

Заключение

В этой статье мы разобрали лишь базовые факторы, способные как повысить позиции сайта в поисковой выдаче, так и выбросить его оттуда. Я умышленно не стал рассматривать ряд некоторых технических моментов, интересных только специалистам, а также быстродействие, юзабилити, вопросы конверсии (CRO) – это слишком широкие темы, к тому же связанные с SEO только косвенно. Однако нужно понимать, что подготовка ТЗ дизайнеру на подготовку нового шаблона не ограничивается только данными от SEO-специалиста: в работе должны принимать специалисты по UX, дизайн сайта должен разрабатываться с учётом пользовательского маршрута (конверсионной воронки), возможностей коммуникаций потенциального клиента с вашим бизнесом и т.п.

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