Как составить структуру сайта

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

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

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

Для работы нам потребуется программа XMind — инструмент для построения связей.

xmind1

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

Этапы построения структуры

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

remont1

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

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

Заходим в программу XMind. Выбираем режим «карта» (Ctrl+N) и  создаем лист.

karta

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

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

  • О нас/О компании
  • Контакты (карта от яндекса, номера телефонов, адреса)
  • Портфолио (кроме интернет-магазинов или блогов)
  • Услуги
  • Цены (общий прайс-лист в виде таблицы для удобства просмотра)
  • FAQ/Вопросы и ответы (10-20 самых популярных вопросов с ответами)
  • Отзывы/Видео-отзывы (повышают лояльность аудитории)
  • Статьи
  • Новости

shema

Теперь нам необходимо продумать структуру нашего каталога услуг. Желательно заранее подготовить их перечень. Если у вас есть прайс, то в нем уже есть список основных ваших услуг. От страницы «Услуги» создаем основные разделы:

  • Ремонт квартир
  • Ремонт домов/коттеджей
  • Ремонт офисов
  • Дизайн-проект

shema2

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

Основные категории и подкатегории в разделе «ремонт квартир»:

  • Косметический ремонт квартиры
  • Евроремонт квартиры
  • Капитальный ремонт квартиры
  • Дизайнерский ремонт квартиры
  • В новостройке
  • Ремонт комнат
    • Однокомнатный
    • Двухкомнатный
    • Ремонт кухни
    • Ремонт прихожей
    • Ремонт гостиной
    • Ремонт детской
    • Ремонт ванной
    • Ремонт туалета
    • Ремонт балкона и лоджии
  • Отдельные виды работ
    • Сантехника
    • Поклейка обоев
    • Ремонт полов
    • Ремонт стен
    • Ремонт потолков
    • Электрика
    • Покраска стен
    • Утепление
    • Дополнительные работы
    • Установка окон
    • Установка дверей

shema3

Добавляем основные категории в раздел «ремонт домов/коттеджей»:

  • Евроремонт
  • Капитальный
  • Косметический

Аналогично прорабатываем раздел «ремонт офисов»:

  • Капитальный
  • Косметический

shema4

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

В идеале на сайте должно быть как можно больше страниц. Но не следует создавать страницы с одинаковым содержимым. Не нужно отдельно создавать такие страницы как «ремонт квартиры» и «ремонт квартиры в Москве». По сути это будет одно и то же. Все запросы, связанные с одним интентом (услугой/товаром), нужно объединять на одну страницу.

Итак, что получилось. Буквально за 20 минут я проанализировал сайты конкурентов, посмотрел прайс-листы и составил структуру нашего будущего сайта.

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

Теперь переходим к описанию нашего функционала. Наводим на «главную страницу» и нажимаем кнопку F4.

shema6

Расписываем здесь необходимый нам функционал:

  • Форма обратной связи
  • Кнопка соц.сетей
  • Кнопка «Наверх» (внизу сайта)
  • 1 баннер, размер 240*400, на сайдбаре (боковая панель слева)

Шапка:

  • Логотип
  • Номер телефона
  • Заказать обратный звонок
  • Работаем с 8:00 до 20:00 без выходных
  • Email

Этого вполне достаточно. Не перегружайте шапку сайта.

Верхнее меню:

  • О нас
  • Услуги
  • Цены
  • Портфолио
  • Вопросы и ответы
  • Отзывы
  • Статьи
  • Новости
  • Контакты

Футер (подвал):

  • Копирайт
  • Адрес
  • Время работы
  • Номер телефона
  • Email

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

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

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

На странице «новости» нажимаем F4 и указываем необходимую информацию. Здесь будет список превью новостей. У страницы «статьи» — превью статей. У страницы «контакты» — адреса, телефон, карта Яндекса, форма обратной связи, реквизиты компании.

shema7

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

Все внутренние страницы услуг будут выглядеть одинаково по структуре наполнения и состоять из одинаковых элементов:

  • H1 (заголовок)
  • Блок текста (примерно 1000 символов)
  • Таблица с ценами
  • Блок с примерами работ (5-10 фото)
  • Блок текста (примерно 1000 символов)
  • Форма обратного звонка

shema8

Вот такая структура у нас получилась:

shema9

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

Сергей Моховиков
SEO специалист

Здравствуйте! Я специалист по продвижению сайтов в поисковых системах Яндекс и Google. Веду свой блог и канал на YouTube, где рассказываю самые эффективные технологии раскрутки сайтов, которые применяю сам в своей работе.

Вы можете заказать у меня следующие услуги:

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...
Закладка Постоянная ссылка.

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

avatar
2 Comment threads
1 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
3 Comment authors
ВикторЮлияАнтон Recent comment authors
  Subscribe  
newest oldest most voted
Юлия
Гость
Юлия

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

Виктор
Гость
Виктор

Да! xmind очень классная программа, сам пользуюсь ей уже много лет. А самое главное — бесплатно. Даже не знаю, какие у нее есть аналоги.

Антон
Гость
Антон

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