Программа для создания структуры сайта: Attention Required! | Cloudflare

Содержание

Создание структуры сайта — примеры, схемы, советы

Время прочтения: 12 минут

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

Что Вас ждёт впереди…

  1. Что такое структура сайта?
  2. Как создать структуру сайта?
  3. Типичные ошибки при создании структуры сайта?
  4. Заключение

Что такое структура сайта и какую роль она играет

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

Простейшая иерархическая структура сайта

Структура отражается в системе навигации сайта:

  • В меню.
  • В хлебных крошках.
  • В HTML-карте сайта (для людей).
  • В XML-карте сайта (для поисковых роботов).

Благодаря этому посетитель понимает, на какой странице находится, как попасть на другие страницы или вернуться на главную.

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

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

Структура категории «Компьютеры и ноутбуки»

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

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

Поисковики считывают структуру сайта из карты sitemap.xml. Если ее нет, роботы используют HTML-карту сайта или результаты обхода. Структуру сайта глазами «Яндекса» можно увидеть в «Вебмастере» в соответствующем разделе.

Структура сайта в «Вебмастере»

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

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

Как спланировать структуру сайта интернет-магазина

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

Переносим структуру интернет-магазина на бумагу

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

Уделите внимание каталогу. Планируйте его так, чтобы иметь возможность масштабировать. Для этого страницы каталога первого уровня должны быть максимально общими. Хороший пример страницы первого уровня: «Смартфоны и планшеты». Плохой пример: «Планшеты LG».

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

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

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

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

Отражаем страницы второго уровня

Для страниц второго уровня можно указать дочерние страницы. Например, для страницы «Косметика после бритья» дочерними будут страницы «Лосьоны», «Бальзамы», «Кремы».

Отражаем страницы третьего уровня

Обратите внимание, в каталоге можно реализовать параллельные структуры. Например, косметика может классифицироваться по категориям на до, для и после бритья. Одновременно на сайте можно создать категории производителей. Тогда параллельная структура будет выглядеть так: Косметика – Производители – Gillette – Страница товара.

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

Когда структура будет готова, переходите к ее реализации на сайте.

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

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

Создаем дочернюю страницу «Контакты»

На платформе Recommerce структура каталога задается с помощью разделов. В меню «Каталог» нажмите кнопку «Добавить раздел в корень».

Добавляем раздел в корень

Укажите свойства раздела, добавьте фото.

Указываем свойства раздела

На вкладке «Текст» добавьте текст с описанием раздела. На вкладке SEO укажите title, description и ключи. Здесь же можно временно закрыть раздел от индексации и указать URL раздела вручную.

Настраиваем SEO страницы раздела

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

Создаем подразделы

В итоге структура каталога должна быть логичной и удобной для серфинга.

Возможная структура одного из разделов каталога

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

Навигационное меню создается автоматически

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

Дополнительные элементы навигации делают структуру удобной

На платформе Recommerce автоматически создана структура сервисных страниц, например, «Главная», «О магазине», «Оплата», «Доставка». Это экономит время вебмастера и создает дополнительные удобства для покупателей.

Типичные ошибки при создании структуры сайта

Начинающие e-коммерсанты и вебмастера часто допускают типичные ошибки при планировании структуры каталога и сайта в целом. Вот самые яркие примеры:

Отсутствие общих категорий

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

Отсутствие фильтров

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

Отсутствие параллельных структур

Добавление товара в несколько тематических категорий повышает его видимость. Например, крем для бритья фирмы X можно поместить в категории «Товары фирмы X», «Кремы для бритья», «Косметика для бритья» и даже «Идеи подарков».

Незаметное навигационное меню

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

Заключение

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

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

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

Понравилась статья? Поделитесь с друзьями! 

 

Please enable JavaScript to view the comments powered by Disqus.

Создание структуры сайта, пример структуры

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

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

Какие сложности возникают из-за структуры сайта?

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

Самый простой способ спланировать структуру сайта.

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

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

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

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

Наглядный способ создать структуру сайта

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

Важность страниц или статический вес.

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

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

  • На главную страницу ведут ссылки со всех страниц сайта
  • На разделы ведут ссылки его подразделов и страниц
  • На подразделы ссылки его страниц
  • На страницы обычно ведет одна ссылка из раздела/подраздела.

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

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

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

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

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

Проектирование структуры от потребностей

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

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

Пример структуры сайта

Здесь я просто публикую свой рабочий черновик раздела сайта, пример структуры, в которой продумана вложенность и перелинковка (связь) страниц. Такие вещи можно делать в любой программе предназначенной для рисования диаграмм. Например, онлайн-сервис https://www.draw.io/

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

Проектирование структуры сайта и распределение ключевых слов

По просьбам подписчиков выкладываем главу из книги «Хозяин трафика»

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

Под структурой сайта понимается иерархия веб-страниц на сайте.

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

Посмотрим на схему.

Для каждой страницы сайта должен быть определён тип страницы. Например, листинг товаров, карточка товара, список статей и т.п.

Структура сайта отражается на структуре url адресов.

Так главная страница любого сайта доступна по доменному имени. После первого слэша идут страницы второго уровня и т.д.

Структура урл

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

1. При проектировании структуры определяются типы веб-страниц и функционал сайта.
Это позволяет спланировать и заложить в бюджет нужные расширения для сайта.

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

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

Типы сайтов

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

1. Коммерческие
Интернет-магазины, сайты услуг, сайты-визитки, лендинги, коммерческие порталы (агрегаторы), доски объявлений и т. д.

2. Информационные
Блоги, форумы, новостные и информационные порталы.

3. Смешанные
Коммерческие сайты с информационными разделами.

4. Специфические
Сайты, которые продвигаются по информационным запросам, но по факту являются коммерческими. Например, онлайн-школы.

Коммерческие сайты

Типы страниц коммерческих сайтов

Рассмотрим, какие типы страниц характерны для коммерческих сайтов.

1. Листинги (списки) товаров или услуг
Образуют первый или промежуточный уровень веб-страниц.

На листинги назначаются неточные товарные запросы, например, «купить смартфон».

2. Карточки товаров или услуг
Образуют последний уровень вложенности веб-страниц.
На карточки назначаются точные товарные запросы, соответствующие конкретным товарам, например, «купить смартфон huawei honor 7a».

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

4. Навигационные страницы
«Контакты», «Доставка», «Оплата», «О компании» и другие.
На навигационные страницы могут назначаться поисковые запросы.

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

Контент главной коммерческого сайта

Если с контентом для категорий и товаров у коммерческого сайта всё понятно, то с главной страницей не так очевидно.

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

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

Рассмотрим варианты контента для главной.

1. Листинг определённых товаров или услуг
Можем вывести на главной странице определённые группы товаров. Например, товары со скидками, бестселлеры, рекомендуемые и т. д.

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

3. Лендинг определённой услуги
Актуально для сайтов услуг или интернет-магазина с одним ключевым товаром.

4. Листинг товаров + информация о компании
Можно добавить на главную страницу информацию о компании, но лучше для этих целей делать отдельную страницу.

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

Запросы на главную коммерческого сайта

Рассмотрим какие запросы нужно использовать на главной странице коммерческого сайта.

1. Витальные запросы (названия брендов, сайтов, компаний)
Поисковые системы отдают предпочтения для главных страниц витальным запросам — когда пользователи вводят название бренда в чистом виде.
Например, «joomla», «apple», «ozon»

2. Коммерческие транзакционные (товарные) запросы
Например, «товары для авто», «ортопедическая обувь», «создание сайтов».
Рекомендуем делать так, если ваш сайт продаёт только «товары для авто», только «ортопедическую обувь»или занимается только «созданием сайтов».

3. Запросы с типом сайта, бизнеса, организации
Например, если сайт ортопедического магазина, то на главную можно назначить запрос «ортопедический магазин», если сайт салона красоты, то «салон красоты» и т. д.

Информационные сайты

Типы страниц информационных сайтов

Для информационных сайтов самыми популярными являются два типа страниц.

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

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

Контент главной информационного сайта

На главной странице информационного сайта может размещаться следующая информация.

  • Листинг статей
  • Листинг рубрик
  • Информация о сайте
  • Статья
  • Комбинации (листинг статей + листинг рубрик + информация о сайте)

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

Запросы на главную информационного сайта

Рассмотрим, какие поисковые запросы стоит назначать на главную страницу информационного сайта.

1. Самый высокочастотный запрос и его вариации

Размещение вч запроса на главной актуально в том случае если сайт узкой направленности.

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

2. Запросы с типом сайта по тематике
Если сайт определённой тематики, например, медицинской, юридической, то на главную можно назначить ключевые слова «медицинский портал», «юридический портал» и т. п.

Создаем структуру сайта

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

Визуальная структура

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

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

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

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

Функциональная структура сайта

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

Советы по созданию структуры в Keycollector:

1. Создайте новую группу — структура

2. Создайте подгруппы, соответствующие разделам сайта

3. Скопируйте запросы в соответствующие разделы

Что делать, если у сайта уже есть структура?

Сейчас мы рассматривали создание структуры для будущего сайта, который ещё не создан.

Что же делать, если сайт уже создан и работает?

В этом случае нужно будет проводить корректировку с помощью редиректов.

План внедрения новой структуры на существующий сайт

1. Проектируем визуальную схему существующего сайта в XMind.
2. В новом листе программы проектируем схему сайта в соответствии с семантическим ядром.
3. Выявляем и исправляем несоответствия на существующем сайте с помощью редиректов
4. Строим структуру в Key collector, основываясь на новой визуальной схеме.

Итог

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

2. Неточные товарные запросы (например, «купить смартфон»), как правило, назначаются на страницы категорий (листинги).

3. Товарные запросы, соответствующие определённому товару, назначаются на страницу карточки товара.

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

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

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

7. Если сайта нет, необходимо создать «пустой» сайт в соответствии со структурой (с навигационными веб-страницами и определённым функционалом).

8. Если сайт уже существует, то при необходимости дорабатываем (исправляем или дополняем) сайт в соответствии со структурой.

 

Это всего-лишь 10 страниц книги. Полную версию книги можно купить по ссылке. 

Комментарии для сайта Cackle

Как создать структуру сайта с учетом требований SEO? SILO структура сайта

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

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

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

Как создать структуру сайта с учетом требований 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 такие проверки можно проводить бесплатно.

Ссылка на сервис — MegaIndex Аудит.

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

Остались ли у вас вопросы, мнения, комментарии по теме создания структуры сайта?

Проектирование структуры сайта | Веб-программирование

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

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

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

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

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

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

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

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

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

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

Иерархия

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

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

«Паутина»

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

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

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

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

Практические соображения

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

Приведем концептуальный пример гибридной структуры сайта, не только удобной и понятной для пользователя, но и, как показывает личный опыт, позволяющей только на одной внутренней перелинковке поднять PR главной страницы до 3-4, а страниц разделов — до 1-2 (рис. 5).

Рис. 5. Комбинированная структура сайта, учитывающая передачу «веса» страниц
(цветом выделены исходящие связи).

Некоторые пояснения к рис. 5:

  • На всех страницах имеется ссылка на стартовую страницу (т.н. «сквозная ссылка»).
  • Страницы нижнего уровня ссылаются на страницу раздела и, линейно, на соседние тематические страницы.
  • Страницы разделов связаны между собой и ссылаются на тематические страницы нижележащего уровня.
  • Исходящие ссылки с главной страницы ведут на разделы и, возможно, на целевые страницы.

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

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

Вместо заключения

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

Рис. 6. Сравнение основных структур

Анатольев А.Г., 03.11.2015

Постоянный адрес этой страницы:

Создание структуры сайта

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

Структура – это категории и подкатегории магазина, по которым распределены товары. Их видно в меню:

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

Как быстро создать структуру магазина

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

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

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

Примеры создания структуры

Магазин одежды

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

Согласитесь, найти что-то в такой структуре очень сложно. Чтобы выбрать джинсы нужно зайти в каждую подкатегорию и изучить её ассортимент.

Для магазина одежды подойдёт эта структура:

Её же мы можем увидеть у популярных магазинов одежды:

Зоотовары

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

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

Намного лучше такая структура:

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

Мебельный

Иногда в мебельных магазинах (особенно с собственным производством) товары распределены по коллекциям. Например:

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

Именно так устроены популярные интернет-магазины, продающие мебель своего производства:

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

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

Видео-урок: создание структруры каталога товаров

Заказать прототипирование сайта в Москве, цены в web-студии Умный Кит

Разработка структуры сайта

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

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

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

Разработка прототипа сайта

Наилучшая конверсия достигается в формате «одна страница – одна цель». Общая архитектура сайта формируется как система достижения всех целей бизнеса в рамках логично организованной структуры разделов и страниц.

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

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

Цена на прототипирование сайта определяется масштабностью и срочностью работы.

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

  • Графические приложения. PhotoShop. Можно создавать прототипы методом перетаскивания элементов. Поддерживается многостраничная структура документа. К недостаткам относятся ограниченная интерактивность, сложность освоения.
  • Визуальные редакторы. Dreamweaver. Хорошая поддержка интерактивности. Возможность работать над большими сайтами. Доступность кода для ручного редактирования.
  • Онлайн-сервисы. iPlotz. Плюс – удобство удаленного доступа и командной работы над проектом.

Расширенные возможности для разработки прототипов профессионального уровня представлены в программе Axure RP Pro.

  • Полностью кликабельные прототипы.
  • Импорт во множество форматов файлов.
  • Поддержка мастер-страниц.
  • Структурирование сайта в отдельном окне.
  • Задание множества свойств и функций элементам сайта.

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

Как спланировать структуру веб-сайта — FlowMapp

Инструменты исследования UX и SEO при разработке структуры веб-сайта. Подробный обзор инструментов для создания структуры сайта можно найти в нашей новой статье.

Содержание:

  • Что такое структура веб-сайта?
  • С чего начать?
  • Анализ конкурентов
  • Определение целевой аудитории
  • Семантическое ядро ​​и кластеризация
  • Разработка контента
  • Потоки пользователей
  • Формирование соответствующей структуры веб-сайта
  • Заключение

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

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

С чего начать?

Планирование структуры сайта — очень трудоемкий процесс.Для наиболее интуитивного отображения структуры используется инструмент «Визуальная карта сайта». Визуальный файл Sitemap — это иерархическая диаграмма, отражающая фактическую структуру вашего веб-сайта. Основная причина популярности этого инструмента — полное понимание структуры, которую он дает UX-дизайнеру. Схема карты сайта в начале разработки позволяет вам «взглянуть сверху» на ваш проект, оценить его масштаб и исправить ошибки. На данный момент Visual Sitemap — самый удобный способ разработать структуру веб-сайта.Следует помнить, что преимущества логической структуры сайта влияют не только на UX, но и на идентификацию сайта алгоритмами поисковых систем, что напрямую влияет на рейтинг сайта в поисковой системе. К сожалению, высокий рейтинг в поисковой системе не панацея для вашего бизнеса, и если вы хотите создать успешный интернет-проект, вам следует начать с самых фундаментальных вопросов. Ваш бизнес — это не просто «релевантный запрос» в поисковой системе, но, прежде всего, продукт, который ищет потенциальный клиент.Вам следует начать с определения основной цели вашего бизнеса. Эти знания в дальнейшем помогут вам определить цели при планировании развития вашего веб-сайта.

Анализ конкурентов

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

Определение целевой аудитории

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

Семантическое ядро ​​и кластеризация

Современный рынок диктует правила формирования правильной структуры сайта для каждого интернет-бизнеса.Следовательно, всегда есть потребность в будущей поисковой оптимизации. Анализ конкурентов и целевой аудитории — это только часть подготовительной работы. Следующим шагом является разработка семантического ядра и его кластеризация. Семантическое ядро ​​- это набор поисковых запросов на основе ключевых фраз, которые пользователи используют в Интернете при поиске продукта или услуги, аналогичных вашим. Семантический кластер — это многоуровневая структура, состоящая из группы поисковых запросов, объединенных по смыслу. Например, рассмотрим содержание данной статьи в формате семантического кластера.В этом случае семантический кластер первого порядка будет «Как спланировать структуру сайта». Внутри кластера первого порядка находятся кластеры второго порядка: «Что такое структура сайта?» И так далее. Также существуют кластеры третьего порядка, но в большинстве случаев достаточно выделить только бизнес-ориентированные кластеры второго порядка. Например, кластер второго заказа для запроса «iPhone» будет транзакционным (низкочастотным) запросом «Купить iPhone XS Max».После проработки семантического ядра и его кластеров вы сможете обрабатывать и структурировать запросы вашей целевой аудитории, чтобы разработать контент-план и уточнить структуру вашего сайта.

Разработка контента

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

Пользовательские потоки

Проектирование пользовательских потоков — одна из задач, о которой необходимо позаботиться заранее.В настоящее время сложно представить, что главная страница является единственной точкой входа на ваш сайт. Инструмент проектирования User Flow позволяет учитывать различные точки входа на веб-сайт, выделяя очевидные недостатки, с которыми может столкнуться пользователь. Важно реализовать диаграмму взаимодействия с пользователем, чтобы оценить взаимодействие с пользователем. Полученные данные следует использовать при оптимизации структуры вашего сайта. Также важно сделать одинаково удобную навигацию для пользователей, которые заходят на ваш сайт из разных точек входа.На основе анализа диаграммы пользовательского потока следует оптимизировать контент и внести соответствующие изменения в структуру сайта. Чтобы узнать больше о цели и опыте использования диаграмм пользовательского взаимодействия, прочитайте статью в нашем блоге.

Формирование соответствующей структуры веб-сайта

После того, как вы завершили все подготовительные работы, вы, наконец, можете приступить к построению структуры вашего веб-сайта. Самая популярная форма — создание «Визуальной карты сайта». Визуальный файл Sitemap помогает четко и точно определить иерархию веб-страниц.На основе полученных данных вы можете приступить к разработке диаграммы «Визуальная карта сайта». Как правило, иерархия «Визуальной карты сайта» следующая: ссылки со всех страниц сайта ведут на «Главную страницу», ссылки «Подразделов» ведут на «Разделы», а ссылки страниц веб-сайта ведут на «Главную страницу». «Подразделы». При формировании структуры веб-сайта важно помнить, что иерархия страниц определяется «весом» (или «важностью») ссылок. Статистически вес ссылок является ключевым параметром, определяющим приоритет сайта в глобальном Интернете.Чем больше ссылок на конкретный сайт, тем он популярнее. Тот же принцип работает на конкретном сайте. Чем больше ссылок ведет на определенную страницу на веб-сайте, тем она важнее по сравнению с другими страницами. Вы должны контролировать вес ссылок на своем сайте, тем самым определяя их приоритет. Рассмотрим пример управления весом ссылок. Веб-сайт, посвященный продаже смартфонов, может содержать огромное количество информации о новом iPhone XS Max, но при правильном распределении веса ссылок страница, на которой можно купить этот iPhone, будет иметь приоритет в результатах поиска.Если вес ссылок распределяется неправильно, запрос пользователя «Купить iPhone XS Max» не приведет к странице, где можно купить смартфон. Еще одно правило, которое следует учитывать при планировании структуры вашего веб-сайта, — контролировать «глубину просмотра». Создайте структуру так, чтобы глубина вашего сайта не превышала трех-четырех кликов. Это обеспечивает простую навигацию пользователя, обеспечивая четкую и понятную навигацию из любой точки входа без проблем. Соответствующая структура сайта собирает трафик и обеспечивает видимость для поисковой системы.

Заключение

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

22 потрясающих инструмента информационной архитектуры (IA) для создания визуальных файлов Sitemap

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

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

Этот визуальный генератор карты сайта — это больше, чем просто это — вы можете создавать, настраивать, редактировать и публиковать свои интерактивные карты сайта, но вы также сможете позаботиться об инвентаризации контента, аудите контента и отслеживании ключевых слов. Интегрированный с Google Analytics, отображайте и делитесь всеми наиболее важными данными, связанными с вашим веб-сайтом.Сотрудничество стало проще, а тестирование доступности веб-сайта гарантирует, что ваш веб-сайт соответствует стандартам, которые делают его доступным для всех. DYNO Mapper позволяет создавать и отображать карту сайта всего несколькими щелчками мыши. Некоторые известные пользователи DYNO Mapper включают LegalZoom и Adobe. Они воспользовались возможностью создавать, настраивать и публиковать свои собственные интерактивные карты сайта, созданные с нуля. Это один из самых простых инструментов для создания карты сайта из URL-адреса, XML-файла или даже существующей карты сайта.

Создавайте красивую графику с помощью этой простой в использовании программы, обладающей мощностью, необходимой для создания потрясающей карты сайта. Он работает только с Mac, и команда, стоящая за ним, полностью поддерживает все, что он может предложить. Стандартную версию можно приобрести за 99,99 долларов, а за версию Pro — 199,99 долларов. Хотя все основы доступны в стандартной версии, слои монтажной области, преобразование линий в фигуры и преобразование текста в фигуры доступны в версии Pro.Стандартная версия предоставит вам инструменты линии, формы, текста и пера, а также более продвинутые параметры, такие как точное геометрическое позиционирование и автоматический макет. Также воспользуйтесь преимуществами текстовых объектов, позиционирования и выравнивания, шаблонов по умолчанию, интеллектуальных направляющих, ручных направляющих, привязки положения и даже направляющих линейки расстояния. Унифицированная боковая панель позволяет быстро приступить к делу со всеми организационными инструментами, необходимыми для создания образцовой карты сайта. Получите бесплатную 14-дневную пробную версию при загрузке программы.Благодаря этому вы можете делиться макетами через сообщения с другом или членом команды, или вы можете экспортировать любые готовые активы для проекта в предпочтительном формате. Приступить к работе довольно легко, но когда вы готовы по-настоящему погрузиться, в нем будет много энергии.

Это больше, чем просто инструмент для картографирования сайтов. Вы сможете составить карту, протестировать и проанализировать свой сайт, когда он будет готов. PowerMapper может похвастаться использованием в более чем 50 разных странах некоторыми из самых известных организаций, такими как IBM, NASA, Bank of America и Boeing.Используйте потрясающую графику для создания карты сайта путем обратного проектирования существующих веб-сайтов. Он будет сканировать все страницы веб-сайта и фиксировать такие вещи, как эскизы и метаданные для каждой страницы, а затем рисовать их на карте. При создании карты сайта каждая страница будет отображаться в виде блока, поскольку более высокие блоки представляют собой страницу, ближайшую к домашней странице. Он отлично подходит для определения структуры веб-сайта, чтобы увидеть, где находится большая часть контента на веб-сайте. Вы также можете просматривать карту сайта в иерархическом или изометрическом виде.С помощью SortSite вы можете проверить карту сайта на наличие неработающих ссылок, совместимости с браузерами, орфографических ошибок, доступности, проблем с поисковой системой и даже проверки веб-стандартов. Воспользуйтесь бесплатной пробной версией или приобретите программу, знайте, что ее используют информационные архитекторы, веб-разработчики и аналитики по удобству использования по всему миру, а также около 30% компаний из списка Fortune 500. Используйте в Windows или Mac для создания собственных карт сайта. Он настолько прост в использовании — все, что вам нужно сделать, это использовать встроенный веб-браузер для перехода на свой веб-сайт, а затем просто щелкнуть «Карта».Он поможет создать вашу карту сайта за очень короткое время.

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

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

Smartdraw, который иногда называют более доступной альтернативой Visio, может похвастаться бесплатной поддержкой тысяч различных шаблонов. Это мощная программа, в которую встроены примеры, а также инструменты рисования, помогающие создавать сложные диаграммы. Шаблоны, включенные в программу, позволяют создавать более 70 различных видов диаграмм, диаграмм и других видов визуальных эффектов. В дополнение к этому вы сможете увидеть тысячи примеров, которые можно отредактировать, и вы сможете создать свои собственные.Лучшие бренды, доверяющие Smartdraw, включают Nestle, FedEx, Tesla, GM, Mayo Clinic и Kraft. Однако вам не обязательно быть крупным брендом, чтобы использовать эту программу — любой может создавать диаграммы и диаграммы на профессиональном уровне всего за несколько щелчков мышью. Создавайте диаграммы, вставляя фигуры и перемещая их по странице так, чтобы они идеально выровнялись. Создайте свою собственную тему или выберите из готового шаблона, но в любом случае вы создадите карту сайта в мгновение ока.

7.Кусок бумаги и карандаш

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

8. Интерактивные доски

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

Вот несколько примеров интерактивных досок:
Thinkature
GEs Imagination Cubed

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

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

Когда вы собираете свою информационную архитектуру вместе с картой сайта, вы можете столкнуться с проблемой поиска терминов, которые вам нужно будет включить, или того, какие термины объединяются или сочетаются с другими терминами, рассмотрите этот инструмент. Он используется в основном маркетологами поисковых систем для поиска связанных терминов для размещения рекламы через Adwords. Это отличный бесплатный инструмент, помогающий информационным архитекторам делать выводы о вариантах или подмножествах элементов контента через основные элементы.Вы также найдете «дополнительные ключевые слова для рассмотрения», которые отсортированы по релевантности, что позволяет вам быстро создавать связанные концепции контента, когда вам это необходимо. При использовании инструмента подсказки Adwords убедитесь, что вы оставляете флажок «Использовать синонимы» установленным (он будет по умолчанию), позволяя инструменту учитывать варианты введенных терминов.

12. Посмотрите на результаты собственного поиска

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

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

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

Treejack использует технику древовидного тестирования для определения возможности поиска тем на веб-сайте.Это также называется классификацией на основе карт или обратной сортировкой по картам. Это делается с помощью упрощенной версии веб-сайта, которая содержит только текст, что исключает внешнее влияние со стороны визуального дизайна или средств навигации. Было сказано, что Treejack — это место, где можно найти самые красивые, исчерпывающие и содержательные результаты тестов деревьев. Вы сможете посмотреть на каждую задачу, которую выполнил участник, если они нашли правильный ответ, и пришли ли они туда напрямую, и сколько времени потребовалось, чтобы это сделать.Программа была разработана людьми с многолетним опытом исследования пользовательского опыта, что делает ее быстрым и простым методом удаленной сортировки карт. Некоторые из крупнейших мировых компаний используют Treejack, в том числе Google, National Geographic и BBC, и используется более чем в 106 странах на более чем 30 различных языках.

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

Произведено Microsoft, в этом дополнении вы найдете более 300 значков, которые помогут в создании визуальных представлений в любом из продуктов Microsoft, включая Office, Office 360, Skype для бизнеса, Exchange Server, Skype для бизнеса Server, Lync Server и SharePoint Server.Для использования доступны наборы символов 2012, 2014 и 2016 годов. Если вы обнаружите, что вам нужно больше фигур, чем содержащихся в Visio, есть несколько вариантов. Вы можете выбрать на своем компьютере поиск любых фигур, установленных через Visio, или вы сможете искать фигуры в Интернете.

Это отличный ресурс для тех, кто знаком с общепринятыми методами информационной архитектуры. Трафареты, предоставленные на этом веб-сайте, можно использовать бесплатно, но их просят не перепродавать.Трафареты предназначены для использования с Microsoft Office Visio 2003 или более поздней версии. Существуют трафареты каркаса, трафареты карты сайта и трафареты процесса. Наборы элементов каркаса состоят из блоков, которые будут представлять места размещения изображений, а также такие функции навигации, как панели навигации. Некоторые каркасы — это всего лишь шаблоны, которые показывают, как части веб-сайта будут включены в страницу. Наборы элементов карты сайта состоят из блоков, которые представляют страницы, а линии, соединяющие блоки, представляют иерархию сайта.Имеются трафареты со стрелками для одностороннего или двустороннего доступа между страницами. Шаблоны последовательности операций — это в основном блок-схемы, которые объясняют и определяют процесс на веб-сайте или в другой системе. В этих трафаретах вы найдете облака, цилиндры, ромбы или коробки. Все они бесплатны, и есть ссылки на другие шаблоны и трафареты, рекомендованные этим создателем.

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

Это можно назвать идеальным набором инструментов для всех проектов взаимодействия с пользователем. Ценник зависит от того, что именно вам нужно, но ресурсов очень много. Используя UI8, у вас будет несложный способ показать основной поток и особенности проекта, прежде чем вы попадете в сложный процесс создания каркаса.UI8 — отличное место для начала. Существует около 250 шаблонов, более 500 элементов, он был тщательно разработан, полностью масштабируем и основан на векторах, и он совместим со Sketch 3+, а также Adobe CS6 +. Существуют комплекты пользовательского интерфейса, комплекты каркасов, предварительно созданные темы, отдельные значки, шрифты, звуки, возможности создания эскизов и даже некоторые бесплатные услуги для тех, кто еще не присоединился к программе. Самое замечательное в использовании одной из готовых тем заключается в том, что вы сможете больше сосредоточиться на создании, а также на соблюдении важных сроков.Ultimate Pass продается по цене 500 долларов и предлагает широкий выбор лучших из лучших с веб-сайта.

Одним из преимуществ InfoTech является управляемое внедрение. Это одна из самых уникальных концепций создания информационной архитектуры. Талантливый аналитик из команды будет проводить время с вами по телефону, чтобы обучать и помогать вам на любом этапе проекта. Этот аналитик — это тот, кто написал исследование и может предоставить ценную информацию о ключевых этапах или любой другой части проекта.Исследования показывают, что каждый раз, когда используется управляемое внедрение, это позволяет сэкономить 14 дней ИТ-ресурсов и колоссальные 22 517 долларов США. Благодаря семинарам на месте ваши проекты будут ускорены, и вы сможете разработать или улучшить свою ИТ-стратегию. Не только это, но и семинар, у вас будет возможность завершить 90% любого проекта за 5 очень напряженных дней. Для этих семинаров существует фиксированная ставка, поэтому вы знаете, что получите именно то, за что заплатили. Эти интенсивные совместные занятия помогут развить и обучить вашу команду и поставят вас в один ряд с предыдущими клиентами семинара, которые оценили семинары на 9 баллов.8/10. Консультации с InfoTech предоставят вам доступ к обширной проектной ИТ-библиотеке исследований, охватывающей более 400 тематических областей, и диагностическим инструментам, основанным на данных. Консультационные услуги объединяют идеи более 30 000 членов с талантами и стратегиями, одобренными консалтинговым персоналом. InfoTech не бросает своих клиентов в середине проекта, они следят за проектами, постоянно консультируют, имеют стандартные точки соприкосновения — по сути, клиенты всегда находятся в центре внимания компании.Если вы еще не уверены в совершении фиксации, запросите демонстрацию и посмотрите, о чем идет речь.

Это веб-приложение интегрируется с Microsoft Office и продается как система для управления и хранения документов, но оно довольно гибкое и может использоваться для различных целей. Версия Microsoft SharePoint Standard включает в себя несколько очень важных функций. Раздел «Сайты» охватывает таргетинг на аудиторию, безопасное хранение, инструменты управления и функции веб-аналитики.Раздел «Сообщества» включает в себя раздел «Личные сайты», теги и заметки, браузер иерархии организации и корпоративные вики-страницы. Раздел «Контент» работает над улучшением соответствия записей и документов, управления контентом, служб автоматизации слов и управляемых метаданных. В Composites вы найдете готовые шаблоны рабочих процессов, а также страницы профиля BCS.

Всего

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

Основатель DYNO Mapper и представитель консультативного комитета W3C.


Назад

Как спланировать структуру веб-сайта для SEO

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

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

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

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

Что включить в план структуры вашего сайта

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

Но для тех, кто раньше не планировал структуру веб-сайтов для SEO, вот что вам нужно охватить:

  • Анализ ключевых слов
  • Прогнозируемое поведение потока
  • Карта сайта

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

Анализ ключевых слов и целевые страницы

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

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

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

Возьмем пример.

  • Страница — Основное ключевое слово
  • На главную — «Доставка цветов в Канзас-Сити»
  • Тюльпаны — «купить тюльпаны канзас-сити»
  • Контакт — «Часы работы мэйн-стрит цветы»

Это, наверное, неудивительно, ведь вы все равно создали бы дизайн всех этих страниц.

Но не думали ли вы о добавлении конкретной страницы для ключевого слова «доставка цветов в Канзас-Сити в тот же день»?

Вероятно, нет, и у него есть объем поиска, и он, вероятно, принесет вам тот вид трафика, который вы готовы купить.

Поиск на Moz.com количества ключевых слов и предложений

Прогнозируемое поведение потока

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

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

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

Кроме того, наиболее заметные ссылки на вашей домашней странице будут рассматриваться алгоритмами поисковых систем как важные. «Сок SEO» с вашей домашней страницы будет течь на другие страницы вашего сайта, тем тоньше и тоньше потоки, чем дальше они находятся. И Google действительно заботится о структуре сайта.

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

Визуализировать карту сайта

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

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

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

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


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

Следующий шаг: веб-дизайн

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

Объединив идентификацию бренда и целевой клиентской персоны с планом для структуры веб-сайта , вы гарантируете, что проект веб-сайта настроен так, чтобы было найдено, и оценено посетителями.

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

Рекомендуемая литература

Взгляд Йоаста на структуру веб-сайта
Лучшая структура сайта в 2019 году согласно Google
Нил Патель о структурах веб-сайтов (старое, но хорошее)

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

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

Какова структура сайта?

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

Почему структура сайта важна для дизайнеров?

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

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

Как выбрать лучшую структуру для вашего сайта

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

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

Элементы хорошей структуры сайта (плюс наглядные примеры)

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

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

Давайте посмотрим на каждый из этих элементов и на то, как вы можете оптимизировать их в процессе разработки:

Домашняя страница

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

Вот как разработать полезную навигацию / меню для вашего веб-сайта:

Навигация / меню

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

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

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

Основная навигация / меню (Источник)

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

Вторичное вертикальное меню (Источник)

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

Категории и подкатегории

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

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

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

Категории и подкатегории (Источник)

Отдельные страницы / сообщения

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

Следы из хлебных крошек

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

Тропа из хлебных крошек (Источник)
Теги

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

Например, в блоге Grammarly используются такие теги, как «как сделать», «продукт» и «вдохновение» для группировки контента блога.

Теги блога (Источник)

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

Связанные теги (Источник)

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

Вот лучшие практики для создания тегов:

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

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

Контекстные ссылки (источник)

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

Простое включение структуры веб-сайта в ваш дизайн

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

Как спроектировать структуру веб-сайта с помощью Sitemapping

На мгновение представьте, что вы строитель дома.

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

(Если вы сказали «да», пожалуйста, продолжайте свою повседневную работу!)

Подобно тому, как планы этажей передают структуру дома , карта сайта передает структуру веб-сайта .

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

Что такое карта сайта и зачем она нужна?

Sitemapping — это визуальный процесс описания структуры веб-сайта, высокоуровневой функциональности и схемы навигации. Конечный результат может быть эскизом, изображением, PDF-файлом или представлен в таком инструменте, как SlickPlan (мой полный список инструментов для создания карт сайта внизу).

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

Пример карты сайта ProtoFuse.com. Цвета используются для представления различных уровней навигации (например, синий = основная навигация).

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

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

Карта сайта веб-сайта является продуктом информационной архитектуры

Как спланировать и создать структуру веб-сайта с помощью карты сайта

Вот обзор:

  1. Подготовка к деятельности по составлению карты сайта
  2. Проведите мозговой штурм по типам контента
  3. Определить основную навигацию
  4. Детализировать структуру и содержание второго и третьего уровней
  5. Не забывайте про служебные страницы
  6. Создание примечаний и общих спецификаций для каждой страницы
  7. Обозначьте тип оформления шаблона
  8. Итерировать.Итерировать. Итерировать.

Теперь давайте разберем каждый шаг.

Шаг №1 — Подготовка к работе по созданию карты сайта

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

  1. Время — Надежная карта сайта не создается за 20 минут. Есть ли у вашей организации необходимое время для совместной работы?
  2. Люди — Ключевые заинтересованные стороны должны внести свой вклад в разработку карты сайта.Кто эти люди? Правильные ли они люди?
  3. Исследование — Каковы цели веб-сайта? Кто наши пользователи? Какая информация им нужна? Что нам говорит наша аналитика?

ПОЛЕЗНЫЙ СОВЕТ: Не думайте, что маркетинг и продажи знают все — задействуйте различные отделы. Разнообразие знаний о компаниях, отраслях, услугах и продуктах будет полезно.

Возможно, вам понравится это видео

Основатель Slickplan — Видеоинтервью с Яном Лоусоном

Мы взяли интервью у Яна Лоусона, основателя и менеджера по продукту Slickplan, суперинтуитивно понятного инструмента для создания карт сайта для планирования веб-сайтов.

Шаг №2. Проведите мозговой штурм по типам контента

Прежде чем вы начнете определять элементы навигации (шаг 3), вам нужно обсудить содержание вашего веб-сайта. Какие услуги / продукты мы продаем? Сколько информации о компании будет представлено? У нас есть отзывы? Какие полезные ресурсы мы можем предоставить?

Пока не сосредотачивайтесь на том, где этот контент находится в карте сайта (шаг №4). Дайте себе свободу мыслить открыто — даже безумно! Плохие идеи контента со временем, естественно, утихнут.

ПОЛЕЗНЫЙ СОВЕТ: Следуйте правилу содержания 80/20 (80% ценного контента / 20% продвижения)

Шаг № 3 — Определите первичную навигацию

Первичная навигация SafePlumbing.org включает 8 кратких элементов от одного до четырех слов.

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

Основная навигация вашей карты сайта должна…

  1. Будьте краткими — каждый элемент должен нацеливаться на 1–5 слов («О нас», «Свяжитесь с нами»), а не на полные предложения
  2. Используйте общий язык — избегайте именования навигации, которая имеет только внутренний смысл. Используйте принцип KISS (Keep It Simple Stupid)
  3. Связь с иерархией сверху вниз — может ли кто-нибудь легко просмотреть или найти информацию?
  4. Разрешите сайту расти — не нужно настраивать основную навигацию каждый раз, когда вы добавляете новый контент или функции

ПОЛЕЗНЫЙ СОВЕТ: Нет никакого волшебного числа, определяющего, сколько элементов находится в вашей основной навигации.Несмотря на то, что 7 или менее элементов — это миф UX, все же важно практиковать краткость. Если в дизайне карты вашего сайта содержится более 10 элементов, возможно, есть возможность их объединить.

Шаг №4 — Детализировать структуру и содержание второго / третьего уровней

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

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

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

ПОЛЕЗНЫЙ СОВЕТ: По мере того, как вы заполняете страницу за страницей, ваша всеобъемлющая основная навигационная система будет подвергаться проверке.Не бойтесь вносить изменения, когда становится видна структура вашего веб-сайта.

Мы улучшим ваш сайт за 48 часов всего за 499 долларов

Поместите свой веб-сайт под микроскоп и получите 10 действенных способов сделать его лучше. Включает:

✔ 60-минутная виртуальная встреча
✔ Подробный PDF-документ
✔ Записанное видео с YouTube

Дополнительная информация

Стоит каждой копейки!

Ферит Р. Пиннер Тест

Шаг №5 — Не забывайте о служебных страницах

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

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

Сказал, что никто никогда не говорил

ПОЛЕЗНЫЙ СОВЕТ: Обратитесь в юридический отдел раньше, чем позже.

Шаг № 6 — Создание примечаний и общих спецификаций для каждой страницы

«У нас просто будет базовое содержание для этой страницы.”

Нет. НЕТ!

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

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

ПОЛЕЗНЫЙ СОВЕТ: Если вам нужна хорошая отправная точка, начните с подсчета слов. Коротко и сладко (менее 100 слов) или насыщенно и душевно (более 500 слов)?

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

Шаг № 7 — Назначьте тип шаблона дизайна

Указание типа дизайна страницы подогревает движок для дизайна UI (пользовательского интерфейса)

Является ли эта страница фотогалереей? Форма преобразования? Оглавление? PDF?

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

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

ПОЛЕЗНЫЙ СОВЕТ: Обозначьте шаблон каждой страницы. Если вы еще этого не знаете, назовите это «TBD» и сгладьте по мере повторения.

Заключительный шаг — итерация.Итерировать. Итерировать.

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

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

Мне нравится создавать новые версии для разных дней мозгового штурма. Новый день = новая версия.

ПОЛЕЗНЫЙ СОВЕТ: Перед созданием прототипа или макета сделайте снимок со структурой вашего веб-сайта с точностью ~ 85%.

Инструменты сопоставления сайтов

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

Вот почему мы перестали использовать MindManager Mindjet, никогда не рекомендовали бы раздутое программное обеспечение, такое как Illustrator, и влюбились в SlickPlan (попробуйте 30-дневную бесплатную пробную версию Slickplan).

Другие инструменты карты сайта, которые помогут вам спланировать структуру веб-сайта:

Помните, активность превышает инструмент

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

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

Какие шаги и инструменты отображения сайта вы используете для разработки структуры веб-сайта? Я хотел бы услышать это в комментариях ниже!

Возможно вам понравится

Как улучшить ваш сайт 12 практических способов

Ищете простые и действенные советы по улучшению вашего сайта? Эти 12 практических способов подробно описывают не только типичный общий совет, который вы слышите.

Как создать оптимизированную для SEO структуру сайта

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

Вам нужно агентство, чтобы отточить SEO и привлечь квалифицированный трафик на ваш сайт? Мы повысили рейтинг наших клиентов на 255 000 страниц в Google.Получите экспертные услуги SEO прямо сейчас с WebFX! Свяжитесь с нами онлайн или позвоните нам сегодня по телефону 888-601-5359 .

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

Какова структура сайта?

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

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

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

6 шагов к SEO-оптимизированной структуре сайта

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

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

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

1. Установите иерархию своего сайта

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

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

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

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

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

2. Организуйте соответствующую структуру URL-адресов
Структура URL-адреса

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

Например, URL-адрес «https://deliciouspiesforever.com/folder1/588920» не так полезен, как «https://deliciouspiesforever.com/blog/summer-pies».

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

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

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

3. Выберите правильную глубину навигации

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

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

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

4.Включите «панировочные сухари»

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

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

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

5. Установите верхний и нижний колонтитулы

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

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

Текстовые ссылки работают хорошо, потому что боты поисковых систем могут их понять.Хотя изображения имеют текст ALT, текстовые ссылки по-прежнему дают лучшие результаты, когда дело доходит до SEO — это также относится к верхним и нижним колонтитулам.

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

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

6. Выполните внутреннюю привязку

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

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

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

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

Создание оптимизированной для SEO структуры веб-сайта с помощью WebFX

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

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

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

Наша команда из 200 экспертов по SEO за последние пять лет обеспечила продаж на сумму более 1,5 миллиарда долларов и более 4,6 миллиона потенциальных клиентов.

Готовы ли вы резко ускорить свою кампанию с помощью профессиональных услуг SEO? Свяжитесь с нами онлайн или позвоните нам сегодня по телефону 888-601-5359 , чтобы начать работу.

Как построить свой фундамент для SEO

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

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

В этой статье вы узнаете, как спланировать и создать отличную структуру сайта за пять шагов:

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

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

Почему структура веб-сайта имеет значение

Мы все знаем, насколько взаимосвязаны маркетинговые действия по каналам. То же самое и со структурой веб-сайта; это столько же SEO, сколько и UX.

Пользовательский опыт (UX)

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

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

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

Внутренние ссылки

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

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

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

Дополнительные ссылки

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

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

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

Рекомендуемая литература: Что такое дополнительные ссылки? Как повлиять на них

Эффективность сканирования

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

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

Планирование контента и каркасные модели

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

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

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

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

Расширение вашего веб-сайта

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

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

Как создать прочную структуру веб-сайта

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

  1. Насколько велик и будет ваш веб-сайт
  2. Готовы ли вы к исследованию ключевых слов

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

Итак, что для этого нужно? Давайте погрузимся в это.

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

1 Подготовьтесь к визуальному отображению всего

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

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

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

2. Проверьте, как структурированы веб-сайты ваших конкурентов.

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

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

Вдохновляйтесь структурой наиболее эффективных разделов.Возьмите их URL-адреса и повторите процесс, изучив их более глубокую структуру с помощью отчета Top subfolders . Просто убедитесь, что вы установили опцию «префикс» в адресной строке, чтобы выбранная вами страница верхнего уровня считалась начальной.

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

3. Создайте логический план на основе ваших существующих страниц

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

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

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

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

. Это позволит отсеять все ваши изображения, файлы JavaScript и другие типы URL, которые не нужно проверять здесь.

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

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

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

После сканирования веб-сайта откройте проводник Page и примените следующий фильтр поверх ранее использованного сегмента.

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

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

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

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

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

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

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

Распределите ключевые слова по категориям для создания иерархии контента

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

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

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

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

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

Определите основные ключевые слова для ваших страниц верхнего уровня

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

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

Позвольте мне объяснить.

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

В результате мы остаемся с «кастрюлями и сковородками», которые имеют конкретное назначение поиска и даже приводят к вдвое большему количеству кликов, чем только «сковородки» в США.

Возвращаясь к классификации ключевых слов…

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

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

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

Расширьте страницы верхнего уровня на необходимые более глубокие уровни

Ваши страницы верхнего уровня будут попадать в следующие категории:

  • Автономная страница , которая не требует последующих страниц на более глубоких уровнях (например,g., решения, инструменты, цены, контакты)
  • Страница категории (например, блог, категории продуктов, база знаний, страница карьеры)
  • Content Hub page — высокоуровневый контент по теме, имеющей много подтемы (например, страница о маркетинге, которая ссылается на подстраницы об исследовании рынка, маркетинговой стратегии и маркетинговой тактике)

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

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

5. Нанесите на карту компоненты навигации по сайту

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

Это может быть что-то столь же простое, как у нас здесь, в Ahrefs:

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

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

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

Есть еще несколько «необычных» компонентов навигации, например, хлебных крошек.

Давайте посмотрим на это, не вдаваясь в этимологию:

С точки зрения пользователя хлебные крошки полезны в двух случаях использования:

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

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

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

Говоря об электронной коммерции, последний компонент навигации по сайту — это фасетная навигация.

Вот как это выглядит:

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

Заключительные мысли

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

Leave a Reply