Блог про интернет-маркетинг для бизнеса

SEO

Как нарисовать скелет сайта

34
0
10

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

Скелет сайта в виде графика нужен, чтобы:

  • показать, где находится каждая страница;
  • показать, как перейти к странице;
  • определить уровень вложенности страниц;
  • определить структуру URL;
  • продумать внутреннюю перелинковку сайта.

Из чего состоит скелет сайта: примеры

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

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

Пример — варианты вложенных категорий для раздела с колясками:

Пример — варианты вложенных категорий для раздела с колясками

Грамотно собранное семантическое ядро позволяет построить иерархию категорий: какие стоит поднять выше, а какие разместить ниже. Например, на сайте косметологии и хирургии раздел «маммопластика» стоит вынести из раздела «пластическая хирургия». Эта категория может принести много трафика, её нельзя прятать глубоко в структуре:

Эта категория может принести много трафика, её нельзя прятать глубоко в структуре

Участок скелета сайта должен выглядеть так:

Участок скелета сайта должен выглядеть так

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

Такие ситуации — когда некоторые категории стоит разбить на несколько — встречаются часто, и здесь важно учитывать несколько нюансов:

  • сколько товаров данного типа в наличии у клиента.
  • насколько клиент заинтересован в работе с данной категорией товаров.

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

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

Выделяем категорию в структуре сайта:

В структуре сайта

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

В таком случае стоит выделить эти подразделы уровнем ниже

Включаем подкатегории в скелет сайта:

Включаем подкатегории в скелет сайта

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

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

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

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

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

Таблицы Google

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

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

Важно, что результат можно экспортировать сразу в несколько форматов:

  • xlsx — файл Microsoft Excel;
  • csv — файл текстового формата, который представляет разделенные запятой значения (табличные или строчные значения);
  • ods — файл OpenDocument.

Microsoft Visio

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

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

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

XMind

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

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

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

Для больших сайтов со множеством категорий удобнее размещать категории в виде древовидной структуры, вертикально:

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

Что еще можно в XMind:

  • применять стили к определенной группе выделенных элементов;
  • менять внешний вид диаграммы в процессе создания;
  • сворачивать и разворачивать вложенные категории для удобства просмотра;
  • указать URL для новых страниц с помощью ярлыков:

указать URL для новых страниц с помощью ярлыков

  • используя функцию «резюме», можно определить фильтры, шаблонные для нескольких категорий:

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

  • или оформить их как вложенные разделы, выделив при этом уникальным стилем:

или оформить их как вложенные разделы, выделив при этом уникальным стилем

В платной версии XMind Pro можно экспортировать проект в Excel и таблицы Google.

Выводы

  1. При формировании структуры сайта необходимо плотно работать как с семантическим ядром, так и с клиентом — следует учитывать его интересы при выделении тех или иных категорий, а также наличие товара на складе.
  2. Во время создания скелета сайта важно прописывать все структурные элементы: разделы, подразделы и фильтры.
  3. Для небольших сайтов подойдет организационная диаграмма, для крупных — древовидная.
  4. При выборе сервиса для визуализации структуры следует учитывать возможность экспорта в разные форматы, функцию совместной работы и возможность быстро вносить правки в диаграмму. Последнее особенно важно, потому что интересы пользователей меняются, а значит уточнять и дополнять скелет сайта нужно постоянно.
Обнаружили ошибку? Выделите ее и нажмите Ctrl + Enter.

Комментарии (5)

  1. 1
    23 дня назад

    А еще я специально для этого дела написал инструмент

    Примерно так и получается, только генерируется автоматически

  2. 1
    23 дня назад
    Можно еще структуру перелинковки из текста сразу заложить - очень удобно получается когда видно все дерево и какие страницы можно связать дополнительными ссылками
  3. -1
    24 дня назад

    Привет всем! Визуальная структура сайта давно меня интересовала. Но ... воз и ныне там. Как её применять для информационного сайта https://www.assessor.ru  Для навигации только и мог что придумать - вверху экрана меню.

    • 1
      Alexandr Ivanov
      24 дня назад

      1) Нанять тиму которая всё сделает - дорого, эффективно, работает.

      2) Копать материал по теме - дешево, долго, эффективность как повезет, можно умереть.

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

  4. 1
    24 дня назад

    Спасибо за статью!

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

Чтобы оставить комментарий, необходимо авторизироваться

Подписаться

на самую полезную рассылку по интернет-маркетингу

Самое

обсуждаемое популярное читаемое