Онлайн структура сайта – 10 сервисов для создания структуры сайта в 2020 году / Habr

Содержание

10 сервисов для создания структуры сайта в 2020 году / Habr

Прототипирование — значимый этап в веб-разработке, который позволяет определить и сформировать ДНК проекта на ранних стадиях. В последние годы количество онлайн-сервисов и инструментов для прототипирования ощутимо возросло. В этом обзоре представлены 10 сервисов для создания визуальных сайтмэпов.


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

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

Рассмотрим три типа сайтмэпов:

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

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

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

Зачем нужны визуальные сайтмэпы?


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

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


Сервис c минималистичным и свежим подходом в дизайне интерфейса, запущенный в 2019 году. Без лишних деталей и довесков Octopus работает быстро, а чистый визуальный язык располагает к работе.

Основная идея проектирования сайтмэпов в Octopus заключается в формировании страниц из блоков. Такие конструкции наглядны и призваны дать подробное представление о структуре будущей страницы.

Протестировать Octopus.do возможно без регистрации. Зарегистрировать профиль понадобится только в момент сохранения проекта.

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

Есть и более удобный способ добавления блока — достаточно нажать Enter, и в нижней части страницы появится новый блок. Такой метод позволит быстро заполнять содержание с использованием одной лишь клавиатуры. Drag’n’drop работает предсказуемо и быстро.

Блокам могут быть присвоены цвета из заданной палитры цветов:

Пользователям платных подписок Octopus.do доступен экcпорт сайтмэпов в PNG и PDF. С бесплатной подпиской можно делиться прямой ссылкой на проект. При этом внешние пользователи смогут вносить изменения в сайтмэп, что упрощает командную работу.

Организация информационных слоев и разделов сервиса открывается в аккуратных поп-апах. Благодаря этому складывается впечатление, что пользователь не покидаете рабочее пространство минималистичного редактора.

Функция добавления текстового описания к блокам, будет полезной для планирования контента в проекте. Поп-ап вызывается нажатием на пиктограмме документа в правой части блока:

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

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

Отличительная особенность Octopus — наличие функции Estimate. Интерфейс реализован в виде выезжающей панели, которая содержит таблицу-калькулятор для оценки стоимости работ. И при известной часовой ставке за конкретную экспертизу можно оценить временные затраты и бюджет проекта.

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

Резюме

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

Стоимость, подписка: бесплатный план предусматривает 1 активный проект. Платные подписки от 8 $ в месяц.
Простота использования: для начинающих и пользователей среднего уровня
Дизайн: ★★★★☆
Командная работа: ✓
Экспорт: ссылка, PDF и PNG (только для платных пользователей)

Отсутствие необходимости регистрироваться — преимущество сервиса Gloompas. Пользователь сразу же оказывается в рабочей среде с минималистичным дизайном. Интерфейс интуитивен и помогает втянуться в процесс довольно быстро. Добавление и удаление блоков сайтмэпа происходит с понятной и предсказуемой механикой.

Возможность настраивать цвет каждого отдельного блока, задавать размер шрифта — удобный функционал, который помогает формировать акценты в сайтмэпе.

Отдельно стоит отметить настройки вида: Map View, Matrix View и Outline. В зависимости от структуры и масштаба проекта можно выбрать способ отображения сайтмэпа.

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

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

Резюме
Бесплатный сервис с оптимальным набором функций и широкими возможностями экспорта готового проекта.

Стоимость, подписка: бесплатно
Простота использования: подходит для начинающих
Дизайн: ★★★☆☆
Командная работа: ✓
Экспорт: ссылка, PNG, PDF, XML

Наглядный и насыщенный шаблонами Flowmapp помогает создавать как визуальные сайтмэпы, так и планировать потоки пользователей.

Сперва необходимо зарегистрироваться. Проект можно:

  • начать с чистого листа
  • импортировать из XML файла
  • расширить существующий шаблон

В заготовленных шаблонах найдется три типа проектов: e-Commerce, корпоративный проект и новостной портал.

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

Анимации и реакции элементов интерфейса помогают втянуться в процесс и научиться базовым манипуляциям. Удобно реализованы групповые выделения страниц для удаления или смены лейбла.

Одно из основных преимуществ — наглядные шаблоны страниц. Библиотека шаблонов покрывает большинство возможных информационных паттернов — незаменимая и наглядная фича в подготовке и планирования контенте для будущего сайта.

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

Что касается навигации, то к стандартному набору функции добавлена довольна удобная механика — Project Map. Project Map сочетает в себе как визуальную, так и механическую ценность — перемещение по структуре больших проектов упрощается.

К каждой из страниц проекта можно добавлять расширенное описание и прикреплять отдельные файлы. Эта фича полезна в процессе наполнения сайта контентом.

Широкие настройки экспорта в SVG и PNG форматы позволяют выбрать оптимальный вариант и даже задать разрешение изображения на выходе.

Резюме
Сервис с продуманным набором функций и приятным интерфейсом. В бесплатной подписке функции доступны в широком спектре. Подойдет для эффектной и качественной презентации проектов сайтмэпов.

Стоимость, подписка: бесплатный план предусматривает 1 активный проект и 100 Мб места, без ограничении по коллабораторам. Платные подписки от 8 $ в месяц при годовой оплате.
Простота использования: для начинающих и пользователей среднего уровня
Дизайн: ★★★★★
Командная работа: ✓
Экспорт: ссылка, PNG, SVG, PDF, DOCX


Относительно простой в организации Writemaps помогает проектировать сайтмэпы и планировать контент проекта. Для того, чтобы протестировать сервис, придется зарегистрироваться.

С точки зрения дизайна интерфейс можно описать, как «народный» или незамысловатый. Бесплатный план обеспечивает доступ к части функции: 3 активных сайтмэпа c 50 страницами. Остальные фичи доступны платным пользователям.

Часть платного функционала включает возможность выделять страницы проекта цветом, объединять и добавлять к ним контент, создавать разделы, делиться проектом и экспортировать сайтмэп в PDF. Хотя для бесплатных планов предусмотрен экспорт в CSV и XML.

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

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

Стоимость, подписка: бесплатный план предусматривает 3 активных проекта с ограничением в 50 страниц. Платные подписки от 14.99 $ в месяц.
Простота использования: для начинающих и пользователей среднего уровня
Дизайн: ★★☆☆☆
Командная работа: ✓
Экспорт: CSV, XML, PDF и ссылка (только для платных пользователей)

Rarchy


Beta-версия проекта обладает скромным набором функций. Сайтмэп строится как с нуля, так и в генеративном порядке по ссылке на сайт.

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

Никаких дополнительных настроек отображения блоков не предусмотрено. Тем не меннее drag’n’drop работает понятно. А форматы отображения схемы позволяют переключить проект в вид биоморфной схемы. Возможно, такой вид покажется наглядным и уместным.

На момент публикации доступен экспорт только в CSV-файл. Поделиться прямой ссылкой нельзя.

Стоимость, подписка: бесплатно
Простота использования: для начинающих
Дизайн: ★★☆☆☆
Командная работа:
Экспорт: CSV


В сервисе 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 придется создать аккаунт. Доступен 14-дневный тестовый период. Знакомство c сервисом начнется с наглядного видео-эксплейнера.

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

Стоит отметить, что дизайн среды сдержанный и консервативный. А процесс создания сайтмэпа больше похож на классическое взаимодействие с Explorer (Win) или Finder (Mac). Структура сайта, в отличие от сервисов описанных ранее, отображается в виде, напоминающем дерево файлов.

Компактно и придется по вкусу тем, кто привык к такому взаимодействию. Хотя режим Preview отображается уже в виде блок-схемы, и предусматривает 4 дополнительных вида отображения.

Настройки свойства и функций элементов удобно расположены в правой панели вкладок:

  • Page (Расширенная информация о странице)
  • Content (Планирование (добавление) текстового и мультимедийного контента)
  • Analytics
  • Comment

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

Гибкие настройки экспорта в PDF позволяют выбрать формат (размер) перед сохранением. Дополнительно пользователь определяет и ограничивает количество уровней вложенности для экспорта.

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

Резюме
Инструмент производит основательное впечатление и скорее всего подразумевает более глубокую проработку проектов и работу с контентом.

Стоимость, подписка: 14-дневный триальный период. Платные подписки от 49 $ в месяц.
Простота использования: для пользователей среднего и продвинутого уровней
Дизайн: ★★☆☆☆
Командная работа: ✓
Экспорт: ссылка, PDF, CSV


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

Создатели сервиса выложили исходный код на Github (https://github.com/alentum). Кроулер бережно сохраняет историю запросов.

Стоимость, подписка: бесплатный
Простота использования: для начинающих
Дизайн: ★★☆☆☆

Creatly


Creatly заботливо создал демосреду, чтобы тестировать сервис без регистрации. Создание сайтмэпов — лишь часть функционала инструмента. Creatly предназначен для визуализации различных информационных структур.

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

Drag’n’drop нагляден: перетаскивание элементов сопровождается наглядными связями страниц и объектов. Редактирование страниц, удаление объектов и связывающих линий работает так, как в привычном векторном редакторе. Поэтому для дизайнеров механика будет понятна и близка.

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

Размер документа в пикселях — любопытная фича. Пользователь всегда в курсе разрешения картинки еще до того, как произведет экспорт.

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

Стоимость, подписка: бесплатный план предусматривает 5 публичных документов и возможность добавления до 3-х коллабораторов. Платные подписки от 5 $ в месяц.
Простота использования: для пользователей среднего и продвинутого уровней
Дизайн: ★★★★☆
Командная работа: ✓
Экспорт: ссылка, PNG, JPG, SVG

***********************************

P.S.

Чтобы было легче выбрать, вот сравнительная таблица по всем сервисам (в самом конце) и немного больше скриншотов.

habr.com

Какой должна быть структура сайта — Онлайн-курсы Яндекса

1. Немного теории

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

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

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

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

Каждая статья или товар должны размещаться на отдельной странице со своим уникальным адресом (URL).

Желательно, чтобы по адресу можно было определить, что находится на странице и в каком разделе и подразделе её можно найти. Например, для статьи про сосновые стулья подошел бы адрес http://siteforyandex.com/mebel/stool/stool-sosna. Адрес может быть написан и на кириллице, и на латинице — важно, чтобы он был понятным. Помимо адреса, путь до страницы можно выводить на сайте в виде дополнительного меню. Такое меню называется «хлебными крошками»: по ним пользователь может вернуться к более общему разделу сайта.

Посмотреть, какие разделы вашего сайта известны роботу Яндекса, можно в сервисе Яндекс.Вебмастер — с помощью инструмента «Структура сайта».

yandex.ru

анализ URL-структуры сайта, конкурентов. Как работает инструмент анализа структуры проектов? — Пиксель Тулс

Инструмент «Анализ структуры проекта» проводит онлайн анализ структуры сайта на основе проиндексированных Яндексом страниц. А также строит наглядную структуру (иерархию), позволяющую визуально оценить наиболее объемные разделы. Онлайн-инструмент будет полезен для следующих целей:

  • Изучения конкурентов. Например, для определения точек роста поискового трафика продвигаемого проекта (новые категории, типы страниц, теги) или выделения приоритетных разделов, групп товаров, категорий (на основе количества документов).

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

Как с помощью анализа структуры понять, что требуется для роста проекта?

Приведем пример выявления необходимых изменений структуры, содержания сайта flor-design.ru по сравнению с более успешными конкурентами:

  1. С помощью сервиса SimilarWeb (или любым другим способом) найдем более успешного конкурента — сайт zakaz-buketa.ru.

  2. Проведем анализ структуры нашего проекта и конкурента.

  3. Сравнивая структуры проектов, можно сделать вывод, что вектор развития продвигаемого сайта flor-design.ru, направленный на достижение тех же объемов трафика, что и исследуемого конкурента, должен включать в себя создание разделов «Статьи» и «Новости» с последующим наполнением этих разделов до ~40% объема всех страниц сайта (что принесет СЧ- и НЧ-трафик) и значительное увеличение количества товаров в каталоге.

Особенности инструмента

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

  • Инструмент проводит анализ с глубиной в два уровня вложенности от введенного URL.

  • Инструмент поддерживает анализ не только всего сайта, но и конкретного раздела. Например, при анализе URL вида «site.ru/category/» будет исследован только раздел «/category/» с глубиной в два уровня вложенности от него. Это будет полезно в случае, если необходимо детально проанализировать определенную часть сайта. Например, узнать теги, используемые конкурентом.

  • Инструмент позволяет скачать данные в формате CSV для дальнейшего анализа.

  • Чтобы отфильтровать малозначимые разделы (с малым объемом — 3-10 страниц), достаточно воспользоваться быстрым фильтром — поле «Скрыть разделы с числом станиц менее», который работает без перезагрузки страницы.

  • На сервере хранятся до 40 предыдущих проверок структуры, доступные для скачивания в формате CSV (только для пользователей тарифов «Профессионал» и «Эксперт»).

Удачи в работе!


Задайте вопрос или оставьте комментарий

Перейти к инструменту «Анализ структуры проекта»

Другие вопросы нашего FAQ

tools.pixelplus.ru

16 инструментов для создания прототипов / Айкен corporate blog / Habr

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

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

Спонсор перевода: Айкен

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


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

В этой статье мы рассмотрим несколько новых решений по построению прототипов и каркасному моделированию.

1. Omnigraffle

Тип: Приложение OSX
OmniGraffle поможет вам быстро создать потрясающие графические документы путем соединения линий с фигурами, даже если они перемещаются, и предусматривает инструменты моделирования, файлы импорта и экспорта Microsoft Visio, а также простейшее построение диаграмм всего одним щелчком мыши.

2. ConceptDrawPro

Тип: Приложение Windows
ConceptDraw PRO — это полнофункциональная платформа диаграммного изображения, которая позволяет отображать, передавать и динамично представлять информацию.

3. Pidoco

Тип: Онлайн
Pidoco — это объединенный инструмент каркасного изображения и создания прототипа графического интерфейса пользователя в реальном времени, который используется для улучшения программных проектов, поскольку он экономит время и снижает вероятность доработки. Picodo также увеличивает размер прибыли фирм вследствие того, что понижает затраты и повышает практичность.

4. BalsamiqMockups

Тип: Приложение AIR
Balsamiq Mockups — это инструмент построения каркаса, разработанный специально для воспроизведения проектов, нарисованных от руки, позволяя быстро и легко обновить свойства программ, таких как Microsoft Word.

5. Mockingbird

Тип: Онлайн
Mockingbird — это инструмент в режиме онлайн, позволяющий легко создавать, связывать, предварительно просматривать и передавать модели вашего веб-сайта или приложения.

6. Pencil

Тип: Дополнение Firefox
Проект Pencil предназначен только для построения свободного и открытого инструмента создания диаграмм и прототипов графического интерфейса пользователя, который может использовать каждый.

7. iPlotz

Тип: Онлайн / Flash-Flex
С помощью iPlotz можно создавать управляемые, активируемые кнопкой каркасы для создания образа веб-сайта или программного приложения. Вы также сможете получать комментарии от других лиц по поводу проектов, и как только все будет готово, управлять заданиями по построению проекта для разработчиков и проектировщиков.

8. ProtoShare

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

9. HotGloo

Тип: Онлайн
Hot Gloo — это приложение для создания каркаса в режиме онлайн, которое в настоящее время также является бесплатной бета-версией. Вы можете перетаскивать и вставлять элементы, масштабировать, объединять, называть и переименовывать их. Также Вы сможете редактировать, комментировать и передавать любой элемент процесса разработки коллегам и клиентам.

10. MockFlow

Тип: Онлайн
MockFlow — это проектные, объединенные (в реальном времени) модели интерфейсов пользователя для вашего программного обеспечения и веб-сайтов.

11. Gliffy

Тип: Онлайн
Бесплатное программное обеспечение для построения каркаса Gliffy дает возможность простого создания каркасов веб-сайтов и передачи веб-моделей. Вы можете также экспортировать свой каркас для будущего использования в других приложениях.

12. Cacoo

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

13. Creately

Тип: Онлайн / Flash-Flex
Мощный и простой для использования диаграммный онлайн-инструмент, который работает прямо в вашем веб-браузере. Благодаря интуитивному интерфейсу пользователя и встроенным свойствам совместной работы, Creately облегчает работу с командами.

14. LovelyCharts

Тип: Онлайн
Lovely Charts — это приложение для создания диаграмм, позволяющее создавать профессиональные диаграммы всех видов, такие как блок-схемы, карты сайтов, бизнес-процессы, организационные структуры, каркасы и многое другое…

15. Mockup Builder

Тип: Онлайн / Silverlight
Mockup Builder — это новый взгляд на решение старой проблемы создания прототипов и предоставления набросков клиентам.

16. LucidChart

Тип: Онлайн
Создавайте диаграммы и чертежи, такие как блок-схема, диаграмма идей, сетевая диаграмма, диаграмма UML, каркас, проект интерфейса пользователя и другие чертежи в режиме онлайн с помощью бесплатного программного обеспечения, предназначенного для создания блок-схем.

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

habr.com

Схемы структуры сайта, примеры создания

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

Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

Подпишись на рассылку и получи книгу в подарок!

noun_638459_cc

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

Виды структуры сайта

Линейная структура. Элементарная логика – каждая страница ссылается на другую страницу и на главную. Такую структуру хорошо применять на сайтах-презентациях, портфолио и других специфических продуктах, которые преследуют цель ознакомить посетителя со всеми страницами в определенной последовательности. Вес страниц здесь перетекает от главной к последней странице через все остальные. Успешно продвигать можно только главную, поэтому для привлечения посетителей эта структура не очень подходит. Оставим ее тем, кто использует сайты для своих целей и не собирается получать трафик из поиска. Такая структура в виде схемы:

linejnaya-struktura

Линейная с ответвлениями. Принцип тот же, но здесь вы можете использовать несколько продуктов на одном сайте, с которыми будете знакомить так же постранично. Например, это может быть онлайн-библиотека какого-то автора с несколькими книгами. Здесь вес опять же передается от главной к последней странице, правда таких страниц уже несколько. И снова неудачный для продвижения вариант.

linejnaya-struktura2

Блочная структура. Здесь все страницы ссылаются на несколько других, которые равнозначны между собой. Такую структуру неплохо применять для конкретного продукта, когда каждую страницу можно использовать, как описание какого-то отдельного свойства/достоинства и их совокупностей. С распределением веса здесь все вполне неплохо, страницы уже перелинкованы и отдают свой вес на главную, что позволяет продвигать ее более эффективно. Но такая структура весьма специфична и применять ее можно далеко не везде. Пример структуры сайта:

blochnaya-struktura

Древовидная структура. Именно древовидная структура является наиболее универсальным вариантом и именно ее вы будете применять в 99% случаев. Смысл в том, что для каждого направления у вас будет своя ветка, для каждой услуги или товара у вас будет отдельное ответвление. То есть, те самые привычные нам разделы и подразделы. Эта структура позволяет передавать дополнительный вес как на главную, так и на разделы (каждая страница раздела будет ссылаться не только на главную, но и на свой раздел, достаточно настроить хлебные крошки.

drevovidnaya-struktura

В урлах:

  • site.ru/divani/
  • site.ru/divani/tkani.html
  • site.ru/divani/kozha.html
  • site.ru/pyfiki/
  • site.ru/stylya/
  • site.ru/stylya/derevo.html
  • site.ru/stylya/plastic.html
  • site.ru/stylya/rotang.html
  • site.ru/stylya/metall.html

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

Как создать структуру своего сайта. Виды сайтов и их структура

Мы определились с видом структуры, который будем использовать. Теперь нужно понять, какой она должна быть именно у вашего сайта: как будут организованы страницы, разделы, подразделы и прочее. Здесь все зависит от вида и назначения сайта. Сразу скажу, что здесь представлены именно логические структуры сайтов. Расположение блоков на видимой части сайта – той, что вы видите на экране монитора (кнопочки, меню и т.д.), – может быть любым, главное, чтобы оно казалось вам правильным.

Визитка

Стандартная структура сайта-визитки обычно проста и состоит всего из двух уровней:

  1. главная
  2. остальные страницы
sajt-vizitka

Коммерческий сайт

Здесь уже сложнее – нужно будет внедрять дополнительные уровни страниц. Какие? Это будет понятно из семантического ядра. Немного ниже я расскажу, как формировать структуру для коммерческого сайта. Если вкратце, то основными страницами будут главные направления вашей деятельности, страницами второго уровня – их разновидности. Такое решение идеально для сайтов услуг и любых других коммерческих сайтов без функций интернет-магазина. Структура продающего сайта:

korporativnyj-sajt

Информационный сайт и блог

Структура информационного сайта похожа на структуру коммерческого, с той лишь разницей, что уровни будут представлены разделами (именно разделами, а не страницами 1-го уровня) и страницами. Если представить это на сайте, то страницы раздела – это страница, содержащая много ссылок на страницы ему принадлежащие (листинг). Сама по себе страница раздела может не нести никакой пользы в плане дополнительной информации. Пример:

razdel-sajta

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

straniczy-v-kommercheskom-sajte

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

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

infosajt

Интернет-магазин

Это уже совершенно иной уровень организации сайта. Чтобы охватить все возможные запросы, которые могут ввести в поисковой строке ваши потенциальные покупатели, вам нужно будет внедрить не только систему разделов и подразделов, но и добавить на сайт фильтры. Главное, правильно определить, что пойдет в фильтры, а что будет основным свойством продаваемого товара. Так, например, для магазина диванов логично будет разделить диваны на кожаные и тканевые (материал), а не на синие и красные (цвет). Хотя, если ваша фишка – это разноцветные диваны, то будет лучше разделить их по цветам, сделав материал второстепенным признаком и вынести его в фильтр. Фильтры нужны тогда, когда одному товару присуще сразу несколько качеств, которые интересуют людей в запросах, например, «цвет + форма» (кровать белая круглая) или «размер + форма + материал» (большой угловой кожаный диван).

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

internet-magazin

Проектирование структуры сайта. Мастер-класс для коммерческого СЯ

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

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

sya

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

sya2

Интересно

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

Итак, у нас получилось несколько групп:

spisog-grupp

Итак, СЯ кластеризовали. Что делать дальше? Начинаем создавать структуру продающего сайта. Учитываем, что какие-то группы могут подчиняться одна другой. Например, фотосессия с мужем относится к семейным фотографиям, соответственно эту группу лучше подчинить группе «семейный фотограф». Логика здесь может быть разная, я сделала так, как считаю правильным. Например, мне кажется, что лучше выделить группу «детский фотограф» в верхний уровень и в подчинение ему отдать группы «новорожденным», «на выписку», «садик» и т.д. Хотя так же логично было бы в верхний уровень выделить страницу «фотограф на торжество», и страницу «выписка» отдать в подчинение уже этой странице, наряду со страницами «свадьба», «день рождения» и подобное.

В итоге получится подобная логическая схема сайта:

itogovaya-struktura

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

Важно!

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

Даже если для страницы «с кем» у вас нет группы ключевых слов. Это и будет грамотная структура сайта.

Где и как нарисовать структуру сайта?

Если вы решились попробовать сделать структуру сайта своими руками, вам нужен удобный инструмент для рисования. Советую доступную программу для создания структуры сайта (и не только) draw.io, в котором и делались схемы для этой статьи. Куча возможностей и мало проблем. Главное, чтобы у вас был активный аккаунт на .gmail.

Как посмотреть структуру сайта конкурента?

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

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

Зайдите на сайт и оцените сначала визуально, какие страницы и разделы могут присутствовать у конкурента. Чтобы понять, действительно ли визуальные элементы имеют какую-то иерархию в структуре сайта, обратите внимание на урлы страниц. То есть, если вы видите, что у страницы «Проемы» в меню есть подстраница «Расширение проемов», это еще не значит, что вторая страница подчиняется первой в структуре сайта (как я и говорила, визуально элементы сайта могут располагаться как угодно, это не показатель как таковой, просто чаще все же структура отображена и в визуальной составляющей сайта). Чтобы узнать, так ли это на самом деле, посмотрите на урл страницы «Расширение проемов», если в адресе страницы вы увидите папку «Проемы», значит она действительно по структуре подчиняется этой странице: site.ru/proemy/rasshirenie-proemov. Если вы видите урл вида site.ru/rasshirenie-proemov – то в структуре эта страница сама по себе, что неправильно.

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

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

semantica.in

Как создать структуру сайта с учетом требований SEO? || Блог Megaindex.com

Внутренняя структура сайта имеет значение при продвижении в поисковых системах.

Как создать структуру сайта правильно с точки зрения поисковой оптимизации?

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

Как создать структуру сайта с учетом требований SEO?


Рекомендации по SEO в части создания структуры сайта сводятся к учету следующих нюансов:
  • Создание структуры на основе семантического ядра. Использование модели SILO в иерархии структуры сайта;
  • Распределение ссылочного веса;
  • Технические требования.

1 — Структура сайта и семантическое ядро


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

Кластеризацию следует проводить по топу поисковой выдачи. Оптимальный порог кластеризации: 3.

Чтобы не заниматься рутиной можно использовать специальный сервис от MegaIndex для автоматической кластеризации. В таком случае, работу быстро и без ошибок выполняет робот.

Ссылка на сервис — Подбор и кластеризация запросов.

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

Без учета семантики структура сайта обычно выглядит так:

Структура сайта

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

С учетом семантики, SILO структура должна выглядит так:

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

Выгоды следующие:

  • Навигация и структура сайта понятны пользователям;
  • Правильное распределение по значимости: подстраницы ссылаются на хабы и наоборот;
  • Краулерам поисковых систем проще понять структуру сайта и создать список задач по сканированию страниц.

Главная выгода заключается в следующем — поисковые алгоритмы верно оценивают контекст кластеров и взаимосвязь контента на сайте.

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

Структура сайта SILO

2 — Распределение ссылочного веса


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

Если следовать логике и не учитывать поисковую оптимизацию, то правильная ссылка выглядит так:

tehnika.ua/notebooks/apple/macbooks

С точки зрения поисковой оптимизации правильная ссылка должна выглядеть иначе.
Например так:
tehnika.ua/notebooks/macbooks
[страницы с наиболее важными для продвижения ключевыми фразами]/[страницы с важными для продвижения ключевыми фразами]

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

Далее могут размещаться карточки конкретных товаров и услуг.

Правильно:

tehnika.ua/notebooks/macbooks/macbook-pro-15

Неправильно:
tehnika.ua/notebooks/apple/macbooks/macbook-pro/15

Структура сайта и передача веса по ссылкам

Узнать текущее распределение ссылочного веса по страницам можно используя аудит от MegaIndex.

Ссылка на сервис — MegaIndex Аудит.

Сервис бесплатный.

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

Пример отчета для сайта seoheronews.com.

Аудит структуры сайта

3 — Технические требования


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

Для реализации подобного сниппета на страницы следует добавить соответствующую разметку.

Пример разметки для сайта indexoid:

<script type="application/ld+json">
{
 "@context": "http://schema.org",
 "@type": "BreadcrumbList",
 "itemListElement":
 [
  {
   "@type": "ListItem",
   "position": 1,
   "item":
   {
    "@id": "https://indexoid.com/backlinks",
    "name": "Backlinks"
    }
  },
  {
   "@type": "ListItem",
  "position": 2,
  "item":
   {
     "@id": "https://indexoid.com/backlinks/analytics",
     "name": "Backlinks Analytics"
   }
  }
 ]
}
</script>

Документация по разметке размещена на официальном сайте Google — Google Search Breadcumb.

Рекомендованный материал в блоге MegaIndex по теме семантической разметки по ссылке далее — Семантическая разметка сайта в SEO.

Оптимальная длина URL страницы — включая доменное имя — не должна превышать 75 символов.

Не рекомендуется использовать длинные URL в 75-120 символов.

Вопросы и ответы


Что делать, если текущая структура сайта не соответствует рекомендациям?


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

Наиболее подходящим моментом является смена дизайна сайта или перехода на HTTPS.

В чем разница в терминах: раздел, папка и каталог?


По сути все три термина означают разделы сайты и являются синонимами.

Итак, все приведенные ниже термины означают одно и то же:

  • Структура каталогов сайта;
  • Структура разделов сайта;
  • Структура папок сайта.

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

Нужно ли проводить аудит структуры сайта?


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

Если проблемы будут выявлены, то в качестве решений есть такие варианты:

  • Изменение структуры при редизайне сайта или перехода на HTTPS. Следует использовать данный способ, если на сайте нет значимого объема трафика из поисковых систем;
  • Использование перелинковки. Данный способ позволяет изменить распределение статического веса, но является сложным. Ошибки и явные манипуляции с перелинковкой могут привести к санкциям со стороны поисковых систем;
  • Изменение структуры сайта путем последовательного обновления контента страниц и смены адреса.

Нужно ли разделять информационные и коммерческие страницы?


Да. Структуру сайта следует выстраивать в зависимости от интента.

Про термин интент подробнее в материале по ссылке далее — Что такое интент.

Выводы


Итак, разработка иерархической структуры сайта должна проходить на основе кластеризированного семантического ядра и следующих данных о кластерах:
  • Потенциальная конверсия по группе фраз;
  • Частотность;
  • Конкурентность.

Рекомендации по структуре сайта следующие:
  • Продумывать структуру сайта следует до создания сайта. Иерархия в структуре сайта должна выстраиваться исходя из целей в бизнесе и семантики;
  • Создавайте структуру сайта из связанных кластеров, чтобы добиться тематической связности каждой из страниц;
  • Используйте 1-4 ключевые фразы в полном адресе страницы;
  • Используйте лаконичные URL адреса. Оптимальная длина составляет до 75 символов;
  • Если сайт создан и на сайте есть трафик из поисковых систем, то оптимальным моментом для изменения структуры будет переход сайта на HTTPS или плавное изменение структуры при обновлении страниц;
Используйте аудит для оценки распределения статического веса на сайте. Используя сервис от MegaIndex такие проверки можно проводить бесплатно.

Ссылка на сервис — MegaIndex Аудит.

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

Остались ли у вас вопросы, мнения, комментарии по теме создания структуры сайта?

ru.megaindex.com

что это такое и как создать (с примерами)

Структура сайта - это базис, фундамент любого интернет ресурса, будь то интернет магазин или информационный сайт. 

Благодаря качественной, грамотно спроектированной структуре поисковые системы быстро совершают обход сайта, не расходуют напрасно ресурсы робота (crawl budget, бюджет на обход). Это приводит к быстрой индексации сайта поисковыми системами. У хорошо спроектированного сайта новые документы могут попадать в индекс практически через день после размещения на интернет ресурсе. 

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

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

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

Именно поэтому тщательная подготовка, анализ и планирование -  это критически важные шаги при работе над структурой любого сайта, будь то небольшой сайт услуг или огромный classified (пример: Авито).

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

Что такое структура сайта?

Структура сайта - это логическая схема построения страниц сайта с распределением по папкам и категориям. Если смотреть с точки зрения пользователя, то структура сайта - это навигация, путь по тому или иному сайту. 

Фото 1: Пример кулинарного сайта, который сгруппировал виды блюд в категории, сделав что-то наподобие поваренной книги.

Если смотреть с другой стороны - это набор URL’ов, структурированных по логической схеме. Семантическое ядро - информационный фундамент сайта, структура - более технический. В любом случае, эти понятия связаны, так как порой достаточно разделить намерения пользователя и мы получим эскиз структуры.

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

Принципы построения структуры сайта

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

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

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

В целом можно выделить следующие типы сайтов, имеющие различия в структурах:

  • Сайт-визитка

  • Коммерческий сайт

  • Интернет-магазин

  • Информационный сайт

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

Сайт-визитка

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

Фото 2: Пример структуры простого сайта визитки какой либо небольшой компании.

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

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

Коммерческий сайт

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

Фото 3: Пример структуры более сложного коммерческого сайта, где каждая страница сайта раскрывает информацию о том или ином направлении бизнеса или услуге.

На этот раз количество связей имеет более разветвленный вариант и из раздела “Услуги” мы можем перейти в рубрику “Ремонт квартир”, а уже из неё попасть на документ “Капитальный ремонт”.

Интернет магазин

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

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

Фото 4: Пример структуры базового интернет магазина с каталогом товаров, карточками и фильтрами (тегами).

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

Информационные сайты 

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

Информационные сайты можно разделить на два вида, от которых будет зависеть их структура:

  • Сайты с узкой тематикой, нишевые сайты (например сайт, посвященный лечению варикозного расширения вен или акне).

  • Сайты порталы, посвященные какой то широкой проблеме (материнство, мода, прически, домашние животные).

Нишевые сайты

Пример информационного сайта с узкой тематикой фитнеса:

Фото 5: Упрощенная структура информационного сайта об упражнениях и здоровом образе жизни.

В этом случае мы имеем древовидную структуру, в которой каждая статья связана с разделом. То есть мы можем связать раздел “Упражнения на воздухе” с каждой внутренней статьей, при этом сам раздел может играть только собирающую роль, своеобразную оболочку - контейнер для документов, для совмещения статей одного направления.

Порталы

Вариант портала - это тот же информационный сайт, но с гораздо более широкими направлениями и он может представлять из себя “связку” узких информационных направлений, в рамках одной темы. Примером популярного информационного портала может быть женский журнал woman.ru.

Если бы мы делали портал про фитнес, раздел "Спорт”, мог бы быть одним из разделов со своими рубриками и статьями:

Фото 6: Многоуровневая структура раздела обусловлена большим количеством рубрик, которые планируется развить.

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

Требования к структуре сайта

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

Требования ПС Яндекс к структуре

Поисковая система Яндекс имеет подробную инструкцию по работе со структурой сайтов - ссылка. Если не вдаваться в детали, в общем можно выделить следующие ключевые рекомендации:

  • Каждый документ должен относиться к своему разделу.

  • Чем больше вложенность страницы, тем дольше Яндекс будет ее индексировать. То есть, если страница в структуре выглядит так: eda.ru/salaty/olivie то она проиндексируется быстрее, чем eda.ru/bluyda/prazdniki/novyj_god/olivie.

  • Используйте карту сайта sitemap.

  • Ограничивайте индексирование служебной информации. Например, не стоит индексировать “результаты поиска по сайту”. Для поисковых систем они не сыграют роли в скорости индексации или ранжировании, но общую скорость проверки сайта замедлят и расходуют бюджет на обход сайта роботом. Такой функционал должен быть прежде всего для пользователей, нежели для роботов.

  • Каждая страница должна иметь уникальный URL. В данном случае все просто - если у нас правильно составлено семантическое ядро, то и дубликатов по названию не должно встретиться.

  • Желательно, чтобы формат URL давал представление о том, что находится на странице куда он ведет. То есть ЧПУ хорошо воспринимается не только пользователями, но и поисковыми системами.

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

  • Проверяйте корректность symlink-ов. То есть не должно быть цикличных страниц с большим количеством повторений, например semyadro.pro/sbor/sbor/sbor/sbor.

Указанные рекомендации позволят создать правильную структуру не только для Яндекса, но и для пользователя.

Требования ПС Google к структуре

Google так же имеет свои требования к правильной структуре сайта.

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

  • Используйте ЧПУ. Гугл так же ориентируется на ЧПУ для определения релевантности страницы.

  • Используйте пунктуацию в ссылках. То есть для разделения нескольких слов в ссылках необходимо использовать знаки пунктуации: не /sineeplatje, а /sinee-platje. Гугл рекомендует “-”, а не “_”.

  • Не используйте сложные URL.

Так же информация по структуре и не только есть в руководстве по оптимизации от самой компании Google - ссылка.

Как правильно составить структуру сайта в виде схемы

Итак, правила изучены, рекомендации получены. Необходимо приступать к самому созданию структуры. Алгоритм, по которому мы будем выстраивать каркас нашего сайта основывается на использовании лучших практик. Это позволит затратить меньше усилий и при этом основываться на рабочий результат.

Анализ конкурентов

Для того, чтобы составить правильную структуру сайта не обязательно сидеть и придумывать ее с нуля. Велика возможность упустить что-либо, особенно если вы раньше не сталкивались с подобной практикой. Намного проще будет взять уже готовую структуру и адаптировать её под свой проект. Как это сделать? Сейчас расскажем.

Итак, у нас есть тематика. Допустим, это интернет магазин бытовой электроники. Структуры интернет магазинов как правило самые подробные и разветвленные. Чтобы не продумывать каждый раздел мы поступим проще - посмотрим у конкурентов. Будьте уверены, что конкуренты давно проделали всю работу за нас. Чтобы исключить ошибки тех же конкурентов - мы будем анализировать нескольких.

Алгоритм изучения конкурентов на примере интернет магазина бытовой электроники.

Поиск конкурентов в каталогах

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

Liveinternet - рейтинг сайтов по категориям, где можно взять список лидеров ниши.

Фото 7: Перечень категорий сервиса Liveinternet. Категории достаточно широкие, это несколько усложняет задачу.

Top 100 Rambler - удобный топ с конкретными разделами.

Фото 8: Рамблер удобно сгруппировал сайты по направлениям, можно смело использовать.

Яндекс Каталог - каталог от поисковой системы Яндекс.

Фото 9: Яндекс.Каталог - хороший источник качественных сайтов.

Семраш - многофункциональный сервис по работе с Google, в котором можно найти конкурентов и выгрузить их карты сайта.

Серпстат - так же сервис для поиска и выгрузки структуры конкурентов по Яндекс и Google.

Арсенкин - инструмент для выгрузки ТОП сайтов по запросу.

Что нам необходимо сделать - нам нужно найти нашу категорию в рейтингах сайтов и выписать оттуда конкурентов, например в таблицу excel или в гугл таблицы (Google speadsheets).

Фото 10: Составляем таблицу с url сайтов конкурентов в нашей тематике. Лучше брать крупных игроков, т.к. выше шанс что у них в плане структуры все в порядке.
Расширение через Serpstat, Semrush и сервис Arsenkin

Затем переходим к сервисам - получаем базу сайтов по ключевому слову “бытовая техника”. Подробнее об использовании сервисов: Серпстат и Семраш.

Проверка запроса в серпстат.

Фото 11: Ищем топ конкурентов по ключевому слову в тематике.

Мы получаем “Конкурентов в поисковой выдаче”:

Фото 12: Серпстат показывает список наиболее видимых сайтов в выдаче по запросу.

Выписываем получившийся список в нашу таблицу.

Фото 13: Создаем новую колонку и вносим в нее данные.

 Далее переходим к Семраш.

Фото 14: Повторяем операцию в сервисе Semrush.

Не забываем поменять регион на RU. Получаем список конкурентов по Google.

Фото 15: Список конкурентов из Семраш.

 В Семраш есть возможность экспорта получившегося ТОП 100 если у вас приобретена подписка (99$), в ином случае переносим необходимые данные вручную.

Фото 16: Экспорт доступен только при активной подписке.

Так же добавляем в нашу таблицу Excel. 

Фото 17: Создаем отдельную колонку для конкурентов, полученных из Semrush.

Ту же операцию проделываем на сайте Арсенкина.

Чистка и объединение

После всех манипуляций нам необходимо объединить все эти списки в один и почистить его от дублей. На выходе у нас должно получиться нечто подобное.

Фото 18: Итоговый список после чистки на дубликаты.

Необходимо почистить итоговый список от таких сайтов как yandex.ru, avito и других больших агрегаторов, которые не являются нашими прямыми конкурентами.

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

Рассмотрим на примере магазина М-Видео. Для выгрузки структуры сайта у нас есть 2 варианта:

  • Визуальное ознакомление со структурой и её воспроизводство в excel таблице.

  • Выгрузка URL’ов с помощью сервисов.

Ручная выгрузка структур конкурентов

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

Фото 19: Дочерние страницы раздела "Компьютеры и мониторы" на сайте М-Видео.

То, как мы переносим в нашу рабочую таблицу (краткий пример).

Фото 20: Создаем древовидную структуру в excel таблице по образу и подобию того, что мы видим на сайте.

Таким образом нам необходимо выгрузить структуру каждого отобранного сайта.

Автоматизированная выгрузка с использованием сервисов

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

Фото 21: Анализируем сайт через Serpstat.

Жмем поиск и затем в разделе “SEO анализ” находим “Страницы сайта”:

Фото 22: Наша задача - найти инструмент "Страницы сайта".

В итоге мы получаем такой результат:

Фото 23: Serpstat показывает нам все документы выбранного сайта.

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

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

Объединение структур

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

Для объединения необходимо взять за основу сайт с самой хорошей и полной структурой. К нему мы будем добавлять структуры других сайтов. Например, mvideo оказался наиболее удачным вариантом и его мы будем дополнять.

Фото 24: Берем структуру сайта М-Видео в качестве базиса.

Как происходит наполнение? Все просто - мы смотрим схожие разделы у других интернет магазинов и переносим сюда их содержимое. Для удобства можно каждый раздел разбить на колонки. Есть 2 вариант работы: добавлять только уникальные разделы, которых нет в основной структуре, либо добавлять всё и затем удалить дубли. Второй вариант подходит для объемных структур.

Допустим, в магазине Эльдорадо представлено большее количество марок мониторов, чем у М-видео. В таком случае мы просто дополняем раздел мониторы нужными марками:

Фото 25: Дополняем раздел отсутствующими марками, дубли чистим потом.

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

Чистка и удаление неэффективных разделов

Структура получится широкой, однако нас интересует ее максимальная эффективность и “мертвые” страницы нам не нужны. Поэтому необходимо проанализировать полученный результат на спрос и отсечь непопулярные или ненужные разделы. Для этого приступим к 4 этапу и перейдем в программу Кей Коллектор.

Чтобы оценить спрос того или иного раздела мы будем использовать Кей Коллектор. Для начала нам необходимо подготовить так называемую матрицу парсинга. Для этого перейдем к нашей таблице. На примере мониторов это будет выглядеть так:

Фото 26: Копируем марки мониторов в отдельную вкладку.

Чтобы составить матрицу парсинга необходимо для каждой марки добавить слово “монитор”, для последующего добавления в Key Collector.

Фото 27: Дополняем матрицу.

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

Для сбора данных нам хватит только левой колонки вордстата. На основе полученных в ходе парсинга данных мы можем оценить целесообразность добавления того или иного раздела. Допустим, если базовая частота мониторов VIEWSONIC менее 20 в месяц (точную частоту можно изначально не считать, хватит и базовой), то смысла в добавлении такого раздела не много, разве что для представления всей линейки товаров.

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

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

Программы для построения структуры сайта

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

Сложность структуры определяется двумя параметрами: уровнем вложенности и сбалансированностью. Уровень вложенности - это количество переходов, которые нужно сделать с главной страницы до самого дальнего документа в структуре. Не рекомендуется чтобы это значение было больше 3. Сбалансированность мы определяем на глаз, оценивая количество документов внутри разделов и рубрик. Не должно быть сильных перекосов, когда в одном разделе 100 документов, а в другом 25.

Наиболее удобные ПО для создания структур сайта:

  1. X-Mind - бесплатная программа, созданная для построения майнд карт, структур и диаграмм различных процессов. Довольно проста в использовании, обладает широким функционалом и поддерживается на всех ОС. Можно смело рекомендовать друзьям и знакомым.

  2. Draw.io - бесплатный онлайн сервис для создания структур и диаграмм. Требует наличия почты от Google. В арсенале инструментария побольше, чем у X-mind, присутствует ряд технических и инженерных шаблонов (для наших целей не интересны). Еще одним плюсом является возможность выгрузки результата на Google диск и прочие сервисы наравне с выгрузкой на ПК.

  3. Microsoft Visio - софт от популярной компании который очень гибок в настройках и возможностях. Подойдет для создания структур любой сложности и направленности, обладает онлайн интерфейсом. Приобретается в рамках пакета Microsoft Office.

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

Схема структуры сайта в X-Mind

Мы рассмотрим построение структуры в программе X-Mind. Чтобы наглядно увидеть все наши разделы, рубрики и категории переносим данные из excel таблицы в x-mind карту. Для добавления подраздела можно использовать кнопку Tab, переносить разделы можно мышью.

Краткий пример одного из разделов в итоге будет выглядеть так:

Фото 28: Структура нашего интернет магазина в виде майнд карты в программе X-Mind.

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

Выводы

Структура сайта не менее важна для фундамента проекта, чем семантическое ядро. Правильная структура - один из критериев успеха сайта. 

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

Основные моменты:

  • Обязательно анализируем конкурентов из ТОПа. Это бесплатный опыт на чужих ошибках. Благодаря современным сервисам или грамотной ручной проработке можно создать отличную структуру будущего проекта.

  • Проверяем актуальность разделов через Key Collector. Разделы без спроса могут быть полезны, но с коммерческой точки зрения они не принесут ощутимой пользы (релевантно только для ecommerce сайтов, для информационных проектов разделы и рубрики обычно формируются по логическому принципу).

  • Используем ЧПУ. Это помогает как роботам поисковых систем, так и пользователям.

  • Ориентируемся на пользователя. Если мы попросили зайти на наш сайт какого-нибудь знакомого, поручили ему найти какой-либо раздел или страницу и он сделал это без труда - значит структура как минимум понятна пользователю. Для чистоты эксперимента можно опросить нескольких человек.

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

semyadro.pro

Отправить ответ

avatar
  Подписаться  
Уведомление о