Прототипирование — значимый этап в веб-разработке, который позволяет определить и сформировать ДНК проекта на ранних стадиях. В последние годы количество онлайн-сервисов и инструментов для прототипирования ощутимо возросло. В этом обзоре представлены 10 сервисов для создания визуальных сайтмэпов.
Прежде чем перейти к описанию инструментов не лишним будет разобраться в терминологии.
Сайтмэп — это структура страниц сайта представленная в иерархической модели. Такая схема помогает оценить объем страниц, которые формируют сайт, а также понять логику их взаимосвязи. Иногда это примитивные по организации и структуре схемы. А порой очень сложные с многоуровневой вложенностью карты. Сайтмэпы помогают планировать распределение содержания и механику навигации будущего сайта.
Пример структуры веб-сайта (Блоки кликабельны)
Рассмотрим три типа сайтмэпов:
Визуальные сайтмэпы(visual sitemap) используются как вспомогательный элемент в планировании, анализе и прототипировании проекта. Сегодня тяжело представить начало работы над проектом без предварительного планирования. Cайтмэп поможет лучше понять механику будущей навигации, оценить объем необходимого контента. Визуальный сайтмэп — важный элемент в выстраивании коммуникации внутри команды разработчиков. Благодаря наглядной структуре сайта обсуждение, оценка и распределение ресурсов значительно упрощается.
HTML cайтмэпы призваны помогать в навигации по сайту. Традиция создавать отдельную страницу с сайэтмэпом считают устаревшей, но тем не менее, такой подход не будет лишним, если проект обладает сложной структурой и многоуровневой вложенностью.
XML сайтмэпы скрыты от пользователей, но при этом важны. Описывая структуру сайта и взаимосвязи страниц, XML сайтмпэмы облегчают поисковым машинам анализ сайта. Следовательно положительно влияют и на ранжирование. В XML сайтмэпах важна чистота описания структуры и используемый синтаксис, поскольку кроулеры поисковых движков не терпят непоследовательности и расхлябанности кода. XML сайтмэпа заменили более старый способ «прямой загрузки в поисковые движки» на специальной отдельной странице. Теперь загрузка сайтмэпа происходит напрямую, или же разработчики просто ждут, пока поисковая машина найдет файл самостоятельно. Обновляя файл сайтмэпа с новой структурой, вы обеспечиваете более быстрое индексирование страниц, по сравнению со стандартной автоматической процедурой поисковой машины.
Можно быстро получить визуальную структуру почти любого веб-сайта (visual sitemap generator) у которого есть файл sitemap.xml (нужно просто ввести адрес сайта). Ее можно сохранить, дополнить, редактировать и делиться.
Зачем нужны визуальные сайтмэпы?
Планирование и прототипирование сайта уже давно стали стандартом индустрии. Чаще всего сначала строится майндмэп проекта. Делается это, чтобы определить главные и второстепенные элементы будущего сайта, а также задачи, которые сайт или сервис будет решать.
На следующем этапе планируется подробная иерархия страниц, их структура. Этот этап требует осмысления и обсуждения. Поэтому такой прототип должен быть понятен всем участникам процесса (программистами, дизайнерам, разработчикам, контент-менеджерам). Формализованная структура сайта (сайтмэп) становится отправной точкой.
Octopus.do
Сервис c минималистичным и свежим подходом в дизайне интерфейса, запущенный в 2019 году. Без лишних деталей и довесков Octopus работает быстро, а чистый визуальный язык располагает к работе.
Основная идея проектирования сайтмэпов в Octopus заключается в формировании страниц из блоков и вайрфреймов низкой точности (low fidelity wireframes). Такие конструкции наглядны и призваны дать подробное представление о структуре будущей страницы.
Протестировать Octopus.do возможно без регистрации. Зарегистрировать профиль понадобится только в момент сохранения проекта. Также можно посмотреть простое и понятное видео о проекте.
Интуитивно понятный интерфейс не перегружен элементами и анимацией. Хотя отдельные пиктограммы могут показаться слегка мелковаты. Создание и добавление блоков происходит быстро и с помощью очевидной механики.
Есть и более удобный способ добавления блока — достаточно нажать Enter, и в нижней части страницы появится новый блок. Такой метод позволит быстро заполнять содержание с использованием одной лишь клавиатуры. Drag’n’drop работает предсказуемо и быстро.
Блокам могут быть присвоены цвета из заданной палитры цветов:
Пользователям платных подписок Octopus.do доступен экcпорт сайтмэпов в PNG и PDF. С бесплатной подпиской можно делиться прямой ссылкой на проект. При этом внешние пользователи смогут вносить изменения в сайтмэп, что упрощает командную работу.
Организация информационных слоев и разделов сервиса открывается в аккуратных поп-апах. Благодаря этому складывается впечатление, что пользователь не покидаете рабочее пространство минималистичного редактора.
Функция добавления текстового описания к блокам, будет полезной для планирования контента в проекте. Поп-ап вызывается нажатием на пиктограмме документа в правой части блока:
В процессе сборки контента часто возникает необходимость быстро оценить местоположение визуальных материалов (фотографии, иллюстрации). Функция добавления изображений поможет справиться с этой задачей:
Кстати, с помощью добавления картинок в структуру можно вставлять полноценные макеты дизайна страниц по мере их готовности.
Отличительная особенность Octopus — наличие функции Estimate. Интерфейс реализован в виде выезжающей панели, которая содержит таблицу-калькулятор для оценки стоимости работ. И при известной часовой ставке за конкретную экспертизу можно оценить временные затраты и бюджет проекта.
В распоряжении пользователей функции дублирования страниц в иерархии и создание копии проекта. Контроль над дизайном сайтмэпа: настраиваемые стили бордеров страниц и стилизация под рамки смартфона, а также усовершенствованный механизм командной работы.
Резюме
Рациональный набор инструментов и интеллигентный дизайн интерфейса, отвечающий духу времени. Регулярные обновления и улучшения функционала от команды Octopus, делают сервис привлекательным и, безусловно, полезным.
Стоимость, подписка: бесплатный план предусматривает 1 активный проект. Платные подписки от 8 $ в месяц.
Простота использования: для начинающих и пользователей среднего уровня
Дизайн: ★★★★☆
Командная работа: ✓
Экспорт: ссылка, PDF и PNG (только для платных пользователей)
Gloomaps
Отсутствие необходимости регистрироваться — преимущество сервиса Gloompas. Пользователь сразу же оказывается в рабочей среде с минималистичным дизайном. Интерфейс интуитивен и помогает втянуться в процесс довольно быстро. Добавление и удаление блоков сайтмэпа происходит с понятной и предсказуемой механикой.
Возможность настраивать цвет каждого отдельного блока, задавать размер шрифта — удобный функционал, который помогает формировать акценты в сайтмэпе.
Отдельно стоит отметить настройки вида: Map View, Matrix View и Outline. В зависимости от структуры и масштаба проекта можно выбрать способ отображения сайтмэпа.
В проектах с громоздкой структурой и многоуровневой вложенностью удобной окажется функция сворачивания и разворачивать группу страниц. Gloomaps — бесплатный сервис, но не без ограничений. Ссылка на проект хранится 14 дней, и каждое новое посещение страницы проекта продлевает доступность ссылки на следующие 14 дней. Насколько известно, создавать приватные проекты нельзя. Функционал для автоматической генерации сайтмэпов не предусмотрен.
Для тех, кто будет пользоваться сервисом регулярно, полезно использовать шорткаты, которые описаны в выезжающей панели меню. А функции экспорта в различные форматы расширяют возможности делиться созданным сайтмэпом.
Резюме
Бесплатный сервис с оптимальным набором функций и широкими возможностями экспорта готового проекта.
Стоимость, подписка: бесплатно
Простота использования: подходит для начинающих
Дизайн: ★★★☆☆
Командная работа: ✓
Экспорт: ссылка, PNG, PDF, XML
Flowmapp
Наглядный и насыщенный шаблонами Flowmapp помогает создавать как визуальные сайтмэпы, так и планировать потоки пользователей.
Сперва необходимо зарегистрироваться. Проект можно:
- начать с чистого листа
- импортировать из XML файла
- расширить существующий шаблон
В заготовленных шаблонах найдется три типа проектов: e-Commerce, корпоративный проект и новостной портал.
В процессе знакомства с сервисом в правом нижнем углу будут регулярно появляться полезные рекомендации и советы относительно инструментов и особенностей рабочей среды.
Анимации и реакции элементов интерфейса помогают втянуться в процесс и научиться базовым манипуляциям. Удобно реализованы групповые выделения страниц для удаления или смены лейбла.
Одно из основных преимуществ — наглядные шаблоны страниц. Библиотека шаблонов покрывает большинство возможных информационных паттернов — незаменимая и наглядная фича в подготовке и планирования контенте для будущего сайта.
А для тех, кому в первую очередь важна структура, можно переключиться в компактный вид с одними заголовками.
Что касается навигации, то к стандартному набору функции добавлена довольна удобная механика — Project Map. Project Map сочетает в себе как визуальную, так и механическую ценность — перемещение по структуре больших проектов упрощается.
К каждой из страниц проекта можно добавлять расширенное описание и прикреплять отдельные файлы. Эта фича полезна в процессе наполнения сайта контентом.
Широкие настройки экспорта в SVG и PNG форматы позволяют выбрать оптимальный вариант и даже задать разрешение изображения на выходе.
Резюме
Сервис с продуманным набором функций и приятным интерфейсом. В бесплатной подписке функции доступны в широком спектре. Подойдет для эффектной и качественной презентации проектов сайтмэпов.
Стоимость, подписка: бесплатный план предусматривает 1 активный проект и 100 Мб места, без ограничении по коллабораторам. Платные подписки от 8 $ в месяц при годовой оплате.
Простота использования: для начинающих и пользователей среднего уровня
Дизайн: ★★★★★
Командная работа: ✓
Экспорт: ссылка, PNG, SVG, PDF, DOCX
Writemaps
Относительно простой в организации Writemaps помогает проектировать сайтмэпы и планировать контент проекта. Для того, чтобы протестировать сервис, придется зарегистрироваться.
С точки зрения дизайна интерфейс можно описать, как «народный» или незамысловатый. Бесплатный план обеспечивает доступ к части функции: 3 активных сайтмэпа c 50 страницами. Остальные фичи доступны платным пользователям.
Часть платного функционала включает возможность выделять страницы проекта цветом, объединять и добавлять к ним контент, создавать разделы, делиться проектом и экспортировать сайтмэп в PDF. Хотя для бесплатных планов предусмотрен экспорт в CSV и XML.
Стоит отметить, что переключение между сайтмэпом и содержательной частью реализовано удобно и наглядно. В ускорении работы поможет список шорткатов.
Резюме
«Только самое необходимое» именно так можно охарактеризовать подход к функционалу бесплатной версии. Платная подписка подойдет для пользователей, которые планирую распределение контента, помимо общей структуры сайта.
Стоимость, подписка: бесплатный план предусматривает 3 активных проекта с ограничением в 50 страниц. Платные подписки от 14.99 $ в месяц.
Простота использования: для начинающих и пользователей среднего уровня
Дизайн: ★★☆☆☆
Командная работа: ✓
Экспорт: CSV, XML, PDF и ссылка (только для платных пользователей)
Rarchy
Beta-версия проекта обладает скромным набором функций. Сайтмэп строится как с нуля, так и в генеративном порядке по ссылке на сайт.
На момент публикации обзора механика добавления страниц устроена следующим образом — необходимо вызвать контекстное меню, кликая на блоки страницы.
Никаких дополнительных настроек отображения блоков не предусмотрено. Тем не меннее drag’n’drop работает понятно. А форматы отображения схемы позволяют переключить проект в вид биоморфной схемы. Возможно, такой вид покажется наглядным и уместным.
На момент публикации доступен экспорт только в CSV-файл. Поделиться прямой ссылкой нельзя.
Стоимость, подписка: бесплатно
Простота использования: для начинающих
Дизайн: ★★☆☆☆
Командная работа:
Экспорт: CSV
Visual Sitemaps
В сервисе Visual Sitemaps сайтмэпы строятся на основе уже запущенных проектов автоматически. Инструмент кроулит структуру сайта и делает полноразмерные скриншоты страниц. При этом пользователь определяет количество скриншотов и глубину кроулинга в уровнях. Пользователям бесплатных подписок доступна глубина не более 2-х уровнейю.
Процесс кроулинга относительно быстрый. Но если проект объемен, то будет разумно запустить процесс и отвлечься на другие задачи, а сервис сообщит по почте о готовности сайтмэпа автоматически. Предусмотрен экспорт проекта в PDF.
На момент публикации дополнительных функции не так много, но анонсированы комментарии к скриншотам страниц, возможность реорганизовывать структуру проекта и защищать проекты паролем.
Резюме
Visual Sitemaps будет удобен для предварительного анализа проекта. Особенно, если есть необходимость посмотреть и оценить устройство страниц.
Стоимость, подписка: бесплатный план предусматривает регистрацию одного пользователя и 50 скриншотов с ограничение глубины кроула до двух уровней. Платные подписки от 29 $ в месяц.
Простота использования: для начинающих и пользователей среднего уровня
Дизайн: ★★★★☆
Командная работа: ✓
Экспорт: ссылка, PDF
Slickplan
Многофункциональный сервис Slickplan включает в себя проектировщик сайтмэпов, инструмент по созданию диаграмм и потоков. Широкий набор инструментов планирования контента и дизайн шаблоны.
Среда устроена логично, рабочая зона четко отделена от элементов навигации. А панель навигации наследует логику классических desktop-приложений. Сайтмэп можно построить с нуля или же импортировать: возможно использовать XML и текстовые файлы, а также встроенный кроулер.
Механика манипуляции с блоками интуитивно понятна. Добавление новых страниц происходит быстро, а drag’n’drop объектов позволяет менять порядок и иерархию. Настройки каждого элемента (страницы, блока) сайтмэпа включают:
- Добавление контента (текстовый и мультимедиа)
- Добавление заметок
- Выбора типа страницы
- Распределение дизайн шаблона
- Диаграмы
- Добавление ссылки
В Slickplan стилизовать сайтмэп можно не только с помощью заготовленных цветовых схем, но и индивидуально. Настройки найдутся во вкладке Styles верхней панели инструментов.
Командная работа реализована подробно. Помимо пользователей с правами редактора, можно подключать пользователей права которых ограничены просмотром проекта. А раздел с комментариями поможет вести обсуждения проекта онлайн.
Сервис предусматривает подключение Google Analytics. Это отличительная и полезная особенность Slickplan. A интеграция со сторонними сервисами (Basecamp, Slack и другие) позволяет шерить проект в удобном формате. Проект может быть защищен паролем.
Конечно, с таким набором функций не стоит ожидать бесплатных подписок. 30-дневный триальный период подведет к выбору подходящего плана от 9.99 $ в месяц.
Резюме
Богатый набор функций и продуманный интерфейс. Огромный набор возможностей и настроек экспорта.
Стоимость, подписка: 30-дневный триальный период. Платные подписки от 9.99 $ в месяц.
Простота использования: для пользователей среднего и продвинутого уровней
Дизайн: ★★★★☆
Командная работа: ✓
Экспорт: ссылка, PDF, EPS, HTML, CSV, TXT, DOCX, Slickplan Sitemap XML
Dynomapper
Чтобы осмотреться в Dynomapper придется создать аккаунт. Доступен 14-дневный тестовый период. Знакомство c сервисом начнется с наглядного видео-эксплейнера.
Как и в продвинутых визуальных сайтмэп сервисах пользователя предлагается начать проект с нуля или же воспользоваться экспортом. Кроулинг, к слову, тоже есть.
Стоит отметить, что дизайн среды сдержанный и консервативный. А процесс создания сайтмэпа больше похож на классическое взаимодействие с Explorer (Win) или Finder (Mac). Структура сайта, в отличие от сервисов описанных ранее, отображается в виде, напоминающем дерево файлов.
Компактно и придется по вкусу тем, кто привык к такому взаимодействию. Хотя режим Preview отображается уже в виде блок-схемы, и предусматривает 4 дополнительных вида отображения.
Настройки свойства и функций элементов удобно расположены в правой панели вкладок:
- Page (Расширенная информация о странице)
- Content (Планирование (добавление) текстового и мультимедийного контента)
- Analytics
- Comment
Приватный проект будет доступен только пользователям подключенным к аккаунту.
Гибкие настройки экспорта в PDF позволяют выбрать формат (размер) перед сохранением. Дополнительно пользователь определяет и ограничивает количество уровней вложенности для экспорта.
Отдельные манипуляции и действия требуют более подробного изучения раздела помощи.
Резюме
Инструмент производит основательное впечатление и скорее всего подразумевает более глубокую проработку проектов и работу с контентом.
Стоимость, подписка: 14-дневный триальный период. Платные подписки от 49 $ в месяц.
Простота использования: для пользователей среднего и продвинутого уровней
Дизайн: ★★☆☆☆
Командная работа: ✓
Экспорт: ссылка, PDF, CSV
Visual Site Mapper
Бесплатный кроулер, генерирует стайтмэп существующего сайта автоматически. Результат кроулинга — схема связей страниц сайта. И в отдельных случаях результат может оказаться масштабным.
Создатели сервиса выложили исходный код на Github (https://github.com/alentum). Кроулер бережно сохраняет историю запросов.
Стоимость, подписка: бесплатный
Простота использования: для начинающих
Дизайн: ★★☆☆☆
Creatly
Creatly заботливо создал демосреду, чтобы тестировать сервис без регистрации. Создание сайтмэпов — лишь часть функционала инструмента. Creatly предназначен для визуализации различных информационных структур.
В тестовой среде создания сайтмэпов уже создан демопроект. Пример призван помочь разобраться в базовой механике, и справляется с этой задачей.
Drag’n’drop нагляден: перетаскивание элементов сопровождается наглядными связями страниц и объектов. Редактирование страниц, удаление объектов и связывающих линий работает так, как в привычном векторном редакторе. Поэтому для дизайнеров механика будет понятна и близка.
В раскрываемой правой панели собраны настройки стилей и дополнительной информации. Сетка и привязка к ней — удобная фича. Возможно выбирать шрифты, определять выравнивание текста в блоке и т.д. Насыщенная стилями палитра поможет задавать акценты в сайтмэпе.
Размер документа в пикселях — любопытная фича. Пользователь всегда в курсе разрешения картинки еще до того, как произведет экспорт.
Резюме
Creately по механике работы наиболее близок к графическим редакторам. Функции сервиса позволяют создавать не только сайтмэпы, но и множество других диаграмм и блок-схем.
Стоимость, подписка: бесплатный план предусматривает 5 публичных документов и возможность добавления до 3-х коллабораторов. Платные подписки от 5 $ в месяц.
Простота использования: для пользователей среднего и продвинутого уровней
Дизайн: ★★★★☆
Командная работа: ✓
Экспорт: ссылка, PNG, JPG, SVG
***********************************
P.S.
Чтобы было легче выбрать, вот сравнительная таблица по всем сервисам (в самом конце) и немного больше скриншотов.
Часто можно столкнуться с ситуацией, когда владелец бизнеса делает сайт просто так, как ему на тот момент задумалось. Выходит красивый ресурс, но совершенно не готовый к продвижению. И когда бизнесмен (обычно спустя несколько месяцев) обращается к оптимизатору (потому что ожидаемого потока заказов с сайта нет), то тот, проведя аудит, заявляет — нужно всё переделывать. И в первую очередь нужна грамотная структура сайта.
И всё правильно, потому что только хорошо продуманная структура сайта — залог его успешного продвижения. Мало того — она обеспечит отличный пользовательский опыт. Простыми словами — сайтом с хорошей структурой будет удобно пользоваться вашим посетителям.
Реклама: 2VtzqvSTRwm
И заниматься продумыванием, проработкой схемы сайта нужно с самого начала. Это самый первый фронт работ по сайту, после сбора семантического ядра. И сделать это вы можете и сами. С чего начать, какие структуры бывают, какие ресурсы использовать — узнаете в этой статье.
Читайте также: Как сделать удобную навигацию по сайту
Что такое структура сайта и зачем она нужна
Структура сайта — это схема размещения его основных разделов и страниц относительно друг друга. Это план-схема, которая показывает, каким образом строится сайт, логическая связка его страниц.
Такой план-схема обычно изображается графически, в виде блоков, связанных стрелочками.
Не стоит путать внешнюю и внутреннюю структуру. Внешняя — это макет страницы, расположение блоков на ней. Внутренняя же отображает категории и принадлежность отдельных страниц или материалов. Вот об этой, внутренней структуре, и пойдет речь.
Структура сайта зависит от того, какой вид сайта вообще планируется делать. Если это сайт-визитка, то здесь план-схему сделать проще всего. Здесь будет главная страница, а от неё идут ссылки на разделы:
У коммерческого сайта схема будет гораздо сложнее. Тут обычно три уровня страниц: главная страница сайта, затем категории, которые описывают виды деятельности, и третий уровень — подвиды.
У информационного сайта будет похожая структура. Только от главной будут идти основные разделы. А каждая статья — это будет уже страница, на которую можно попасть в том числе и с главной. Причем каждый раздел практически не имеет информационной ценности, это страница со ссылками на статьи. У коммерческого же сайта каждый раздел содержит в себе важную информацию.
Что касается интернет-магазина, это сама сложная по своей организации структура. Тут будет главная страница, категории, подкатегории и карточки товаров. Причем сразу нужно определить, какие из качеств товара будут основными, а какие — второстепенными. Основные станут подкатегориями, второстепенные — пойдут в фильтры. Например, обувь можно разделить на подкатегории женская, детская и мужская. Кожаная или замшевая – уже может быть фильтром. Точно как и цвет – красный, чёрный, синий — это фильтр, делать для этих свойств отдельные категории нет смысла.
Хорошая структура сайта делает его удобным не только для посетителей. Поисковым роботам она тоже облегчит работу, в итоге не будет проблем с индексацией страниц.
Статья в тему: Юзабилити-аудит сайта
Виды структур сайта
Существует несколько видов структур сайта:
Линейная
Самая простая структура — здесь каждая страница ссылается на другую, одна за одной. Пользователь проходит через весь сайт по одному пути — от начала до конца. Такую структуру имеют лендинги, сайты-портфолио, презентации. Тут основная задача — провести пользователя по чёткому пути от начала сайта до конца, не давая свернуть с него.
Эта же структура может быть и с ответвлениями. Используется, где нужно познакомить пользователя с несколькими продуктами, но навигация по сайту тоже идёт постранично.
Читайте также: ТОП-10 хостингов для вашего сайта
Блочная
Эта структура встречается крайне редко, потому что подходит далеко не для всех сайтов. В основном — для тех, кто презентует один продукт. Каждый блок описывает какое-то преимущество, и все страницы ссылаются друг на друга. Потому для продвижения такой сайт практически готов, дело за контентом.
Деревовидная
Это самый распространённый вид структуры сайта, и понятно почему — она позволяет чётко задать иерархию страниц, связать их с помощью хлебных крошек. Эта схема оптимальна для продвижения сайта, и большинство ресурсов в интернете имеют в своей основе именно её.
Это интересно: Продающая структура Landing Page
Пример разработки структуры сайта под SEO продвижение
На самом первом этапе я бы рекомендовала провести анализ сайтов конкурентов в своей нише. Изучите их структуру — вы увидите, что у большинства она похожая. И раз эти сайты в топе, значит, она является оптимальной. Вы можете изучить структуру, пройдясь по разделам меню. Задание упрощается, если у сайта открыта карта сайта. Тогда вся его схема будет у вас перед глазами.
Подумайте, какие из разделов вам не нужны, или какие вы можете добавить, потому что они будут интересны вашим клиентам.
Постарайтесь сделать структуру сайта максимально естественной. Продумайте, какие у вас будут разделы и категории. Сложнее всего как раз с категориями. Важно построить архитектуру, чтобы категория потом не была пустой, или содержала всего 2-3 материала. Но в то же время они и не должны быть слишком большими – в таком случае проще сделать ещё один раздел.
Если вы собираетесь продвигать сайт с помощью поисковой оптимизации, то схему сайта лучше всего начинать прорабатывать после тщательных подготовительных работ. В частности, после сбора семантического ядра и его кластеризации. Когда вы увидите, какие запросы по вашей тематике более востребованы, у вас не останется вопросов насчет того, какие категории сайта нужно создать. В результате вы получите сайт, который будет не только отвечать интересам пользователей, но и уже готов к продвижению.
Теорию разобрали. Теперь давайте посмотрим на практике. Попробуем продумать структуру небольшого коммерческого сайта компании, которая торгует строительными материалами. Исходим из того, какие услуги предлагает компания, и какие стройматериалы она реализует.
1. Собираем и кластеризуем семантическое ядро.
Для этого можно использовать специальные программы – например, KeyCollector. Собираем все ключи, убираем ненужные нам, или которые не относятся на самом деле к нашим услугам (например, мы не реализуем стройматериалы оптом; ключ «краска оптом» уже нам не нужен).
Теперь разносим ключи по кластерам (группам). При кластеризации думаем, логически размышляем, куда какой запрос отнести. В результате у вас получится несколько групп запросов, с которыми уже можно работать дальше.
Более подробно: Как составить семантическое ядро сайта
2. Прорабатываем непосредственно структуру.
Любой сайт начинается с главной страницы. С неё уже мы будем отправлять в отдельные категории нашего сайта.
Из категорий (если судить по ключам) нам нужны:
- каталог строительных материалов.
- услуги.
- доставка и оплата.
- о компании.
- контакты.
Каталог и услуги будут включать в себя подкатегории.
У каталога это будут:
- строительные смеси.
- кирпич.
- кровельные материалы.
- пиломатериалы.
- лакокрасочные материалы.
- декоративная штукатурка.
Услуги будут включать в себя подкатегории:
- грузчики.
- вывоз мусора.
Причем в услугах можно и не делать подкатегории, а сделать перечень услуг на одной странице. Решаем с оглядкой на семантическое ядро. Если ищут «услуги строительной компании», но не ищут «грузчики строительная компания» (например), то можно и не разбивать категорию на подкатегории. Если ключи, которые относятся к данной услуге, достаточно востребованы, имеет смысл делать под них и продвигать отдельную страницу.
3. Визуализация.
Сделать это можно в любой из программ, о которых речь пойдет ниже. Да даже просто набросайте на листке бумаги — даже такой вариант может подойти, это лучше, чем ничего.
Итак, у нас вышло:
Читай также: Прототипирование сайта
Программы для создания структуры сайта
Чтобы проработать схему сайта, в первую очередь вам понадобятся программы для сбора ключевых слов. Я уже упомянула выше KeyCollector, это одна из лучших программ в этом отношении.
Далее вам нужно будет построить структуру сайта. Это можно сделать:
Word или Excel
Например, схемы в этой статье я просто рисовала в Ворде. Не скажу, что это самый простой и лёгкий способ, но если сайт простенький, вам возможностей программы хватит с головой.
Draw.io
Тут много возможностей для рисования разных схем. И все что нужно чтобы её использовать — активный аккаунт в Google. В самой программе уже есть готовые шаблоны схем, останется только подогнать под себя. Готовая схема сохранится на Гугл Диске.
Xmind
Программа для визуализации ментальных карт, которая поможет вам быстренько набросать даже сложную схему сайта, указав все связи между страницами.
Помните, что без создания структуры сайта не получится сделать готовый к продвижению и удобный для пользователей ресурс. Но приступать к её созданию (если вы собираетесь продвигать сайт с помощью SEO) нужно только после проработки семантического ядра.
Полезные ссылки:
- ТОП-10 конструкторов для создания сайта
- Курсы по Backend-разработке
- 10 лучших CMS для создания сайта
Создание структуры сайта, как строительство фундамента — без него дом поставить можно, но насколько он будет надежным, большой вопрос. Сайт без продуманной структуры тоже будет худо-бедно работать, но о его эффективности можно забыть. Пользователи и роботы не понимают, куда им идти, страницы плохо индексируются, поведенческие факторы падают из-за большого процента отказов, поисковики не пускают ресурс в топ.
В этой статье мы расскажем о видах структур, рассмотрим их пошаговое создание для web-сайтов, разберем ошибки и дадим дельные советы для работы.
Что такое структура сайта
Структура — это логика построения сайта, иерархическая организация взаимосвязей страниц. Ее проще всего представлять графически — в виде блок-схемы или майнд-карты, где наглядно видна иерархия, уровни вложенности страниц и их связи.
Технически структура отражена в URL. У каждой страницы есть уникальный адрес, в котором прописан путь к ней с главной. Например, из адреса https://www.web-dius.ru/seo-prodvizhenie/semanticheskoe-yadro/ понятно, что страница услуги по составлению семантического ядра находится в разделе Продвижение на нашем сайте. Вложенность в URL обозначается слэшами (/).
При грамотной структуре ни одна страница ресурса не подвешена в воздухе, и ко всем, даже самым отдаленным закоулкам можно перейти хотя бы в три клика. Пользователь должен с ходу разобраться, как тут у вас все устроено, где он находится сейчас и куда отсюда можно перейти. Без структуры сайт становится запутанным лабиринтом. Пользователь быстро найдет из него выход, нажав на крестик на вкладке в своем браузере, а поисковый краулер будет блуждать и тормозить индексацию.
Преимущества правильно составленной структуры сайта
Перед созданием сайта необходимо продумать его структуру, это база для успешного продвижения в будущем
Здесь работает знаменитое «правило Парето»: 20 % прилагаемых усилий дают 80 % результата, иначе говоря, для достижения большей части задуманного достаточно небольших, но направленных усилий.
Собрав качественное семантическое ядро и составив четкую структуру сегодня, вы обеспечиваете своему сайту хороший задел и предотвращаете массу проблем с ним завтра.
- Ясная логика позитивно отражается на пользовательском опыте. Посетитель понимает навигацию, ему удобно пользоваться вашим ресурсом, поэтому он не сбегает, роняя тапки, а остается здесь надолго. Так структура улучшает поведенческие факторы, влияющие на ранжирование в поисковых системах.
- Чем прозрачнее и логичнее структура, тем быстрее обходит страницы поисковый робот. Это влияет на скорость индексации. Кривоколенные сайты долго индексируются, а на грамотно спроектированном ресурсе новые страницы могут попадать в индекс уже на следующий день после публикации.
- Переделка фундамента уже запущенного проекта — дело муторное и дорогое. Помимо затрат на реорганизацию, придется пережидать еще и вынужденное падение трафика, на время, пока роботы распознают и оценят новую структуру.
- Структурная схема веб-сайта — это готовый бизнес-план по работе над своим ресурсом. Вы понимаете, какой объем контента вам необходим, можете спрогнозировать расходы на развитие. Логичная структура дает возможность без проблем добавлять нужные разделы по мере роста бизнеса.
Виды структур
Говоря о разработке модели сайта, нужно понимать различия между внешней и внутренней структурой.
- Внешняя — это композиция страницы, организация элементов на экране, графический макет.
- Внутренняя — это организация страниц внутри сайта: принадлежность к категориям или разделам, иерархия, схема переходов.
Представим, что сайт — это здание театра. Здесь есть своя система организации пространства: гардероб, холл, проходы в партер и ложи, буфет и туалеты. Планировка здания — это и есть внутренняя структура, чем она продуманней, тем комфортнее зрителям во время визита в театр. Интерьер, оформление навигационных табличек, капельдинеры, подсказывающие дорогу — все это сродни внешней структуре. Внешняя сторона может быть прекрасно оформлена стилистически, но если вы мечетесь в поисках туалета по закоулкам театра, а путь, указанный капельдинером, больше похож на квест, то архитектор явно что-то не продумал.
В идеале внешняя и внутренняя организация пространства вместе работают на комфорт посетителя и формируют положительный пользовательский опыт.
Типы внутренних структур сайта
Пример структуры web-dius.ru
Внутренняя структура — это карта сайта, которую можно представить в виде определенной схемы. Разберем 4 базовых типа структур, отличающихся сложностью и последовательностью взаимосвязей страниц на сайте.
Линейная
Линейная схема веб-сайта похожа на анфилады в зданиях XIX века. Пользователь заходит на Главную и последовательно передвигается через все страницы к последней, обычно к Контактам с формой обратной связи. Портфолио, презентации и другие проекты, цель которых поступательная демонстрация посетителю контента, строятся по этой схеме.
Главный минус такой анфиладной структуры — слишком глубокая вложенность страниц. Продвигается только Главная, поэтому для SEO линейный сайт не подходит.
Линейная с ответвлениями
Та же анфилада, но с потайными комнатами. Пользователь все так же продвигается с Главной к конечной точке маршрута, но с некоторых страниц может зайти на документы с дополнительной информацией.
Здесь остается проблема линейной структуры — слишком глубокая вложенность страниц не годится для продвижения в поисковых системах.
Блочная
В блочной структуре все страницы равнозначны и ссылаются друг на друга. Такая схема хороша для SEO, но слишком специфична по своей логике, поэтому встречается редко. Блочная структура применима для сайтов, описывающих конкретный продукт, где под каждую характеристику делается отдельная страница.
Если продолжать ассоциации с архитектурой, то на ум приходит цирк, где с любой точки одинаково хорошо видна арена, а все здание можно обойти по кругу.
Древовидная
Разработка структуры сайта — это, в большинстве своем, построение древовидной схемы с четкой иерархией. Это уже многоэтажное здание, где верхний этаж — главная страница, с которой спускаются остальные уровни. На сайте с древовидной структурой можно сделать множество веток с разной глубиной вложенности страниц. Здесь хорошо настраиваются хлебные крошки — навигационная цепочка, по которой пользователь легко возвращается на несколько шагов назад.
Для SEO это отличная схема, т.к. каждый блок продвигается по своим запросам. От Главной расходятся основные разделы сайта. У каждого раздела есть свои подразделы, и так дробить можно до бесконечности, но все же ниже четвертого уровня спускаться нет смысла. Слишком глубоко запрятанные страницы плохо индексируются и не котируются поисковиками.
Внешняя структура сайта
Внешняя структура — макет страниц сайта — подчиняется своим жестким правилам. Можно сколько угодно экспериментировать со стилем, метаться от минимализма до убойных спецэффектов, оттачивать юзабилити по всем законам UX-дизайна, но кардинально ломать структуру главной страницы сайта в виде исторически сложившейся схемы нельзя. Пользователи ожидают увидеть на экране определенный набор элементов на закрепленных местах, и если сломать систему, велик шанс, что человек просто сбежит в ночь. Никто не любит, когда его ожидания не оправдываются. Вспомните фильм «Амели», когда героиня доводила до сумашествия противного лавочника, подменяя его тапочки.
Итак, что мы все ожидаем увидеть на сайте?
- Хедер. Шапка в верхней части страницы, где слева расположен логотип, клик по которому возвращает нас на Главную. Дальше идет горизонтальное меню с основными разделами и способ связи: телефон или e-mail.
- Сайдбар. Боковое меню. Может быть и справа, и слева. Здесь размещают элементы навигации, вспомогательную информацию, все, что способно задержать посетителя на сайте и увести его вглубь.
- Центральный блок. Собственно, то мясо, ради которого пользователь пришел на сайт. Основная информация должна быть читабельна, по-человечески сверстана и располагаться на первом-втором экране. Не надо длинных подводок в стиле «Вода — это жидкость для питья, состоящая из атомов водорода и кислорода», если вы занимаетесь развозкой бутылей для офисных кулеров.
- Футер. Подвал в самом низу страницы. Здесь находятся контакты, навигация, правовая и дополнительная информация, кнопки социальных сетей.
Главная страница — это информационный центр, который одновременно и привлекает пользователя, и направляет его по нужному вам маршруту. Здесь вы объясняете, о чем вообще ваш сайт, чем он лучше других и как на нем ориентироваться.
Перечислим обязательные и дополнительные элементы главной страницы:
- навигация;
- УТП (уникальное торговое предложение);
- графический и текстовый контент, разбитый на смысловые блоки;
- конверсионные кнопки (купить, заказать, оставить заявку на просчет и т.п.);
- контакты;
- информация о компании;
- если вы что-то продаете, то покупателя точно будет интересовать доставка и способы оплаты.
Еще одна важная мелочь — правильное оформление 404 страницы, на которую пользователя выбрасывает по битой или некорректной ссылке. Пустая 404-я — трамплин для быстрого вылета пользователя с сайта. Оформляйте ее в стиле своего ресурса и размещайте здесь ссылку на главную.
Как тип сайта влияет на структуру
При создании веб-сайта выбор структуры зависит от его типа и функций.
Визитка
Структура сайта-визитки самая простая и состоит из двух уровней: с Главной пользователь переходит на страницы с более подробной информацией.
Универсальная структура сайта-визитки:
Главная
- Услуги
- Команда
- Достижения
- Контакты
Коммерческий
Схема коммерческого сайта более разветвленная. Здесь от Главной отходят несколько веток-разделов, часть из которых сегментируется на тематические подразделы. Логика подачи информации — от общего к частному. Разделы описывают направления работы компании, а подразделы рассказывают о видах услуг в рамках своего направления. Здесь уместна настройка хлебных крошек.
Структура коммерческого сайта небольшого салона красоты:
Главная
- Стрижки
- Мужские
- Женские
- Детские
- Окрашивание волос
- Тонирование
- Колорирование
- Креативное окрашивание
- Уход за волосами
- Ламинирование
- Лечебные маски
- Маникюр и педикюр
- Классический
- Шеллак
- Услуги визажиста
- Вечерний макияж
- Дневной макияж
- Свадебный макияж
- Наши мастера
- Контакты
Информационный
Создание схемы информационного сайта или блога подразумевает древовидную структуру, где страницы разделов задают тему и представляют собой каталог ссылок на объединенные по смыслу статьи. На странице раздела, в отличие от коммерческих сайтов, может не быть никакой полезной информации. По сути, это подшивка с тематическими материалами.
Структура тематического информационного сайта о достопримечательностях Санкт-Петербурга:
Главная
- Парадный Петербург
- Что построил в Петербурге архитектор Растрелли
- Почему не падает Медный всадник
- Как попасть в Эрмитаж и не состариться в очереди
- Неформальные достопримечательности Питера
- Это странное место Камчатка
- Заброшенные особняки на Английской набережной
- Что делать в Этажах
- Все о пригородах санкт-Петербурга
- Версаль или Петергоф — что круче?
- Исчезающая красота: какие старинные дачи на заливе еще не сгорели.
Информационные сайты бывают нишевыми, посвященными какой-то обозримой проблеме, как в примере выше, а бывают глобальными порталами с обширным тематическим охватом. Например, в мужском журнале есть разделы о спорте, автомобилях, рыбалке, бизнесе, и все они дробятся на более узкие категории: бизнес — это и истории успеха, и тайм менеджмент, и материалы по саморазвитию, автомобильная тема — обзоры новинок автопрома, приемы вождения, разбор ПДД. Чем больше портал, тем разветвленнее его структура и сложнее перекрестные связи между материалами.
Интернет-магазин
Самая сложная структура у интернет-магазинов. Здесь нужно увязать огромную номенклатуру товаров с пользовательскими запросами из семантического ядра и сделать так, чтобы покупатель быстро нашел нужный товар. Карточки товаров, в зависимости от характеристик, относят к определенной категории и подкатегории, но чтобы не плодить бесконечное количество разделов, ставят фильтры для удобного поиска.
Сложность работы над структурой интернет-магазина в том, что нужно проанализировать обширную семантику, выстроить логику разделения товаров на категории таким образом, чтобы покупатель быстро в них сориентировался, и придумать, какие характеристики нужно выносить в подкатегории, а какие отдавать под фильтры.
Упрощенная структура интернет-магазина игрушек:
Главная
- О нас
- Контакты
- Способы оплаты
- Доставка
- Каталог
- Детские игрушки
- Настольные игры
- Фильтр: возраст ребенка, цена
- Мягкие игрушки
- Фильтр: цена
- Куклы
- Фильтр: пупсы, говорящие, Барби, маленькие куколки
- Машинки
- Фильтр: гоночные, грузовики, легковые
- Наборы для творчества
- Картины по номерам
- Фильтр: размер, уровень сложности
- Моделирование
- Подкатегория: корабли
- Подкатегория: танки
- Подкатегория: самолеты
- Фильтр: цена, уровень сложности, бренд
Как построить структуру сайта под SEO
Технологии SEO опираются на содержание и структуру, заложенные на этапе создания сайта. Чтобы ресурс выстрелил, нужно досконально продумать и подготовить материалы для строительства фундамента. Правильнее всего начать работу с анализа конкурентов в топе. Подсматриваем и берем на вооружение организацию разделов и категорий. Дальше процесс проходит 3 важных этапа.
1. Семантика
Сбор семантического ядра и кластеризация запросов — основа основ в создании структуры сайта. Собирать семантику помогут программы типа KeyCollector. Дальше начинается скрупулезная работа по отбраковке ненужных ключей и объединению запросов в смысловые блоки-кластеры. На выходе получается грамотное семантическое ядро, но как его вставить в сайт?
Семантика, разделенная на кластеры, — это подсказка, какие разделы будут востребованы у пользователей. Каждая группа запросов соотносится с разделом сайта, а ключи вписываются не только в тексты на странице, но и в название URL.
2. Проработка структуры
Полученное семантическое ядро, результаты анализа конкурентов, наконец, прайс-лист вашей компании — все это база для разработки структуры сайта и принципов навигации. Нам нужно обобщить логически связанные продукты в один раздел, который потом можно будет дробить на подкатегории, ориентируясь на собранную семантику.
Тематические разделы нужно выстроить в иерархическую систему. На переднем плане стоят приоритетные направления. Если ваша фишка — офсетная печать больших тиражей, то именно эта категория должна возглавлять иерархию, а дополнительные услуги цифровой печати можно опустить ниже.
Структура сайта может меняться в зависимости от целевой аудитории, если такое сегментирование заложено в специфику ресурса. Например, на сайте для родителей можно сегментировать ЦА по возрасту детей и предлагать актуальное содержание отдельно для разных групп: родителей грудничков, младшеклассников или подростков.
Грамотная структура строится с учетом предполагаемого масштабирования. Если ваш бизнес будет расти, то сайт должен безболезненно расти вместе с ним.
3. Визуализация
Важный этап разработки структуры веб-сайта — отрисовка наглядной блок-схемы. Визуализация отлично демонстрирует иерархию, уровни вложенности страниц и сложные взаимосвязи между категориями. Графическую схему можно рисовать руками на бумаге, а можно воспользоваться удобными инструментами.
- mind42.com
Бесплатный онлайн-сервис для рисования интеллект-карт. Есть функция командной работы. - Flowchart Maker
Облачный сервис для построения диаграмм и блок-схем. Для работы нужен аккаунт в Google. Есть готовые шаблоны. - XMind
Программа для построения майнд-карт с приличным функционалом в бесплатной версии.
Ошибки при разработке структуры сайта
- Нет микроразметки хлебных крошек. Навигационная цепочка breadcrumbs показывает, как текущая страница соотносится с общей структурой сайта, и позволяет пользователю легко ориентироваться в пространстве. Это важный навигационный элемент для SEO, т. к. облегчает жизнь и пользователям, и роботам.
- Слишком глубокая вложенность страниц. В идеале на любую страницу пользователь должен попадать в 3 клика. Слишком детализированное деление на категории приводит к перегрузке навигационного меню. Настраивайте фильтры, чтобы не плодить хаос из кучи подкатегорий.
- Неинформативные данные. Названия разделов должны быть понятны пользователям и не обманывать их ожиданий. То же касается URL — делайте его человекопонятным (ЧПУ).
- Нет визуализации структуры на сайте. Все основные категории должны быть отражены в меню на хедере главной страницы.
Требования поисковиков к структуре
Структура сайта влияет на скорость его индексации поисковыми системами. С одной стороны, ясная и логически выверенная карта ресурса улучшает поведенческие факторы, с другой — облегчает анализ краулеру. Каждый поисковик дает свои рекомендации по разработке физической структуры сайта. Чтобы пробиться в топ, их нужно учитывать.
Яндекс
- Контролируйте корректность symlink. Следите, чтобы по мере переходов не собирался шлейф из аналогичных URL, типа site.ru/bla/bla/bla/bla.
- Четко организуйте ссылки на сайте. Каждая страница должна относится к своему разделу, и на каждый документ должна вести хотя бы одна ссылка.
- Проставьте текстовые ссылки на разделы сайта.
- Используйте карту ресурса (sitemap.xml).
- Составляйте уникальный человекопонятный URL для каждой страницы.
- Оформляйте файл robots.txt
Подробнее о требованиях Яндекса к структуре читайте здесь: https://yandex.ru/support/webmaster/recommendations/site-structure.html
Рекомендации Гугла во многом совпадают с Яндексом.
- Упрощайте структуру сайта.
- Прописывайте человекопонятные, простые, логические URL страниц.
- Используйте для навигации не только графику, но и слова.
- Для разделения слов в URL применяйте дефис, например, https://www.web-dius.ru/razrabotka/korporativnii-sait/
- Сделайте страницу навигации и постоянно следите за ее актуальностью, систематизируйте новые страницы с учетом существующей структуры.
Подробнее о требованиях к иерархии сайта от Google читайте здесь: https://support.google.com/webmasters/answer/7451184?hl=ru
Советы по разработке структуры сайта
Перечислим базовые правила создания структуры сайта.
- Важные страницы, например, Услуги или Прайс, должны быть хорошо заметны пользователям и находиться в одном клике от Главной.
- Делайте не более 3 уровней вложенности страниц.
- Проработайте перелинковку внутри сайта, это улучшит ПФ и ускорит индексацию.
- Соблюдайте логику пути к глубоко вложенным документам: Главная — Раздел — Подраздел — Статья
- Следите за слэшем в окончании URL. Это сигнал для поисковика, что индексацию нужно проводить глубже, но, если нет внутренних ссылок, робот будет недоволен.
- Для ресурсов со сложной структурой и глубиной вложенности страниц более 4 уровней наличие карты сайта обязательно.
- Пишите человекопонятные URL.
- Закрывайте служебные страницы от поисковых роботов (файл robots.txt).
- Обеспечьте пользователю возможность быстро вернуться на Главную (обычно по клику на логотип в шапке или на строчку в верхнем меню).
- Сделайте xml-карту — это обеспечит индексацию всех страниц.
Резюме
Грамотная и ясная структура — основа успешного сайта. Структура и семантическое ядро закладывают прочный фундамент при строительстве web-ресурса, а ошибки на этом этапе оборачиваются серьезными проблемами в будущем.
На хорошо структурированном сайте легко ориентироваться, пользователь быстро находит нужный контент, а поисковые роботы не тормозят индексацию. По наблюдению web-мастеров перестройка неудачной структуры, хоть и трудоемкая работа, но дает ощутимый результат в продвижении сайта.
Обычный способ создавать структуру сайта — это рисовать всем привычные MindMap схемы или проектировать User Flow, создавая вначале пользовательский путь и затем прототипировать структуру. Обычный Mindmapping не помогает это делать наглядно и быстро, поскольку на одной странице может быть множество информационных блоков и они должны быть перед глазами, когда проектируешь проект. И вообще, создание удобной структуры было прерогативой опытных веб-мастеров.
Немного статистики и исследования
Прежде всего мы провели некоторый анализ рынка. Около 80% пользователей создают карты сайтов с помощью инструментов ментальных карт.Они позволяют быстро создать структуру страниц, связать их ссылками и даже раскрасить блоки.
Таким образом, некоторые пользователи обращаются к специальным визуальным сервисам карт сайта.
Такие сервисы не позволяют отображать блоки контента внутри каждой страницы. Самое близкое, что они предлагают, — это пиктограммы, которые можно организовать, но, используя их, просто не удается заложить достаточно деталей контента, чтобы сделать информативную и надежную визуальную карту сайта.
Недостаточно создать точную карту сайта без блоков контента внутри каждой страницы.
Karl Plaude, автор метода Content Brick
Метод Content Brick
Занимаясь веб-разработкой уже 18 лет, нам удалось придумать новый и очень простой способ создания структуры, превратив это в интересный и фановый процесс даже для новичков в вебе.
Только за один год количество пользователей, которые начали использовать этот метод выросло в три раза.
Если вы все еще не верите, спросите о нас у Google, где мы вошли в топ 3 по релевантным ключевым словам. Вы также можете почитать сотни отзывов в Twitter
Как нам это удалось?
Метод Content Brick был придуман нами в 2016 году и увеличил скорость и простоту проектирования структуры веб-сайтов в несколько раз благодаря созданию и распределению контентных блоков для каждой отдельной страницы и последующему объединению этих страниц в одну общую структуру.
Давайте начнем с начала и объясним все более подробно.
История создания метода Content Brick
Еще до создания инструмента Octopus из нашей многолетней практики создания веб-сайтов мы поняли, что проектировать структуру сайтов было удобнее и быстрее всего на обычных бумажных стикерах.
Это звучит смешно, но мы действительно делали прототипы сайтов на бумажных стикерах вплоть до 2019 года, пока не создали Octopus и вот почему.
В руках была стопка небольших стикеров с фломастером и поверхность стола где можно было удобно раскладывать подписанные стикеры.
Один стикер — это одна страница сайта (page). Стоить заметить, что форма прямоугольника что у сайта, что стикера одинаковая.
Страница сайта не может быть пустой (хотя и такие бывают), на ней обязательно будет контент, например текст, картинка, анонс новости, список услуг, форма связи и тд. Даже маленький текст “ошибка 404” — это контент.
Поэтому, визуализируя информационную структуру страницы сайта, мы фломастером на стикере делали список контентных блоков, отмечая каждый буллетом. Эти контентные буллеты на стикерах мы называли кирпичами, наверное потому, что строили веб-сайт. Таким образом мы скоро стали называть их Content Brick или Content Block, но название прижилось первое.
Content Brick — логическая еденица контента на странице
За несколько часов на столе появлялось множество листочков (будущих страниц веб-сайта — Page), разложенных в иерархическом порядке. И каждый такой листочек содержал в себе список Content Brick.
Это было действительно наглядно. Благодаря Contents Brick на листочках можно было спроектировать количество будущих страниц и связи между ними.
Каждый стикер — это страница сайта или приложения, а буллеты — информационные блоки (content brick), благодаря которым можно спроектировать количество страниц, контент и связи между страницами.
Кстати вы по прежнему можете использовать бумажные стикеры и фломастер или воспользоваться Октопусом.
Несколько простых шагов «Content Brick» для проектирования структуры сайта или приложения
Шаг 1. Mainpage First vs Structure First
Первое, с чем вам нужно определиться, — это с методом выбор построения структуры веб-сайта: Mainpage First или Structure First (начинать с главной страницы или с общей структуры)
Mainpage First
Нетрудно догадаться, что это путь создания структуры, начинающийся с главной страницы. Для начала создайте главную страницу и в ней постарайтесь представить будущее содержимое контента с помощью content brick. Например, что может быть на главной странице?
- Header
- About
- Introduction
- News
- List of products
- Footer
Теперь у вас появилась мощная отправная точка, чтобы решить, какие будут следующие страницы веб-сайта, который вы проектируете. Все, что вам остается, — это таким же способом описать следующие страницы и определить иерархическую связь между ними.
Structure First
Это наш любимый метод. Он начинается с продумывания всех основные страниц сайта сразу и далее концентрации на каждой странице отдельно. Например, нам нужно разработать корпоративный сайт. Порыскав в Интернете, можно достаточно просто создать структуру из следующих разделов:
Теперь, имея готовую структуры, мы переходим к страницам, отдельно продумывая содержимое контента для каждой из них с помощью уже вам известных content brick.
Lifehack:
Если вы не хотите создавать структуру с нуля или вам просто лень, вы можете воспользоваться нашим visual sitemap generator и посмотреть структуру любого сайта в Интернете или взять готовые примеры, которые мы сделали site map examples.
Шаг 2. Визуализация контентных блоков
Выше мы разобрали, что у каждой страницы есть логические контентные блоки. Но как лучше представить отдаленное визуальное очертание будущих веб-страниц и разбить каждую страницу на графические блоки? Давайте рассмотрим простой пример:
Титульная страница состоит из таких Content Bricks:
- Header
- Sign Up
- About
- Introduction
- Features
- Video
- Images
- Footer
Все вроде понятно, но картина будет более полной, если мы увидим первое графическое очертание этой страницы. Это поможет всем участникам процесса увидеть, из каких графических блоков будет состоять каждая страница на сайте.
Посмотрите, что получится, если мы добавим этим блокам немного графики (вайрфреймы):
Согласитесь, это совсем другое дело.
Lifehack:
Вам не нужно долго думать какой wireframe отнести к тому или иному контентному блоку, мы это уже сделали за вас. Их не так много (всего 21), но зато они самые ходовые. Вам остается только быстро выбрать нужный.
Немного технической информации:
Что такое low fidelity wireframe?
Low fidelity wireframe можно сравнить с наброском или эскизом. Это самый простой и быстрый способ визуализации будущей веб-страницы или интерфейса. Он примерно показывает, какая информация и где будет отображаться на экране.
Шаг 3. «Вид с высоты птичьего полета» и подсчет веб-проекта
Выше мы рассказали о том, что вам может дать метод проектирования сайтов Content Brick. Но он может вам дать еще одно важное преимущество — «Вид с высоты птичьего полета».
Видите ли, когда у вас есть вся структура сайта с подробным описанием контентных блоков каждой страницы, вы можете в буквальном смысле увидеть весь сайт целиком и осознать его масштаб.
Такого преимущества вам не даст простой mindmapping. Например со своими разработчиками вы сможете оценить количество часов, которое будет затрачено на разработку будущего проекта, причем сегментировать это для каждого этапа разработки (design, frontend, development, testing и тд) или дать задание копирайтеру, который начнет готовить тексты, ведь у него уже все будет перед глазами.
Заключение
Content Brick — простой и эффективный способ планирования контента и создания структуры веб-сайта. Вам теперь не нужно быть гуру в сайтостроительстве — и в этом есть его основное преимущество.
Но это не означает, что вам теперь ничего не надо будет делать и структура сайта появится сама собой, хотя мы к этому стремимся.
90% посетителей этой страницы интересует вопрос — “Структура сайта — что это такое, и как ее составить новичку”. Не хочу вас “водить за нос”, скажу прямо, что создать правильную структуру сайта начинающему вебмастеру удается крайне редко. Не потому что у него не хватает мозгов, дело в том, что подходить к этому вопросу нужно осознано и с четкими планами на будущее.
Эта статья родилась не просто так, хочу поделиться с вами своим горьким опытом по смене структуры сайта этого блога, как все было, и как обстоят дела теперь.
Не так сложно имея готовый сайт сформировать структуру, гораздо сложнее создать схему развития сайта на будущее. В этой публикации хочу предостеречь начинающих владельцев сайтов, начинайте создавать структуру до формирования контента (наполнения). Если у вас уже сайт в индексе и вы понимаете что у вас структура “не очень” или, как было у меня, совсем отсутствует, скорее меняйте ее. Чем дольше вы будете затягивать с этим, тем болезненнее будет процесс переиндексации сайта поисковыми системами.
Создание семантического ядра сайта, кластеризация запросов, формирование правильной структуры сайта. Оптимизация работы сайта, технические советы и SEO рекомендации на основе проведенного аудита сайта. Обратиться за помощью можно на странице контактов.
- Что нужно знать для построения правильной структуры сайта
- Какие существуют требования к структуре сайта
- Правильная структура сайта, типы структуры, примеры в виде схем
- Внутренняя структура сайта
- Внешняя структура сайта
- Как правильно изменить (переделать) структуру сайта
- Чек-лист “Структура сайта Учебка WordPress” — как происходил процесс смены структуры
Что нужно знать для построения правильной структуры сайта
Давайте немного отойдем от блога “Учебка WordPress“, поговорим о том, что такое структура сайта, как ее формировать и создавать.
Итак, составим небольшой план действий, возможно он позволит ускорить ваши поиски необходимой информации (скорее всего вы уже кое-что читали о структуре сайта, и вам не нужно перечитывать все заново).
- Что такое структура сайта;
- требования к структуре сайта;
- типы структуры, примеры в виде схем;
- внешняя и внутренняя структуры сайта;
- как правильно изменить (переделать) структуру сайта;
- чек-лист “Учебка WordPress” — что, как и почему изменилось после смены структуры сайта.
Что такое структура сайта
Правильная структура сайта — это система расположения страниц сайта по четко сформированной логической схеме, структуру можно обозначить, как иерархию всех страниц сайта, их принадлежность к тем или иным каталогам и папкам.
В тезисах структуру сайта можно охарактеризовать так:
- Где я нахожусь сейчас (страница входа);
- куда я могу попасть (переход);
- взаимосвязь между категориями.
Формируя структуру стоит разобраться в желаниях потенциальных посетителей, что они будут искать, и какая информация их интересует.
Структура сайта это пути получения пользователем запрашиваемой информации. Тут можно очень сильно углублять в SEO (ключи, анкоры, перелинковка), но сейчас смысл понять, что такое структура сайта, поэтому делать этого не буду. Скажу кратко, что чем лучше построена структура, тем лучше для вас и ваших клиентов (посетителей). Посетителям проще находить интересующую информацию и переходить от одной страницы к другой.
Вот вам пример простейшей структуры сайта небольшого интернет-магазина:
Таким образом мы получим отличную структуру для интернет магазина, где четко разложены по своим местам все страницы сайта (статьи, товары, форма доставки).
Какие существуют требования к структуре сайта
Кто вообще может формировать требования к структуре сайта? Конечно же это поисковые системы, именно под них и стараются подстраиваться вебмастера (никогда не забывайте что в первую очередь должно быть удобно посетителям, а уж потом роботам).
Поисковые системы анализируют структуру сайта по своему, они берут во внимание структуру URL сайта. В общем структура сайта и структура URL это одно и тоже, но в разговоре проще не использовать аббревиатуру URL.
Что же говорят поисковые системы, какие требования к структуре сайта они выдвигают
Требования к структуре сайта от Яндекс
В сапорте Яндекса существует отдельная страница, посвященная описанию требований к структуре. Можете посетить ее и прочитать обо всем более детально, я же расскажу все вкратце и о более важном:
- Поддерживайте четкую ссылочную структуру на сайте. Каждый документ (страница) должна относиться к своему разделу (категории, блоку). На каждую страницу сайта должна быть хотя бы одна ссылка с другой страницы.
- Используйте карту сайта (имеется ввиду xml карта сайта), она ускорит индексацию сайта.
- Ограничивайте индексирование служебной информации, с помощью файла robots.txt.
- Каждая страница должна иметь уникальный и единственный URL-адрес. Имеется ввиду, что на разные страницы сайта должны вести разные URL, и наоборот одна и та же страница должна быть доступна только по одному адресу.
- Делать ссылки на другие разделы (страницы) сайта текстовыми, Яндексу так проще анализировать контент.
- Проверка корректности symlink-ов, при переходе по сайту URL не должны добавляться (example.com/vasya/vasya/vasya/vasya/ пример самого Яндекса).
Как бы это не звучало, но Яндекс умудрился вместить в одно понятие большое количество требований и критерий, не только к структуре, но и к сайту в целом. Есть как есть, информация официальная, так что нужно слушать.
Требования к структуре сайта от Google
Google в отличие от Яндекса вместил рекомендации в один абзац и они довольно просты и понятны:
- Структура сайта должна быть простой;
- url должно иметь логическую структуру, понятную для человека;
- используйте слова, а не идентификаторы;
- используйте знаки пунктуации в url (рекомендуется дефис “-“);
- не используйте слишком длинные и сложные url.
Более подробно можно узнать по ссылке выше, там есть и примеры с возможными проблемами и методами их решения.
Правильная структура сайта, типы структуры, примеры в виде схем
Посмотрев ТОП Яндекса и Google по запросу “структура сайта” нашел много интересной “шлаковой информации”, как только не извращаются вебмастера-учителя описывая структуру сайта. Выдумали кучу схем и названий, описания к ним и примеры непонятно от куда взятые.
Итак, давайте все по порядку. Структура сайта бывает:
- Простая (двухуровневая), главная страница и много внутренних страниц 2-го уровня (home.ru/stranica1 и home.ru/stranica2 и т.д.)
- сложная (древовидная, три и больше уровней вложенности home.ru/category/stranica1 и home.ru/blog/statya и т.д.)
Все больше вариантов нет! Можно встретить такие понятия как смешанная, линейная, решетчатая и еще куча всякой белиберды можно найти в сети. Только два вида простая (2 уровня вложенности URL) и сложная или древовидная 2 и больше уровней.
Так же можно разделить структура на два типа:
- Правильная (логически составленная и понятна людям и роботу);
- не правильная (никакой логики, полное отсутствие структуры (сплошная каша)).
Пример простой структуры сайта (схема)
Вот вам наглядный пример простой структуры сайта. Она подойдет для маленьких сайтов, узконишевых, где тема каждой страницы очень близка. К примеру портфолио фотографа где есть главная страница на которой находиться информация об авторе и форма заказа услуги. Внутренние страницы собственно портфолио, разные фото.
Если кроме главной вы планируете создавать 20-30 или же 100 страниц, обязательно создайте структуру, разбейте страницы и будущие страницы на группы, это будет правильно и в дальнейшем позитивно скажется на продвижении вашего сайта.
Пример древовидной структуры сайта, схема и пояснения
Древовидная структура сайта самая распространенная и правильная, она используется на большинстве крупных сайтов, интернет магазинах и порталах. Внешний вид имеет такой:
На примере схемы показано все виды структуры, в совокупности это и есть древовидная структура сайта.
Теперь немного поясню:
- примеры 1.1, 1.2, 2.1, 3.1 идентичны, так показал что бы вас не вводили в заблуждения другие “умники”. Древовидная структура формируется по принципу Главная/категория/статья или же Главная/категория/подкатегория/статья.
- В древовидной структуре может быть несколько веток, каждая из которых может иметь разную глубину вложенности (первая ветка Главная/О компании, вторая ветка Главная/Услуги/SEO анализ, третья ветка Главная/Блог/Самостоятельное продвижение/Методы продвижения), в совокупности эти три ветки сформируют отличную, правильную структуру сайта.
- В примере 3.2 показано как делать ненужно, очень глубокое размещение материала не эффективно. Как поисковые роботы так и посетители попросту не дойдут до этой информации, контент будет утерян и не принесет никаких плодов. Опускаться ниже 4-го уровня лучше не стоит, если только вы не владелец Amazon.
Внутренняя структура сайта
То о чем писалось выше и есть внутренняя структура сайта или структура URL, правила и порядок формирования URL и будет внутренней структурой.
Еще раз повторюсь, тщательно продумывайте каким будет ваш сайт в будущем, сделав это вы сможете уберечь себя от проблем переделывания структуры, поверьте, это сложно и очень долго. Благо если вы сможете это сделать самостоятельно, в противном случае заказать услуги специалиста, который этим займется будут стоять не дёшево.
У меня на момент “переделки” было 170 страниц в индексе, что бы все исправить, добавить контент к рубрикам и подрубрикам (24 страницы), заранее подготовить все редиректы, сменить внутренние ссылки и перелинковку ушло больше месяца. А как вы думаете сколько это будет стоять у наемного рабочего?
Внешняя структура сайта
Говорить о внешней структуре сайта можно очень долго, юзабилити, удобство пользователей, красочность дизайна и так далее. Но существует одно правило, нарушать которое крайне не рекомендуется. Все пользователи интернета привыкли к стандартной форме расположения блоков на всех сайтах, выглядит это примерно так:
Давайте по порядку, рассмотрим базовое размещение элементов на сайте:
- Голова, шапка, хедер все это названия верхней части сайта, блок в котором располагается эмблема, главное горизонтальное меню плюс добавочные элементы присущие данному сайту или его тематике (банеры, реклама, цветовая палитра, большое изображение).
- Левый и правый сайдбар, может быть только один или оба, а может и вовсе не быть бокового меню, что редко встречается на практике. Главное предназначение этих блоков дать дополнительную информацию, направить посетителя вглубь сайта, заинтересовать слоганами и видео. Вкратце задержать посетителя как можно дольше на сайте.
- Центральный блок, самый главный, это та информация или сервис, ради которого посетитель пришел на ваш сайт. Именно эта часть в первую очередь интересует пользователя. Контент должен быть легко читаем и заметен в первом экране, ну максимум во втором. Не нужно заставлять посетителя пролистывать все ниже и ниже в поисках того, что ему нужно сейчас же. В наше время люди разучились ждать, по этому с легкостью закроют ваш сайт и пойдут на другой.
- Футер, подвал сайта, блок предназначен в первую очередь для размещения контактной информации (название компании, телефона, адрес). Так же активно используют подвал для добавления навигационного меню и других полезных ссылок.
Примерно так как я описал, выглядит 99% всех существующих сайтов в интернете, дважды, нет трижды подумайте перед тем, как существенно сдвигать эти блоки. Главное меню в нижней части сайдбара и контент в подвале это провал, такой сайт скорее всего будет обречен. Пользователь не сможет найти ни навигации, ни информации.
Это если очень кратко о внешней структуре сайта. Вообще тема довольно обширная, и вместить в несколько абзацев крайне трудно, по этому информация вышла такой сухой.
Как правильно изменить (переделать) структуру сайта
Что такое структура сайта, какая она бывает и каких правил нужно следовать составляя “костяк” сайта мы вроде бы выяснили. Пришло время для самого интересного, взять наш испорченный ранее труд и полностью переделать структуру сайта.
С чего начать изменение структуры:
- Первым делом вам нужно вывести (выписать) все страницы вашего сайта на отдельный лист (я это делал в екселе). Это нужно для разбивки и построения материала по рубрикам (темам). Сразу указывайте и текущие url для дальнейшего удобства.
- Следующий этап — четкое понимание (заранее составленный) плана, дополнительные рубрики (страницы) с ключевыми словами или без них. В эти рубрики вы будете распределять страницы выписанные в ексель.
- Распределить все страницы и записи по соответствующим категориям и страницам. Можно в отдельные листы или файлы.
- Придумать (использовать ключи) для формирования будущих дополнительных страниц.
- Прописать в файле для каждой страницы будущий URL.
- Подготовить тексты или шаблоны контента промежуточных страниц (рубрик).
- Подготовить файл (блокнот) с редиректами со старых на новые адреса страниц.
- Добавить новые рубрики (страницы) и текст к ним.
- Поменять структуру ссылок в вашей CMS.
- Проставить к каждой записи принадлежность к тем или иным страницам (рубрикам) что бы новые url совпали с плановыми.
- Внедрить перенаправление со старых адресов на новые.
- Поменять внутренние ссылки, перелинковку, что бы ссылки со страниц вели на новые URL, а не на редиректы.
Я предупреждал что работы очень много, это все займет в лучшем случае неделю, при большом количестве страниц месяц, или больше.
Теперь давайте быстро пробежим по всем пунктам списка. С 1-го по 7-й можно делать не спеша, никакого “яда” от этого не будет.
После того как все пункты по 7-й включительно будут готовы с 8-го по 11-й нужно внедрить за несколько часов, может день, максимум два, для избежания проблем с индексацией.
Последний 12-й пункт можно провести в течении месяца, он не так критичен, как остальные.
Я больше чем уверен что у вас возникло больше вопросов чем ответов, по этому советую ознакомиться с более детальным описанием всего происходящего на примере сайта “Учебка WordPress”. После ознакомления вам все станет ясно.
Чек-лист “Структура сайта Учебка WordPress” — как происходил процесс смены структуры
В предыдущей главе статьи я в теории рассказал, как должна происходить смена структуры сайта, теперь покажу, как это все происходило на самом деле. Возможно вам пригодятся скриншоты и вы воспользуетесь моими шаблонами.
Выводим все названия страниц и их URL в отдельный файл.
Формируем дополнительные страницы, рубрики.
Прописываем будущие URL и распределяем страницы по категориям.
Изменяем старые URL на новые в екселе.
На основе новых и старых URL формируем лист (блокнот) со всеми редиректами.
Составляем четкий план действий, после того, как все подготовительные работы будут сделаны.
Постепенно выполняем все пункты плана, внедряем новую структуру сайта. После того как все действия будут выполнены, ждем когда Google и Яндекс переиндексируют все страницы и сменят их адреса в выдаче. О том, как быстро это происходит и каких результатов смог добиться мой скромный сайт только благодаря построению хорошей структуры сайта я расскажу дальше.
Результаты полученные сайтом “Учебка WordPress” в первый месяц после смены структуры сайта
Даже не знаю с чего начать, наверное начну с переиндексации страниц поисковыми системами. Это, наверное, самый трогательный и волнующий вопрос, как отнесутся поисковики к смене структуры сайта.
Переиндексация новой структуры сайта Google
Что я вам хочу сказать, Google справился с этой задачей довольно быстро. Примерно за неделю полторы все страницы были переиндексированы. Сразу же после переиндексации почувствовалось влияние новой структуры, трафик стал стабильнее и вырос примерно на 20%. Я думаю что на это не так сильно повлияла смена структуры, как увеличение контента (плюс 24 страницы с текстом в рубриках). Хотя с другой стороны на данный момент по высококонкурентным словам рубрик трафика пока не наблюдалось вообще (прошел только месяц, для ВК ключей это очень мало).
Переиндексация новой структуры сайта Яндексом
Как долго яндекс переиндексирует новую структуру сайта? Могу сказать что мои 170 страниц за месяц попали в индекс только 147 (остальные робот яндекса обошел, но пока не в поиске). Было явно видно проседания трафика на несколько дней, затем резкий взлет, который продолжает радовать.
Яндекс отлично воспринял смену структуры сайта, отблагодарив меня увеличением трафика в первый месяц на 40%, по сравнению с предыдущим месяцем. Графики приведу ниже.
Смена структуры сайта, добавление “хлебных крошек”
Через несколько дней, страницы которые уже успел перепройти Google имели в выдаче обновленный вид.
Яндекс спустя месяц так и не удосужился оценить добавление “хлебных крошек”, хотя позиции сайта существенно выросли.
Увеличение общего трафика и каждой поисковой системы в отдельности
На графику ниже показано развитие сайта на протяжению года, вертикальной линией отмечено время смены структуры, что говорить, смотрите сами (плюс 40% в первый месяц).
Новая структура сайта очень понравилась Яндексу. Google, хотя и не так явно, позитивно отреагировал на нее.
Вывод можно сделать только один, структура сайта имеет очень важную роль в продвижении сайта. Если вы знаете, что у вас плохая структура, соберитесь с силами и смените ее, отклик вы получите колоссальный. Не можете самостоятельно, закажите фрилансера или обратитесь ко мне, опыт я в этом деле имею.
