Инструмент «Анализ структуры проекта» проводит онлайн анализ структуры сайта на основе проиндексированных Яндексом страниц. А также строит наглядную структуру (иерархию), позволяющую визуально оценить наиболее объемные разделы. Онлайн-инструмент будет полезен для следующих целей:
-
Изучения конкурентов. Например, для определения точек роста поискового трафика продвигаемого проекта (новые категории, типы страниц, теги) или выделения приоритетных разделов, групп товаров, категорий (на основе количества документов).
-
Изучение собственных проектов. Например, позволяет увидеть более подробную структуру, чем в Яндекс.Вебмастере, который показывает разделы только с более чем 1% содержанием от всего сайта, а также в целом изучить текущее состоянии индексации проекта.
Как с помощью анализа структуры понять, что требуется для роста проекта?
Приведем пример выявления необходимых изменений структуры, содержания сайта flor-design.ru по сравнению с более успешными конкурентами:
-
С помощью сервиса SimilarWeb (или любым другим способом) найдем более успешного конкурента — сайт zakaz-buketa.ru.
-
Проведем анализ структуры нашего проекта и конкурента.
-
Сравнивая структуры проектов, можно сделать вывод, что вектор развития продвигаемого сайта flor-design.ru, направленный на достижение тех же объемов трафика, что и исследуемого конкурента, должен включать в себя создание разделов «Статьи» и «Новости» с последующим наполнением этих разделов до ~40% объема всех страниц сайта (что принесет СЧ- и НЧ-трафик) и значительное увеличение количества товаров в каталоге.
Вебинар: формирование оптимизированной структуры интернет-магазина
Особенности инструмента
-
Данные в таблице результатов можно сортировать по любому полю — в один клик можно выявить наиболее значимые разделы как на продвигаемом сайте, так и на сайтах конкурентов.
-
Инструмент проводит анализ с глубиной в два уровня вложенности от введенного URL.
-
Инструмент поддерживает анализ не только всего сайта, но и конкретного раздела. Например, при анализе URL вида «site.ru/category/» будет исследован только раздел «/category/» с глубиной в два уровня вложенности от него. Это будет полезно в случае, если необходимо детально проанализировать определенную часть сайта. Например, узнать теги, используемые конкурентом.
-
Инструмент позволяет скачать данные в формате CSV для дальнейшего анализа.
-
Чтобы отфильтровать малозначимые разделы (с малым объемом — 3-10 страниц), достаточно воспользоваться быстрым фильтром — поле «Скрыть разделы с числом станиц менее», который работает без перезагрузки страницы.
-
На сервере хранятся до 40 предыдущих проверок структуры, доступные для скачивания в формате CSV (только для пользователей тарифов «Профессионал» и «Эксперт»).
Удачи в работе!
Задайте вопрос или оставьте комментарий
Перейти к инструменту «Анализ структуры проекта»Другие вопросы нашего FAQ
Прототипирование — значимый этап в веб-разработке, который позволяет определить и сформировать ДНК проекта на ранних стадиях. В последние годы количество онлайн-сервисов и инструментов для прототипирования ощутимо возросло. В этом обзоре представлены 10 сервисов для создания визуальных сайтмэпов.
Прежде чем перейти к описанию инструментов не лишним будет разобраться в терминологии.
Сайтмэп — это структура страниц сайта представленная в иерархической модели. Такая схема помогает оценить объем страниц, которые формируют сайт, а также понять логику их взаимосвязи. Иногда это примитивные по организации и структуре схемы. А порой очень сложные с многоуровневой вложенностью карты. Сайтмэпы помогают планировать распределение содержания и механику навигации будущего сайта.
Пример структуры веб-сайта (Блоки кликабельны)
Рассмотрим три типа сайтмэпов:
Визуальные сайтмэпы используются как вспомогательный элемент в планировании, анализе и прототипировании проекта. Сегодня тяжело представить начало работы над проектом без предварительного планирования. Cайтмэп поможет лучше понять механику будущей навигации, оценить объем необходимого контента. Визуальный сайтмэп — важный элемент в выстраивании коммуникации внутри команды разработчиков. Благодаря наглядной структуре сайта обсуждение, оценка и распределение ресурсов значительно упрощается.
HTML cайтмэпы призваны помогать в навигации по сайту. Традиция создавать отдельную страницу с сайэтмэпом считают устаревшей, но тем не менее, такой подход не будет лишним, если проект обладает сложной структурой и многоуровневой вложенностью.
XML сайтмэпы скрыты от пользователей, но при этом важны. Описывая структуру сайта и взаимосвязи страниц, XML сайтмпэмы облегчают поисковым машинам анализ сайта. Следовательно положительно влияют и на ранжирование. В XML сайтмэпах важна чистота описания структуры и используемый синтаксис, поскольку кроулеры поисковых движков не терпят непоследовательности и расхлябанности кода. XML сайтмэпа заменили более старый способ «прямой загрузки в поисковые движки» на специальной отдельной странице. Теперь загрузка сайтмэпа происходит напрямую, или же разработчики просто ждут, пока поисковая машина найдет файл самостоятельно. Обновляя файл сайтмэпа с новой структурой, вы обеспечиваете более быстрое индексирование страниц, по сравнению со стандартной автоматической процедурой поисковой машины.
Можно быстро получить визуальную структуру почти любого веб-сайта у которого есть файл sitemap.xml (нужно просто ввести адрес сайта). Ее можно сохранить, дополнить, редактировать и делиться.
Зачем нужны визуальные сайтмэпы?
Планирование и прототипирование сайта уже давно стали стандартом индустрии. Чаще всего сначала строится майндмэп проекта. Делается это, чтобы определить главные и второстепенные элементы будущего сайта, а также задачи, которые сайт или сервис будет решать.
Сервис c минималистичным и свежим подходом в дизайне интерфейса, запущенный в 2019 году. Без лишних деталей и довесков 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.
Чтобы было легче выбрать, вот сравнительная таблица по всем сервисам (в самом конце) и немного больше скриншотов.
Структура сайта. Чётко, ясно и удобно
Создавать сайты может каждый. Это не закрытые знания, доступные только избранным. Сейчас существует достаточно большое количество вспомогательных средств, делающих процесс разработки сайта более удобным.
Однако далеко не каждый проект развивается без проблем: на определенных этапах возникают трудности технического характера, причиной которых часто является неграмотно спроектированная структура сайта.
Также бывают ситуации, когда разработчик не испытает никаких проблем с кодом, сайт нормально функционирует, но не приносит желаемых результатов в виде денежной прибыли, посещений и т.д. В таких случаях, как правило, начинают искать недостатки в контенте, количестве обратных ссылок и сильных конкурентах.
На самом деле, в неполноценном функционировании ресурса может быть в первую очередь виновата структура сайта, о которой и будет рассказано в этой статье.
Под структурой сайта понимается внутреннее и внешнее расположение его отдельных элементов. Чтобы найти книжку – надо зайти в нужную комнату, открыть правильный шкаф и запустить руку на определенную полку. Подобную технику хранения информации применяют и при веб-разработке, поэтому важно определиться с понятием внутренней структуры сайта.
Под ней подразумевают организацию связей между страницами. Можно выделить несколько видов такого структурирования.
- Произвольное. Грубо говоря, в этом случае на структуру ресурса просто плюют. Это может практически не сказаться на работе сайта, если он небольшой, но неизбежно приведет к неприятностям в крупных проектах:
- Линейное. В таком случае страницы ссылаются по очереди друг на друга с неизменным порядком следования. Такую модель можно назвать пошаговой, и её применение уместно при оформлении какого-либо заказа, размещении инструкции или составлении обучающих программ:
- Иерархическое. Подобное структурирование хорошо представлять в виде дерева, где наглядно демонстрируется степень вложенности страниц, определенных в каталоги высокого и низкого уровня. Эта модель является самой популярной при веб-проектировании:
Разработка структуры сайта не ограничивается внутренней составляющей. Существует также понятие внешней организации, которая подразумевает под собой расположение элементов на страницах.
Чаще всего, в такой структуре выделяют шапку (в верхней части страницы), футер или подвал (в самом низу), область для расположения контента, а также место под меню.
Набор именно этих элементов встречается наиболее часто, но вовсе не обязательно использовать их все, ведь проектирование модели взаимодействия с пользователем – личное дело каждого разработчика.
Необходимость структурирования сайта (как внешнего, так и внутреннего) ощутили многие веб-разработчики и SEO-оптимизаторы. Часто к такому выводу приходят через печальный опыт, и чтобы получать его как можно меньше, следует обозначить основные причины соблюдения грамотной организации сайта.
- Разработка без проблем. Просто представить себе кучу вещей. Гораздо сложнее – определить, что в ней находится, а главное – где. Если четко осознавать контуры проекта и понимать все внутренние связи между объектами – время написания кода будет минимальным, а продукт – качественным;
- Возможность изменения. Если проект успешен – он должен развиваться и расширяться, а это непременно ведёт к увеличению страниц и функций сайта. В доме можно построить еще несколько этажей, если фундамент и стены крепкие, точно так же дело обстоит и с веб-разработкой;
- Удобство пользователей. Если страница своей внешней организацией помогает пользователю совершить необходимое действие, а не вызывает желание нажать на красный крестик – значит, все сделано правильно. Еще одной важной деталью является возможность быстро добраться до любой информации на сайте, а не бесконечно зарываться в каталоги;
- Высокое ранжирование. Сайты с непродуманной структурой могут оказаться в топе лишь по счастливой случайности, так как организация контента оказывает немалое влияние на позиции в результатах поиска.
Продумывая внутреннюю и внешнюю структуру сайта, необходимо учитывать требования и предпочтения, как людей, так и поисковых роботов. Следуя простым рекомендациям, можно серьезно поднять популярность своего ресурса.
- Логическая структура сайта должна давать возможность поисковикам проиндексировать все страницы. Следует соблюдать вложенность каталогов, а также избегать дублирования их названий;
- Располагать ключевые слова как можно выше в коде. Шапка страницы – это место, которое будет первым проверено роботами, поэтому неплохо будет «накормить» их ключевыми словами для привлечения целевой аудитории;
- Предоставить возможность пользователям попасть в любой «уголок» сайта не более чем за 3 перехода. Таким образом, посетитель будет осознавать свое местоположение, и чувствовать себя на страницах ресурса максимально комфортно.
Человек, который конструирует свой сайт, безусловно, знает, где и что расположено. Аккуратно разложив html-файлы по каталогам, можно увидеть структурную организацию уже у себя на компьютере. Рекомендуется добиваться такого эффекта во время работы с масштабными проектами.
Путешествуя по страницам своего или чужого сайта, также можно увидеть его структуру. Иногда для этого достаточно просмотреть меню, в котором отображены уровни вложенности. Такой подход применим к не очень большим сайтам.
Если же ресурс достаточно емкий, и не совсем понятно: где, что и как – посмотреть структуру сайта можно при помощи специальных сервисов. Они предоставят всю необходимую информацию очень наглядно и просто. Воспользуемся возможностями сайта Defec.ru и просмотрим его структуру:
Введем адрес сайта и капчу:
Имеем возможность узнать больше информации – пользуемся:
Просканировав ресурс, получаем следующую структуру:
а также дополнительную информацию:
Чтобы понять, как организовываются связи между страницами в конкретном случае – рассмотрим структуру сайта интернет магазина. Так как их существует достаточно много – определим наиболее общие особенности.
- Иерархическая структура. Любой интернет магазин выступает ярким примером древовидного деления, сужаясь к верхушке и «разрастаясь» к «корням»;
- Четырехуровневая организация. На самой вершине находится главная страница, с которой начинается путь посетителя к покупке. Ниже в иерархии стоят категории товаров: если их много – то лучше оформить их выпадающим списком в меню. Еще ниже находятся карточки товаров, в которых приведено подробное описание каждого конкретного продукта. В самом «корне» расположена форма заказа, которая должна успешно завершить путешествие клиента;
- Отображение местоположения пользователя в структуре. Посетитель должен все время видеть, где он находится, чтобы успешно ориентироваться в предлагаемых услугах;
- Четкое разделение информации о товарах и административных сведений. Сведения о товарах должны располагаться в пределах самых заметных элементов внешней структуры страницы. Заострять внимание посетителей на административных данных не следует.
Таким образом, структура сайта подразделяется на внутреннюю и внешнюю. Первая отвечает за связи между страницами, а вторая – за взаимное расположение отображаемых элементов.
Грамотная структура сайта помогает поисковым системам проиндексировать всю информацию, а посетителям – чувствовать себя комфортно, пользуясь ресурсом.
Проверить структуру своего или чужого сайта можно самостоятельно, «пройдясь» по всем страницам или изучив меню. Однако гораздо удобнее воспользоваться специально предназначенными для подобной проверки сервисами. Они обеспечат наглядную подачу информации, а также снабдят дополнительными сведениями об исследуемом ресурсе.
Как создать структуру сайта правильно с точки зрения поисковой оптимизации?
Итак, далее рассмотрим особенности проектирования и организации структуры сайта.
Как создать структуру сайта с учетом требований SEO?
Рекомендации по SEO в части создания структуры сайта сводятся к учету следующих нюансов:
- Создание структуры на основе семантического ядра. Использование модели SILO в иерархии структуры сайта;
- Распределение ссылочного веса;
- Технические требования.
1 — Структура сайта и семантическое ядро
Если сайт продвигается в поисковых системах, значит поставлена задача по удовлетворению спроса на рынке. Ключевые фразы собираются с целью создания семантического ядра, основанного на потребительском спросе. Чтобы сделать структуру сайта из семантического ядра, собранный набор ключевых фраз требуется разбить на кластеры.
Кластеризацию следует проводить по топу поисковой выдачи. Оптимальный порог кластеризации: 3.
Чтобы не заниматься рутиной можно использовать специальный сервис от MegaIndex для автоматической кластеризации. В таком случае, работу быстро и без ошибок выполняет робот.
Ссылка на сервис — Подбор и кластеризация запросов.
Из полученных групп ключевых фраз следует создать семантическую структуру продвигаемого сайта. Подобная структура оказывает положительное влияние при продвижении в поисковых системах.
Без учета семантики структура сайта обычно выглядит так:
При составлении структуры сайта следует правильно группировать тематически связанные страницы, чтобы ссылочный вес перетекал внутри тематической группы.
С учетом семантики, 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 Аудит.
Кстати, после оптимизации существующей структуры сайта могут найтись страницы, на которые нет ссылок. Такие страницы называются orphan page или висячие узлы. Подобные страницы следует удалить или закрыть от индексации, если страницы не используются при продвижении в поисковых системах.
Остались ли у вас вопросы, мнения, комментарии по теме создания структуры сайта?
Определяем структуру страниц примерного сайта
От автора: данная статья является выдержкой из нашей книги HTML5 и CSS3 для реального мира, 2-е издание за авторством Алексиса Гольдштейна, Луиса Лазариса и Эстель Вейль. Книгу можно найти в магазинах по всему миру или купить цифровую версию. Мы изучили основы создания структуры страниц и теги в HTML5, которые нам будут помогать. Теперь пора перейти к созданию частей страницы, в которых будет располагаться контент.
Начнем сверху, с тега header. В хедер можно поместить логотип и заголовок сайта «The Herald», а также слоган. Также можно добавить меню nav.
После хедера основной контент нашего сайта разбивается на три колонки. Вы можете использовать теги section для колонок, но лучше остановитесь и подумайте о контенте. Если в колонках будут отдельные «секции» с информацией (колонка про спорт, развлечения), то можно было бы и использовать тег section. А у нас разделение на колонки только визуальное, поэтому мы возьмем обычный старый div.
Внутри блоков div у нас будут идти статьи, и идеальным кандидатом будет тег article.
В правой крайней колонке кроме статей расположено три блока с рекламой. Блоки с рекламой будут располагаться в тегах article и оборачиваться в aside. Такой подход может показаться странным, но вспомните описание тега article: «самодостаточная композиция […], которая, в принципе, независимая и повторно используемая». И рекламный блок почти идеально подходит под описание, так как обычно он должен размещаться на разных сайтах без модификаций.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееДалее, мы добавим еще один тег article для последней статьи, которая будет располагаться под рекламой. Последняя статья не будет входить в тег aside, который содержит три рекламных блока. Тег article должен быть косвенно связан с контентом страницы, чтобы принадлежать aside. В нашем случае это не так: эта статья является частью основного контента страницы. Было бы неправильно включать ее в aside.
На данный момент третья колонка содержит два элемента друг над другом: aside и article. Чтобы скрепить их и упростить стилизацию, мы обернем их в тег div. Мы не будем использовать section и другую семантическую разметку, так как это подразумевало бы, что article и aside каким-то образом тематически связаны. Эти блоки не связаны – это просто элементы нашего дизайна, которые расположены в одной колонке.
Новый элемент main
Сейчас нужно представить еще один основной структурный элемент, который появился в HTML5 – тег main. Изначально этот элемент не входил в спецификацию HTML5, но был туда добавлен после выхода первого издания этой книги.
К сожалению, объявление тега main и способы его использования немного сложнее. Давайте начнем с происхождения этого элемента. В HTML документах разработчики оборачивали главный контент в общий тег:
<body> <header> … </header> <div> … </div> <footer> … </footer> </body>
<body> <header> … </header> <div> … </div> <footer> … </footer> </body> |
Обратите внимание, что общий тег div здесь используется наравне с header и footer. Также взгляните на ID атрибут со значением main. Также множество разработчиков добавляли ARIA роль к этому тегу:
<div role=»main»> … </div>
<div role=»main»> … </div> |
Мы не будем углубляться в ARIA, эта тема разобрана в Приложении B. Однако новый тег main должен заменить эту практику.
W3C определяет main следующим образом: «тег main представляет собой главный контент тела документа или приложения. Основная область контента содержит контент, который напрямую относится или расширяет центральную тему документа или функционал приложения».
В спецификации WHATWG определение похожее, однако дальше две спецификации сильно расходятся. В спецификации WHATWG говорится: «Нет ограничений по количеству тегов main в документе. Кроме того, существует много примеров, где даже нужно использовать несколько тегов main. Например, на странице с множеством тегов article можно обозначать доминирующий контент каждого такого элемента.»
Это полностью противоречит спецификации W3C:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее«Авторы не должны использовать более одного тега main в документе. Нельзя использовать тег main в качестве дочернего элемента для article, aside, footer, header или nav.»
Также W3C спецификация рекомендует использовать атрибут role=»main» в теге main, пока он не будет полностью распознаваться в браузерах. Мы воспользуемся советами W3C и будем использовать один тег main на странице, а также ARIA роль в качестве фолбэка.
Вернемся к разметке нашего сайта, вот так она будет выглядеть после добавления main в body:
<body> <header> … </header> <main role=»main»> </main> <footer> … </footer> <script src=»js/scripts.js»></script> </body>
<body> <header> … </header> <main role=»main»> </main> <footer> … </footer> <script src=»js/scripts.js»></script> </body> |
Как видите, main не входит в header и footer. В теге main будут располагаться наши три колонки, которые будут составлять главную часть макета и контента сайта The HTML5 Herald.
Продолжаем структурировать сайт The Herald
Последняя часть нашего макета, которую стоит обсудить – футер, который находится на своем традиционном месте внизу страницы (см. скриншот ниже). Так как футер содержит несколько частей с контентом, каждая из которых формирует самодостаточную и тематически связанную единицу, мы разбили их на теги section. Первая секция будет содержать информацию об авторах, каждый автор будет помещен во вложенный тег section. Копирайт и дополнительная информация расположены в отдельном section.
Давайте добавим новые элементы на страницу, чтобы посмотреть, что получится:
<body> <header> <nav></nav> </header> <main role=»main»> <div> <article></article> </div> <div> <article></article> </div> <div> <aside> <article></article> </aside> <article> </article> </div> </main><!— main —> <footer> <section> <section></section> </section> <section> </section> </footer> <script src=»js/scripts.js»></script> </body>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <body> <header> <nav></nav> </header>
<main role=»main»> <div> <article></article> </div>
<div> <article></article> </div>
<div> <aside> <article></article> </aside>
<article> </article>
</div> </main><!— main —>
<footer> <section> <section></section> </section> <section> </section> </footer>
<script src=»js/scripts.js»></script> </body> |
На скриншоте ниже показана страница с подписями основных использованных структурных элементов.
Мы получили структуру, которая послужит надежной опорой для контента нашего сайта.
Замечание: а что если я использую не те элементы?
Иногда бывает сложно запомнить, какой элемент использовать в определенной ситуации. Рекомендуем не заморачиваться и не сидеть долго, думая о семантике. Хорошо быть последовательным, но у неправильного выбора элементов есть несколько последствий. Если ваши страницы доступны, нужно думать именно об этом. Конечно, есть случаи, когда семантически правильные элементы повышают доступность, поэтому рекомендуем вам изучить этот вопрос и быть уверенными в том, что выбранные элементы не понизят доступность ваших страниц. Начать можно с HTML5 Accessibility и The Accessibility Project.
Заключение
С этой главной закончили. Мы изучили основы структурирования контента в HTML5 и начали создавать наш примерный сайт, применяя полученные знания.
В следующей главе мы более подробно разберем HTML5 контент и продолжим добавлять семантику на нашу страницу с помощью других HTML5 элементов.
Редакция: Louis Lazaris
Источник: https://www.sitepoint.com/
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
PSD to HTML
Верстка сайта на HTML5 и CSS3 с нуля
СмотретьПример структуры веб-сайта (Блоки кликабельны)
Какие разделы включить? Что по поводу контента? Мы серьезно все продумали, потратили более месяца на исследования и собрали в этом гиде весь наш 18-летний опыт по созданию сайтов. Дочитав эту статью, вы обретете исчерпывающее представление о том, почему именно так должен быть структурирован сайт компании или продукта, мы также немного коснемся фундаментальных принципов SEO и планирования контента.
Перед тем, как мы углубимся в конкретику, пожалуйста, запомните, а лучше запишите и повесьте на видном месте это правило — всякий раз, когда вы решаете создать какой-либо контент, он должен быть правдивым и четким. Люди чувствуют обман и излишнее бахвальство.
Начало
Создание структуры сайта с нуля может казаться элементарной задачей, однако зачастую это совсем не так. И вот почему.
Создание последовательной структуры означает создание прочной основы для вашего успешного присутствия в сети. Вдумчивое планирование и реализация этого этапа способствуют достижению всех последующих целей максимально эффективно.
Наверняка вы знаете, как для поисковых систем важен хорошо структурированный сайт. И если ожидания поисковиков не будут оправданы, то и вам в этом случае не стоит надеяться на органический приток посетителей. И в этом симбиозе наша цель в построении оптимальной структуры и достижении идеального баланса между роботом и человеком.
Данное руководство предоставит вам развернутые инструкции по структуризации вашего сайта, дельные советы по контенту и примеры готовых проектов для подогрева интереса.
Звучит многообещающе? Тогда начинаем!
Основной совет
Навигация и футер
Прежде всего сфокусируйтесь на панели навигации и футере вашего сайта.
Эти элементы должны присутствовать на каждой странице. Ваши посетители всегда хотят знать, где они в данный момент находятся и куда еще могут попасть. Главное навигационное меню обычно включает в себя лого и ссылки на основные страницы. Футер содержит ссылки на другие разделы и ссылки на ваши страницы в соцсетях.
Если у вас есть сомнения по поводу того, ссылки на какие внутренние страницы включить в футер своего сайта — это хорошо! Потому что ниже по тексту мы уделили этому отдельный раздел.
Подумайте о возможности использования липкой навигации, чтобы ваши пользователи всегда имели меню под рукой, независимо от того, насколько далеко они заскроллили.
Максимизируйте CTR
Посетители сайта имеют тенденцию задерживать свое внимание и совершать максимальное количество кликов в области, составляющей первые полтора экрана.
Поэтому, разместив наиболее ценную информацию и элементы призыва к действию CTA (call-to-action) в эффективном первом поле экрана, вы увеличите показатель кликабельности (CTR — click-through rate) и завладеете вниманием посетителя. Речь идет буквально о 3-4 секундах, за которые посетитель сканирует экран и, не найдя быстро нужной информации, чаще всего сразу покидает страницу.
Призыв к действию (CTA)
Следующий шаг — убедитесь, что элементы call-to-action (CTA), призывающие к конкретному целевому действию, расположены в нужном месте. Стандартным способом размещения CTA является добавление соответствующей кнопки, но также распространены и другие формы — картинки, видео, ссылки.
Исходя из практики, главное правило для CTA — элемент должен выделяться. Чем лучше проработаны эти элементы, тем больше кликов пользователей вы получите.
Политика конфиденциальности GDPR
Если ваша целевая аудитория — это клиенты из стран ЕС, то обработка данных пользователей должна соответствовать правилам обработки персональных данных GDPR (General Data Protection Regulation), принятых в Европе.
Файлы cookies содержат персональные данные и могут использоваться для идентификации пользователей. И если вы собираете (например, установлена программа интернет-статистики вашего сайта) и обрабатываете эти данные, то не забудьте о всплывающей форме при первом визите, чтобы посетители могли дать свое согласие или отклонить cookies.
Помните, что независимо от выбора пользователя, ваш сайт должен быть доступен всем.
Структура
Мы уже сделали это за вас, но если вы все-таки решите самостоятельно провести исследование по качественно сделанным сайтам, то обнаружите, что их структуры похожи. Это отточенные временем модели, которые вряд ли сильно изменятся в ближайшее будущее. Естественно, руководство, приведенное ниже, не является золотым стандартом. Это база, основная отправная точка. Начиная с нее, сфокусируйтесь на своей сфере бизнеса, изучите сайты и структуры конкурентов, чтобы достичь наилучших результатов.
Вот эти страницы, из которых состоит грамотно сбалансированная структура сайта:
- Главная
- О нас
- Продукты / Услуги
- FAQ
- Вакансии
- Блог
- Контакты
- Ошибка 404
- Правовая информация
Уверены, что вы встречали их практически на каждом посещенном сайте. Это так, потому что такая структура эффективна практически для любого бизнеса, независимо от размеров и сферы деятельности. Ладно-ладно, различия, конечно, есть, но основа сильно не меняется.
Более того, мы можем представить базовую структуру с еще меньшим количеством страниц. Вот сокращенная версия списка:
- Главная
- О нас
- Продукты / Услуги
- Контакты
- Правовая информация
Ясная и продуманная организация страниц способна дать посетителю то, в чем он нуждается максимально четко и быстро. То же самое ценят и поисковые алгоритмы, мимикрирующие под поведенческие паттерны людей.
Цель каждой страницы, включенной в структуру вашего сайта — преобразовывать посетителей в клиентов. Страницы образуют последовательности, постепенно подогревая интерес перемещающихся по ним посетителей, чтобы те в итоге очутились на странице вашего продукта или услуги. Все остальное является частью user flow (пользовательского потока).
Если вы посмотрите на путешествие по сайту с точки зрения воронки продаж, верхняя область воронки будет включать главную страницу или блог, посередине могут располагаться образовательные страницы, а страницы продуктов или цен будут являться основанием воронки, конечным пунктом путешествия, ведущего к продажам.
Главная страница
Для чего создавать: зацепите внимание, произведите первое впечатление, оптимизируйте навигацию.
Содержание:
- Hero image / Основной визуальный посыл
- Продукт / Услуги
- Ключевые преимущества
- О нас
- Вакансии
- Отзывы (тематические исследования, рекомендации)
- CTA
Пример главной страницы — iea.org
Может показаться, что главная страница является самой важной частью вашего сайта. Однако последние исследования показывают, что посетители проводят на ней не так уж и много времени. Среднее время сеанса составляет около 2 минут 17 секунд, при этом посещение главной страницы занимает около 7 секунд. Причина в том, что люди часто ищут сразу что-то более конкретное.
Следовательно, ваша главная страница — это панель управления, призванная помочь пользователям попасть туда, куда им нужно настолько быстро, насколько это возможно. Это главный хаб, где собираются и направляются потоки входящего трафика.
“Главная страница — это как лобби отеля. Хотя это и важная часть отеля, но это не то место, где ваши гости хотели бы остановиться. Они хотят попасть в свой номер.”
Hero image
Hero-изображение — это первый визуальный эффект, который видит пользователь, попадая на сайт. Изображения, как правило, быстрее доносят информацию и создают более вовлекающий эмоциональный отклик. Поэтому делайте hero image чем-то уникальным, броским и, самое главное, тесно связанным с вашим брендом.
Чтобы лучше понять какой посыл должно нести это изображение, ознакомьтесь с концепцией JTBD (jobs-to-be-done), краткий смысл которой состоит в том, что у клиента на данный момент есть конкретная задача / проблема, которую надо выполнить, и он ищет лучшее решение (продукт), который поможет ему в этом. Ваша же цель — дать ему понять, что ваш продукт решает эту задачу.
Ваши продукты / услуги
Чем скорее вы покажете людям то, что вы предлагаете, тем лучше. Если ваша линейка продуктов ограничена лишь несколькими наименованиями, подумайте о том, чтобы показать их все на главной странице. Если продуктов много, то необходимо создание каталога и классификации с краткими описаниями для каждой категории. Добавьте визуальные объяснения и категорию продукта.
Обозначьте характеристики и преимущества продукта
Как сказал Саймон Синек в своей знаменитой речи — люди покупают не то, ЧТО вы делаете, они покупают то, ПОЧЕМУ вы делаете это.
Поэтому, определите от трех до пяти основных ценностей вашего продукта. Сделайте их описания лаконичными и представьте их вкупе с броскими визуальными элементами, которые соответствуют рекомендациям вашего брендбука, если он у вас есть.
Социальное влияние
Люди склонны прислушиваться и доверять своему окружению. Еще один прекрасный способ быстро внедрить и распространить информацию — это добавить отзывы о вашей компании или продуктах. Сосредоточьтесь на вашей целевой аудитории и добавьте соответствующие отзывы. Чем более известен и публичен автор отзыва, тем лучше. Не беспокойтесь, если вы еще не засветились на TechCrunch или Forbes; ваши посетители должны быстро установить положительный эмоциональный контакт с рецензентами, вот что важно на данный момент.
О нас
Зачем создавать: расскажите историю своего бренда или компании, опишите миссию, представьте вашу команду и любую другую ценную информацию, которая поможет вашим конверсиям.
Содержание:
- История / timeline
- Цели и миссия компании
- Отзывы
- Команда
- Партнеры
- Видео
- Статистика
- Интересные факты
Пример страницы О компании — hines.com/about
Противоречиво, но главная страница существует не для того, чтобы проводить на ней много времени, аналогично и с разделом “О нас”. На самом деле он не совсем о вашей компании.
Это больше о вашей аудитории и о том, какую потребительскую ценность вы предоставляете. Держите это в уме, когда будете вдаваться в подробности о вашей компании. С каждым сообщением, которое вы добавляете, подумайте, что в нем есть ценного для посетителей и их потребностей.
Люди не оказываются на этой странице случайно. Они целенаправленно хотят получить представление о том, что вы делаете и почему вы это делаете. И чтобы предоставить им необходимую информацию, вот несколько советов, которые помогут вам создать отличную страницу.
Прежде всего, определите вашу целевую аудиторию. Кто главный адресат информации? Техническая персона? Человек, принимающий решения или нет? Ваш рассказ и форма, в которой вы его преподносите, должен коррелировать с ценностями и задачами таргет-группы, мотивировать людей к действию.
История компании
Многие компании предпочитают знакомить посетителей с краткой историей своей компании в формате таймлайна. И если вы грамотно выберете событийные метки, то история вашей компании поможет создать надежную эмоциональную связь с вашими посетителями. Даже если ваша компания достаточно молода, можно отметить множество значимых и интересных фактов.
Ваши основные принципы
Расскажите посетителям о миссии и целях вашей компании. Пусть это будет живая история, а не сухой список пунктов. В вашем повествовании акцентируйте внимание на потребительской ценности вашего продукта. Докажите, что ваша главная цель — сделать жизнь каждого клиента лучше.
И снова отзывы
Если вы еще не добавили отзывы на свою домашнюю страницу, сейчас самое время этим заняться. Это отличный способ заявить о себе как о надежном партнере и показать свою истинную ценность.
Вы также можете добавить агрегированные отзывы клиентов, достижения, бейджи и награды. Рассмотрите возможность размещения профиля вашей компании на различных информационных площадках (online listings). Это позволит получить два основных преимущества. Первое — качественные бэклинки на ваш сайт крайне привлекательны для SEO. Второе — если вы вкладываете ресурсы в сбор отзывов клиентов на таких платформах, то они, как правило, включают вас в рассылки и дают бейджи. А это — более широкий охват аудитории и повышение узнаваемости бренда.
Люди за кулисами
Представьте свою команду. Ваши крутые сотрудники приносят вам пользу не только в выполнении своих прямых обязанностей. Например, утверждается, что изображение человеческого лица приносит нам чувство доверия и уверенности. Это ведь то самое чувство, которое вы хотите вызвать у своих посетителей, не так ли? Некоторые компании даже включают собак в штат своих сотрудников.
Но благословение может быстро превратиться в проклятие, если вы не будете осторожны. Имейте в виду, что ваш топовый сотрудник может стать легкой целью для хедхантеров. Вы ведь не хотите терять своих лучших людей? Так что хорошо подумайте о том, что и как вы вы будете рассказывать.
При добавлении визуального контента на страницу «О нас» сосредоточьтесь на реальных снимках, держитесь подальше от стоковых изображений.
Партнеры
Почти то же самое, что и выше, относится к публикации ваших деловых партнеров.
Если это имеет отношение к делу — добавьте эту информацию.
Запишите видео
Подумайте о том, чтобы сделать короткое видео, где вы приветствуете посетителей и рассказываете им немного о вашей компании и продуктах. Люди, как правило, проводят больше времени на веб-сайте с привлекательным видеоконтентом, поэтому наличие видео положительно скажется на вашем SEO.
Статистика и интересные факты
И последнее, но не менее важное — добавьте конкретики, чтобы подтвердить ваши заявления. Сосредоточьтесь на ваших ключевых показателях, как если бы вы представляли отчет для своих акционеров. Будет ли это количество завершенных проектов или впечатляющий рост по сравнению с прошлым годом, решать вам.
Приправьте свой рассказ юмором и забавными фактами, например такими, как количество съеденных сотрудниками за год кексов или выпитых литров кофе. Это поднимет настроение и вызовет эмпатию у ваших посетителей. В конце концов вы люди, а не просто бренд или компания.
Продукты / услуги
Зачем создавать: продемонстрируйте свои продукты детально и обрисуйте в общих чертах их ценности.
Содержание:
- Изображения
- Описание
- Особенности и преимущества
- Цены
- Отзывы / рекомендации
- Контактная форма
- FAQ
Пример страницы Услуги/Продукты — stripe.com/payments
Страницы продуктов важны для каждого клиента, находящегося на вашем сайте. Общая цель этих страниц — конвертировать посетителей в клиентов, напрямую или через промежуточные страницы.
Вместе или раздельно
Раздел продуктов вашего сайта должен быть структурирован в соответствии с их количеством и разнообразием. Если количество продуктов невелико, начните с того, чтобы разместить их все на одной странице. Если позиций много, то они потребуют категоризации, поэтому подумайте о создании каталога. Составьте описание, включите изображения и перекрестные ссылки.
Визуальный язык
Изображения продуктов имеют огромное значение и лучше всего выполняют свои функции контекстные образы.
Трудно переоценить пользу, которую приносят отличные изображения. Архиважно сосредоточиться на качестве, а не на количестве. Изображения доставляют ваши сообщения за считанные секунды и являются лучшим способом передачи смысла.
Описание продукта
Скомбинируйте изображение с детальным описанием продукта. Само по себе — это уже отдельная наука, поэтому не будем углубляться в это. Сфокусируйтесь на своей целевой аудитории. И помните о подходе JTBD, мы ранее уже касались этой темы.
Особенности и преимущества (ценность)
Важно обобщить лучшие качества вашего продукта и представить их как особенности и преимущества. Размещайте их отдельно от основного описания продукта, чтобы они были легко считываемыми. Краткость — сестра таланта, описывая особенности и преимущества продукта, старайтесь уложиться в размер твита.
Цены
Идем дальше, цены. Существуют различные мнения о том, стоит ли указывать цены на вашем сайте или нет, что в основном зависит от характера предлагаемого продукта.
В некоторых случаях прямое размещение цен на главной странице повышает коэффициент конверсии. В других — наоборот, сокрытие вызывает больше интереса к продукту.
Наличие отдельной ценовой страницы (продукты / услуги) хорошо для вашего SEO: больше страниц в вашем индексе, больше ключевых слов для ранжирования в содержании страницы. Еще одним преимуществом отдельного расположения цен является возможность точной настройки пути вашего клиента, особенно в воронках B2B. Но общее правило — лучше сразу экономить ресурсы и указывать цены на своей домашней странице.
Если вы хотите заручиться доверием ваших будущих клиентов, то не забудьте проинформировать их о безопасной обработке платежей, о ваших правилах возврата, отмены и обмена. Другим хорошим способом налаживания доверительных отношений является наличие пробного периода (trial).
Актуальность обратной связи
Мы уже коснулись важности отзывов и рекомендаций. Добавление отзывов клиентов по конкретным продуктам — отличный способ показать ценность продукта для вашей целевой аудитории.
Отзывы могут варьироваться от рекомендаций клиентов до демонстрации проектов, которыми вы гордитесь. Наличие обоих является преимуществом.
Будьте на связи
Подумайте о добавлении контактной формы, чтобы пользователи вашего сайта могли оперативно связаться с вами. Это важно для эффективного контакта и поддержки клиентов, измерения индекса потребительской лояльности, получения другой ценной информации и показателей.
Как только вы наберете обороты, подумайте о внедрении комплексных платформ управления клиентами, таких как Intercom или HelpScout, с их функциями для чата и интерактивной средой связи с клиентами.
Подготовьте ответы на вопросы заранее
Еще один способ улучшить взаимодействие с пользователем на странице вашего продукта или услуг — включить раздел FAQ. Сосредоточьтесь на часто задаваемых вопросах в ваших входящих сообщениях и на семантике SEO.
Важны краткие и точные ответы. Ваши посетители будут благодарны за то, что вы заблаговременно ответили на их вопросы.
Навигация
Страница продукта может служить Pillar страницей — быть хабом, аккумулирующим ценный органический трафик. И уже к ней линкуются релевантные кластерные страницы (Cluster pages). Помимо улучшения SEO, использование модели Pillar-Cluster значительно упорядочивает пользовательский поток на вашем сайте.
FAQ
Для чего создавать: ответить на типичные вопросы клиентов, не обращаясь к ним напрямую.
Содержание:
- Вопросы и ответы
- Поиск
- Живой чат
Пример страницы Помощь / FAQ — help.dropbox.com
Зачастую входящие вопросы не связаны напрямую с вашими продуктами, выставлением счетов или доставкой; пользователи могут запрашивать разнообразную информацию, отсутствующую на вашем сайте. Вот где вступает в игру раздел часто задаваемых вопросов.
Страница FAQ довольно проста и дает много преимуществ. Как упомянуто выше, сосредоточьтесь на том, чтобы отвечать на реальные вопросы клиентов и повторяющиеся специфические вопросы, найденные в семантике поиска.
Разделение по темам
Рассортируйте ваши вопросы и ответы. Для каждой темы должен быть отдельный раздел. Таким образом, посетители сайта смогут перейти прямо к нужному вопросу, не блуждая во всем остальном.
Поиск
Если ваша аналитика показывает, что, даже несмотря на классификацию вопроса, посетители не могут найти то, что ищут, подумайте о внедрении поиска. Это частая функция на сайтах и для этого есть веские причины. Чем меньше времени требуется для поиска информации, тем лучше пользовательский опыт.
Отвечайте на вопросы напрямую
Еще один канал, который вы можете использовать для ответа на вопросы (а также для получения статистики по ним), это чат. На странице чат обычно представлен в виде интерактивного маяка, с помощью которого можно задавать вопросы или получать полезную информацию.
Живые чаты приобрели популярность в последние годы, потому что они значительно сокращают время, затрачиваемое на поиск информации. Тем не менее, как и во всем, есть плюсы и минусы в реализации функции живого чата.
Общение в чате не обязательно означает, что он «живой». Службы чата могут быть настроены на передачу запросов в службу поддержки клиентов. Таким образом, вы не предоставляете ответы на странице в режиме реального времени, а получаете мейл с запросом от вашего посетителя, чтобы продолжить общение.
Другой вариант — сделать чат автоматическим: использовать чат-бота. Чат-боты анализируют вопросы и могут автоматически предоставлять ответы, направлять посетителей сайта на страницы или разделы сайта, которые они не смогли найти или просто не захотели тратить время на поиск.
В целом, создание страницы часто задаваемых вопросов только ради ее наличия — это пустая трата времени и ресурсов. Убедитесь, что вы тщательно поработали над ее контентом, и тогда у вас есть хороший потенциал для увеличения end-to-end коэффициентов конверсии.
Вакансии
Зачем создавать: для развития своего HR, привлечения сотрудников и нишевого ранжирования по ключевым словам.
Содержание:
- Преимущества работы у нас
- Вакансии
- Фильтры
- Форма заявки
- Медиа, связанные с ваше корпоративной культурой, мероприятиями, рабочей средой и т.д.
Пример страницы Вакансии — spotifyjobs.com
В основном, раздел «Карьера» предназначен для тех, кто заинтересован работать с вами в качестве сотрудника. Расскажите им больше о вашей компании, чтобы они поняли, что вы именно тот бренд, с которым они хотели бы связать свою жизнь.
Чем вы лучше остальных?
Начните свое повествование с описания основных преимуществ работы в вашей компании, независимо от того, насколько обыденными они могут казаться (хотя бы тот же бесплатный кофе). Постарайтесь изложить свои преимущества вместе с соответствующими изображениями и краткими описаниями, чтобы лучше донести свои идеи.
Кого конкретно вы ищете?
Ключевой раздел вашей страницы «Карьера» — это вакансии. Как и FAQ, этот раздел нуждается в классификации. Сегментируйте свои вакансии по уровню профессионализма, или отделу. Если у вас много вакансий одновременно, рассмотрите возможность добавления фильтра или поля поиска.
Отдельная страница для каждой вакансии
У каждой вакансии должна быть своя отдельная страница, где можно подробнее узнать о требованиях к работе, необходимых навыках, оплате и прочем.
Добавьте форму заявки. Чем проще она будет в использовании и понятнее, тем лучше. Кроме того, форма является отличным способом создать и настроить автоматизированный процесс поиска и отбора кандидатов.
Аргументируйте
Как и в других разделах сайта, описанных в этой статье, визуализация поможет убедить соискателей остановить выбор на вас. Будь то инфографика, показывающая прогресс вашей компании или неформальные фотографии из вашего офиса, покажите их. Это продемонстрирует вашим потенциальным сотрудникам, что вы так же любите веселиться, как и усердно работать.
Блог
Зачем создавать: делиться своими знаниями и опытом, исследованиями и идеями, получать мощную поддержку SEO.
Содержание:
- Контент, который создает ценность
- Привлекательные изображения
- Видео
- Комментарии
- CTA
- Ссылки на профили в соцсетях
Пример страницы Блог — goodonyou.eco/category/stories
Помимо демонстрации своего опыта и знаний, добавление блога является одним из способов увеличения индекса вашего сайта и количества ключевых слов, по которым ваш домен ранжируется в поисковой выдаче.
Ведение блога позволяет освещать нишевые темы с точки зрения вашего бренда, дополняя вашу контент-стратегию. В зависимости от стратегии, которой вы придерживаетесь, возврат инвестиций в контент может варьироваться. Давайте рассмотрим преимущества наличия блога более подробно.
“Напрасно ты приобрел знания, если не передал их другим”
Дварим Рабба (комментарий к Книге Второзаконие)
Если ваш блог регулярно обновляется, поисковые системы видят, что ваш сайт “живой” и чаще индексируют ваш сайт.
Мы уже упоминали про рейтинг по релевантным ключевым словам. Для этого убедитесь, что ваши тексты имеют относительно большой объем, не менее 250 слов. Для лонгридов — от 800 слов. Осторожно придерживайтесь SEO оптимизации текстов.
Добавив блог, вы естественным образом получаете еще одно преимущество: увеличение продолжительности сеансов пользователей, которое поднимает вас в поисковой выдаче. Чем более интересны ваши посты и записи, тем больше времени посетители будут тратить на их чтение и, кстати, не переписывайте (rewrite) чужие блоги, это неэффективно.
Далее уже конвертируете время, которое посетители проводят за чтением вашего блога, в достижение своих целей — добавляете CTA блоки, попап-окна с предложением подписаться на рассылку (но в меру и элегантно), ссылки на другие статьи и т.д.
Что касается структуры, страница блога очень похожа на страницу вакансий. Есть главная страница со ссылками на все ваши сообщения в блоге, и каждое из них имеет свою отдельную страницу. Совсем несложно.
Заманите читателя
Верхняя страница блога обычно состоит из отдельных ссылок на посты и нумерации страниц. Ссылки обычно помещаются в элементы страницы, имеющие: изображение обложки, заголовок поста и описание, где последнее может быть идентично шапке статьи. Таким образом, посетители по превью сразу получают представление о записи и с большей вероятностью откроют ее. И один важный совет — никогда не делайте кликбейт-заголовки!
Если ваш посетитель — поисковой робот, добавьте соответствующие ключевые слова в альт-теги изображений (это хорошо для всего сайта в целом), заголовки постов и описания. Вы также можете реализовать функцию тегов в своем блоге.С точки зрения Pillar модели это позволит URL-адресам, таким как «https://yoursite.com/blog/#seo», выступать в качестве идеальных хабов для накопления органического трафика со смежных кластерных страниц. Роботы идентифицируют страницы как смежные, если они правильно сшиты.
Упорядочьте содержимое
Еще одна вещь, которую следует рассмотреть, это нумерация страниц. Самое правильное — иметь от семи до десяти постов на странице. Это создает визуальный порядок и позволяет вашим читателям переключаться между страницами, а не прокручивать ваш бесконечный список записей. Это особенно актуально для мобильных устройств.
Изображения и видео
Фото или видео на обложке поста — всегда отличный способ оживить его. Когда изображения подобраны в тему, они автоматически привлекают внимание читателя, увеличивая продолжительность сессий.
Позвольте аудитории высказаться
Добавьте раздел комментариев к каждому посту, чтобы читатели могли оставлять отзывы и взаимодействовать друг с другом. Комментарии также могут дополнять ваш текстовый корпус.
Однако без должного модерирования комментарии могут погрязнуть в анархии. Поэтому убедитесь, что у вас достаточно ресурсов для эффективного управления комментариями.
Кнопки навигации
Чтобы помочь читателям результативно перемещаться, возьмите в качестве примера страницу продукта и добавьте кнопки «Предыдущий/Следующий» на странице каждого поста. Также должна быть кнопка, которая возвращает читателей к списку всех ваших записей.
Расшарьте контент
Наконец, сделайте так, чтобы ваши посетители могли легко передавать свои знания другим, добавив share-кнопки соцсетей. Это дает множество преимуществ. Среди наиболее ценных — увеличение узнаваемости бренда и рост реферального трафика на ваш сайт с других платформ.
Страница новостей
Что у нас по новостям? Похоже, что на сайтах компаний менее 1% посетителей считают новости стоящими своего времени. Кроме того, корпоративные новости часто воспринимаются как слишком субъективные и самовосхваляющие. Изучите поведенческие паттерны групп пользователей; возможно, вы обнаружите, что тот небольшой процент посетителей, интересующихся вашими новостями — это те, кто конвертируются лучше остальных.
Если вы решите создать раздел новостей, следуйте тем же принципам, что и на странице блога. Публикуйте свои записи с помощью четких, кратких визуальных и письменных сообщений.
Контактная информация / связаться с нами
Зачем создавать: позволить посетителям оперативно связаться с вашей компанией и улучшить SEO.
Содержание:
- Номера телефонов, e-mail (для разных целей)
- Форма обратной связи
- Карта
Пример страницы Контакты — rndhouse.com/contact
Хотя страница контактной информации является одной из базовых страниц для любого веб-сайта, она также является одной из самых важных.
К примеру, поисковые системы анализируют вашу карту сайта и оценивают вас выше, если они находят эту страницу.
Категоризация
Один из способов распределения потоков запросов по мейлам и телефонным номерам — по темам, например, общие запросы, вопросы сотрудничества, вакансии. Затем вы добавляете контактную информацию на свою страницу и ждете, когда сканеры сайта соберут электронную почту и раскроют все виды распространения спама. Но есть и лучший способ — контактные формы.
Создайте форму
Более удобным решением было бы иметь контактную форму с защитой от спама. Существует много способов создать отличную форму контактов, все они сконцентрированы на сортировке запросов пользователей и перенаправлении их в нужную папку входящих сообщений.
Местоположение
Еще одна полезная функция для страницы контактов — отображение местоположения вашего офиса на карте. Просто адрес уже никому неинтересен. Некоторые компании выходят за рамки стандартной Google Maps или Яндекс Карты и превращают свою карту в нечто уникальное.
Ошибка 404
Зачем создавать: Информирование пользователей об ошибках и перенаправление их на другие страницы.
Содержание:
- Изображения / видео / интерактивные элементы
- Сообщение об ошибке
- Ссылки на другие страницы сайта
Пример страницы Ошибка — netflix.com/notfound
Мы все не единожды оказывались на странице 404 и сталкивались с другими ошибками. Большинство компаний не считают эти страницы достойными внимания. Однако, если вы грамотно над ними поработаете, страницы ошибки могут стать находкой, а не разочарованием.
Ключевые моменты
Прежде всего, разместите ссылки на другие страницы. Как минимум должна быть ссылка на главную страницу.
Плохо, если ваша страница с ошибкой по сути является тупиком, такой вариант не понравится ни вашим посетителям, ни SEO. Можно и нужно перенаправлять трафик со страницы ошибки в правильное место.
Во-вторых, добавьте информацию. Это может быть автоматически сгенерированное сообщение или же нечто более креативное. Разместите забавную картинку или интерактивные элементы, чтобы посетители оценили ваше скрупулезное отношение к деталям, даже таким недооцененным, как страницы ошибок.
В сети огромное количество отличных примеров страниц ошибок, вдохновляйтесь и используйте свое воображение.
Правовая информация
Зачем создавать: расскажите о своем соответствии требованиям законодательства.
Содержание:
- Политика конфиденциальности
- Уведомления об авторских правах
- Правила и условия пользования
- Дисклеймер
- Злоупотребление или жалобы контактная информация
- Патенты
- Корпоративная политика
Пример страницы Privacy Policy — samuelsre.com/privacy-policy
Очевидно, что обычный посетитель не будет заинтересован в посещении этой страницы. Но правовые страницы необходимы по закону и должны быть доступны на любой странице вашего сайта. Следовательно, было бы разумно разместить ссылки на них в футере страницы.
Убедитесь, что документация изложена безошибочно и проверена вашими юристами, а также:
- Содержит всю необходимую информацию, разбитую на пронумерованные абзацы
- Написана в понятной для большинства людей форме
- Соответствует общему дизайну сайта
Заключение
Планирование правильной структуры и контента не такая легкая задача, как это может показаться сначала, это требует вдумчивого планирования, исследований и кропотливой работы. Но это фундамент!
Нельзя пренебрегать этим и относиться как к второстепенной задаче, побыстрее переходя непосредственно к созданию самого сайта (дизайну, программированию), считая, что это важнее.
Надеемся, наше руководство поможет вам осознать это и создать действительно хороший веб-сайт с правильной структурой и организованным контентом.
Что касается нас, авторов этого руководства, то мы занимаемся этим уже 18 лет. И весь свой опыт постарались аккумулировать (помимо этого гайда) в мощном и одновременно простом инструменте Octopus.do, с помощью которого вы сможете бесплатно создать структуру веб-сайта, планировать контент и делиться этим с кем угодно. Регистрация необязательна.
Автор Алексей На чтение 10 мин. Просмотров 417 Опубликовано Обновлено
В прошлых статьях мы проанализировали сайты конкуренты, собрали семантику, теперь разберемся с понятием структуры сайтов и построим гибритную структуру нашего будущего проекта на основе топовых конкурентов.
Структура сайта — это фундамент любого интернет ресурса.
Грамотно спроектированная структура, поможет пользователям проще находить информацию, что улучшит поведенческие факторы. Так же качественно проработанная структура поможет поисковым системам экономить краулерный бюджет — быстрее индексировать сайт.
При проектировании, не забывайте о простоте навигации и ее вложенности — это один из элементов влияющий на юзабилити. Не рекомендую делать глубокую структуры — в идеале она должна быть не более третьего уровня вложенности, т.е. пользователь может добраться до любой страницы в 3 клика.
Важно! После полной индексации сайта, структуру созданных разделов и страниц лучше не менять, это может привести к плачевным последствиям, в виде выпадания страниц из топа и уменьшения трафика, так что отнеситесь к проектированию серьезно.
Время, затраченное на анализ и проектирование структуры web-сайта окупается в 99,9% случаев.
Что такое структура сайта?
Структура сайта (карта сайта) — это логическая схема распределения страниц сайта по категориям / разделам (папкам). С точки зрения пользователя, структура сайта — это навигация, путь той или иной странице или категории.
Пример структуры интернет магазинаПо большому счету это кластеризованное семантическое ядро, где кластеры это название веток или страниц.
Виды структуры сайта
Линейная
Линейная структура выглядит в виде цепочки. Подойдет для одностраничных сайтов (якорного меню) и визиток.
Например:
- Главная
- О компании
- Услуги
- Контакты
Линейно-разветвленная
Линейно-разветвленная структура, представляет из себя цепочку переходов, иногда с правом выбора. Подойдет для небольших сайтов — в основном визиток.
Пример:
- Главная
- О компании
- Наши работы
- Отзывы о нас
- Услуги
- Создание
- Продвижение
- Реклама
- Контакты
Дерево
Древовидная структура состоит из множества уровней и разделов (имеет много ветвлений). Самая распространенная, популярная и оптимальная для многостраницных сайтов.
Решето, сеть
Структура в виде сети, создается по принципу древовидной, но при этом все проектируется так, чтобы посетитель мог перескочить со страницы глубокого уровня вложенности, на любой другой, к примеру, на 1-й или второй уровень. При разработке такой структуры важно тщательно продумывать ее, чтобы не запутать посетителей.
Требования к структуре сайта
Структура важна не только для людей, но и для поисковых систем. И у поисковых систем есть ряд своих требований к ней.
Типовые требования поисковой системы Google к структуре сайта
Информация о структуре сайта содержится в руководстве по поисковой оптимизации для начинающих от google. А если кратко, то:
- Должна быть предельно простой, логичной и понятной для человека.
- Рекомендуется использовать ЧПУ (человеко подобные адреса) — это помогает гуглу в определении релевантности.
- Слова в ЧПУ должны быть разделены дефисами, без знаков пунктуации. Например: не strukturasayta, а struktura-sayta, также запятые «,» должны быть заменены на «-«
- Не используйте длинные и сложные URL.
Основные требования предъявляемые ПС Яндекс к структуре сайта
Официальная подробная инструкция от поисковой системы Яндекс по работе со структурой сайтов. Если коротко, то рекомендации такие:
- Каждая страница (документ) должен относиться к своему разделу.
- Чем больше вложенность страницы, тем дольше Яндекс будет ее индексировать. Лучше не использовать вложенность белее чем на 3 уровня. web-revenue/category1/uroven2/stranica.
- Используйте карту сайта sitemap.
- Закройте от индексирования служебные страницы. Например не нужно отдавать в индекс страницу с результатами поиска.
- Не должно быть дублей URL.
- Так же как и для гугл, в идеале должны быть человеко-понятные URL.
- Делайте перелинковку. Ссылайтесь на релевантные документы.
- Проверяйте корректность symlink-ов. Не должно быть цикличных страниц с большим количеством повторений, например web-revenue/sbor/sbor/sbor/sbor.
Программы для построения древовидной структуры сайта
Структуру можно построить практически в любой программе, например в exel, но визуально это будет выглядеть не особо, по этому лучше воспользоваться специализированным софтом.
XMind — программа для построения майнд карт, структур (есть как платная, так и бесплатная версия — которой вполне достаточно). Лично я пользуюсь данной программой и рекомендую ее вам, т.к. она обладает достаточно широким функционалом, есть версии для Window, macOS, Linux.
diagrams.net — бесплатный онлайн сервис для создания структур и диаграмм. Из плюсов, есть инженерные шаблоны — которые не нужны нам и есть возможность выгрузки результатов в облачные сервисы.
Microsoft Visio — платный софт от майкрософт, подойдет для создания структур любой сложности и направленности — на нем нарисованы изображения выше.
Начиная создание структуры сайта, четко обозначьте удобства для пользователя, насколько наглядно будет представлен контент. Проанализируйте, все ли будет понятно, какой текст, картинка где находятся, сможет ли пользователь в любой момент, не затрачивая лишнего времени, отыскать необходимые записи, страницы, изображения и так далее.
Для того, чтобы материалы ваших веб-страниц были легко воспринимаемы посетителем, они должны быть правильно соответствующим образом структурированы. Сегодня, когда нет проблем с отысканием нужного материала в Интернете, любое неудобство провоцирует читателя покинуть ресурс и отправиться в поисках больших удобств.
Индуктивный метод и создание структуры сайта
Для создания структуры сайта, чаще всего применяют индуктивный метод, то есть двигаются от общего к частному, от главного к образующим его мелочам. Необходимо сделать следующее:
- четко и ясно сформулировать идею веб-сайта;
- выявить свою аудиторию прямо заинтересованных в его контенте пользователей интернета, приоритетность их запросов;
- исчерпывающе обозначить базовые направления интернет-ресурса.
Метод структурного дерева
Неизвестно, кто и когда предложил при создании структуры сайта представлять ее как дерево. Идея оказалась жизненной:
- благодаря свойствам психики включается интуитивное предугадывание;
- схема привычна;
- представление о структуре мобильно, поскольку есть возможность расширять её, разнося новые материалы по соответствующим уровням.
Предлагаю рассмотреть создание структуры сайта на примере веб-сайта «Автомастерской». Для упрощения задачи прибегнем к программе Mindjet MindManager (это коммерческая программа) или любой другой, например xmind, которая может структурировать информацию. Если это по каким-то причинам недоступно — можно просто рисовать на листе бумаги.
Создание структуры сайта выполняется в такой последовательности:
1. Определяем название главной страницы. Эта запись — ствол дерева. От него отходят ветви – страницы и разделы сайта:
Где пункты: Наши услуги, Примеры наших работ и Полезная информация – это разделы сайта.
2. Продумаем подробности структуры разделов.
Нужно уяснить и сформировать:
- основные подкатегории;
- определить, сколько потребуется статичных страниц и динамичных записей;
- определить, как будут встраиваться различные медиа материалы;
- продумать, как будет происходить обратная связь с посетителями – предусмотреть для них возможность оставить комментарий, указать свою электронную почту…
Результатом обдумывания и фиксирования своих мыслей будет созданная четкой, понятной и удобной пользователю системы навигации по вашему веб-сайту.
Можно с уверенностью сказать, что когда вы увидите созданное вами дерево – графическое отображение структуры сайта, поразитесь, насколько развесистым оно получилось, а ведь нераскрытыми остались конечные пункты.
Конечный пункт – это страница сайта или запись. Если вам не нужен масштабный сайт, то нет необходимости в общей структуре отображать на карте абсолютно каждую страницу, запись. Вполне достаточно отобразить те позиции, которые окажут прямое влияние на создание структуры сайта.
Созданная структура сайтаИтоги.
Описанный метод создания структуры сайта хотя и выглядит простым, но он подойдет только тому, кто:
- в полной мере владеет информацией про тему создаваемого сайта;
- обладает опытом такой работы;
- дружит с логикой и обладает рационалистическим типом мышления.
Построение SEO структуры сайта на основе конкурентов
Это на мой взгляд самый оптимальный и правильный вариант. Проанализируйте своих конкурентов и выберите лидеров. Далее смотрим самый подходящий (или самый ветвившийся сайт). Самый простой способ построить структуру на основе конкурентов, это бесплатный сервис от Артура Корсакова: «Парсинг структуры онлайн» открываем его и вбиваем нашего основного конкурента и нажимаем на кнопку «Начать».
Ждем немного, и с низу видим результат.
скачиваем его, нажав на кнопку «Скачать файл .csv» — вот вам готовая структура в Exel — осталось немного ее доработать. Также я обычно строю структуру в виде дерева, для этого открываем XMind (программа бесплатная), создаем новую карту «New Blank Map».
Копируем всю информацию с сервиса парсинга и вставляем в карту.
Вот так за три минуты можно построить карту (структуру) сайта в виде дерева с данными разбитыми на категории.
Внимание! Копирование прямо с сайта не всегда корректно вставляются, тогда лучше копировать с .csv файла.
Вам остается только немного переработать ее под себя: к примеру, удалить лишнее и добавить разделы с других конкурентов или доработать логически (дедуктивным методом).
Таким же образом можно строить карты на основе собранной кластеризованной семантики.
Есть и альтернативные способы парсинга структуры: с помощью краулеров, сделать это можно при помощи платных программ: Netpeak Spider (полный демо функционал 14 дней) или Screaming Frog SEO Spider (лягушки) — парсит бесплатно сайты до 500 url.
Внешняя структура сайта
Внешняя структура также важна как и внутренняя, в нее входят такие факторы как: юзабилити (удобство пользователей), комерческие факторы (наличие поиска, телефонов и т.д.), красочность дизайна и так далее. При построении внешней структуры, не стоит нарушать общепринятые (или устоявшиеся правила) к стандартному расположению блоков. Например: логотип с лева, телефон, корзина — справа. Типовая внешняя структура, обычно выглядит так. Но существует одно правило, нарушать которое крайне не рекомендуется. Все пользователи интернета привыкли к стандартной форме расположения блоков на всех сайтах, выглядит это примерно так.
Рассмотрим базовое размещение элементов на сайте.
- Хедер (шапка) — верхняя часть сайта. В данном блоке обычно располагаются: логотип, меню (может сразу 2) + элементы присущие данной тематике (часы работы, контакты, поиск, банеры).
- Центральный блок. В верху (в первом экране) обычно располагается УТП или какая то другая важная информация, чтобы пользователь при заходе на страницу точно знал, что попал по нужному адресу. Ниже идет уже какой то контент, а по бокам могут быть сайтбары с дополнительной информацией.
- Футер (подвал) — предназначен в первую очередь для размещения контактной информации (название компании, телефона, адрес). Так же активно используют подвал для добавления навигационного меню и других полезных ссылок.
Тема структуры довольно обширная и сложно уместить ее в 1 статью, поэтому рекомендую обращать внимание на лидеров тематики — они же не просто так попадают в топ (есть конечно исключения: к примеру в топ яндекса могут попасть сайты которые крутят поведенческие факторы, а в топ гугла, те кто закупил кучу ссылок).
Выводы и рекомендации
Структура сайта (внешняя и внутренняя) такой же немаловажный фактор, как и семантическое ядро. Правильная структура — один из залогов успеха сайта.
Приведенный выше алгоритм не раз испытан на практике и является очень эффективным.
Основные моменты:
- Обязательно проводите анализируем конкурентов из ТОПа, в том числе и коммерческих факторов (особенно для коммерческих сайтов). Так вы избежите лишних ошибок. Благодаря современным сервисам и программам, и соответственно ручной проработке, можно создать отличную гибритную структуру проекта.
- Если у вас коммерческий проект, то проверяйте частотность основного ключа (возможно разделы стоит склеить, особенно в ecommerce). Для инфосайтов разделы (рубрики) формируются по логическому принципу.
- Используем ЧПУ. Это помогает как пользователям, так и поисковым роботам.
- Ориентируйтесь на пользователя. Если мы попросили зайти на наш сайт какого-нибудь знакомого, поручили ему найти какой-либо раздел или страницу и он сделал это без труда — значит структура как минимум понятна пользователю. Для чистоты эксперимента можно опросить нескольких человек.
Используя опыт конкурентов, ориентацию на пользователя и правила поисковых систем у нас получится отличная и правильная структура сайта.
Как визуализировать структуру сайта за 5 шагов
По: Валери Нечай
13 августа , 2019
Давайте признаем друг друга, за исключением личных и профессиональных различий, когда мы посещаем любой веб-сайт, мы ожидаем, что все будет интуитивно и логично.
То, что делает это возможным, — это эффективная структура сайта, ориентированная на улучшение взаимодействия с пользователем и беспрепятственное сканирование поисковых систем.Для достижения этих целей мы разработали новую функцию в WebSite Auditor, которая позволяет пользователям визуализировать структуру сайта, чтобы одним взглядом выявлять любые возможные проблемы и исправлять их прямо в приложении.
Позвольте мне сказать вам, что в тот день, когда мы запустили его, я прошел мимо моих коллег и увидел, что у каждого из них есть эти прекрасные графики структуры сайта на их компьютерах. Святой страх исследования.
Можете ли вы представить себе наше удивление, когда многие наши пользователи даже близко не подошли к такому страху.Я не мог оставить все как есть и решил объяснить некоторые вещи о важности структурирования, а также дать несколько советов по использованию нашей функции Visualization .
Почему хорошая структура сайта имеет значение?
Я сведу это к нескольким пунктам пули:
- Лучший пользовательский опыт. Чем быстрее ваши посетители смогут найти то, что они ищут (и, конечно, если это действительно информация, которую они ищут), тем ниже будет показатель отказов.
- лучше ползать.Сильная логическая структура сайта позволяет поисковым системам более эффективно получать доступ, сканировать, индексировать и возвращать страницы вашего сайта.
- SERP ссылки сайта. Эффективная структура сайта может помочь вам получить ссылки в поисковой выдаче. Это означает, что пользователи могут перемещаться по сайту прямо со страницы результатов поиска. Кроме того, он показывает самую актуальную информацию и занимает довольно много места в поисковой выдаче:
Что это: «сайт с идеальной структурой»?
Как насчет дополнительных пунктов?
- Тот, с иерархической структурой.
Где иерархия:
- логический
- с приличным количеством основных категорий и
- со сбалансированным количеством подкатегорий
- Тот, с мелкой структурой.
Что в любом случае мелкое? Обычно это означает три или меньше кликов, чтобы перейти на любую страницу сайта. Я знаю, что это не совсем тот случай, когда у вас уже есть огромный сайт, но факт факт: мелкая структура предпочтительнее для поисковых систем и пользователей, чем длинные клики.
- Тот, с эффективной внутренней структурой связи.
Прежде всего, , внутренние ссылки спасают вас в ситуации, когда структура вашего сайта далека от мелкой — это уменьшает глубину кликов.
Plus, когда вы создаете новую страницу, очень удобно ссылаться на некоторые из ваших старых авторитетных страниц, которые сделают вашу новую часть информации более полной и актуальной. Это своего рода естественная кластеризация на тематической основе.
Второе , внутренняя связь помогает равномерно распределить сок ссылок между всеми вашими важными страницами.Ссылка сока потока показывает поисковым системам, какие страницы заслуживают их особого внимания.
Что нужно сделать перед визуализацией структуры сайта?
Прежде чем приступить к визуализации, вы должны убедиться, что все ваши важные страницы доступны для поисковых систем и видны для посетителей. В противном случае вы можете внести некоторые стратегические структурные изменения в страницы, которые невозможно найти.
Таким образом, проверьте:
- Sitemap — просто убедитесь, что он у вас есть, и обновите его в соответствии с вашими изменениями.Файлы Sitemap показывают гостеприимные поисковые системы вокруг вашего сайта;
- Ссылки во Flash — ссылки, встроенные во Flash, могут быть недоступны для поисковых систем;
- ссылок «Nofollow» — убедитесь, что ваша внутренняя структура ссылок не содержит ссылок «Nofollow», поскольку такие ссылки получают свою долю ссылочного сока, но не передают ее на страницы, на которые они указывают;
- ссылок с фреймами — фреймы являются серьезным препятствием для Google и других поисковых систем, когда они пытаются проиндексировать ваш сайт;
- Страницы с дублированным контентом — страницы с одинаковым или похожим контентом сбивают с толку поисковые системы, поэтому они могут практически индексировать неправильные страницы и ранжировать старые страницы поверх новых.Кроме того, люди могут ссылаться на разные версии одной и той же страницы. Таким образом, рассмотрите возможность использования канонизации для правильной индексации и возврата страницы в поисковой выдаче;
- Alt атрибуты для изображений — помогают поисковым системам понять, о чем ваши изображения. Это сделает ваш контент более авторитетным. Кроме того, это прекрасная возможность использовать ключевые слова более безопасно и безопасно.
Как визуализировать структуру сайта с помощью WebSite Auditor? И что делать дальше.
Шаг 1. Визуализация общей структуры сайта.Создайте проект для своего сайта (или части своего сайта) в WebSite Auditor или откройте существующий, перейдите к Структура сайта> Визуализация и посмотрите, что произойдет.
Когда у вас есть график, вы можете работать в трех режимах:
1) Кратчайшие соединения между вашими узлами.По умолчанию инструмент отображает 1000 страниц (которые можно настроить до 10 000 страниц), которые упорядочены по Нажмите Глубина .
Какие страницы отображаются? Алгоритм выбирает кратчайшие соединения между вашими верхними страницами на основе самых низких значений Click Depth и самых высоких значений Internal Page Rank .
Все соединения узлов показаны стрелками (односторонними или двусторонними), которые представляют точное состояние отношений между страницами. Также можно перетащить любой узел в любое место на графике (чтобы визуализировать более качественную картинку), а также увеличить или уменьшить масштаб.
В столбце справа вы можете увидеть краткую статистику по общему количеству ваших страниц и ссылок, а также список URL-адресов всех страниц, которые можно найти на вашем веб-сайте. Когда вы нажимаете любой URL в списке статистики, он затем выделяется на графике.
2) Соединения определенного узла.Нажмите на любой узел, чтобы показать только его соединения:
Чтобы вернуться к отображению всех соединений, просто нажмите на любое пустое место на поле.
3) Все существующие соединения.Нажмите на Показать соединения всех страниц кнопки , чтобы выполнить то, что обещает эта кнопка — показать все соединения, не только самые короткие, ограниченные значениями Click Depth и Internal Page Rank .
Пожалуйста, имейте в виду, что вся навигация вашего сайта будет включена в этот график, поэтому, если вы делаете это для большей части вашего сайта, это может выглядеть страшно и запутанно.
Однако он может вам понадобиться, когда вы работаете над тщательно суженной частью вашего веб-сайта (например, рядом тематических статей).
Совет Pro: Если у вас большой веб-сайт, лучше визуализировать его по частям (например, основные категории, блог и т. Д.).). Таким образом, вы создадите более качественную картину своего сайта и с легкостью обнаружите любые проблемы. Используя параметр фильтра (щелкните значок воронки в правом верхнем углу), вы можете включить в URL только страницы с определенными словами / символами или исключить страницы на той же основе.
Также возможно создание отдельных проектов для определенных категорий вашего сайта. Какой бы вариант вы ни выбрали
1) Посмотрите на свой график и проверьте, есть ли у вас сиротских страниц .Они показаны как серые узлы, которые не имеют никаких связей с другими:
Вы можете спросить, как мы находим такие страницы, если они не имеют каких-либо связей. Достаточно справедливый вопрос. Мы получаем их либо из индекса Google (в этом случае могут быть внешние ссылки на эту страницу, но не внутренние ссылки — это необходимо исправить), либо из XML-карты сайта (в этом случае это означает, что вы не обновляли ее некоторое время и есть некоторые старые вещи, от которых нужно избавиться).
2) Обратите внимание на цветов ваших узлов .
- Синие узлы — это страницы с кодами 3xx (перенаправления).
В случае, если вы видите несколько синих узлов, следующих друг за другом, это цепочка перенаправления (например, когда ваша версия без www перенаправляет на http: // www, а затем снова перенаправляет на https: // www). Неважно, как красиво это выглядит, это нужно исправить.
Рекомендуется избегать цепочек перенаправления длиннее, чем 2 перенаправления, в противном случае ваша страница не будет проиндексирована, так как боты Google не выполняют более 5 переадресаций.И, более того, каждый из ненужных перенаправлений будет препятствовать скорости вашего сайта.
- Красные узлы — это страницы с кодами 4xx / 5xx.
Контролируйте красные узлы в вашей структуре, так как они могут указывать на возможную проблему на сайте. Попытайтесь исправить неработающие ссылки, если они есть, так как они могут привести к ухудшению работы пользователей и нанести вред вашему сайту. Кроме того, это пустая трата ссылочного сока.
3) Найдите длинных строк и проверьте, оправданы ли они:
Видите длинные цепочки узлов на скриншоте? Они могут появиться в случае нумерации страниц, что может быть вполне приемлемо для вас.Однако, если многие части вашего сайта связаны между собой таким образом, это катастрофа (если вы не заинтересованы в том, чтобы скрыть свой контент от всех — тогда, извините, хорошая работа!).
Совет Pro: Обратите внимание, что вы можете зависнуть на любом узле и открыть дополнительную информацию:
Шаг 3. Проанализируйте изображение рейтинга внутренних страниц.Выберите Позиция внутренней страницы в раскрывающемся меню в правом верхнем углу. Здесь размер узлов отражает значение Internal Page Rank — важность и авторитетность страницы вашего сайта.Чем больше узел, тем выше значение.
Pro tip: Проверьте дополнительную информацию, наведя курсор на узел. Обратите внимание на значение Позиция внутренней страницы :
В этот момент вы можете спросить: «Что за дело с этим Page Rank? Как этот график должен помочь мне?
Дело в том, что график позволяет вам следить за тем, имеют ли ваши главные страницы тот уровень внутренних полномочий, который они должны иметь: домашняя страница должна иметь самый высокий Page Rank , основные категории должны иметь более высокое значение, чем их подкатегории и т. д.Все эти вещи легко увидеть с одного взгляда, который вы бросили на свой график.
Если вам интересно, как изменить значения внутреннего рейтинга страницы в случае, если они неадекватны, вот лишь несколько стратегий для скульптинга внутреннего рейтинга страницы, которые вы можете использовать в зависимости от своих целей SEO:
- Внутренние ссылки, которые помогают вашим главным страницам ранжироваться выше для ключевых слов с большим объемом поиска
Давайте считать само собой разумеющимся, что ваш сайт оптимизирован для ряда ключевых слов с большим объемом поиска и высокой конкуренцией, обычно общего значения (например, «зимняя рыбалка»).
Тогда становится очевидным, что содержание вашей домашней страницы оптимизировано для ранжирования по таким ключевым словам, в то время как другие страницы служат для предоставления дополнительной, но все же полезной информации. Такие страницы могут включать контекстные ссылки, которые указывают на домашнюю страницу. Важно использовать целевые ключевые слова в якорных текстах таких ссылок.
Таким образом, на главной странице будет гораздо больше ссылок, указывающих на нее, чем на любую другую, менее важную страницу, которая увеличит средний рейтинг страницы вашего сайта.
- Внутренние ссылки на ключевые слова со средним объемом поиска
Ключевые слова со средним объемом поиска, как правило, представляют собой ключевые слова из трех слов с более конкретным значением, чем ключевые слова с большим объемом поиска (например,г., «оборудование для зимней рыбалки»). Они обычно относятся к категориям.
В этом случае такие страницы категорий имеют наивысший приоритет, поэтому контекстные ссылки (с целевыми ключевыми словами в текстах привязки) должны указывать на них.
- Внутренние ссылки на ключевые слова с низким объемом поиска
Ключевые слова с низким объемом поиска, как правило, имеют длинный хвост и самую высокую конверсию. Когда люди ищут их, они точно знают, чего хотят. Такие ключевые слова могут принадлежать нижнему уровню веб-сайта, например, отдельным сообщениям в блогах или спискам продуктов.
Если вы ищете такие ключевые слова, то большинство контекстных ссылок должны указывать на такие страницы, и эти страницы должны быть правильно связаны между собой.
Совет от Pro: Обратите внимание, что для каждого сценария необходимо последовательно использовать якорные тексты для контекстных ссылок, т. Е. Использовать только варианты и близкие синонимы целевых ключевых слов.
Шаг 4. Проанализируйте картинку.Подключите свой аккаунт Google Analytics. Вы можете сделать это в Настройки> Аккаунт Google Analytics .Обновите свои данные в Структура сайта> Страницы , а затем на панели мониторинга Визуализация перестройте график просмотров страниц .
Здесь размер узлов отражает значение просмотров страниц . Чем больше узел, тем выше значение.
Pro tip: Проверьте дополнительную информацию, наведя курсор на узел. Обратите внимание на значение просмотров страниц :
Зачем вам нужен этот график? Это очевидно: вы можете увидеть поток трафика на определенные страницы одним взглядом! Я думаю, что это очень хорошее дополнение к вашим таблицам и таблицам GA.
Следующее, что нужно сделать, — это найти страницы переходов на графике и проверить, указывают ли на них ваши основные страницы трафика. Если нет, измените свою структуру, чтобы использовать каждую возможность, которую предоставляет вам ваш собственный сайт.
Шаг 5. Управляйте своими графиками визуализации.1) Редактирование графиков в приложении.
Как только вы поймете, что вы можете получить от различных видов визуализаций, вы можете продолжить и применить необходимые изменения в поисках идеальной структуры сайта.
Нажав на любой узел, вы входите в режим редактирования.Используя кнопки действий слева, вы можете:
Добавить страницу.
Удалить выбранную страницу из визуализации . (Или просто нажмите «Удалить» на клавиатуре).
Добавить входящую ссылку . Можно добавить несколько ссылок одновременно.
Добавить исходящую ссылку . Можно добавить несколько ссылок одновременно.
Создать ссылку перенаправления .
Удалить выбранную ссылку .
Все действия сопровождаются всплывающими окнами, в которых можно найти страницы, которые вы хотите добавить, создать ссылку на них, перенаправить на них, создать привязки к вновь добавленным страницам и т. Д., А также добавить некоторые комментарии:
2) Настройте свой график.Вы можете сделать свой график еще более удобным для использования, применив индивидуальный подход:
Изменить тему фона (светлый или темный). Просто эстетическая вещь
Отметить выбранную страницу.Добавив текстовые и цветные метки к некоторым узлам, вы сможете рассказать о наиболее важных страницах или страницах, с которыми вы работаете. Обратите внимание, что когда вы впервые визуализируете структуру своего сайта, некоторые узлы будут помечены автоматически. Это страницы с самой низкой Глубиной клика и самой высокой Page Rank .
Прикрепите узлы к определенной части вашего экрана. Таким образом, эти узлы остаются там, где вы их закрепили при перестроении графиков после некоторых изменений. Вы все еще можете перетащить закрепленные узлы вручную в те места, которые вам нужны.
3) Пересчитать значения после изменений.После того, как вы внесли некоторые изменения, я думаю, что вы действительно будете заинтересованы в том, как это повлияло на структуру вашего сайта с точки зрения значений Click Depth и Page Rank . Просто нажмите кнопку, чтобы пересчитать ваши значения.
4) Раскрасить граф визуализации по тегам.В ходе аудита вашего сайта в WebSite Auditor вы можете добавить теги к некоторым страницам определенного типа. Или вы можете сделать это на панели инструментов Страницы: щелкните правой кнопкой мыши на нужной странице и выберите Добавить теги к выбранным записям .
После того, как вы отметили страницы, перейдите на панель мониторинга Visualization , нажмите кнопку палитры и настройте конкретные цвета для каждого из ваших тегов. Таким образом, можно либо выделить некоторые страницы определенной темы (и показать взаимосвязанные связи между ними), либо отфильтровать ненужные.
Существует ряд сценариев, когда вы можете пометить тегами свои страницы. Что приходит мне в голову сразу:
Страницы вашего сайта могут работать как экосистема — каждая из них имеет свои функции, дополняя друг друга.Например, путем ссылки на страницы с более низкими значениями Page Rank, страницы с самым высоким внешним рейтингом страницы могут повысить авторитет последнего.
Перейдите на Страницы> InLink Rank , отсортируйте свои страницы по InLink Rank (которая является альтернативой внешнему рейтингу страницы), выберите наиболее заметные и те, которые нуждаются в некотором повышении, и пометьте их соответствующим образом.
На информационной панели Визуализация раскрасьте эти две группы по тегам.Проверьте, на что вы тратите свой самый высокий рейтинг страницы. Подумайте, возможно ли направить его на те страницы, которые нуждаются в некоторой помощи «повышения рейтинга».
- Исследование тематических кластеров
Не секрет, что тематическая кластеризация полезна для вашего сайта. Зачем? Связывая ваши посты по определенной теме, вы создаете область знаний (которая также решает проблему, когда ваш хороший контент скрыт под глубиной кликов). В этой области знаний вы можете пожелать, чтобы некоторые из наиболее заметных (или более современных) постов имели более высокий рейтинг.
Вот что вы можете сделать: перейдите на Страницы , найдите конкретную тему, о которой вы знаете, что у вас много качественного контента, оставьте только соответствующие фрагменты и отметьте их соответствующим образом. Затем перейдите на панель мониторинга Визуализация и проанализируйте связи между отмеченными страницами.
Например, я пометил все сообщения, которые мы имеем в выдаче, и (bugger!) Они не совсем связаны между собой:
Стратегии актуальных взаимосвязей:
- Определите основу вашего кластера: страница с самой общей информацией по теме.Обязательно переходите по ссылке на столб с более конкретных страниц — это как домашняя страница вашей тематической группы.
- Ссылка от меньшего к более конкретному контенту , создающая тематические подкластеры.
- В подкластере ссылаются с страниц с высоким рейтингом на страницы с более низким рейтингом , чтобы повысить релевантность первых.
- Дайте «похожих постов» советов.
- Используйте якорных текстов, ориентированных на ключевые слова, при внутренних ссылках на другие тематически релевантные страницы.Что я имею в виду: не используйте гиперссылку «нажмите здесь», используйте «последний опрос о цветовых предпочтениях носков».
Конечно, изменения, которые вы вносите в приложение, не применяются автоматически к вашему сайту. Однако вы можете легко экспортировать их в список дел либо для себя, либо для своей команды / веб-мастера.
Нажав кнопку в нижней части панели действий, вы можете отменить все изменения / последние изменения или экспортировать окончательный список изменений в CSV:
Более того, нажав кнопку Экспорт на панели инструментов, вы можете экспортировать все страницы (или все ссылки) в CSV.Или лучше сохранить PDF с графическим изображением и отправить его своему клиенту. Я уверен, что он или она напечатает и повесит его на стену над своими кроватями.
Предупреждение Pro: При перестройке проекта список изменений не сохраняется. Так что будьте осторожны, экспортируйте свои изменения до восстановления.
Почему здорово иметь встроенный инструмент визуализации?
Не секрет, что вы можете визуализировать структуру своего сайта отдельно с помощью таких инструментов, как, например, Gephi (и при условии, что у вас есть электронная таблица со всеми вашими ссылками).
Затем, как только ваши электронные таблицы будут загружены в Gephi, вы увидите данные, представленные в виде случайной группы связанных точек. После этого вам нужно будет запустить ряд алгоритмов верстки, чтобы получить что-то похожее на интерактивную картину структуры вашего сайта. Поверьте мне, это потная часть работы!
Итак, я должен задать свой последний вопрос здесь, зачем все потоотделение, если мы уже встроили все в модуль WebSite Auditor Visualization ? Это займет всего несколько минут, чтобы завершить эту задачу.Вы бы лучше сами это увидели!
Я искренне надеюсь, что теперь вы можете поделиться нашим благоговением перед этой функцией (по крайней мере, частично, да, ребята!), И, самое главное, к настоящему времени вы должны понять, как это поможет вам достичь такого рода структуры сайта в стиле дзен.
Если у вас все еще есть вопросы или предложения, я всегда буду рядом с вами в комментариях.
Автор: Валери Нечай
,Выявление недостатков структуры сайта — OnCrawl
OnCrawl Blog> Техническая SEO> Выявление недостатков структуры сайта
Структура сайта — это один из наиболее эффективных рычагов SEO для крупных сайтов, потому что он хорошо масштабируется и у вас есть полный контроль над ним. Но это также один из наиболее часто используемых терминов в SEO. Понимание того, как оценивать и оптимизировать его, часто нечетко и неясно. Нет единого мнения о том, что на самом деле означает структура сайта и как ее оптимизировать.
Позвольте мне попытаться изменить это в этой статье.
Когда мы говорим о «структуре сайта», мы говорим о том, как организованы его страницы и контент, но это касается многих областей! Часто структуру сайта путают с «глубиной кликов», то есть сколько кликов требуется с домашней страницы, чтобы попасть на определенную страницу, или «структурой URL». Но это только отдельные его части.
Полный текст оптимизации структуры сайта содержит:
- Внутренняя связь
- Таксономия
- Глубина щелчка
- Структура URL
Цель состоит в том, чтобы оптимизировать эти четыре фактора таким образом, чтобы они указывали Google и пользователям, какие страницы являются наиболее важными, как они связаны и в каком контексте.
Важность оптимизации структуры сайта
Разница между английским и французским садами — отличная метафора для вещей, которые растут упорядоченно и дико.
В 17 веке самой горячей вещью были французские Формальные сады. Самым известным был Версальский сад (в Версальском замке). Это было абсолютно симметрично и организовано, урезано до дюйма.
В 18 веке англичане вступили во владение и создали английский ландшафтный сад, который был полной противоположностью: асимметричный и человеческий.Французы вернулись в 19 веке с французским ландшафтным садом, который был похож и вдохновлен английским ландшафтным садом.
Большинство структур сайта растут как английские сады: дико. Это недостаток для пользователей и поисковых систем, которые любят структуру, чтобы быстро понять, что такое сайт и где его найти. Структура дает нам и ботам ориентацию и контекст.
Вещи имеют тенденцию расти «естественно». У растений действительно есть своя структура, когда они растут, но весь сад растет дико и почти случайно, если его не обрезать и не организовывать.Взятый до крайности, естественно выращенный сад — джунгли. Вы не можете пройти (без мачете). То же самое и с сайтами.
(структура сайта должна быть похожа на французские сады)
Вот почему вы должны стремиться к созданию французского сада для структуры вашего участка: запланированного, организованного, обрезанного.
Драйвер этой потребности является Масштаб . Дикие вещи плохо масштабируются, но организованные, оптимизированные структуры выигрывают от роста. Больше страниц с хорошей структурой сайта означает более сильные сигналы для поисковой системы и широкий выбор для пользователей без потери ориентации.Таким образом, чем больше сайт, тем выше влияние его структуры на рост.
Области структуры сайта: внутренние ссылки, таксономия, глубина клика, структура URL
Позвольте мне начать с того, что я не буду идти по кроличьей норе по этим четырем темам. Они просто слишком глубоки, чтобы охватить все в одной статье. Вместо этого я объясню, что они из себя представляют и как они актуальны для оптимизации структуры сайта.
Внутренняя ссылка оказывает наибольшее влияние на структуру сайта и состоит из ссылок между страницами сайта.Он имеет такое большое влияние, потому что он определяет глубину кликов, частоту сканирования и «силу ссылок» * страницы.
* Я буду использовать термин «мощность ссылок», чтобы описать, насколько хорошо страница связана внутри и снаружи. Другими известными терминами являются «авторитет», «сила страницы» или «авторитет страницы». Я стараюсь избегать запутанного термина «PageRank», так как Google больше не использует его в первоначальном виде.
Джон Мюллер отметил, что структура URL важна, потому что она обеспечивает контекст:
«Таким образом, мы можем сканировать один URL-адрес по любому другому URL-адресу на вашем веб-сайте, просто перейдя по ссылкам на странице.[…] Если это невозможно, мы теряем много контекста. Поэтому, если мы видим эти URL-адреса только в файле Sitemap, мы не знаем, как эти URL-адреса связаны друг с другом, и нам очень трудно понять, насколько релевантен этот фрагмент контента в контекст вашего сайта. Так что это одна вещь … остерегаться.
Таксономия сайта описывает, как организована информация, то есть категории, подкатегории, теги и другие классификации.Способ организации вашего контента помогает пользователям быстрее находить вещи, а также обеспечивает контекст для поисковых систем.
Отношения между страницами играют важную роль для оптимизации сущностей. Если каждая страница является объектом, чем больше информации вы можете предоставить об этих отношениях, тем лучше. Таксономия помогает в этом, потому что она создает контекст этих отношений.
Глубина кликов представляет собой количество кликов, необходимое для перехода с домашней страницы на подстраницу на том же сайте.Имеет ли это значение? Вы держите пари! Джон Мюллер отметил, что Click Depth, также иногда называемый глубиной страницы, является более важным, чем структура URL, чтобы показать важность URL. Для Google, чем меньше кликов с главной страницы требуется для перехода на подстраницу, тем важнее она считается.
Структура URL — это метка для структурных элементов URL, то есть субдоменов, каталогов и подкаталогов. Это помогает Google в индексации и играет семантическую роль, то есть делает отношения между страницами более четкими.
Я видел, как это происходит, когда у сайта сложная для понимания структура URL, и многие URL ведут к одному и тому же контенту, и наши системы предполагают, что часть URL не имеет значения.
— 🍌 Джон 🍌 (@JohnMu) 28 декабря 2018 года
К настоящему времени вы должны понять, насколько запутаны эти четыре области и почему они так часто смешиваются. Например, изменение таксономии приводит к изменениям URL-адреса и внутренней структуры ссылок, что потенциально может привести к изменению глубины щелчка.Однако они не одинаковы. Важно знать разницу, чтобы быть эффективным.
Как проверить структуру сайта на наличие слабых мест
Мы поняли, почему, поэтому давайте рассмотрим, как и что.
Вы, вероятно, следите за тем, чтобы ваш сайт проверял и просматривал файлы журналов, по крайней мере, один раз в неделю (или один раз в день, если вы, как я, OCD). Но полноценный аудит структуры сайта требует времени. Таким образом, лучшая частота составляет раз в квартал , если вы не мигрируете / повторно запускаете свой сайт, или трафик внезапно падает.
Для проверки структуры вашего сайта вам понадобится как минимум сканер . Оптимально, у вас есть инструмент для анализа файлов журналов и сопряжения его с данными из консоли поиска и / или с выбранным вами инструментом веб-аналитики .
Цель состоит в том, чтобы получить лучшее понимание того, как пользователи используют ваш сайт и как поисковые системы сканируют его. Файлы журналов — лучшее понимание того, что делают поисковые системы на вашем сайте, веб-аналитика показывает, что делают пользователи. Объединение этих двух функций является мощным средством мониторинга для оценки влияния изменений структуры сайта.
Большой вопрос — как провести аудит вашего сайта. Для начала нужно сначала понять, что искать. Мы можем разделить проблемы на четыре варианта использования, которые я упоминал ранее.
Внутренняя ссылка
Позвольте мне предварять этот раздел предупреждением о том, что оптимальная структура внутренних ссылок зависит от вашей бизнес-модели. Не все должны оптимизировать внутренние ссылки одинаково. Вместо этого примите во внимание, есть ли у вас одна точка конверсии или много.
При этом я вижу четыре общих проблемы с внутренней связью:
Страницы со слишком большим количеством исходящих ссылок. Ищите страницы — или лучшие шаблоны страниц — которые имеют слишком много исходящих внутренних и мало входящих ссылок. По моему опыту, эти страницы часто страдают от высокого CheiRank и низкого PageRank, то есть они отдают слишком много ссылочной мощности и не получают достаточно.
Сколько это слишком много? Там нет магического числа. Мера против вашего среднего! Вытащите среднее количество исходящих ссылок на шаблон страницы и посмотрите, значительно ли выделяется одна из них. Если это так, критически оцените эти исходящие ссылки и посмотрите, сможете ли вы их обрезать.
Кроме того, оцените исходящие и входящие ссылки в связи с важностью и эффективностью страницы. Если это важно (для бизнеса) и неэффективно, то входящие и исходящие ссылки могут быть фактором.
На важных страницах слишком мало входящих ссылок. Таким же образом вы должны проанализировать важные страницы для вашего бизнеса на предмет наличия достаточного количества входящих внутренних ссылок при сканировании.
Истинное представление о силе внутренних ссылок исходит только из учета обратных ссылок при расчете графика внутренних ссылок.Это идея, которую я продвигаю с T.I.P.R. Модель. Но для начала просмотра входящих ссылок должно хватить.
(диаграмма Inrank Flow OnCrawl помогает понять, какие типы страниц наиболее часто связаны друг с другом)
(Вы также можете получить данные в необработанном виде из OnCrawl и скопировать / вставить их в электронную таблицу или загрузить как CSV)
[Case Study] Оптимизация ссылок для улучшения страниц с максимальной рентабельностью
В течение двух лет RegionsJob решал задачу повышения рентабельности инвестиций путем точной настройки внутренней структуры ссылок своего веб-сайта с целью создания эффективной архитектуры.Эта стратегия концентрировалась на SEO-действиях, которые поддерживали цели сайта. Основываясь на KPI для повышения рентабельности страниц, RegionsJob реализовал модификации, которые позволили бы создать веб-сайт с лучшим коэффициентом конверсии пользователей.
Важные страницы сканируются недостаточно часто. Скорость сканирования, то есть частота, с которой Google сканирует страницу, является важным показателем воспринимаемой Google важности страницы. Таким образом, при анализе структуры сайта учитывайте файлы журнала и просмотрите частоту сканирования каждой страницы по отношению к ее входящим и исходящим ссылкам.Google учитывает PageRank (или то, что они используют в настоящее время), чтобы решить, как часто сканировать в течение длительного времени, поэтому существует заметная корреляция между частотой сканирования и рейтингом. Если вы обнаружите, что важные страницы просматриваются реже, чем другие, подумайте об увеличении количества внутренних ссылок на них.
(Частота сканирования OnCrawl по отчету о доходах четко показывает, что страницы с большим количеством входящих ссылок сканируются чаще)
Страницы накопления ссылок. Точно так же, как есть страницы, которые слишком много ссылаются, у вас также есть страницы, которые получают много ссылок, но их недостаточно. Имейте в виду, я не продвигаю лепку ссылок в классическом смысле или идею, которую вы не должны связывать. Когда я говорю, что страницы «скрывают силу ссылок», я предполагаю, что они недостаточно ссылаются.
Определите 20 или 50 страниц с наибольшим количеством внутренних ссылок и оцените их на предмет потенциальных ссылок, если у них уже нет числа исходящих ссылок выше среднего.
(среднее количество исходящих ссылок OnCrawl для каждого типа страниц помогает вам найти страницы с потенциально большим или слишком низким количеством исходящих ссылок)
Оптимизация внутренних ссылок часто следует за распределением штанг с большим количеством страниц с высокими входящими / низкими исходящими ссылками и противоположностью на другой стороне спектра. Сайты с несколькими точками конверсии (например, целевые страницы) должны концентрировать силу ссылок на страницах, приносящих доход. Сайты с большим количеством точек конверсии (например, страницы продуктов для сайтов электронной коммерции или статьи для издателей) должны стремиться к равномерному распределению входящих и исходящих ссылок.
Это предписание является общим и применяются исключения, но важно помнить, что не каждый сайт должен быть оптимизирован одинаково.
Наиболее эффективными способами масштабирования изменений внутренних ссылок являются модификации модулей ссылок на страницах категорий или в верхней части навигации. Однако такие изменения необходимо протестировать перед отправкой, поскольку их влияние слишком сложно, чтобы их можно было оценить, и это подлежит оценке компанией Google типового содержимого. Внесение изменений в промежуточную среду и сравнение внутренней структуры ссылок с живой версией с помощью обхода контента — это самый разумный путь.
Глубина клика
При использовании Click Depth проблема, на которую вы хотите обратить внимание, — это важные страницы с слишком большой глубиной клика , что означает, что для их достижения требуется слишком много кликов с домашней страницы. Классическими преступниками и решениями являются нумерация страниц и панировочные сухари.
(типы страниц или группы по глубине показывают, находятся ли важные страницы слишком далеко от домашней страницы)
Не каждая страница будет иметь низкую глубину кликов, если сайт достигает определенного размера.С практической точки зрения, это невозможно, если только вы не захотите получить тысячи ссылок на своей домашней странице. Это означает, что, хотя старый идеал для каждой страницы, достижимой в 3 клика от главной страницы, является хорошей целью для поиска, не ломайте голову, если (неважно) страницы оказываются выше этого уровня.
Изменения глубины щелчка следует оценивать в промежуточной среде и сравнивать с живой версией. Сегментировать по типу страницы очень просто и посмотреть, как добавление крошки или нумерации страниц изменит глубину кликов.
Структура URL
Оптимальная структура URL масштабируется с размером сайта так же, как факторы, упомянутые в этом посте. Чем больше сайт, тем больше я рекомендую отражать определенную иерархию в структуре URL с каталогами и подкаталогами, чтобы предоставить пользователям и поисковым системам контекст.
Самая большая проблема, с которой я сталкиваюсь на сайтах, заключается в предоставлении либо слишком много, либо слишком мало иерархии в их структуре URL. Позвольте мне прояснить, что не самый высокий приоритет для привлечения органического трафика.Но когда вы работаете с большим сайтом и имеете возможность изменить структуру URL, добавление иерархии — неплохая идея.
Таксономия
Таксономия является одной из тех тем, которые содержат достаточно информации для всей книги. Я постараюсь обернуть это в несколько предложений, но имейте в виду, что это глубокая тема.
Подход к поиску оптимума очень сильно зависит от конкретного сайта, и часто есть несколько вариантов. Поэтому я не могу предоставить вам номер, который указывает, является ли ваша таксономия хорошей или плохой.Если вы никогда не занимались различными способами организации контента на своем сайте, вы, вероятно, недостаточно инвестировали в свою таксономию.
Ценным упражнением является сортировка карт для таксономии . Запишите все свои категории, подкатегории, темы (и теги) на карточках. Затем вызовите свой отдел маркетинга и обсудите оптимальную структуру информации на вашем сайте.
Allrecipes.com является примером сайта с хорошо структурированной таксономией. Я не знаю, способствует ли успех сайта только одной таксономии, но она, безусловно, отражает внутреннюю структуру ссылок и контента.
(Топ навигации allrecipes.com)
Фокус на индексируемом контенте
Индексируемость не является частью структуры сайта, но важно различать, действительно ли контент открыт для индексации или нет. Если вы блокируете индексацию больших частей сайта, скажем, определенного шаблона, такого как профили форума, последствия для структуры сайта применимы только к людям.
(отчет по индексируемости OnCrawl — важно учитывать индексируемость при оптимизации структуры сайта)
В этом смысле вы должны рассмотреть два момента.Во-первых, неиндексированные части сайта не предоставляют контекст для поисковых систем. Итак, помните о том, какова ваша логика исключения. Во-вторых, вместо использования метатегов noindex рассмотрите возможность предотвращения сканирования с использованием robots.txt, чтобы также сэкономить бюджет сканирования. Вы можете использовать rel = nofollow, но robots.txt обеспечивает большую гибкость, быстрые изменения и лучший контроль. Удалять низкокачественный контент из индекса Google — это всегда хорошая идея, и я видел хорошие результаты, сэкономив при этом бюджет сканирования. Поэтому, рассматривая внутренние ссылки, глубину кликов, таксономию и структуру URL, имейте в виду, что должно быть проиндексировано, а что нет.
Структура сайта меняется со временем
Оптимизация структуры сайта — это постоянный процесс. Веб-сайты — это «живые» экосистемы: они растут, сжимаются и меняются со временем. Точно так же, как людям нужно время от времени приходить к врачу для осмотра, нам необходимо регулярно пересматривать структуру сайта.
Подумайте о социальном графе города. В этом городе живет определенное количество людей, и большинство из них знают друг друга. Некоторые из них очень популярны, например, мэр. Некоторые могут знать только одного человека.Город оптимально связан, когда известны правильные люди, скажем, потому что они городской совет.
Одна из проблем — это флюс. Новые люди переезжают в город, другие уходят. Социальный граф постоянно меняется, как и граф ссылок сайта.
В метафоре люди — это узлы, а отношения между ними — ребра. Мы можем перенести это на то, как страницы связаны между собой на веб-сайте. Сайты растут, некоторые быстрее, некоторые медленнее, а график внутренних ссылок меняется.Вот проблема, стоящая за оптимизацией структуры сайта: это постоянная переоценка того, насколько хорошо узлы связаны друг с другом, и уверенность в том, что правильные узлы достаточно популярны.
Запускайте еженедельный или двухнедельный обход и просматривайте файлы журналов относительно частоты обхода примерно раз в месяц. Я предлагаю ежеквартальный аудит структуры сайта с учетом внутренних ссылок, структуры URL, таксономии и глубины кликов. Пересмотр таксономии необходим только при добавлении нового раздела, повторном запуске / переносе или развертывании нового продукта.Это, вероятно, случится не так часто, возможно, раз в год, если вообще будет.
Чем чище вы сохраняете структуру своего сайта, тем лучше он будет масштабироваться по мере роста вашего сайта.
,Структура сайта | Руководство по стилю 3
Столкнувшись с новой и сложной информационной системой, пользователи создают ментальные модели. Они используют эти модели, чтобы оценить отношения между темами и угадать, где найти вещи, которых они раньше не видели. Успех организации вашего веб-сайта будет во многом определяться тем, насколько хорошо информационная архитектура вашего сайта соответствует ожиданиям ваших пользователей. Логическая организация сайта с последовательным именем позволяет пользователям делать успешные прогнозы относительно того, где что-то искать.Последовательные методы организации и отображения информации позволяют пользователям расширять свои знания от знакомых страниц до незнакомых. Если вы вводите пользователей в заблуждение структурой, которая не является ни логичной, ни предсказуемой, либо постоянно использует разные или неоднозначные термины для описания функций сайта, пользователи будут разочарованы трудностями передвижения и пониманием того, что вы предлагаете. Вы не хотите, чтобы ментальная модель вашего сайта была похожа на рисунок 3.1.
Рисунок 31 — Не создавайте запутанную сеть ссылок. Дизайнеры не единственные, кто делает модели сайтов. Пользователи также пытаются представить структуру сайта, и успешная информационная архитектура поможет пользователю создать надежную и предсказуемую модель вашего сайта.
Функциональность просмотра вашего сайта
После того как вы создали свой сайт в виде структуры, проанализируйте его способность поддерживать просмотр, протестировав его в интерактивном режиме как в группе разработчиков сайта, так и с небольшими группами реальных пользователей.Эффективный дизайн веб-сайта — это в основном вопрос баланса между основным меню или домашними страницами и отдельными страницами контента. Цель состоит в том, чтобы создать иерархию меню и контентных страниц, которая будет естественной для пользователей и не вводит их в заблуждение и не мешает их использованию сайта.
Веб-сайты со слишком мелкой информационной иерархией зависят от огромных страниц меню, которые могут перерасти в запутанный список несвязанной информации. Схемы меню также могут быть слишком глубокими, скрывая информацию под слишком большим количеством слоев меню.Необходимость перемещаться по слоям вложенных меню до того, как они достигнут реального контента, разочаровывает (рис. 3.2).
Рисунок 3.2 — Примеры «проблемы Златовласки» в получении правильной структуры сайта. Слишком мелкая структура (слева) заставляет меню становиться слишком длинным. Слишком глубокая структура (справа), и пользователи разочаровываются, когда копаются во многих слоях меню.
Если ваш веб-сайт активно развивается, правильный баланс меню и страниц контента является движущейся целью.Отзывы пользователей (и анализ вашего собственного использования сайта) могут помочь вам решить, изжила ли ваша схема меню свою полезность или имеет слабые места. Сложные структуры документов требуют более глубоких иерархий меню, но пользователи никогда не должны быть вынуждены переходить на страницу за страницей меню, если прямой доступ возможен. Благодаря сбалансированной, функциональной иерархии вы можете предлагать пользователям меню, которые обеспечивают быстрый доступ к информации и отражают организацию вашего сайта.
Поиск по сайту как навигация
Если на вашем сайте более нескольких десятков страниц, ваши пользователи будут ожидать, что параметры веб-поиска найдут контент на сайте.На более крупном сайте, где может быть сотни или тысячи страниц контента, веб-поиск является единственным эффективным средством поиска определенных страниц контента или поиска всех страниц, которые упоминают ключевое слово или поисковую фразу. Просмотр интерфейсов, состоящих из основных сайтов, и контентные ориентиры необходимы на начальных этапах посещения пользователем вашего сайта. Однако, как только пользователь решил, что ваш сайт может предложить то, что он или она ищет, он пересекает порог специфичности, с которым может помочь только поисковая система:
- Никакой интерфейс просмотра ссылок не может гарантировать пользователю, что он нашел все экземпляры данного ключевого слова или поисковой фразы.
- Поиск является наиболее эффективным средством для доступа к определенному контенту, особенно если этот контент не посещается другими пользователями и поэтому вряд ли появится в виде ссылки на главной навигационной странице.
Как и в случае с популярными книгами в библиотеке или популярными песнями в iTunes, использование контента на крупных веб-сайтах является классическим феноменом «длинного хвоста»: нескольким предметам уделяется 80 процентов внимания, а остальным — значительно меньший трафик. Поскольку потребности пользователя становятся более конкретными, чем может обрабатывать интерфейс браузера, поисковые системы являются средством поиска контента в длинном хвосте, где он мог бы остаться неизвестным (рис.3.3).
Рисунок 3.3 — «Длинный хвост» веб-поиска. Большие сайты слишком велики, чтобы зависеть исключительно от просмотра. Сильно используемые страницы могут появляться на страницах меню просмотра, но непонятные страницы глубоко внутри сайта будут обнаруживаться и считываться только через технологии веб-поиска.
Структурные темы сайта
Веб-сайтыпостроены вокруг базовых структурных тем, которые формируют и укрепляют ментальную модель того, как вы организовали свой контент. Эти основополагающие архитектуры управляют навигационным интерфейсом веб-сайта и формируют ментальные модели того, как организована информация.Для создания веб-сайта можно использовать три основные структуры: последовательности, иерархии и веб-сайты.
последовательности
Самый простой и знакомый способ упорядочить информацию — это расположить ее в последовательности. Это структура книг, журналов и всего остального печатного материала. Последовательное упорядочение может быть хронологическим, логической последовательностью тем, переходящих от общего к частному, или алфавитным, как в указателях, энциклопедиях и глоссариях. Прямые последовательности являются наиболее подходящей организацией для учебных или образовательных сайтов, например, в которых от пользователя ожидается прохождение через фиксированный набор материалов, и единственными ссылками являются те, которые поддерживают линейный путь навигации (рис. 3.4, сверху).
Более сложные веб-сайты могут все еще быть организованы в виде логической последовательности, но каждая страница в последовательности может иметь ссылки на одну или несколько страниц отклонений, информации в скобках или информации на других веб-сайтах (рис. 3.4, внизу).
Рисунок 3.4 — Некоторые веб-сайты, такие как учебный сайт, изображенный выше (вверху), предназначены для чтения в линейной последовательности. Логика программирования может предложить индивидуальный контент для определенной аудитории и позволить отступления от основной последовательности страниц (нижняя диаграмма).
Иерархии
Информационные иерархии — лучший способ организовать самые сложные информационные массивы. Поскольку веб-сайты обычно организованы вокруг одной домашней страницы, которая затем ссылается на страницы подтемного меню, иерархическая архитектура особенно подходит для организации веб-сайта. Иерархические диаграммы очень хорошо знакомы в корпоративной и институциональной жизни, поэтому большинство пользователей находят эту структуру легкой для понимания. Иерархическая организация также налагает полезную дисциплину на ваш собственный аналитический подход к вашему контенту, потому что иерархии практичны только с хорошо организованным материалом.
Простейшая форма иерархической структуры сайта — это набор страниц типа «звезда» или «спица», размещенный на центральной домашней странице. Сайт представляет собой одноуровневую иерархию. Навигация — это простой список подстраниц, плюс ссылка на домашнюю страницу (рис. 3.5a).
Большинство веб-сайтов используют многоуровневую иерархическую или древовидную архитектуру. Такое расположение основных категорий и подкатегорий имеет мощное преимущество для сложной организации сайта, поскольку большинство людей знакомы с иерархическими организациями и могут легко сформировать мысленные модели структуры сайта (рис.3.5b).
Рисунок 3.5 — Иерархии просты и неизбежны в веб-дизайне. Большая часть контента хорошо работает в иерархических структурах, и пользователям легко их понять.
Обратите внимание, что, хотя иерархические сайты организуют свое содержимое и страницы в дереве меню и подменю сайта за пределами домашней страницы, эта иерархия подразделений контента не должна становиться навигационной смирительной рубашкой для пользователя, который хочет перейти с одной области сайта на другую. , Большинство интерфейсов навигации по сайту предоставляют глобальные навигационные ссылки, которые позволяют пользователям переходить из одной основной области сайта в другую без необходимости резервного копирования на центральную домашнюю страницу или подменю.На рисунке 3.6 вкладки в заголовке позволяют пользователю переходить из одной основной области содержимого в другую, левое навигационное меню предоставляет категории локальных тем, а окно поиска позволяет пользователю выпрыгивать из категориальной навигации и находить страницы на основе Интернета. поисковый движок.
Рисунок 3.6 — Локальная (левая колонка) и глобальная (вкладки под заголовком) навигационные системы обеспечивают гибкую и простую для понимания навигационную систему.
Сети
Веб-подобные организационные структуры накладывают несколько ограничений на порядок использования информации.В этой структуре цель часто состоит в том, чтобы имитировать ассоциативное мышление и свободный поток идей, позволяя пользователям следовать их интересам в уникальном, эвристическом, своеобразном паттерне. Этот организационный шаблон развивается с плотными ссылками как на информацию в другом месте сайта, так и на информацию на других сайтах. Хотя цель этой организации состоит в том, чтобы использовать всю мощь веб-связей и ассоциаций в полной мере, веб-подобные структуры могут также легко распространять путаницу. По иронии судьбы, ассоциативные организационные схемы часто являются наиболее непрактичной структурой для веб-сайтов, потому что их так сложно понять и предсказать.Сети лучше всего работают для небольших сайтов, в которых преобладают списки ссылок, и для сайтов, предназначенных для высокообразованных или опытных пользователей, которым необходимо дополнительное образование или обогащение, а не базовое понимание темы (рис. 3.7).
Рисунок 3.7 — Простая сеть связанных страниц.
Резюме
Наиболее сложные веб-сайты имеют общие аспекты всех трех типов информационных структур. Иерархия сайта создается в основном со стандартными навигационными ссылками внутри сайта, но тематические ссылки, встроенные в контент, создают сетчатую сетку ассоциативных ссылок, которая выходит за рамки обычной навигации и структуры сайта.За исключением сайтов, которые строго соблюдают последовательность страниц, пользователи, скорее всего, будут переходить на ваш сайт в свободной форме, как в Интернете, перепрыгивая через регионы в информационной архитектуре, так же, как они пропускали бы главы в справочнике. По иронии судьбы, чем яснее и конкретнее организация вашего сайта, тем проще пользователям свободно перемещаться с места на место, не чувствуя себя потерянным (рис. 3.8).
Рисунок 3.8. Мы структурируем сайты как иерархии, но пользователи редко используют их таким образом.Четкая информационная структура позволяет пользователю свободно и уверенно перемещаться по вашему сайту.
Нелинейные модели использования, типичные для веб-пользователей, не освобождают вас от необходимости организовывать свое мышление и представлять его в четкой, последовательной структуре, которая дополняет ваши общие цели проектирования. Рисунок 3.9 суммирует три основных организационных шаблона в зависимости от линейности повествования и сложности контента.
Рисунок 3.9 — Выберите правильную структуру сайта для вашей аудитории и контента.
,Вы начинаете новый проект веб-сайта? Ну, первое, что вы должны сделать, это выбрать структуру вашего сайта. Если у вас еще нет основного представления о том, как вы будете представлять информацию на своем сайте, ее будет сложно, если не невозможно, организовать. Структуры веб-сайтов — это первый шаг к созданию невероятной информационной архитектуры, которая отделяет хорошие веб-сайты от удивительного опыта.
Вы хотите потратить время на выбор правильной структуры сайта сейчас, потому что это может помочь вам в будущем. Тенденции и потребности клиентов могут быстро меняться, а веб-сайты часто нуждаются в обновлении. Если вы хотите избежать дорогостоящих повторных операций в будущем, вам нужно выбрать структуру, которая будет работать со временем. Выбор правильного с самого начала — лучший способ сделать это; Тем не менее, вы должны оставить место для изменений со временем.
Эта статья не только расскажет вам, что такое структуры веб-сайтов и как они приносят вам пользу, но также объяснит, как выбрать лучшую для вашего проекта.
Четыре типа структур веб-сайтов
Если вам когда-либо было поручено создавать веб-сайт с нуля, вы, вероятно, уже знаете, как трудно узнать, с чего начать. Многие дизайнеры-новички могут предпочесть начать с темы, однако при создании пользовательских веб-сайтов и крупных сайтов предварительно созданная тема может не обрезать ее.
Все сайты имеют базовую организационную структуру, которая подразделяется на один из четырех типов. Эти структуры сайта (или их комбинация) могут помочь вам начать организовывать сайт любого размера.
Иерархическая модель
Это, пожалуй, самые распространенные типы структур веб-сайтов. Они начинаются с широкого набора информации (родительские страницы), который фильтруется в более подробную информацию (дочерние страницы). Иногда эти структуры называют деревьями, и они очень похожи на организационные схемы в корпорациях.
Последовательная модель
Эти типы структур в точности соответствуют звучанию — они ведут посетителей сайта через последовательность.В то время как иерархическая структура может вести посетителей сайта вниз или поперек к другой родительской странице, последовательные структуры ведут посетителей только назад или вперед от одного шага к другому.
Матрица Модель
Хотя эта структура может быть нетрадиционной, в первые годы Интернета она была довольно популярной. Структура матричного типа позволяет посетителям сайта выбирать, куда они хотели бы пойти дальше. Вместо того чтобы строить последовательность или ограничивать навигацию родительскими / дочерними отношениями, эта структура предоставляет множество ссылок в тематических группах для тех, кто попадает на страницу и выбирает, куда идти дальше.
База данныхМодель
Этот динамический подход к структурированию сайта объединяет базу данных с поиском. Чтобы создать такой сайт, вам нужно подумать снизу вверх — тщательно пометить метаданные вашего контента на основе принципов информационной архитектуры. Если все сделано правильно, эта структура создает сайт, где посетители могут создавать впечатления на основе того, что они ищут.
Почему стоит начинать со структуры сайта
Теперь, когда вы немного знакомы с основными типами структур веб-сайтов, пришло время обсудить, как их использование может помочь вам.Помимо упрощения организации любого проекта веб-сайта, использование структур сайта также может улучшить удобство использования.
Процесс создания структуры сайта заставляет дизайнера задуматься о том, как посетители будут перемещаться по сайту. Это резкое отличие от простого размышления о том, что будет размещено на сайте. Независимо от того, используете ли вы простую последовательную модель или строите сложную матрицу, вы начнете думать с того, что, а не просто что.
Структура сайта объясняет, как пользователи перемещаются по сайту.Это влияет на удобство использования, потому что большая часть юзабилити основана на том, насколько легко пользователи сайта могут найти свой путь через сайт. Очень удобный сайт прост в навигации (в дополнение к другим факторам). Структуры веб-сайтов не гарантируют удобство использования, но они, безусловно, помогают в этом.
Вы также можете использовать структуру своего сайта для создания тем, что может пригодиться, если вы снова и снова создаете одни и те же типы проектов веб-сайтов. В то время как вы могли бы работать с вашего последнего сайта, чтобы быстро сделать что-то похожее, гораздо проще создать общую тему, которую вы можете настроить по мере необходимости.Возможно, вы даже можете продавать свои темы в Интернете для начинающих дизайнеров, которым нужна помощь в структурировании их сайтов. Однако выбор структуры сайта — это единственный способ начать.
Структуры сайтовтакже полезны для крупных веб-сайтов, поскольку они часто требуют особого внимания, когда речь идет о навигации. Когда есть много контента, которым можно поделиться, невероятно легко стать подавляющим. Выбрав структуру веб-сайта, которая наиболее подходит для вашей организации, вы можете снизить утомляемость посетителей сайта и помочь им дольше оставаться на сайте.
Как выбрать лучшую структуру сайта
Проще говоря, структура сайта помогает вам создавать лучшие сайты. Итак, следующий логичный вопрос для большинства людей: «Как вы узнаете, какую структуру использовать?» Вот когда это становится немного сложнее. Вы начинаете с понимания, для кого вы создаете сайт.
Структура сайта и аудитория
Как мы упоминали выше, некоторые сайты могут выиграть от сочетания структур веб-сайтов, основанных только на их размере.Однако вы также можете решить, кто будет читать сайт (помимо того, как он будет использоваться) при выборе структуры вашего сайта.
Иерархический
Для большинства пользователей сайта иерархическая модель работает просто отлично. Для этой структуры информация ранжируется и представляется в логическом порядке. Одна из причин, по которой большинство людей ценит этот тип организации, заключается в том, что в настоящее время она является самой популярной моделью в Интернете, что упрощает навигацию просто потому, что она знакома.
Иерархические структуры также легко настроить в соответствии со многими сценариями.Вы можете выбрать простой стиль хаба и спиц или создать более сложные иерархии с подзаголовками в зависимости от предполагаемого использования и пользователя. Простые иерархии также отлично работают на мобильных сайтах, где параметры ограничены одной страницей и несколькими ссылками. Хитрость в выборе структуры, которая выдержит испытание временем, заключается в создании структуры, которая не будет слишком мелкой или глубокой. Слишком много (или слишком мало) подзаголовков — это плохо.
Последовательный
Последовательные сайты часто ассоциируются с образовательными сайтами, и это неудивительно, поскольку эта структура основана на стиле, используемом печатными публикациями.Если вы представляете контент, который преподается, естественным образом происходит в логическом порядке (например, в алфавитном порядке) или предназначен для хронологического размещения, последовательная структура, вероятно, является лучшей. Само собой разумеется, что предполагаемая аудитория — это те, кто хочет изучать значительный объем информации, представленной на нескольких страницах.
Несмотря на то, что последовательные структуры следуют четко определенному порядку и лучше всего работают на небольших сайтах, есть возможность настроить их в соответствии с потребностями больших сайтов.Используя некоторые принципы иерархических структур, программисты могут добавлять отступления к этой структуре сайта. Эти «подстраницы» оставляют место для добавления поддерживающих страниц информации, не позволяя пользователю сайта отклониться от своей цели. Никто не любит нажимать на ссылку только для того, чтобы заблудиться и не знать, как вернуться (даже если намеренно). Отступления позволяют посетителям сайта бродить, но не слишком далеко.
Матрица и база данных
Если бы была одна фраза, обобщающая этот тип структуры сайта, это было бы: «Введите матрицу, если вы решитесь. Мало того, что структуры матриц и баз данных сложнее эффективно организовать, они также сложны для навигации, если вы еще не знаете, что ищете.
Матрица и структура базы данных основаны на больших объемах информации и представляют ее либо как сеть данных, либо как упрощенный интерфейс на основе ввода. Те, кто любит использовать ассоциативные мыслительные процессы или не возражают, если им одновременно дают большое количество информации, могут пользоваться такими настройками.
В веб-дизайне матрицу часто рассматривают как набор ссылок на идеи или словесное облако тем, которые ведут посетителей туда, где они должны быть. Проекты баз данных основаны на параметре поиска и извлекают связанную информацию для пользователя. Эти типы сайтов могут доставлять невероятные объемы данных пользователям; поэтому вы должны быть осторожны, чтобы рассмотреть, сколько это слишком много. Когда есть большое количество тем для выбора, из которых практически нет организаций, или из поиска невозможно найти соответствующую информацию, многие люди ошеломляются и уходят.
Эта вероятность вызвать путаницу и пропустить соединения — основная причина, по которой матрица и структура базы данных зарезервированы для небольших сайтов, для тех, у кого есть читатели, которые уже имеют большой объем знаний по данной теме, или организации, которые могут инвестировать в расширенную фильтрацию и поиск.
Построение вашей структуры
Теперь, когда вы немного знаете о структурах веб-сайтов, вы, вероятно, задаетесь вопросом, что делать дальше. Короткий ответ: начните создавать карту сайта.Нужна помощь, чтобы начать? Эта статья агентства цифрового маркетинга Protofuse делает большую работу по объяснению того, как использовать Slickplan для представления выбранных вами структур сайта, планирования навигации и создания архитектуры, которая выдержит испытание временем.
Автор Дженн Мари
Дженн Мари — внештатный копирайтер и специалист по интернет-маркетингу из Сиэтла.Настоящий евангелист, Дженн ранее помогала людям полностью использовать потенциал продуктов Dell, Microsoft и Amazon. Сейчас она занимается созданием подлинных онлайн-презентаций для малого бизнеса и предпринимателей через свою компанию Jenn Marie Writing & Marketing.
,