Как разработать структуру сайта


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

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


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

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

Пример структуры веб-сайта (Блоки кликабельны)

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

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

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

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

Можно быстро получить визуальную структуру почти любого веб-сайта у которого есть файл sitemap.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.

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

правил и типов - FlowMapp

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

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

Что такое структура веб-сайта?

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

Подходы к разработке организационных схем

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

Нисходящий подход

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

Подход снизу вверх

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

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

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

Правила разработки структуры веб-сайта

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

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

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

Особенности разработки структуры веб-сайта

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

Адаптивная структура

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

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

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

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

Архитектурные решения для структуры веб-сайта

Иерархическая структура

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

Матричная структура

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

Органическая структура

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

Согласованная структура

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

Основные принципы организации структуры веб-сайта

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

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

Верхний уровень структуры

На верхних уровнях структуры веб-сайта организационные принципы ориентированы на бизнес-цели и потребности пользователей.Более низкие уровни больше зависят от конкретного контента и функциональности услуги.

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

Нижний уровень структуры

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

Заключение

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

Вопрос - ответ

- У меня уже есть сайт, и он неправильно структурирован. Стоит ли создавать структуру с новыми страницами или нужно реструктурировать старые?

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

- Когда полезно облако тегов?

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

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

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

.

Как разработать структуру навигации

  1. Веб-дизайн и разработка
  2. Разработка сайта
  3. Как разработать структуру навигации

Дэвид Карлинс, Дуг Салин

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

Вы не хотите ставить препятствия перед посетителями, которые что-то ищут на вашем сайте. Вы создаете свой сайт по определенной причине (или по ряду причин). У вас есть идеи о том, какие материалы являются приоритетными для посетителей, а какие нет.

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

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

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

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

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

OmniGraffle имеет представление как в виде структуры, так и в виде блок-схемы. Вы можете показать или скрыть боковую панель контура. При активной боковой панели схемы вы можете вводить заголовки блок-схемы и понижать их в должности, нажимая Tab (или повышать их, нажимая Shift + Tab).

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

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

Об авторе книги

Дэвид Карлинс - профессионал в области веб-дизайна и автор, написавший более 50 книг и создавший обучающие видео по лучшим инструментам веб-дизайна. Дуг Салин является соавтором книги All-in-One для маркетинга в социальных сетях для чайников и автором книги Digital Landscape & Nature Photography For Dummies .

.

Процесс разработки веб-сайтов: полное руководство за 7 шагов

Вопреки расхожему мнению, основная часть разработки и дизайна веб-сайтов не является необходимой для процесса кодирования. Действительно, такие технологии, как HTML, CSS и JavaScript, придают сети, которую мы знаем ее форму, и определяют способ взаимодействия с информацией. Но то, что обычно остается за кадром и в то же время остается важной частью жизненного цикла разработки веб-сайта, - это этапы предварительного сбора информации, детального планирования и обслуживания после запуска.
В этой статье мы рассмотрим, как может выглядеть общий процесс разработки веб-сайта. Общее количество стадий разработки обычно варьируется от пяти до восьми, но каждый раз вся картина остается примерно такой же. Выберем среднее значение. Итак, вот семь основных шагов: 1) Сбор информации, 2) Планирование, 3) Дизайн, 4) Написание и сборка контента, 5) Кодирование, 6) Тестирование, обзор и запуск, 7) Обслуживание.

График разработки веб-сайта

Когда вы думаете о создании веб-сайта, ваши мысли вращаются вокруг двух основных вопросов - цены и времени.Эти два значения во многом зависят от размера и масштабов проекта. Чтобы обрисовать весь процесс разработки, вы можете создать график разработки веб-сайта, добавив задачи и установив контрольные точки для вашего проекта. Это лучший способ отслеживать реализацию вашего проекта, чтобы не отставать от дедлайна.
Для этого мы предпочитаем использовать GanttPRO - удобную, интуитивно понятную диаграмму Ганта для онлайн-планирования проектов. Смотрите скриншот ниже:

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

Жизненный цикл разработки веб-сайтов

Шаг 1. Сбор информации: цель, основные цели и целевая аудитория

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

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

Расчетное время: от 1 до 2 недель

Шаг 2. Планирование: создание карты сайта и каркаса

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

На основе информации, собранной на предыдущем этапе, создается карта сайта . Вот карта сайта XB Software:

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

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

Для этого можно использовать любой макет. Мы использовали Moqups. Вот как может выглядеть каркас:

Другая важная вещь - это выбрать стек технологий - язык программирования, фреймворки, CMS, который вы собираетесь использовать.

Расчетное время: от 2 до 6 недель

Шаг 3. Дизайн: макеты страниц, цикл проверки и утверждения

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

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

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

Расчетное время: от 4 до 12 недель

Шаг 4. Написание и сборка контента

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

Расчетное время: от 5 до 15 недель

Шаг 5.Кодирование

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

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

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

Расчетное время: от 6 до 15 недель

Шаг 6. Тестирование, обзор и запуск

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

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

Расчетное время: от 2 до 4 недель

Шаг 7. Техническое обслуживание: мониторинг мнений и регулярное обновление

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

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

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

Расчетное время: в процессе

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

Бонус: Контрольный список разработки веб-сайтов

Чтобы ничего не пропустить и выполнить работу вовремя, воспользуйтесь этим контрольным списком:

Выводы

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

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

.

Как визуализировать структуру сайта за 5 шагов

Автор: Валери Ниечай,

13 августа , 2019

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

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

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

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

Почему важна хорошая структура сайта?

Я сведу его к нескольким пунктам:

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

Что это: «сайт с идеальной структурой»?

Как насчет дополнительных пунктов?

  • Тот, который имеет иерархическую структуру.

    Где иерархия:

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

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

  • Тот, который имеет эффективную внутреннюю структуру ссылок.

    В первую очередь , внутренняя перелинковка спасает вас в ситуации, когда структура вашего сайта далеко не мелкая - она ​​уменьшает глубину клика.

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

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

Что вам нужно сделать перед визуализацией структуры вашего сайта?

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

Таким образом, проверьте:

  • Карта сайта - просто убедитесь, что она у вас есть, и обновите ее в соответствии с вашими изменениями.Карты сайта очень гостеприимно показывают поисковые системы вокруг вашего сайта;
  • Ссылки во Flash - ссылки, встроенные во Flash, могут быть недоступны для поисковых систем;
  • Ссылки «Nofollow» - убедитесь, что ваша внутренняя структура ссылок не содержит ссылок «Nofollow», поскольку такие ссылки получают свою долю ссылочного веса, но не передают ее на страницы, на которые они указывают;
  • ссылок с фреймами - фреймы являются серьезным препятствием для Google и других поисковых систем, когда они пытаются проиндексировать ваш сайт;
  • Страницы с дублированным содержанием - страницы с одинаковым или похожим содержанием вводят в заблуждение поисковые системы, поэтому они фактически могут индексировать неправильные страницы и ранжировать старые страницы по сравнению с новыми.Кроме того, люди могут ссылаться на разные версии одной и той же страницы. Таким образом, рассмотрите возможность использования канонизации для правильной индексации и возврата страниц в поисковой выдаче;
  • Атрибуты Alt для изображений - помогают поисковым системам понять, о чем ваши изображения. Это сделает ваш контент более авторитетным. Кроме того, это прекрасная возможность использовать больше ключевых слов безопасным способом.

Как визуализировать структуру сайта с помощью WebSite Auditor? И что делать дальше.

Шаг 1. Визуализация общей структуры сайта.

Создайте проект для своего сайта (или его части) в WebSite Auditor или откройте существующий, перейдите в Структура сайта> Визуализация и посмотрите, что произойдет.

Когда у вас есть график, вы можете работать в трех режимах:

1) Кратчайшие связи между вашими узлами.

По умолчанию инструмент показывает 1 000 страниц (которые можно настроить до 10 000 страниц), упорядоченных по Глубина щелчка .

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

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

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

2) Подключения конкретного узла.

Щелкните любой узел, чтобы увидеть только его соединения:

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

3) Все существующие подключения.

Нажмите кнопку Показать все соединения страниц , чтобы выполнить то, что обещает эта кнопка - отобразить все соединения, а не только самые короткие, ограниченные значениями Click Depth и Internal Page Rank .

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

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

Совет от профессионалов: Если у вас большой веб-сайт, лучше визуализировать его по частям (например, основные категории, блог и т. Д.)). Таким образом вы сможете составить более полное представление о своем сайте и с легкостью выявить любые проблемы. Используя опцию фильтра (щелкните значок воронки в правом верхнем углу), вы можете либо включить в URL только страницы с определенными словами / символами, либо исключить страницы на том же основании.
Также возможно создание отдельных проектов для определенных категорий вашего сайта. Какой вариант вам подходит.

Шаг 2. Проанализируйте изображение Click Depth.

1) Посмотрите на свой график и проверьте, есть ли у вас бесхозных страниц .Они показаны серыми узлами, которые не связаны с другими:

Вы можете спросить, как мы находим такие страницы, если они не связаны. Достаточно честный вопрос. Мы получаем их либо из индекса Google (в этом случае могут быть внешние ссылки на эту страницу, но не внутренние - это необходимо исправить), либо из XML карты сайта (в данном случае это означает, что вы не обновляли ее некоторое время. , и есть некоторые старые вещи, от которых нужно избавиться).

2) Обратите внимание на цветов ваших узлов .

  • Синие узлы - это страницы с кодами 3xx (редиректы).

Если вы видите несколько синих узлов, следующих друг за другом, это цепочка перенаправления (например, если ваша версия без www перенаправляет на http: // www, а затем снова перенаправляет на https: // www). Как бы красиво это не выглядело, его нужно исправить.

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

  • Красные узлы - это страницы с кодами 4xx / 5xx.

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

3) Найдите длинных строк и проверьте, оправданы ли они:

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

Совет от профессионалов: Обратите внимание, что вы можете навести указатель мыши на любой узел и отобразить дополнительную информацию:

Шаг 3. Проанализируйте картину внутреннего рейтинга страницы.

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

Совет для профессионалов: Ознакомьтесь с дополнительной информацией, наведя указатель мыши на узел. Обратите внимание на значение Internal Page Rank :

.

В этот момент вы можете спросить: 'Что с этим Page Rank? Как этот график должен мне помочь? '

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

Если вам интересно, как изменить значения Internal Page Rank в случае, если они неадекватны, вот лишь несколько стратегий для моделирования Internal Page Rank , которые вы можете использовать в зависимости от ваших целей SEO:

  • Внутренние ссылки, которые помогают вашим основным страницам занимать более высокий рейтинг по ключевым словам с большим объемом поиска

Давайте считать само собой разумеющимся, что ваш веб-сайт оптимизирован для ряда ключевых слов с большим объемом поиска и высокой конкуренцией, обычно общего значение (например, «зимняя рыбалка»).

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

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

  • Внутренние ссылки, нацеленные на ключевые слова со средним объемом поиска

Ключевые слова со средним объемом поиска обычно представляют собой ключевые слова из трех слов с более конкретным значением, чем ключевые слова с большим объемом поиска (например,г., «зимнее рыболовное снаряжение»). Обычно они относятся к категориям.

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

  • Внутренние ссылки, нацеленные на ключевые слова с низким объемом поиска

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

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

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

Шаг 4. Проанализируйте картину просмотров страниц.

Подключите свою учетную запись Google Analytics. Вы можете сделать это в настройках > Учетная запись Google Analytics .Обновите данные в Структура сайта> Страницы , а затем на приборной панели Визуализация перестройте график просмотров страниц .

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

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

Зачем вам этот график? Это очевидно: вы можете сразу увидеть поток трафика на определенные страницы! Я думаю, что это очень хорошее дополнение к вашим электронным таблицам и таблицам GA.

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

Шаг 5. Управляйте своими графиками визуализации.

1) Отредактируйте графики прямо в приложении.

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

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

Добавить страницу.

Удалить выбранную страницу из визуализации . (Или просто нажмите «Удалить» на клавиатуре).

Добавить входящую ссылку . Можно добавить сразу несколько ссылок.

Добавить исходящую ссылку . Можно добавить сразу несколько ссылок.

Создать ссылку перенаправления .

Удалить выделенную ссылку .

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

2) Настройте свой график.

Вы можете сделать свой график еще удобнее, применив индивидуальный подход:

Измените тему фона (светлый или темный). Просто эстетическая вещь☺

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

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

3) Пересчитайте значения после изменений.

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

4) Раскрашиваем график визуализации по тегам.

В ходе аудита вашего сайта в WebSite Auditor вы можете добавлять теги к некоторым страницам определенного типа. Или вы можете сделать это на панели инструментов Pages: щелкните правой кнопкой мыши нужную страницу (страницы) и выберите Добавить теги к выбранным записям .

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

Есть несколько сценариев, когда вы можете захотеть пометить свои страницы. Что сразу приходит в голову:

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

Перейдите на страницу > InLink Rank , отсортируйте свои страницы по InLink Rank (который является альтернативой внешнему Page Rank), выберите наиболее заметные и те, которые нуждаются в некотором повышении, и пометьте их соответственно.

На панели мониторинга Visualization раскрасьте эти две группы по тегам.Проверьте, на что вы тратите свой самый высокий Page Rank. Подумайте, можно ли направить его на те страницы, которым нужна помощь в "повышении рейтинга".

  • Исследование тематических кластеров

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

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

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

Стратегии тематического линкования:

  • Определите столб вашего кластера: страницу с наиболее общей информацией по теме.Всегда делайте обратные ссылки на столб с более конкретных страниц - это как домашняя страница вашего тематического кластера.
  • Ссылка от менее узкого к более конкретному содержимому , создавая тематические подкластеры.
  • Внутри подкластера ссылаются с более высоких ранжируемых на более низкие ранжируемых страниц для повышения релевантности первых.
  • Дайте "похожих постов" советов.
  • Используйте якорных текста с таргетингом на ключевые слова при внутренних ссылках на другие тематически релевантные страницы.Что я имею в виду: не используйте гиперссылку «нажмите здесь», используйте «последний опрос о цветовых предпочтениях носков».
5) Экспортируйте изменения в виде списка дел.

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

Нажав кнопку в нижней части панели действий, вы можете отменить все изменения / последнее изменение или экспортировать окончательный список изменений в CSV:

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

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

Почему хорошо иметь встроенный инструмент визуализации?

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

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

Итак, я должен задать свой последний вопрос здесь, зачем все потеть, если мы уже все встроили в модуль Visualization WebSite Auditor? Для выполнения этой задачи требуется всего несколько минут.Вам лучше убедиться в этом сами!


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

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


От: Валери Ниечай

.

Смотрите также

Поделиться в соц. сетях

Опубликовать в Facebook
Опубликовать в Одноклассники
Вы можете оставить комментарий, или ссылку на Ваш сайт.

Оставить комментарий