Из чего состоит структура landing page и как написать продающий заголовок

Определение

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

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

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

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

Обычно в иерархии сайта учитываются следующие аспекты:

• текущее местонахождение пользователя;
• куда оттуда можно попасть (разделы, товары, страницы);
• куда можно попасть из разделов, товаров и т. д.

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

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

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

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

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

Плюсы:

• Самый быстрый и легкий способ получения информации
• Наименьшие трудозатраты
• Самая полная информация о структуре сайта

Минусы:

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

Ограничения:

Если URL-адреса сайта не ЧПУ, крайне рекомендуется наличие хлебных крошек на всех страницах.

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

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

Первым делом настраиваем программу:

• Отключаем проверку всего лишнего (изображения, CSS, JS, внешние ссылки);
• Включаем переходы по внутренним ссылкам, закрытым в nofollow;
• Включаем игнорирование robots.txt.

Рис. 7 «Настройки Screaming Frog»

Также в настройках «Извлечения» настраиваем выгрузку содержания хлебных крошек страниц. Это сильно упрощает понимание структуры сайтов без ЧПУ.

Для этого идем в Configuration – Custom – Extraction. Включаем выгрузку Xpath – Extract Text и указываем xpath-код.

Рис. 8 «Настройка извлечения»

Самый быстрый и простой способ узнать Xpath нужного элемента – в Google Chrome открыть консоль (Ctrl Shift I), выделить нужный элемент и в контекстном меню выбрать Copy-Xpath.

Рис. 9 «Копирование Xpath»

Запускаем сбор информации по сайту и после окончания выгружаем список страниц URL с извлеченными xpath-данными. Для этого переходим на вкладку Custom-Extraction и нажимаем «Export».

Рис. 10 «Выгрузка данных»

Открываем полученный файл в таблицах и сортируем список:

• По URL – Значения – От А до Я
• Затем по столбцу с извлеченными данными – значения – от А до Я

Рис. 11 «Сортировка полученных данных»

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

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

Рис. 12 «Карта спаршенного сайта»

Поля на странице и их расположение

Структуру можно разделить на четыре зоны:

Шапка (хедер, header)

Она располагается в самом верху

Это первое, на что обращает внимание пользователь, поэтому ее наполнение должно привлечь и заинтересовать его. Шапка состоит из:

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

Основная часть

Она расположена в центре, занимает основное место и несет главную информационную нагрузку, рассказывает о компании, услугах, предложениях. Она состоит из:

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

Подвал (footer)

Это заключительная часть, она состоит из:

• полей колонтитулов – адреса и контактные телефоны всех филиалов, данные о партнерах фирмы;
• нижней навигации по сайту – развернутый список разделов.

Сайдбары

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

Что из себя представляет

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

Больше видео на нашем канале — изучайте интернет-маркетинг с SEMANTICA

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

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

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

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

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

Построить структуру сайта – это значит учесть всевозможные аспекты, в частности:

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

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

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

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

Структура сайта в виде схемы от А до Я: правильные рекомендации

Сайт с линейной структурой

Иерархия

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

Рис. 2. Иерархическая структура веб-сайта

«Паутина»

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

Рис. 3. Сайт со структурой типа «паутина»

БОльший порядок на сайте можно навести, если установить связи между страницами по принципу «решетки» (рис. 4)

Рис. 4. Структура типа «решетка»

Дата добавления: 2016-06-18; просмотров: 1490;

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

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

Рекомендации Google по структуре сайта

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

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

2. Для посетителей создайте страницу навигации (HTML-карту сайта) и файл Sitemap.xml, в котором укажите целевые URL и даты последних изменений, чтобы Googlebot быстрее нашел новые и измененные страницы вашей структуры.

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

4. Используйте человекопонятные адреса страниц (ЧПУ) вместо идентификаторов. Они более понятны для посетителя, легче запоминаются и показывают, на какой странице оказался пользователь.

Например, вместо https://site.com/index.php?cat=10&subcat=2&id=41 используйте https://site.com/product/phone/samsung/.

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

Подробнее о рекомендациях Google можно почитать в справке.

Рекомендации от Яндекс

1. Придерживайтесь четкой иерархии страниц. У каждого документа должен быть свой раздел.
2. Используйте карту сайта. Создайте файл Sitemap и загрузите его в Яндекс.Вебмастер или укажите ссылку на файл в Robots.txt. Поисковый робот будет быстрее индексировать и анализировать нужные документы.
3. Ограничивайте индексирование служебной информации с помощью файла Robots.txt, чтобы не тратить ресурсы на ненужные для пользователя страницы.
4. Используйте уникальные URL-адреса страниц. Каждая страница должна быть доступна только по одному адресу.
5. Делайте текстовые ссылки на другие разделы сайта, чтобы робот мог понять их содержимое.
6. Проверяйте корректность symlink-ов, чтобы при переходе на другие страницы сайта не создавался бесконечно растущий URL. Например, example.com/vasya/vasya/vasya/vasya/.

Больше рекомендаций по структуре сайта от Яндекс ищите в справке.

Виды и схемы

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

Линейная

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

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

Сложная линейная

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

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

Блочная

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

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

Древовидная

Древовидная или иерархическая структура – самая распространенная. Она позволяет задать четкую и логичную перелинковку.

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

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

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

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

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

Тема 3. Проектирование структуры веб-сайта

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

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

Внутренняя и внешняя структура

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

Внутренняя структура определяет логические связи между веб-страницами, то, что в SEO называется внутренней перелинковкой. Продуманная внутренняя структура позволяет избежать ситуаций, когда, например, на сайте появляются страницы, доступные более чем в 3-х кликах от стартовой или в поисковую выдачу попадают приватные страницы или множественные дубли. С другой стороны, под внутренней структурой сайта иногда подразумевают размещение файлов и каталогов в файловой системе веб-сервера. Хороший пример — размещение всех изображений в каталоге images, а скачиваемых файлов — в каталоге download. Внутренняя структура может частично или полностью отображаться во внешнюю структуру.

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

Типовые структуры

Линейная структура

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

Рис. 1.

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

Давайте немного отойдем от блога “Учебка WordPress“, поговорим о том, что такое структура сайта, как ее формировать и создавать.

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

1. Что такое структура сайта;
2. требования к структуре сайта;
3. типы структуры, примеры в виде схем;
4. внешняя и внутренняя структуры сайта;
5. как правильно изменить (переделать) структуру сайта;
6. чек-лист “Учебка WordPress” — что, как и почему изменилось после смены структуры сайта.

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

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

В тезисах структуру сайта можно охарактеризовать так:

• Где я нахожусь сейчас (страница входа);
• куда я могу попасть (переход);
• взаимосвязь между категориями.

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

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

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

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

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

Типовые требования поисковой системы 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 — платный софт от майкрософт, подойдет для создания структур любой сложности и направленности — на нем нарисованы изображения выше.

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

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

Какие схемы структуры сайта бывают

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

Линейная

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

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

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

Блочная

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

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

Древовидная

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

Внешняя структура

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

Он состоит из:

• Header. Голова сайта, в которой указывается название организации, размещается логотип и прочая дополнительная информация (контактные данные, адрес офиса, часы работы и т.д.);
• Sidebar. Сайдбар не является основным элементом, вместо двух блоков может быть один справа или слева. Его назначение — показ посетителю дополнительной информации, которая увеличит время его пребывания на страницах проекта;
• Content. Главная часть сайта, где находится основная и полезная информация. Её необходимо излагать в доступном виде, не нагружать лишними элементами. Тексты на онлайн-ресурсе должны быть интересными и легко читаемыми;
• Footer. Нижняя часть, в которой размещается иная полезная информация о компании, и показываются полезные ресурсы.

Какой должна быть структура сайта

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

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

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

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

Линейная структура с ответвлениями – тот же вариант линейной структуры с возможность перейти на страницу и узнать больше информации по интересующему пользователя моменту.

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

Древовидная структура – самая распространенная схема сайта. Находясь на конкретной странице сайта у пользователя есть выбор перехода на категорию которая уточняет его выбор. Пример: Каталог мебели > фурнитура для дома > стулья, кресла, табуретки > красный стул.

Данную структуру можно дополнять другими схемами перелинковки – сортировка по тегам, брендам и т.д. Что делает её универсальной для большинства проектов.

Совет: Если у вас пока нет опыта разработки структур сайта, ориентируйтесь на лидеров в вашей ниши. Анализируйте структуру конкурентов и улучшайте её под свои нужды.

К примеру при создании интернет магазина одежды, подсмотрите сортировку, структуру и фильтрацию на Яндекс.Маркете.

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

Все, о чем мы говорили выше, относится к внутренней структуре сайта. Она содержит правила и порядок формирования URL-адреса.

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

А теперь пришло время поговорить о внешней структуре сайта.

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

Базовое размещение визуальных элементов:

1. Верхняя часть (хедер, шапка, голова) – блок, содержащий логотип, горизонтальное меню и другие дополнительные элементы (большое изображение, цветовая палитра, реклама, баннеры).
2. Сайдбар (один или два) – боковое меню, предназначенное для передачи дополнительной информации, направления пользователя вглубь ресурса, привлечения клиентов интересными видео и запоминающимися слоганами. Проще говоря, основная цель – задержать посетителя на проекте как можно дольше. Иногда сайдбар и вовсе отсутствует.
3. Центральный блок – сервис или контент, ради которого человек посетил ваш ресурс. Эта часть интересует его в первую очередь. Поэтому контент должен быть заметным в первом экране (максимум во втором) и удобочитаемым. Не заставляйте своих посетителей прокручивать страницу в попытке найти то, что им нужно прямо сейчас. Современные пользователи очень нетерпеливы и быстро переходят с одной площадки на другую.
4. Футер (подвал) – блок, предназначенный для размещения контактов (наименование организации, адрес, номер телефона). Иногда содержит навигационное меню и другие полезные ссылки.

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

Что такое логическая структура сайта

Логическая структура сайта — это совокупность всех страниц на сайте, расположенных с учётом иерархии. То есть, взаимосвязь страниц, в которых прослеживается их принадлежность к разделам, категориям, подкатегориям и другим типам страниц (карточкам товара, тегам, фильтрам и прочее).

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

Логическая схема сайта

Логическая структура сайта состоит из страниц сайта и связей между ними.

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

Что значит сайт легко масштабируется?

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

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

Попробуем изменить структуру (уберем подразделы):

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

Что значит сайт понятен для пользователя?

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

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

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

Правильно

Категория: Чай — Подкатегория: Зеленый — Товар: Зеленые вершины 200 гр.

Категория: Кофе —  Подкатегория: Арабика —Товар: Арабика Бали 400 гр.

Меню: Чай / Кофе

Меню уровень 2: Чай зеленый / Чай красный / Чай черный

Меню уровень 2: Кофе арабика / Кофе робуста / Кофе либерика

Не правильно

Категория: Чай — Подкатегория: Зеленый — Товар: Зеленые вершины 200 гр.

Категория: Арабика —Товар: Арабика Бали 400 гр.

Категория: Робуста —Товар: Робуста Уганда 350 гр.

Меню: Чай / Арабика / Робуста

Что значит сайт прост для пользователя?

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

Меню не перегружено пунктами, а если их много, то разделено на небольшие блоки по 5-8 ссылок.

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

Если проводить аналогию с нашим городом. На центральной площади указатель: кузница — налево, рынок  — прямо; внутри рынка уже свои указатели (вещевой ряд, продуктовый ряд, палатка #1, палатка #2 и т.д.).  Все сделано максимально просто, но при этом решается главная задача: быстро найти то, что ищешь.

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

Линейная

Информация представляется в виде цепочки, одна страница плавно перетекает в другую. Пример: книга, которую листает читатель.
К примеру:

• Главная страница
• Услуги
• О нас

Линейно-разветвленная

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

Пример:

• Главная страница
• Услуги
• Создание
• Продвижение

Сложная структура, имеет много уровней. Содержит много разделов и подразделов, разветвлений.

Решето, сеть

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

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