Красивый сайт может месяцами висеть на второй-третьей странице поиска и не приносить ни одного посетителя. Проблема часто не в тексте и не в ключевых словах, а в верстке: как выстроена структура страницы, какие теги использованы, сколько весят картинки и удобно ли открывать сайт с телефона. Дизайнер закладывает эти вещи на этапе макета — до того, как подключится SEO-специалист. Разберемся, что именно в дизайне влияет на позиции сайта, как проверить макет по чек-листу и что поправить, чтобы страницы попали в топ.
- Дизайн напрямую влияет на SEO: структура страницы, теги заголовков (H1-H3), скорость загрузки и мобильная адаптивность закладываются на этапе макета, а не исправляются потом
- Критические факторы ранжирования в дизайне: один H1 на страницу, логичная иерархия заголовков, семантическая верстка (nav, main, article теги), оптимизация картинок (JPEG/PNG/SVG форматы, вес 100-200 КБ), alt-подписи и кнопки минимум 48 пикселей
- Core Web Vitals зависят от дизайна: LCP замедляют тяжелые картинки в шапке (решение — сжатие и WebP формат), CLS вызывает прыгающий контент (нужны фиксированные размеры блоков), мобильная версия индексируется первой (шрифт от 16px, адаптивная сетка)
- Перед передачей макета разработчику нужен чек-лист: проверить вес страницы (2-3 МБ максимум), читаемость на экране 360px, наличие alt-подписей и внутренних ссылок, контрастность текста 4,5:1 — это займет 15 минут и предотвратит половину проблем с индексацией
Больше, чем текст: почему SEO начинается с дизайна
Поисковый робот оценивает не только слова на странице, но и ее структуру. Заголовок в теге H1 или в обычном блоке с крупным шрифтом — для человека это неразличимо, для Google это два разных сигнала. Скорость загрузки, порядок блоков в коде, размер шрифта на телефоне, вес фонового изображения — все это задает дизайнер в макете. Если структура нарушена на этом этапе, копирайтер напишет полезный текст, но страница не поднимется в выдаче. Базовые SEO-требования проще заложить сразу, чем переделывать готовый сайт.
Зачем дизайнеру понимать SEO: от макета до топа выдачи
Дизайнер решает, какой текст станет заголовком первого уровня, как разложены разделы меню, где будут подписи к картинкам и в каком порядке блоки идут в коде. Эти решения напрямую влияют на то, как поисковик понимает страницу. Один H1 на страницу, логичная иерархия H2 и H3, осмысленные пункты навигации — это не работа отдельного специалиста, а часть макета. Когда дизайнер это предусмотрит, SEO-специалисту не придется ломать готовую верстку.
Исправление архитектуры заголовков на запущенном проекте — это всегда боль. Специалисты TzMonster отмечают, что грамотная разметка H1-H3 на этапе сборки макета обходится заказчику в разы дешевле, чем последующая переделка кода и потеря позиций в выдаче.
Понимание основ экономит недели. Разработчик быстро правит теги и структуру, пока сайт в макете, но переделка запущенного проекта стоит дороже и снижает трафик. Дизайнеру не нужно становиться SEO-экспертом — достаточно короткого чек-листа для каждого макета: где заголовки, как названы файлы картинок, читается ли текст на телефоне. Этот минимум закрывает большую часть технических требований поисковиков.
Эстетика против алгоритмов: как дизайн влияет на видимость сайта
Эффектные решения часто работают против поиска. Текст, зашитый в картинку, робот не прочитает — для него это пустая страница. Анимации и тяжелые фоны на 5–8 МБ замедляют загрузку, а скорость входит в факторы ранжирования Google. Меню, которое открывается только по наведению курсора, недоступно на телефоне, где происходит больше половины визитов. Красота и видимость в поиске конфликтуют там, где визуальный эффект мешает роботу читать контент или замедляет сайт.
Конфликт решается компромиссами, а не отказом от эстетики. Заголовок делают текстом со стилизованным шрифтом, а не изображением. Картинки сжимают и добавляют им alt-подпись. Декоративные элементы грузят так, чтобы они не замедляли основной контент. Задача дизайнера — найти баланс: сохранить внешний вид и оставить страницу быстрой, читаемой роботом и удобной на любом экране. Тогда дизайн работает и на пользователя, и на позиции в выдаче.
🚀 Тексты, которые нравятся поисковикам
ТЗМонстр — умный нейропомощник для SEO и блогов. Автоматически собирает LSI-фразы, генерирует детальное ТЗ и пишет экспертные статьи лучше обычного ChatGPT. От 15₽ за готовый план работы.
Архитектура страницы: как выстроить структуру для роботов и людей
Робот сканирует страницу не так, как человек. Он не видит красивую сетку и шрифты — читает HTML-код и определяет по нему тему страницы, главные элементы и связи между разделами. Если в макете весь текст оформлен одинаковыми блоками без иерархии, поисковик не различает заголовок, основной контент и второстепенные блоки. Дизайнер должен заложить понятную структуру на этапе прототипа: один главный заголовок, логичные подзаголовки, осмысленные ссылки и адреса. Это не вредит дизайну, а помогает роботу и человеку быстрее разобраться в странице.
Иерархия заголовков: правила идеальной структуры контента
На странице должен быть один заголовок H1 — название страницы или статьи. Разделы оформляют тегом H2, подразделы — H3 и глубже. Структура работает как оглавление книги: H1 — название, H2 — главы, H3 — параграфы. Нельзя перепрыгивать через уровни: после H2 не идет сразу H4. И нельзя использовать заголовки ради размера шрифта — если нужен крупный текст без смысла раздела, это задача стилей CSS, а не тега H2.
Частая ошибка в макете — несколько H1 на одной странице или заголовки, выбранные по внешнему виду. Дизайнер видит два крупных текста и оба размечает как H1, потому что так выглядит ровнее. Поисковик теряет главную тему страницы. Проверить просто: выпишите все заголовки макета по уровням и прочитайте их подряд. Если получилось связное оглавление, по которому ясна суть страницы, — структура верная.
- Правило единственного H1: На странице всегда только один главный заголовок, отражающий ее суть.
- Строгая вложенность: Заголовки идут по порядку (H1 < H2 < H3), пропуск уровней недопустим.
- Смысл важнее дизайна: Теги заголовков используются для структурирования контента, а не для искусственного увеличения размера шрифта.
Семантическая верстка: говорим с поисковиками на языке HTML-тегов
Семантическая верстка — это использование тегов по их прямому назначению. Меню оформляют тегом nav, основной контент — main, шапку и подвал — header и footer, статью — article. Робот по этим тегам сразу понимает роль блока, даже не разбирая содержимое. Если же вся страница собрана из одинаковых div-контейнеров, поисковику приходится угадывать структуру, и он делает это хуже.
Для дизайнера это означает: в макете нужно помечать не только внешний вид блока, но и его смысл. Списки преимуществ — это списки (ul, ol), а не строки с иконками через отступы. Кнопка, ведущая на другую страницу, — это ссылка, а не картинка с кликом. Изображения снабжают атрибутом alt с описанием того, что на них. Такая разметка помогает роботам и делает сайт доступным для людей, которые пользуются программами чтения экрана.
Навигация и перелинковка: как упростить путь пользователя
Навигация показывает человеку и роботу, как устроен сайт и как разделы связаны между собой. Понятное меню, хлебные крошки и ссылки между связанными страницами помогают поисковику обойти весь сайт и распределить вес между страницами. Если на важную страницу не ведет ни одна внутренняя ссылка, робот может ее не найти. В макете стоит проверять: до любой ключевой страницы можно добраться за два-три клика с главной.
Перелинковка — это ссылки внутри контента на другие страницы сайта. В статье про дизайн логично сослаться на страницу услуги или смежный материал. Такие ссылки удерживают пользователя на сайте и подсказывают роботу, какие страницы связаны по теме. Текст ссылки должен описывать, куда она ведет: не «читать тут», а «чек-лист верстки лендинга». Расплывчатые формулировки не дают поисковику понять, о чем страница по ту сторону ссылки.
| Элемент интерфейса | Слепая верстка (Плохо) | Семантический тег (Хорошо) |
|---|---|---|
| Главное меню сайта | <div class=»menu»> | <nav> |
| Независимая статья/пост | <div class=»post»> | <article> |
| Подвал сайта | <div class=»bottom-block»> | <footer> |
Чистые URL: делаем адреса понятными и логичными
Адрес страницы читают люди и роботы. Понятный URL вида site.ru/blog/seo-dlya-dizaynerov сразу говорит о содержимом, а адрес вида site.ru/?p=482&cat=3 не сообщает ничего. Читаемый адрес чаще получает клик в выдаче, потому что человек видит по нему, что попадет на нужную страницу. В URL используют латиницу или транслит, слова разделяют дефисами, а не подчеркиваниями, и держат адрес коротким.
Структура адресов должна повторять логику сайта. Раздел блога — в папке blog, услуги — в services. Тогда по адресу ясно, где находится страница, а сама структура сайта становится прозрачной для поисковика. Заглавные буквы, пробелы, спецсимволы и лишние параметры из адреса убирают. Дизайнер закладывает эту логику на этапе карты сайта: продуманная иерархия страниц потом превращается в чистые и предсказуемые адреса.
Визуальный контент: оптимизируем картинки, видео и графику
Изображения занимают до 60% веса страницы и чаще всего тормозят загрузку. Google учитывает скорость открытия как фактор ранжирования, а посетитель закрывает вкладку, если сайт грузится дольше трех секунд. Дизайнер решает эту задачу еще в макете: выбирает подходящий формат, сжимает файлы, прописывает подписи для поисковых роботов. Ниже три блока, которые превращают тяжелую галерею в быстрый и понятный поисковику контент. Каждый пункт можно проверить самому, без программиста и специальных сервисов аналитики.
Поисковые роботы абсолютно слепы к визуальной эстетике. Для них самый красивый, но тяжелый и неструктурированный макет — это просто медленная страница с набором бессмысленных контейнеров.
Баланс скорости и качества: выбор формата изображений
Фотографии сохраняйте в JPEG, логотипы, иконки и графику с прозрачным фоном — в PNG или SVG. JPEG сжимает снимки с плавными переходами и держит небольшой вес. PNG сохраняет четкие линии и прозрачность, но фотография в этом формате весит в 3–5 раз больше. Перепутанный формат — типичная причина, по которой макет с легкими на вид картинками весит 10 мегабайт.
Перед загрузкой прогоняйте файлы через сжатие: TinyPNG или Squoosh убирают лишние данные без заметной потери качества. Ставьте ширину изображения под реальный размер блока: фото 4000 пикселей в контейнере на 800 пикселей грузит впустую данные, которые браузер все равно уменьшит. Оптимальный вес одной фотографии для веба — 100–200 килобайт.
Alt и Title: почему важна доступность
Атрибут alt — текстовое описание картинки. Его читают поисковые роботы, которые не видят изображение, и программы экранного доступа для незрячих пользователей. Пустой alt лишает картинку шанса попасть в поиск по изображениям и снижает оценку доступности сайта. Пишите в alt то, что показано на фото: не «img_2043», а «керамическая кружка с матовой глазурью на деревянном столе».
Не путайте alt с title. Alt описывает содержание и работает на индексацию, title всплывает подсказкой при наведении курсора. Не набивайте alt ключевыми словами подряд — поисковики распознают спам и понижают страницу. Одно точное предложение по делу работает лучше списка запросов. Проверьте: у каждой смысловой картинки на макете должен быть заполнен alt.
SVG и WebP: современные стандарты производительности
SVG — векторный формат для логотипов, иконок и простой графики. Он не пикселизуется при масштабировании, весит килобайты вместо десятков килобайт и остается четким на любом экране, включая Retina. Иконки в PNG приходится готовить в нескольких размерах под разные экраны, один SVG заменяет их все. Для интерфейсных элементов это самый выгодный выбор по скорости.
WebP — формат для фотографий, который сжимает сильнее JPEG на 25–30% при том же качестве. Его поддерживают все современные браузеры. Старые версии, которые WebP не открывают, встречаются редко, но подстраховаться можно тегом picture с запасным JPEG. Перевод галереи фотографий в WebP — один из самых заметных способов ускорить загрузку без потери качества картинки.
UX как фактор ранжирования: скорость, мобильность и комфорт
Google учитывает удобство сайта при ранжировании через Core Web Vitals. Логика простая: если посетитель ждет загрузку 8 секунд, тычет мимо кнопок на телефоне или не может прочитать текст без масштабирования — он закрывает вкладку и возвращается в поиск. Поисковик фиксирует такой быстрый возврат и понижает страницу. Дизайнер управляет этими сигналами напрямую: скоростью, адаптивностью, читаемостью и логикой навигации. Разберем четыре зоны, где решения в макете превращаются в поведенческие показатели и позиции.
Пользовательский опыт давно перестал быть абстрактной метрикой. Сегодня каждый промах мимо мелкой кнопки на экране смартфона — это прямой сигнал для алгоритмов понизить ваш ресурс в выдаче.
Скорость загрузки: как дизайн влияет на Core Web Vitals
Три метрики Core Web Vitals завязаны на дизайн. LCP (загрузка главного блока) страдает от тяжелых картинок в шапке: баннер на 4 МБ грузится секундами. Решение — сжимать изображения, отдавать их в форматах WebP или AVIF и задавать реальные размеры под экран, а не масштабировать гигантский файл до маленького блока.
CLS (сдвиг макета) портит впечатление, когда контент прыгает при подгрузке: текст уже виден, а сверху вдруг вваливается баннер. Чтобы этого не было, задавайте фиксированные размеры для картинок, видео и рекламных блоков заранее. FID (отзывчивость на клик) снижают тяжелые скрипты и анимации — каждый декоративный эффект добавляет вес, который платит пользователь.
Mobile-First: принципы адаптивного дизайна
Google индексирует сайты по мобильной версии — оценивает именно то, как страница выглядит на телефоне, а не на широком мониторе. Поэтому макет проектируют сначала под узкий экран, а потом расширяют под десктоп. Кнопки делают не меньше 44×44 пикселей, чтобы попадать пальцем без промаха. Шрифт основного текста — от 16 пикселей, иначе читатель вынужден увеличивать масштаб.
Проверьте макет на реальных сценариях: помещается ли меню в бургер, не вылезает ли таблица за край, работают ли формы без горизонтальной прокрутки. Отступы между кликабельными элементами должны разводить их так, чтобы соседние ссылки не нажимались случайно. Один макет с гибкой сеткой лучше двух отдельных версий: меньше расхождений, которые ломают индексацию и раздражают посетителя.
Доступность интерфейса: почему это важно не только для людей
Доступность (accessibility) означает, что сайтом пользуются люди со слабым зрением, дальтонизмом или те, кто заходит через программу экранного доступа. Тот же принцип помогает поисковому роботу: он читает страницу похоже на такую программу. Атрибут alt у картинки объясняет роботу, что на ней изображено, а человеку с озвучкой — что там нарисовано. Контраст текста и фона по стандарту WCAG держат не ниже 4,5:1, иначе часть читателей текст не разберет.
Заголовки выстраивают в логичную иерархию: один H1 на странице, дальше H2 и H3 по вложенности, без пропусков уровней ради красивого размера шрифта. Ссылки подписывают по смыслу — «скачать прайс», а не «нажмите сюда». Формы снабжают видимыми подписями полей, а не только серым плейсхолдером, который исчезает при вводе. Эти же элементы поисковик использует, чтобы понять смысл и структуру страницы.
Поведенческие факторы: как дизайн удерживает внимание
Поисковик отслеживает, сколько времени человек провел на странице, сколько прокрутил и куда ушел дальше. Дизайн управляет этими сигналами через ритм страницы. Длинный текст сплошным полотном отпугивает — его разбивают подзаголовками, списками, врезками и картинками через каждые 3–4 абзаца. Взгляд цепляется за визуальные якоря и продолжает чтение вместо закрытия вкладки.
- Размер таргет-зон: Все кликабельные элементы (кнопки, ссылки) должны быть не менее 44×44 пикселей.
- Читабельность без зума: Базовый размер шрифта для мобильных устройств стартует от 16 пикселей.
- Безопасные отступы: Ссылки и кнопки разнесены на достаточное расстояние во избежание ошибочных кликов пальцем.
Первый экран решает, останется ли посетитель: он должен сразу отвечать на вопрос, зачем сюда пришли. Кнопку целевого действия выделяют цветом и располагают там, где ее видно без прокрутки. Внутренние ссылки на связанные материалы ведут читателя глубже по сайту — это увеличивает число просмотренных страниц и снижает быстрый возврат в поиск. Каждый такой переход поисковик читает как сигнал, что сайт полезен.
Чек-лист: проверяем макет на SEO перед передачей в разработку
Пройдитесь по макету до того, как его увидит разработчик — так дешевле исправлять ошибки. Проверяйте по пунктам: один заголовок H1 на страницу, логичная иерархия H2 и H3, текст живым шрифтом, а не картинкой. Каждое изображение сопровождает подпись для атрибута alt. Кнопки и ссылки размером минимум 48 пикселей под палец. Общий вес страницы не превышает 2–3 МБ, тяжелые фото сжаты. Макет продуман для экрана 360 пикселей, а не только для десктопа. Меню отражает реальную структуру разделов. Такой чек-лист занимает 15 минут, но снимает половину проблем с индексацией.
Что нужно проверить в дизайне до старта верстки
Сначала определите, какая страница за какой запрос отвечает. Если у вас три посадочные страницы под одну тему, они конкурируют друг с другом и обе проседают в выдаче. Одна страница — одна задача пользователя. Заложите в макет заметный H1 вверху, подзаголовки, которые дробят текст на смысловые блоки, и хлебные крошки для навигации. Оставьте место под мета-заголовок и описание — разработчик пропишет их в коде, но дизайнер должен понимать, что они существуют.
Передача макета в разработку без сопроводительного списка требований — это игра в рулетку. Верстальщик точно перенесет пиксели, но может случайно уничтожить весь семантический смысл блоков.
Отдельно проверьте текст. Он должен быть настоящим текстом, а не изображением или элементом внутри баннера — поисковики не читают буквы на картинке. Заложите достаточный контраст и размер шрифта от 16 пикселей, иначе пользователь уйдет, а поведенческие факторы просядут. Продумайте внутренние ссылки между страницами: из статьи на услугу, из услуги на кейсы. Это помогает и посетителю, и роботу понять связи внутри сайта.
Базовая аналитика: инструменты для контроля качества сайта
После запуска сайта подключите два бесплатных инструмента: Яндекс Вебмастер и Google Search Console. Они показывают, какие страницы попали в индекс, где робот нашел ошибки и по каким запросам сайт уже показывается в выдаче. Если страница не индексируется неделями, вы увидите это здесь, а не будете гадать. Для скорости загрузки используйте PageSpeed Insights — он проверяет и мобильную версию, и десктоп, называет конкретные проблемы: тяжелые картинки, лишние скрипты, медленный ответ сервера.
Дизайнеру не нужно погружаться в отчеты глубоко. Достаточно раз в месяц смотреть три показателя: количество страниц в индексе, оценку скорости и ошибки мобильной верстки. Если скорость на телефоне ниже 50 из 100, вернитесь к макету и найдите, что грузит страницу. Часто виноваты фоновые видео, десятки шрифтов и неоптимизированные фото на весь экран. Эти данные превращают догадки в конкретный список правок.
Командная работа: как донести свои идеи до разработчиков
Разработчик воплощает макет буквально: если в дизайне заголовок оформлен крупным жирным текстом, это не значит, что в коде он станет тегом H1. Прямо в макете помечайте, где H1, где H2, где обычный абзац. Указывайте alt-подписи к картинкам рядом с изображениями. Прописывайте, какие блоки должны быть кликабельными ссылками, а не декоративными элементами. Так верстальщик не превратит текст в картинку и не соберет заголовки хаотично.
Соберите короткое ТЗ с SEO-требованиями и приложите его к макету: структура заголовков, требования к скорости, поведение блоков на мобильном, необходимость подписей и мета-тегов. Обсудите с командой формат картинок — WebP вместо тяжелых PNG. Договоритесь, кто отвечает за подключение аналитики после релиза. Одна страница требований экономит недели переписки и защищает сайт от типовых ошибок, которые потом дорого исправлять.