SEO и веб-дизайн, как совместить красоту сайта и продвижение

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

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

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

К счастью, интересы у них всё чаще совпадают.

Разберёмся, как подружить SEO и веб-дизайн так, чтобы не пришлось выбирать между «красиво» и «работает».

SEO и веб-дизайн начинаются со структуры

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

Но если человек открыл сайт и не понял, куда идти дальше, праздник закончился.

Хорошая структура отвечает на простые вопросы:

• где я нахожусь;
• что здесь можно найти;
• куда нажать дальше;
• как вернуться назад;
• где лежит самое важное.

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

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

Мобильный дизайн уже не приложение к настоящему сайту

Когда-то мобильную версию действительно можно было воспринимать как уменьшенную копию большого сайта.

Это время закончилось.

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

Проверяем:

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

Если на мониторе сайт великолепен, а на телефоне превращается в цифровой шкаф, SEO его уже не спасёт.

Core Web Vitals: когда красота начинает измеряться в миллисекундах

У поисковых систем есть довольно прозаичный взгляд на прекрасное.

Они любят, когда страница быстро появляется, оперативно реагирует и ничего внезапно не прыгает по экрану.

Сегодня основные Core Web Vitals выглядят так:

• LCP — насколько быстро появился основной видимый контент;
• INP — насколько быстро страница реагирует на действия пользователя;
• CLS — насколько стабильно расположены элементы и не скачет ли вёрстка.

Для хорошего пользовательского опыта Google рекомендует стремиться к LCP не более 2,5 секунды, INP менее 200 мс и CLS менее 0,1.

И вот здесь SEO и веб-дизайн окончательно оказываются в одной лодке.

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

Код тоже участвует в дизайне

Пользователь HTML не видит. Поисковый робот — ещё как.

Поэтому за красивым интерфейсом желательно оставить порядок:

• один понятный H1;
• логичные H2 и H3;
• семантические элементы там, где они действительно нужны;
• минимум ненужных скриптов;
• никакой бесконечной матрёшки из <div>;
• важный контент доступен без хитрых действий пользователя.

Код не обязан быть произведением литературы.

Достаточно, чтобы он не напоминал кладовку, куда десять лет складывали всё со словами: «Когда-нибудь разберём».

Изображения: красиво — ещё не значит тяжело

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

Поэтому хорошая картинка должна быть не только красивой.

Ей нужны:

• разумный физический размер;
• сжатие без заметной потери качества;
• современный формат — например WebP или AVIF там, где это удобно;
• адаптивные варианты;
• понятное имя файла;
• нормальный ALT.

Google поддерживает JPEG, PNG, WebP, SVG, AVIF и другие распространённые форматы, рекомендует адаптивные изображения и отдельно подчёркивает значение информативного ALT.

ALT — это не мешок, куда нужно запихнуть ключевую фразу три раза.

Если на картинке рыжий кот сидит перед монитором, так и напишите:

Рыжий кот смотрит на макет сайта на мониторе

А не:

SEO веб-дизайн SEO продвижение сайта лучший веб-дизайн SEO

От второго даже кот уйдёт.

Видео тоже может работать на страницу

Вот здесь я бы как раз и оставила наше существующее видео.

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

Перед ним добавим короткую подводку:

Иногда один короткий ролик объясняет взаимодействие дизайна, контента и пользователя лучше десятка абзацев. Главное — чтобы видео действительно дополняло страницу, а не появлялось на ней по принципу «у нас ещё место осталось».

И сразу после неё оставляем твой блок как есть:

Google отдельно рекомендует размещать значимое видео в заметном и доступном месте страницы и следить, чтобы оно нормально работало на мобильных устройствах.

Когда видео лучше не вставлять

Видео не обязано жить в каждой статье.

Оставляем его, если оно:

• дополняет материал;
• объясняет;
• демонстрирует;
• удерживает внимание по делу.

А вот если ролик просто повторяет текст, грузится вечность или начинает самостоятельно орать из динамиков — пожалейте пользователя.

Автовоспроизведение со звуком всё ещё прекрасный способ заставить человека закрыть вкладку быстрее, чем поисковый робот успеет сказать «индексация».

Текст должен быть написан для человека, но понятен роботу

Эпоха текстов вроде:

SEO и веб-дизайн — это SEO для веб-дизайна, потому что веб-дизайн и SEO…

к счастью, почти закончилась.

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

Полезный текст обычно сам приобретает хорошую SEO-структуру:

• понятный заголовок;
• короткое вступление;
• логичные разделы;
• примеры;
• списки там, где список действительно удобнее;
• ответы на очевидные вопросы;
• ссылки на связанные материалы.

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

Title и Description: обещание ещё до входа на сайт

До того как человек увидит дизайн страницы, он может увидеть её в поисковой выдаче.

И здесь работают Title и Description.

Title должен понятно объяснить тему страницы и отличать её от остальных материалов сайта.

Description — коротко показать, зачем человеку вообще сюда заходить.

Не нужно пытаться вместить в них весь бизнес-план.

Лучше ясное:

SEO и веб-дизайн: как совместить красоту и продвижение

чем:

SEO веб-дизайн сайт продвижение оптимизация дизайн SEO лучший сайт

Во втором случае кажется, что клавиатура упала на SEO-специалиста.

ALT помогает и доступности, и поиску

ALT прежде всего описывает содержание изображения.

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

Поэтому пишем по сути.

Не:

картинка сайта

а:

Пример адаптивного дизайна интернет-магазина на смартфоне и ноутбуке

И всё. Никакого ритуального заклинания из двадцати ключей.

Внутренняя перелинковка: не оставляйте страницы сиротами

Хорошая статья редко существует совершенно отдельно от всего сайта.

Если вы рассказываете о скорости — дайте ссылку на подробный материал о скорости.

Упомянули sitemap — ведите человека к инструкции.

Говорите о поведении пользователя — покажите материал о поведенческих факторах.

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

Главное — связывать страницы по смыслу, а не потому, что SEO-плагин требует куда-нибудь поставить ещё одну ссылку.

Robots.txt и Sitemap: дизайн закончился, но работа сайта — нет

Пользователь этих файлов никогда не увидит.

А поисковый робот увидит.

robots.txt помогает управлять сканированием URL, а sitemap.xml сообщает поисковикам о страницах сайта.

Здесь главное правило удивительно простое:

не закрыть случайно то, что мы год пытались продвигать.

Особенно после переноса сайта, изменения структуры, редизайна или массовой работы с URL стоит проверить индексацию ещё раз.

URL тоже должен быть человеческим

Сравните:

site.ru/?page=3847&id=19&x=abc

и

site.ru/seo-i-veb-dizajn/

Второй адрес хотя бы сообщает, куда мы попали.

Хороший URL обычно:

• короткий;
• понятный;
• постоянный;
• соответствует содержанию страницы.

А самое важное правило для уже существующих страниц:

не менять URL просто ради красоты.

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

А если страница исчезла — встречайте 404

404 сама по себе не катастрофа.

Катастрофа начинается, когда пользователь упирается в неё и больше не понимает, что делать.

Хорошая страница 404 может:

• объяснить, что произошло;
• предложить перейти на главную;
• показать поиск;
• дать ссылки на популярные разделы.

Даже ошибка — часть пользовательского опыта.

И это прекрасное место, где веб-дизайнер может немного пошутить вместо унылого:

Error 404.

Самое важное в SEO и веб-дизайне — человек

Можно долго обсуждать алгоритмы, метрики, микроразметку и роботов.

Но полезный принцип гораздо проще:

не мешайте человеку получить то, зачем он пришёл.

Страница должна быстро открыться, быть понятной, читаться на любом экране и не заставлять пользователя воевать с интерфейсом.

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

И здесь SEO и веб-дизайн наконец перестают спорить.

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

Короткий чек-лист перед публикацией

Проверьте:

• сайт нормально работает на смартфоне;
• главное содержание появляется быстро;
• кнопки и ссылки понятны;
• заголовки выстроены логично;
• изображения оптимизированы;
• ALT описывает картинку;
• видео не ломает мобильную версию;
• Title и Description соответствуют странице;
• есть внутренние ссылки;
• URL не меняется без причины;
• важная страница доступна поисковому роботу;
• человеку понятно, что делать дальше.

Если всё совпало — поздравляю.

Вы только что сделали SEO, почти не произнося страшного слова «оптимизация».

SEO и веб-дизайн: что в итоге

Не нужно выбирать между красивым сайтом и сайтом, который умеет продвигаться.

Хороший современный веб-дизайн уже включает скорость, адаптивность, доступность, структуру и заботу о пользователе.

А хорошее SEO давно не сводится к ключевым словам и мета-тегам.

Их общая точка — понятный, быстрый и полезный сайт.

Делайте красиво.

Но не заставляйте робота гадать, что вы нарисовали.

И, пожалуйста, не заставляйте человека разбираться в этом вместо робота. 😺

FAQ: частые вопросы про SEO и веб-дизайн

Читайте наши другие статьи: «Вдохновляйся утонченной Францией, выразительной Россией и палитрой Pantone. как цвет преображает веб-дизайн»