- html5css.dev
- SEO
- SEO продвижение
- Прототипирование
- Общие сведения о прототипировании
Общие сведения о прототипировании
Прототип — это ответ на вопрос «что должно быть на странице и в каком порядке». Он делается после семантики и до дизайна, и именно на нём дешевле всего исправлять ошибки.
Что такое прототип и зачем он
Прототип — схема страницы: какие блоки на ней есть и в каком порядке идут. Без оформления, без картинок, без подобранных шрифтов. Его задача — зафиксировать состав и приоритет.
| Этап | Что решается | Цена изменения |
|---|---|---|
| Семантика | Какие страницы нужны | Минуты |
| Прототип | Что на странице и в каком порядке | Минуты |
| Дизайн | Как это выглядит | Часы |
| Вёрстка | Как это работает в браузере | Дни |
| После запуска | Переделка на живом сайте | Дни плюс риски |
Отсюда вся ценность: ошибка, найденная на прототипе, стоит минуту, та же ошибка после вёрстки — несколько дней.
Прототип начинается с интента
Состав блоков определяется не вкусом, а тем, зачем человек пришёл. Разбор интентов — в уроке о семантическом ядре.
| Интент | Первый экран должен дать |
|---|---|
| Купить конкретное | Товар, цену, наличие, кнопку заказа |
| Выбрать из многих | Ассортимент, фильтры, цены, сортировку |
| Заказать услугу | Что входит, цену или вилку, срок, способ связаться |
| Разобраться | Прямой ответ на вопрос |
| Сравнить | Таблицу сравнения |
| Найти рядом | Адрес, часы работы, карту, телефон |
Как проверить состав блоков
Тот же приём, что и для контента: посмотреть, что уже в топе.
- Откройте 5–7 страниц из топ-10 по целевому запросу.
- Выпишите блоки каждой сверху вниз.
- Сведите в таблицу: строка — блок, колонка — конкурент.
- Блоки у большинства — обязательные.
- Блоки у одного-двух — возможность выделиться.
- Чего нет ни у кого, но пользователю нужно, — ваше преимущество.
Типовая структура коммерческой страницы
- Заголовок H1 — что это за страница.
- Первый экран — суть предложения, цена или вилка, целевое действие.
- Основное содержание — товары, характеристики, состав услуги.
- Ответы на возражения — гарантии, условия, сроки.
- Доказательства — примеры работ, отзывы, сертификаты.
- Текст для поиска и человека — описание, отвечающее на подзапросы.
- Повторное целевое действие — форма или кнопка.
- Связанные страницы — перелинковка по смыслу.
Что прототип должен зафиксировать
- Состав блоков и их порядок — отдельно для мобильной и десктопной версии.
- Что попадает на первый экран.
- Где целевое действие и сколько раз оно повторяется.
- Где заголовки H1, H2 и о чём они.
- Какие данные подставляются динамически: цена, количество, наличие.
- Что показывать, если данных нет: пустая категория, товар не в наличии.
- Где блок перелинковки и по какому принципу он формируется.
Итог
Прототип — самый дешёвый этап для исправления ошибок и единственный, где оптимизатор влияет на состав страницы напрямую. Делайте его после семантики, начинайте с мобильной версии и сверяйте состав блоков с топом выдачи. Дальше — прототипы конкретных типов страниц: карточка товара и страница категории.
Частые вопросы
Зачем SEO-специалисту прототип?
Чтобы состав и порядок блоков соответствовали интенту запроса. Если на коммерческой странице нет цены и способа заказать, никакие тексты и ссылки этого не компенсируют.
Когда делать прототип?
После сбора и кластеризации семантики, но до дизайна и вёрстки. На этом этапе изменение стоит минут, а после вёрстки — дней.
В чём делать прототипы?
В чём угодно: от листа бумаги до Figma. Инструмент не важен, важна проработка состава блоков и их порядка. Для начала хватает списка блоков сверху вниз.
Нужен ли отдельный прототип для мобильной версии?
Да, и начинать лучше с него: на узком экране приходится честно расставить приоритеты. Десктопная версия потом получается расширением мобильной.
Вся глава «Прототипирование» — 3 урока
- Общие сведения о прототипировании
- Разработка карточки товара
- Разработка страницы категории