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

Содержание

Описываем структуру сайта в приложении FreeMind.

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

линейная структура – используется при создании презентаций или онлайн-книг;

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

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

Приложение FreeMind служит для создания диаграмм связей или интеллект-карт. Диаграмма связей описывается в виде древовидной схемы, очень схожей с древовидной структурой сайта. Так как древовидная структура сайта самая распространённая, мы можем использовать приложение FreeMind для описания структуры сайта. К тому же FreeMind — бесплатная программа, распространяемая по лицензии GNU GPL V2+. С ней очень удобно и просто работать.

Скачать FreeMind можно со страницы проекта на sourceforge.net. Приложение написано на Java, поэтому для его работы требуется виртуальная машина JRE (Java Runtime Environment) версии 1.4 и старше.

Примеры использования FreeMind.

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

Компания
- О компании
- Руководство
- Миссия и стратегия
- История
- Вакансии

Новости

Продукция
- Мягкая мебель
- Офисная мебель
- Мебель для кухни
- Офисная мебель

Услуги

Контакты

Авторизация

Меню демо-сайта выглядит так:

Программа FreeMind предназначена для создания интеллект-карт, а как известно все интеллект-карты состоят из узлов. В нашем случае узлы – это разделы сайта. При создании новой карты на ней уже присутствует один корневой узел. Переименуем его в «Корпоративный сайт». Теперь можно добавлять к узлу «Корпоративный сайт» подчиненные узлы, следуя по структуре нашего сайта, начиная с раздела «Компания» и заканчивая страницей «Авторизация». Для этого просто щелкайте правой кнопкой мыши по узлу и выбирайте пункт «Новый подчиненный узел» (или нажимайте Insert). После добавления первого узла, остальные узлы того же уровня можно добавлять щелкая правой кнопкой мыши по узлу и выбирая пункт меню «Новый смежный узел после текущего».

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

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

В конце статьи можно увидеть скринщот разработанной структуры демо-сайта.

После создания документа, с описанием структуры нашего сайта, его можно экспортировать в различные форматы. Например, PDF, PNG, SVG и JPEG, а также HTML и XHTML.

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

Как и у любой другой программы, у FreeMind существуют альтернативы как распространяемые бесплатно, так и коммерческие. Из бесплатных приложений, схожих по функционалу с FreeMind можно назвать Thinkgraph и VYM — View Your Mind , а из коммерческих продуктов — MindManager и Inspiration , а также другие аналогичные приложения.

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

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

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

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

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

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

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

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

Заключение

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

Структура сайта — смысловая иерархия страниц, отраженная в системе навигации. Это необходимо пояснить на наглядном примере. Представьте сайт-визитку компании 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.

что это такое, какие есть виды, как ее сделать правильно

Тематический трафик – альтернативный подход в продвижении бизнеса

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

Подпишись на рассылку и получи книгу в подарок!

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

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

Все это напоминает схему здания. К примеру, для того чтобы попасть из комнаты А в комнату Б, необходимо пройти по лестнице на 2 этажа вверх, затем сделать 5 шагов и повернуть налево. Также из помещения А в помещение Б можно попасть, если подняться на лифте на 3 этажа, затем пойти по лестничному пролету вниз, сделать 2 поворота направо и закончить путь 10ю шагами. В то же время, для того чтобы покинуть здание из любой комнаты — можно выйти на общий балкон и спуститься в стеклянном лифте вниз.

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

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

Линейная

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

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

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

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

Пример:

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

Дерево

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

Решето, сеть

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

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

Как сделать структуру сайта для продвижения, отталкиваясь от семантического ядра

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

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

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

Возьмем для примера сайт, осуществляющий продажи платьев.

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

Составляем структуру, исходя из логики. У нас получится примерно следующее:

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

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

Важные моменты

Рассмотрим основные правила индексирования, по которым работает поисковая система.

Уровень вложенности страниц не должен быть глубже 3. Иначе поисковая система может не проиндексировать очень глубоко вложенный страницы.
Правильный путь к самой глубокой странице должен иметь такой вид: Главная → Страница 2 уровня → Страница 3 уровня.
Если Вы не можете обойтись без 4 уровня вложенности и глубже, делайте карту сайта или дополнительные ссылки со страниц более высокого уровня.
Адрес каждой страницы должен быть человекопонятным. Пример плохого URL — site.ru/ds6789876sd/f7879y87df/787878778/4345345/vfdfv/4t54. При определении ЧПУ следует использовать транслитерацию.
Каждая страница должна иметь возможность возврата на главную.
Используйте строку навигации (хлебные крошки), которая указывает пользователю, в каком разделе он находится и позволяет вернуться на любой из предыдущих уровней.
Создавайте XML карту для поисковой системы, которая помогает включить все страницы в индекс.
Закрывайте служебные страницы от поискового робота.
Не называйте раздел с дополнительными статьями (чтобы придать вес ключевикам) “Статьи”. Поисковая система может проигнорировать индексацию данного раздела. Проявите фантазию. Не сваливайте в одну кучу информацию в данном разделе. Структурируйте ее.
Слеш в конце адреса используйте аккуратно. URL типа site.ru/chto-to-tam/ говорит поисковику, что необходима индексация глубже. Но если на этой странице уже нет внутренних ссылок, то лояльность поисковика к вашей странице может снизиться.
Делайте грамотную внутреннюю перелинковку. Она поможет улучшить поведенческие факторы и подтолкнет поисковик к индексации нужных страниц.
Страницы типа “Прайс”, “Услуги” размещайте в 1 клике от главной страницы, желательно в верхней ее части. Они должны быть видны и легко доступны для посетителя.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

10 сервисов для создания структуры сайта в 2020 году / Хабр

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

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

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

Пример структуры веб-сайта (Блоки кликабельны)

Рассмотрим три типа сайтмэпов:

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

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

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

Можно быстро получить визуальную структуру почти любого веб-сайта (visual sitemap generator) у которого есть файл sitemap.xml (нужно просто ввести адрес сайта). Ее можно сохранить, дополнить, редактировать и делиться.

Зачем нужны визуальные сайтмэпы?

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

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

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

Основная идея проектирования сайтмэпов в Octopus заключается в формировании страниц из блоков и вайрфреймов низкой точности (low fidelity wireframes). Такие конструкции наглядны и призваны дать подробное представление о структуре будущей страницы.

Протестировать Octopus.do возможно без регистрации. Зарегистрировать профиль понадобится только в момент сохранения проекта. Также можно посмотреть простое и понятное видео о проекте.

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

Есть и более удобный способ добавления блока — достаточно нажать Enter, и в нижней части страницы появится новый блок. Такой метод позволит быстро заполнять содержание с использованием одной лишь клавиатуры. Drag’n’drop работает предсказуемо и быстро.

Блокам могут быть присвоены цвета из заданной палитры цветов:

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

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

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

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

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

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

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

Резюме

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

Стоимость, подписка: бесплатный план предусматривает 1 активный проект. Платные подписки от 8 $ в месяц.
Простота использования: для начинающих и пользователей среднего уровня
Дизайн: ★★★★☆
Командная работа: ✓
Экспорт: ссылка, PDF и PNG (только для платных пользователей)

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

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

Отдельно стоит отметить настройки вида: Map View, Matrix View и Outline. В зависимости от структуры и масштаба проекта можно выбрать способ отображения сайтмэпа.

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

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

Резюме

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

Стоимость, подписка: бесплатно
Простота использования: подходит для начинающих
Дизайн: ★★★☆☆
Командная работа: ✓
Экспорт: ссылка, PNG, PDF, XML

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

Сперва необходимо зарегистрироваться. Проект можно:

начать с чистого листа

импортировать из XML файла

расширить существующий шаблон

В заготовленных шаблонах найдется три типа проектов: e-Commerce, корпоративный проект и новостной портал.

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

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

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

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

Что касается навигации, то к стандартному набору функции добавлена довольна удобная механика — Project Map. Project Map сочетает в себе как визуальную, так и механическую ценность — перемещение по структуре больших проектов упрощается.

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

Широкие настройки экспорта в SVG и PNG форматы позволяют выбрать оптимальный вариант и даже задать разрешение изображения на выходе.

Резюме

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

Стоимость, подписка: бесплатный план предусматривает 1 активный проект и 100 Мб места, без ограничении по коллабораторам. Платные подписки от 8 $ в месяц при годовой оплате.
Простота использования: для начинающих и пользователей среднего уровня
Дизайн: ★★★★★
Командная работа: ✓
Экспорт: ссылка, PNG, SVG, PDF, DOCX

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

С точки зрения дизайна интерфейс можно описать, как «народный» или незамысловатый. Бесплатный план обеспечивает доступ к части функции: 3 активных сайтмэпа c 50 страницами. Остальные фичи доступны платным пользователям.

Часть платного функционала включает возможность выделять страницы проекта цветом, объединять и добавлять к ним контент, создавать разделы, делиться проектом и экспортировать сайтмэп в PDF. Хотя для бесплатных планов предусмотрен экспорт в CSV и XML.

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

Резюме

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

Стоимость, подписка: бесплатный план предусматривает 3 активных проекта с ограничением в 50 страниц. Платные подписки от 14.99 $ в месяц.
Простота использования: для начинающих и пользователей среднего уровня
Дизайн: ★★☆☆☆
Командная работа: ✓
Экспорт: CSV, XML, PDF и ссылка (только для платных пользователей)

Rarchy

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

На момент публикации обзора механика добавления страниц устроена следующим образом — необходимо вызвать контекстное меню, кликая на блоки страницы.

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

На момент публикации доступен экспорт только в CSV-файл. Поделиться прямой ссылкой нельзя.

Стоимость, подписка: бесплатно
Простота использования: для начинающих
Дизайн: ★★☆☆☆
Командная работа:
Экспорт: CSV

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

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

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

Резюме

Visual Sitemaps будет удобен для предварительного анализа проекта. Особенно, если есть необходимость посмотреть и оценить устройство страниц.

Стоимость, подписка: бесплатный план предусматривает регистрацию одного пользователя и 50 скриншотов с ограничение глубины кроула до двух уровней. Платные подписки от 29 $ в месяц.
Простота использования: для начинающих и пользователей среднего уровня
Дизайн: ★★★★☆
Командная работа: ✓
Экспорт: ссылка, PDF

Slickplan

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

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

Механика манипуляции с блоками интуитивно понятна. Добавление новых страниц происходит быстро, а drag’n’drop объектов позволяет менять порядок и иерархию. Настройки каждого элемента (страницы, блока) сайтмэпа включают:

Добавление контента (текстовый и мультимедиа)

Добавление заметок

Выбора типа страницы

Распределение дизайн шаблона

Диаграмы

Добавление ссылки

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

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

Сервис предусматривает подключение Google Analytics. Это отличительная и полезная особенность Slickplan. A интеграция со сторонними сервисами (Basecamp, Slack и другие) позволяет шерить проект в удобном формате. Проект может быть защищен паролем.

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

Резюме

Богатый набор функций и продуманный интерфейс. Огромный набор возможностей и настроек экспорта.

Стоимость, подписка: 30-дневный триальный период. Платные подписки от 9.99 $ в месяц.
Простота использования: для пользователей среднего и продвинутого уровней
Дизайн: ★★★★☆
Командная работа: ✓
Экспорт: ссылка, PDF, EPS, HTML, CSV, TXT, DOCX, Slickplan Sitemap XML

Чтобы осмотреться в Dynomapper придется создать аккаунт. Доступен 14-дневный тестовый период. Знакомство c сервисом начнется с наглядного видео-эксплейнера.

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

Стоит отметить, что дизайн среды сдержанный и консервативный. А процесс создания сайтмэпа больше похож на классическое взаимодействие с Explorer (Win) или Finder (Mac). Структура сайта, в отличие от сервисов описанных ранее, отображается в виде, напоминающем дерево файлов.

Компактно и придется по вкусу тем, кто привык к такому взаимодействию. Хотя режим Preview отображается уже в виде блок-схемы, и предусматривает 4 дополнительных вида отображения.

Настройки свойства и функций элементов удобно расположены в правой панели вкладок:

Page (Расширенная информация о странице)

Content (Планирование (добавление) текстового и мультимедийного контента)

Analytics

Comment

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

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

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

Резюме

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

Стоимость, подписка: 14-дневный триальный период. Платные подписки от 49 $ в месяц.

Простота использования: для пользователей среднего и продвинутого уровней
Дизайн: ★★☆☆☆
Командная работа: ✓
Экспорт: ссылка, PDF, CSV

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

Создатели сервиса выложили исходный код на Github (https://github.com/alentum). Кроулер бережно сохраняет историю запросов.

Стоимость, подписка: бесплатный
Простота использования: для начинающих
Дизайн: ★★☆☆☆

Creatly

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

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

Drag’n’drop нагляден: перетаскивание элементов сопровождается наглядными связями страниц и объектов. Редактирование страниц, удаление объектов и связывающих линий работает так, как в привычном векторном редакторе. Поэтому для дизайнеров механика будет понятна и близка.

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

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

Резюме

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

Стоимость, подписка: бесплатный план предусматривает 5 публичных документов и возможность добавления до 3-х коллабораторов. Платные подписки от 5 $ в месяц.

Простота использования: для пользователей среднего и продвинутого уровней
Дизайн: ★★★★☆
Командная работа: ✓
Экспорт: ссылка, PNG, JPG, SVG

***********************************

P.S.

Чтобы было легче выбрать, вот сравнительная таблица по всем сервисам (в самом конце) и немного больше скриншотов.

Как создать сайт? Структура и контент / Хабр

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

Пример структуры веб-сайта (Блоки кликабельны)

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

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

Начало

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

Кстати можно быстро и бесплатно визуализировать структуру почти любого веб-сайта c помощью инструмента visual sitemap generator, нужно просто ввести адрес сайта.

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

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

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

Звучит многообещающе? Тогда начинаем!

Основной совет

Навигация и футер

Прежде всего сфокусируйтесь на панели навигации и футере вашего сайта.

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

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

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

Максимизируйте CTR

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

Поэтому, разместив наиболее ценную информацию и элементы призыва к действию CTA (call-to-action) в эффективном первом поле экрана, вы увеличите показатель кликабельности (CTR — click-through rate) и завладеете вниманием посетителя. Речь идет буквально о 3-4 секундах, за которые посетитель сканирует экран и, не найдя быстро нужной информации, чаще всего сразу покидает страницу.

Призыв к действию (CTA)

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

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

Политика конфиденциальности GDPR

Если ваша целевая аудитория — это клиенты из стран ЕС, то обработка данных пользователей должна соответствовать правилам обработки персональных данных GDPR (General Data Protection Regulation), принятых в Европе.

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

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

Структура

Мы уже сделали это за вас

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

Вот эти страницы, из которых состоит грамотно сбалансированная структура сайта:

Главная

О нас

Продукты / Услуги

FAQ

Вакансии

Блог

Контакты

Ошибка 404

Правовая информация

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

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

Главная

О нас

Продукты / Услуги

Контакты

Правовая информация

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

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

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

Главная страница

Для чего создавать:

зацепите внимание, произведите первое впечатление, оптимизируйте навигацию.

Содержание:

Hero image / Основной визуальный посыл

Продукт / Услуги

Ключевые преимущества

О нас

Вакансии

Отзывы (тематические исследования, рекомендации)

CTA

Пример главной страницы — iea.org

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

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

“Главная страница — это как лобби отеля. Хотя это и важная часть отеля, но это не то место, где ваши гости хотели бы остановиться. Они хотят попасть в свой номер.”

Hero image

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

Чтобы лучше понять какой посыл должно нести это изображение, ознакомьтесь с концепцией JTBD (jobs-to-be-done), краткий смысл которой состоит в том, что у клиента на данный момент есть конкретная задача / проблема, которую надо выполнить, и он ищет лучшее решение (продукт), который поможет ему в этом. Ваша же цель — дать ему понять, что ваш продукт решает эту задачу.

Ваши продукты / услуги

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

Обозначьте характеристики и преимущества продукта

Как сказал Саймон Синек в своей знаменитой речи — люди покупают не то, ЧТО вы делаете, они покупают то, ПОЧЕМУ вы делаете это.

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

Социальное влияние

Люди склонны прислушиваться и доверять своему окружению. Еще один прекрасный способ быстро внедрить и распространить информацию — это добавить отзывы о вашей компании или продуктах. Сосредоточьтесь на вашей целевой аудитории и добавьте соответствующие отзывы. Чем более известен и публичен автор отзыва, тем лучше. Не беспокойтесь, если вы еще не засветились на TechCrunch или Forbes; ваши посетители должны быстро установить положительный эмоциональный контакт с рецензентами, вот что важно на данный момент.

О нас

Зачем создавать:

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

Содержание:

История / timeline

Цели и миссия компании

Отзывы

Команда

Партнеры

Видео

Статистика

Интересные факты

Пример страницы О компании — hines.com/about

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

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

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

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

История компании

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

Ваши основные принципы

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

И снова отзывы

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

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

Люди за кулисами

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

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

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

Партнеры

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

Если это имеет отношение к делу — добавьте эту информацию.

Запишите видео

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

Статистика и интересные факты

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

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

Продукты / услуги

Зачем создавать:

продемонстрируйте свои продукты детально и обрисуйте в общих чертах их ценности.

Содержание:

Изображения

Описание

Особенности и преимущества

Цены

Отзывы / рекомендации

Контактная форма

FAQ

Пример страницы Услуги/Продукты — stripe.com/payments

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

Вместе или раздельно

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

Визуальный язык

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

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

Описание продукта

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

Особенности и преимущества (ценность)

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

Цены

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

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

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

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

Актуальность обратной связи

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

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

Будьте на связи

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

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

Подготовьте ответы на вопросы заранее

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

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

Навигация

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

FAQ

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

Содержание:

Вопросы и ответы

Поиск

Живой чат

Пример страницы Помощь / FAQ — help.dropbox.com

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

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

Разделение по темам

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

Поиск

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

Отвечайте на вопросы напрямую

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

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

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

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

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

Вакансии

Зачем создавать:

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

Содержание:

Преимущества работы у нас

Вакансии

Фильтры

Форма заявки

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

Пример страницы Вакансии — spotifyjobs.com

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

Чем вы лучше остальных?

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

Кого конкретно вы ищете?

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

Отдельная страница для каждой вакансии

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

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

Аргументируйте

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

Блог

Зачем создавать:

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

Содержание:

Контент, который создает ценность

Привлекательные изображения

Видео

Комментарии

CTA

Ссылки на профили в соцсетях

Пример страницы Блог — goodonyou.eco/category/stories

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

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

“Напрасно ты приобрел знания, если не передал их другим”

Дварим Рабба (комментарий к Книге Второзаконие)

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

Мы уже упоминали про рейтинг по релевантным ключевым словам. Для этого убедитесь, что ваши тексты имеют относительно большой объем, не менее 250 слов. Для лонгридов — от 800 слов. Осторожно придерживайтесь SEO оптимизации текстов.

Добавив блог, вы естественным образом получаете еще одно преимущество: увеличение продолжительности сеансов пользователей, которое поднимает вас в поисковой выдаче. Чем более интересны ваши посты и записи, тем больше времени посетители будут тратить на их чтение и, кстати, не переписывайте (rewrite) чужие блоги, это неэффективно.

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

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

Заманите читателя

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

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

С точки зрения Pillar модели это позволит URL-адресам, таким как «https://yoursite.com/blog/#seo», выступать в качестве идеальных хабов для накопления органического трафика со смежных кластерных страниц. Роботы идентифицируют страницы как смежные, если они правильно сшиты.

Упорядочьте содержимое

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

Изображения и видео

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

Позвольте аудитории высказаться

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

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

Кнопки навигации

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

Расшарьте контент

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

Страница новостей

Что у нас по новостям? Похоже, что на сайтах компаний менее 1% посетителей считают новости стоящими своего времени. Кроме того, корпоративные новости часто воспринимаются как слишком субъективные и самовосхваляющие. Изучите поведенческие паттерны групп пользователей; возможно, вы обнаружите, что тот небольшой процент посетителей, интересующихся вашими новостями — это те, кто конвертируются лучше остальных.

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

Контактная информация / связаться с нами

Зачем создавать:

позволить посетителям оперативно связаться с вашей компанией и улучшить SEO.

Содержание:

Номера телефонов, e-mail (для разных целей)

Форма обратной связи

Карта

Пример страницы Контакты — rndhouse.com/contact

Хотя страница контактной информации является одной из базовых страниц для любого веб-сайта, она также является одной из самых важных.

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

Категоризация

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

Создайте форму

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

Местоположение

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

Ошибка 404

Зачем создавать:

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

Содержание:

Изображения / видео / интерактивные элементы

Сообщение об ошибке

Ссылки на другие страницы сайта

Пример страницы Ошибка — netflix.com/notfound

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

Ключевые моменты

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

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

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

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

Правовая информация

Зачем создавать:

расскажите о своем соответствии требованиям законодательства.

Содержание:

Политика конфиденциальности

Уведомления об авторских правах

Правила и условия пользования

Дисклеймер

Злоупотребление или жалобы контактная информация

Патенты

Корпоративная политика

Пример страницы Privacy Policy — samuelsre.com/privacy-policy

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

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

Содержит всю необходимую информацию, разбитую на пронумерованные абзацы

Написана в понятной для большинства людей форме

Соответствует общему дизайну сайта

Заключение

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

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

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

Что касается нас, авторов этого руководства, то мы занимаемся этим уже 18 лет. И весь свой опыт постарались аккумулировать (помимо этого гайда) в мощном и одновременно простом инструменте Octopus.do, с помощью которого вы сможете бесплатно создать структуру веб-сайта, планировать контент и делиться этим с кем угодно. Регистрация необязательна.

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

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

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

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

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

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

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

Для чего нужна правильная структура сайта

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

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

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

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

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

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

{«0»:{«lid»:»1573230077755″,»ls»:»10″,»loff»:»»,»li_type»:»em»,»li_name»:»email»,»li_ph»:»Email»,»li_req»:»y»,»li_nm»:»email»},»1″:{«lid»:»1596820612019″,»ls»:»20″,»loff»:»»,»li_type»:»hd»,»li_name»:»country_code»,»li_nm»:»country_code»}}

Истории бизнеса и полезные фишки

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

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

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

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

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

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

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

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

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

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

Древовидная (иерархическая) структура сайта. Самый популярный и оптимальный вариант для большинства сайтов. Каждая последующая страница — часть предыдущей.

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

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

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

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

Страница оптимизирована под разный интент (смысл, который вкладывает пользователь в запрос в поисковике). Например, используя Serpstat, проверяем частотность по запросу «тумбы и комоды». Видим, что пользователи не часто вводят в поиске такое словосочетание:

Будет намного эффективнее, если вы создадите отдельно страницу «Тумбы» и страницу «Комоды»:

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

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

Также создал фильтр «Тип» со значением «Мультипликаторная катушка»:

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

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

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

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

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

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

для поисковых роботов — файл Sitemap.xml, который располагается в корне сайта. Он показывает краулеру все страницы, необходимые для индексации и сообщает о появлении новых страниц;

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

Для небольших веб-ресурсов отсутствие карт сайта — не критическая ошибка.

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

Запомнить

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

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

Преимущества логической структуры:

повышение юзабилити;

ускорение индексации страниц;

уменьшение количества технических ошибок;

распределение внутреннего ссылочного веса;

охват большого количества запросов.

Вид структуры зависит от типа вашего сайта:

линейная структура сайта;

линейная с ответвлениями;

блочная структура;

древовидная структура.

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

страница оптимизирована под разный интент пользователя;

дубли страниц;

нечёткие дубли;

большой уровень вложенности страниц;

отсутствие карт сайта;

несоблюдение иерархии страниц.

5 примеров эффективной информационной архитектуры

Иллюстрация Беттины Райнеманн

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

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

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

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

Карта сайта

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

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

Инвентаризация и аудит контента

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

Информационная архитектура аудита контента малого бизнеса. Изображение предоставлено singlegrain.com.

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

Схема информационной архитектуры

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

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

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

Простая древовидная структура для клиентов

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

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

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

Визуальное представление действий

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

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

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

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

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

На что следует обратить внимание

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

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

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

полное руководство • Yoast

Марике ван де Ракт

Мариеке ван де Ракт — генеральный директор Yoast. Ее основное внимание уделяется развитию компании. Она действительно любит поддерживать открытую и дружелюбную корпоративную культуру. Марике также активно участвует в маркетинге Yoast и Yoast SEO Academy: платформы онлайн-курсов.

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

Содержание

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

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

Важность для удобства использования

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

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

Значение для SEO

Прочная структура сайта значительно увеличивает ваши шансы на ранжирование в поисковых системах. Для этого есть три основных причины:

а. Помогает Google «понять» ваш сайт

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

г. Это мешает вам соревноваться с самим собой

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

г. Он занимается изменениями на вашем сайте

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

Вы испытываете трудности с настройкой структуры своего сайта? Не знаете, как лучше всего переходить с одного сообщения на другое? Ознакомьтесь с нашим тренингом по структуре сайта, который является частью нашей подписки на тренинг Yoast SEO Academy.Прежде чем вы это узнаете, вы сможете улучшить свой рейтинг, создав лучшую структуру для своего сайта!

Как настроить структуру вашего сайта

Итак, как построить прочную структуру сайта? Сначала мы рассмотрим идеальную структуру сайта; затем мы объясним, как этого добиться на вашем собственном сайте.

Идеальная структура сайта

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

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

2. Категории (или разделы)

3. Подкатегории (только для крупных сайтов)

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

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

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

Ваша домашняя страница

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

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

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

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

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

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

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

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

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

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

Тропа из хлебных крошек

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

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

Таксономии

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

Категории

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

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

Подробнее: Использование страниц категорий и тегов для SEO »

Структура вашего сайта также выиграет от добавления тегов. Разница между категорией и тегом в основном связана со структурой. Категории являются иерархическими: у вас могут быть подкатегории и даже подкатегории. Однако у тегов нет такой иерархии. Теги просто говорят: «Эй, у этой статьи или продукта есть определенное свойство, которое может быть интересно посетителю.Подумайте об этом так: категории — это оглавление вашего веб-сайта, а теги — это индекс. Тег для упомянутого выше интернет-магазина одежды может быть брендом, например, Timberlands.

Продолжайте читать: В чем разница между тегами и категориями? »

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

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

Читайте дальше: Правильная маркировка сообщений для пользователей и SEO »

Контекстная внутренняя ссылка

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

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

Google использует контекст ваших ссылок для сбора информации о странице, на которую вы переходите. Он всегда использовал якорный текст (или текст ссылки), чтобы понять, о чем страница, на которую вы ссылаетесь. Но якорный текст — это не единственное, на что смотрит Google. В настоящее время он также рассматривает контент вокруг ссылки для сбора дополнительной информации. Google становится лучше распознавать связанные слова и понятия.Добавление ссылок из значимого контекста позволяет Google правильно оценивать и ранжировать ваши страницы. Yoast SEO Premium упрощает создание внутренних ссылок, автоматически предлагая релевантный контент с вашего сайта для ссылки.

Контекстные ссылки для блогов

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

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

Продолжайте читать: Внутренние ссылки, почему и как »

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

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

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

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

Узнайте все о настройке отличной структуры (внутренних ссылок) для вашего интернет-магазина с помощью нашего тренинга по структуре сайта, который является частью нашей подписки на обучение Yoast SEO Academy. Мы включили множество примеров с реальных сайтов!

Целевые страницы

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

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

Цель поиска

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

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

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

Прочтите все о целях поиска и их важности для SEO.

Cornerstone страниц содержания

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

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

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

Целевые страницы продукта

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

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

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

Поддержание структуры вашего сайта

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

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

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

Подробнее: Оптимизация меню вашего сайта »

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

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

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

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

В том маловероятном случае, если вы создали карту сайта HTML вручную, обновите эту карту сайта после изменения структуры сайта. В гораздо более вероятном случае, если у вас есть карта сайта в формате XML, повторно отправьте ее в Google Search Console.

Продолжайте читать: Структура растущего блога »

Очистить устаревшее содержимое

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

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

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

Избегайте каннибализации ключевых слов

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

Если вы страдаете от каннибилизации ключевых слов, вам нужно поработать. Короче говоря, вам следует исследовать производительность вашего контента и, возможно, объединить и перенаправить часть из них. При объединении сообщений мы рекомендуем создать новый черновик, клонировав один из исходных сообщений с помощью плагина Yoast Duplicate Post. Это дает вам возможность работать над объединенным сообщением, не внося этих изменений в действующий пост. Прочтите руководство Joost, чтобы узнать больше о каннибализации ключевых слов и о том, как это исправить.

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

Чувствуете себя немного ошеломленным всеми этими советами? У Yoast SEO есть удобные инструменты, которые значительно упрощают создание внутренних ссылок.

Счетчик текстовых ссылок

Yoast SEO визуализирует ваши ссылки, чтобы вы могли их оптимизировать. Он показывает внутренние ссылки в сообщении и внутренние ссылки на сообщение. Вы можете использовать этот инструмент для улучшения структуры вашего сайта, улучшая связи между вашими связанными сообщениями. Убедитесь, что у ваших краеугольных камней больше всего (релевантных) ссылок!

Yoast SEO Premium также поможет вам с вашими внутренними ссылками.Наш инструмент внутренних ссылок покажет вам, какие статьи связаны с той, которую вы пишете, так что вы можете легко ссылаться на них: просто перетащив ссылку в свой редактор!

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

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

Читайте дальше: Как использовать Yoast SEO для вашей краеугольной контентной стратегии »

Структура сайта: кратко

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

Хотите улучшить структуру своего сайта, но не знаете, с чего начать? Пройдите обучение по структуре сайта ! Это часть нашей подписки на обучение Yoast SEO Academy. Мы шаг за шагом проведем вас через весь процесс.

Продолжайте читать: WordPress SEO: полное руководство по повышению рейтинга сайтов WordPress »

Обучение структуре сайта • Yoast

После этого обучения…

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

И вы будете готовы разработать отличную целостную стратегию в отношении контента.SEO просто нельзя свести к одной теме. Вот почему у нас есть отличные дополнительные уроки по Content SEO, которые доступны в нашей премиальной подписке Yoast SEO Academy!

Какие темы рассматриваются в этом тренинге по структуре сайта?

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

После этого курса вы сможете оптимизировать структуру своего сайта, но как насчет вашего содержания? Соответствует ли это потребностям вашего посетителя? Ваши тексты хорошо написаны и оптимизированы для поисковых систем? Воспользуйтесь подпиской Yoast SEO Premium и узнайте, как улучшить свой контент с помощью экспертного исследования ключевых слов и безупречного SEO-копирайтинга!

Информационная архитектура

для веб-дизайна: пошаговое руководство

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

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

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

Что такое информационная архитектура?

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

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

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

Основные компоненты информационной архитектуры
Источник: Люсия Ванг

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

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

Пять этапов разработки информационной архитектуры

1. Проведите исследование клиентов

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

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

2. Обновите и просмотрите содержимое

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

Инвентарь

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

Заголовки и субпозиции
Тексты
Медиа-файлы (изображения, видео, аудио)
Документы (doc, pdf, ppt)
URL-ссылок страниц

Эти элементы перечислены в шаблоне содержимого вместе с их характеристиками.

Шаблон инвентаризации контента
Источник: Eckford

Контент-аудит

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

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

3. Применить сортировку карточек для классификации содержимого

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

Таксономизация применена на веб-сайте Airbnb
Источник: Stanford K. Kekauoha

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

Сортировка карт

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

Типы сортировки карточек
Источник: Дизайн взаимодействия

Существует три типа сортировки карт:

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

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

Гибрид — объединяет элементы обоих типов или начинается с открытого типа, переходя к закрытому типу, чтобы следовать логике пользователя.

Схема сортировки карточек
Источник: Дизайн взаимодействия

Вы можете проводить сортировку карточек в группах или на личном собеседовании или удаленно с помощью таких инструментов IA, как UserZoom, usabiliTEST, xSort и Optimal Sort .

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

4. Постройте иерархию веб-сайтов для удобной навигации.

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

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

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

Раскрывающееся меню в ASOS
Источник: ASOS

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

Левостороннее меню в The New York Times
Источник: The New York Times

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

Локальная навигация на сайте Оксфордского университета
Источник: Оксфордский университет

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

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

Маркировка

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

Маркировка веб-сайтов Expedia именами и значками
Источник: E xpedia

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

Интеллектуальное отображение

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

Интеллектуальная карта для веб-сайта информационных систем Cornerstone и приложения для iOS

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

Шаблоны проектирования иерархии

Шаблон дизайна — это способ структурировать контент. Это позволяет вам выбрать направление в самом начале работ по созданию ИА или редизайну сайта. Существует несколько шаблонов проектирования IA, которые мы описываем ниже:

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

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

Плоская структура
Источник: Блог WebFX и др.

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

Шаблон индексной страницы

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

Шаблон строгой иерархии

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

Шаблон сосуществующей иерархии

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

Карта сайта

Карта сайта — это способ иллюстрировать иерархию контента и отображать навигацию. Слово карта сайта говорит само за себя. Это карта содержания и категорий веб-сайта.

Карта сайта портфолио
Источник: Келлин Лоер на Dribble

На карте сайта вы визуализируете всю иерархию контента.Вы можете сделать это на бумаге или с помощью различных инструментов, таких как WriteMaps, MindNode, Scapple, MindManager, XMind.

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

5. Создайте прототип пользовательского интерфейса для будущей разработки

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

Каркас

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

Каркас веб-приложения Back to my body
Источник: Alyoop

Каркасы рисуются на бумаге или с помощью специального инструмента или программного обеспечения, такого как Justinmind, Wireframe.cc, Fluid UI, Balsamiq или Visio, для создания цифровых каркасов, карт сайта или высокоточных прототипов.Каркасы тестируются пользователями, чтобы определить, является ли структура ясной и лаконичной.

Моделирование данных

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

Обычно это делается с помощью каркасов или прямо через CMS (системы управления контентом), вспомогательные системы для публикации контента, такие как Squarespace, WordPress и Wix.Разместите контент через CMS, а затем используйте его в качестве платформы для разработки веб-сайтов.

Восемь принципов информационной архитектуры

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

Восемь принципов информационной архитектуры
Источник: CareerFoundry

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

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

Применяя эти принципы, вы, вероятно, структурируете существующий контент и оставите пространство для роста.

Примеры информационной архитектуры

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

BBC Weather

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

Карта сайта BBC Weather
Источник: Интернет-блог BBC

Глобальная сеть семян

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

Карта сайта Global Seed Network
Источник: 1 ^st Way

Spotify

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

Карта сайта Spotify
Источник: Рене Лин на носителе и др.

Рене Лин, UX-дизайнер, нашла способ улучшить его, упростив и удалив некоторые разделы.

Spotify IA пересмотрено

Заключительное слово

Одна из новых тенденций в дизайне UX / UI — нулевой UI. Если вы когда-либо использовали Google Assistant или Alexa, вы знаете, на что это похоже: пользователь находит необходимую информацию, даже не касаясь экрана, просто сказав пару слов или, возможно, даже жестом.Это то, что чаще всего применяют в проектах виртуальной реальности. Нулевой пользовательский интерфейс повлияет на способ создания информационной архитектуры. Но пока у нас есть обычный пользовательский интерфейс, мы должны придерживаться некоторых проверенных на практике советов, таких как соблюдение восьми принципов IA и не перегружать пользователей информацией.

Информационная архитектура 101: методы и передовой опыт

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

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

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

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

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

Одностраничный

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

Плоская конструкция

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

Индекс Стр.

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

Шаблон строгой иерархии

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

Шаблон сосуществующих иерархий

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

Лучшие практики проектирования информационной архитектуры

Изображение Al Abut

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

Не создавайте дизайн на основе ваших предпочтений

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

Исследовательские потребности пользователя

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

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

Имейте ясную цель

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

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

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

Использовать персонажи

Изображение Николаса Новы

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

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

Помните о целях сайта

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

Будьте последовательны

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

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

Методы и методы проектирования информационной архитектуры

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

Сортировка карт

Изображение из библиотеки Манчестер Сити

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

Существует несколько типов методологий сортировки карт.

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

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

Каркасы и прототипы

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

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

Карты и схемы участка

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

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

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

Информационная архитектура Стили дизайна

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

Архитектура сверху вниз

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

Архитектура снизу вверх

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

Примеры информационной архитектуры

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

Новостной сайт

CNN.com — один из крупнейших новостных сайтов в Интернете. Они обслуживают более 20 миллионов посетителей в месяц ^[2]; посетители из всех слоев общества. У разных посетителей будут разные цели при посещении сайта и разные интересы в новостях, которые они хотят читать.

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

Но многие люди, посещающие сайт, также захотят видеть новости, связанные с определенной темой (например, новости США, технологии, политика). Чтобы приспособиться к этому, CNN имеет несколько блоков контента внизу страницы, организованных по темам. Это позволяет легко находить новые и актуальные новости по наиболее востребованным темам. В верхней части страницы также есть ссылки на многие разделы, включая спорт, технологии, здоровье и политику.

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

Веб-сайт одного продукта

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

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

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

Веб-сайт электронной торговли

L.L. Bean — это огромный сайт электронной коммерции с большим ассортиментом товаров, ориентированных на широкую и разнообразную аудиторию.

L.L. Bean разбивает вещи по типам покупателей и категориям продуктов, с некоторым совпадением, где это имеет смысл. Например, категория «Обувь» занимает отдельное место в основной навигации, но она также включена в разделы «Мужская», «Женская» и «Детская» в качестве элементов под-навигации. Такой подход показывает понимание того, как могут делать покупки разные целевые покупатели. Он использует иерархии и расстановку приоритетов для организации контента в значимые подмножества.

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

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

Блог

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

Сайт использует шаблон дизайна вкладок навигации для основных категорий блога на сайте (например, «Продуктивность», «Вдохновение», «Как сделать» и т. Д.). Также есть основная панель навигации для разных областей сайта (например,г. форумы, доска объявлений, гиды по фрилансу и т. д.).

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

Контентный веб-сайт, управляемый пользователями

Википедия — один из крупнейших веб-сайтов в мире по количеству страниц. По состоянию на сентябрь 2010 года на сайте ^[3] было более 3,4 миллиона статей. Только статьи на английском языке составят 1439 печатных томов из 1.По 6 миллионов слов каждый. Это семь полных библиотечных стеков.

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

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

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

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

Список литературы

Модели информационной архитектуры: Руководство по шаблонам навигации по веб-сайту. webdesignfromscratch.com.

Профиль сайта

Cnn.com. compte.com.
Статистика Википедии. wikimedia.org.

Связанное содержимое

The BIG Picture — Smashing Magazine

Краткое резюме ↬

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

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

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

Что такое информационная архитектура и почему она важна?

«Информационная архитектура — это практика принятия решения о том, как расположить части чего-либо, чтобы их можно было понять.”
— Институт информационной архитектуры

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

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

Больше после прыжка! Продолжить чтение ниже ↓

Вот еще несколько причин, по которым важна хорошая информационная архитектура:

Для пользователя

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

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

(Источник изображения: Шон Аттер) (превью в большом разрешении)

Пример выше демонстрирует:

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

(Большой превью)

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

Для бизнеса

Удерживает клиентов на своем веб-сайте дольше.
Исследования показывают, что посетители часто уходят с веб-сайта в течение 10-20 секунд, но с четкой целью вы можете привлечь посетителей на более длительный период. Хотя хороший дизайн и обмен сообщениями помогают представить ценностное предложение сайта, хорошо спроектированный экран навигации также может способствовать демонстрации того, какая информация поддерживает это ценностное предложение.
Увеличивает вероятность конверсии клиентов.
Если посетитель вашего сайта может найти то, что он хочет, с помощью навигации, и для этого предусмотрены простые и минимальные шаги, шансы на конверсию намного выше, чем при дизайне сайта, который не может направить пользователя вправо. Информация.
Снижает риск перехода клиентов к конкурентам.
Если посетитель вашего сайта может легко найти то, что он ищет, благодаря эффективной навигации и хорошему дизайну, скорее всего, он останется на нем, а не перейдет к следующему результату поиска Google.
Уменьшает дублирование информации (по дизайну).
Хорошая информационная архитектура может гарантировать, что один и тот же или похожий контент не будет реплицирован. Понимание и документирование структуры контента, особенно на сайтах с большим количеством информации, может предотвратить эти потенциальные проблемы.
Повышение рентабельности инвестиций за счет эффективного использования платформы.
Инвестиции, потраченные на обеспечение того, чтобы информационная архитектура на вашем сайте была эффективной и имела смысл для ваших пользователей, являются убедительным способом увеличения конверсии ваших клиентов и дохода, получаемого от этих продаж.
Снижает стоимость поддержки, когда пользователь что-то не может найти.
Как описано ранее, создание ненужной нагрузки на группу поддержки клиентов — это дополнительные затраты, которых можно избежать, если сайт будет хорошо функционировать и предоставляет помощь клиентам, когда они в этом нуждаются.

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

(Источник изображения: блог Optimizely) (превью в большом разрешении)

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

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

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

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

Поиск и навигация

В 1997 году Якоб Нейлсон провел исследование, которое показало, что более 50% пользователей веб-сайта будут использовать функцию поиска вместо навигации по сайту.В 2012 году econsultancy.com сообщил, что 30% посетителей сайтов электронной коммерции будут использовать поиск по сайту, в то время как исследование показателей Kiss показало, что 40% пользователей предпочитают использовать поиск. В 2010 году исследование Джерри Макговерна показало, что 30% пользователей предпочитают поиск.

(Источник изображения: Нил Патель) (превью в большом разрешении)

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

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

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

Средства для мытья тела (Источник изображения: Good Housekeeping) (превью в большом разрешении)

Очищающие средства для кожи (Источник изображения: Skincare Hero) (превью в большом разрешении)

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

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

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

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

(Большой превью)

Согласно исследованию от measureu.com, около 14% пользователей начнут с поиска, а остальные начнут с просмотра параметров навигации.

Примеры хорошей и плохой информационной архитектуры

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

Полезная навигация

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

(Большой превью)

Визуальная навигация на основе поиска

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

Pinterest (превью в большом разрешении)

Превосходная навигация

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

(Большой превью)

Как это сделать?

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

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

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

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

(Большой превью)

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

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

Пример навигации по хлебным крошкам (большой превью)

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

Методы тестирования вашей навигации

Сортировка карт

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

Сортировка карточек (Источник изображения: UX Indonesia на Unsplash) (превью в большом разрешении)

Рекомендуемая литература : Руководство для начинающих по сортировке карточек: улучшение информационной архитектуры

Тестирование сценария

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

Тестирование сценария (большой превью)

Инструменты

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

Инструмент тестирования навигации (большой превью)

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

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

Инструмент поиска по ключевым словам (большой предварительный просмотр)

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

Эпоха информации

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

Основные факты об информации

90% мировых данных были созданы за последние 2 года.
Количество данных в мире удваивается каждые два года.
Если бы все данные в нашем мире хранились на планшетах iPad 128G, они бы создали стек, идущий от Земли до Луны 6,6 раз!
Только 37% всех данных считаются «полезными». И из этих 37% фактически анализируется гораздо меньший процент.
33 процента руководителей считают, что информационная перегрузка сказывается на их здоровье.
66 процентов менеджеров сообщили об усилении конфликтов с товарищами по команде, а также о снижении удовлетворенности работой.

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

«Мы живем во время беспрецедентного доступа к информации. Это мгновенно, глобально, это везде, это Интернет.”

Сила информации

«С властью приходит большая ответственность».

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

«Информация — сила»

Интернет-активист

Аарон Шварц покончил с собой в 2013 году в возрасте 26 лет.Аарон был первым создателем Reddit, и среди многих достижений его безвременная смерть произошла, когда он боролся с обвинениями в уголовном преступлении за незаконный доступ и загрузку академической информации. Он написал манифест, в котором призвал активистов «освободить» информацию, охраняемую корпорациями, и выступил против цензуры в Интернете.

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

Информация может мгновенно изменить мировые события

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

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

Опасности дезинформации

В настоящее время, примеры: заявления о «фейковых новостях», президентские твиты и утверждения о дезинформации, исходящей из Китая в связи с пандемией COVID19. Дональд Трамп, которого приписывают ссылкой на «фальшивые новости», теперь в целом приписывает неправильные сообщения новостей журналистам и средствам массовой информации, таким как CNN.

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

Информационная безопасность

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

В июле 2017 года, вскоре после того, как я уволился с работы в Equifax (никакой связи!), В США произошла утечка данных, от которой пострадали более 147 миллионов человек. Представленные данные включали номера социального страхования, даты рождения и некоторые данные кредитной карты. Потратив 1,4 миллиарда долларов на обновления безопасности, он все еще решает текущие групповые иски от потребителей, на которые повлияло воздействие.

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

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

Заключение

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

Дополнительная литература по SmashingMag:

(ах, ра, ил)

Что такое структура веб-сайта? Типы, значение и способы разработки

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

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

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

Какие типы структуры веб-сайта?

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

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

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

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

В чем важность структуры веб-сайта?

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

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

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

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

Предотвращает конкуренцию с вашим веб-сайтом

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

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

Разработайте стратегию перед запуском

Лучший способ сделать что-то — это спланировать перед выполнением. Возьмите бумагу и ручку и нарисуйте примерный набросок того, как должен выглядеть ваш веб-сайт. Вы можете перечислить различные важные страницы, категории и страницы продуктов. Это поможет вам лучше понять структуру вашего веб-сайта. Если вы запускаете новый веб-сайт, неплохо рассмотреть возможность внедрения различных методов SEO еще на этапе проектирования.Здесь важен выбор правильной модели веб-сайта. Плоская структура сайта, где все страницы находятся всего в одном клике от вашей домашней страницы, может показаться простой в реализации. Однако, когда его спросили о плоской структуре сайта, Джон Мюллер ответил так:

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

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

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

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

Важна симметрия веб-сайта

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

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

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

Валидация Консорциума World Wide Web (W3C) — это процесс проверки соответствия документов HTML и XHTML вашего веб-сайта правильной разметке.Проверка W3C гарантирует, что сайт работает одинаково во всех браузерах.

Используйте подходящую платформу JavaScript вместе с HTML и CSS

При разработке своего веб-сайта использование HTML и CSS — самые безопасные методы. Однако использование JavaScript может сделать ваш сайт привлекательным для пользователей. Вам необходимо использовать подходящий JavaScript-фреймворк для своего веб-сайта. С появлением бота Google Evergreen поисковый робот теперь может отображать более 1000 функций веб-платформы, которые он не мог раньше, что упрощает поисковую оптимизацию.

Заключение

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

Описываем структуру сайта в приложении FreeMind.

Примеры использования FreeMind.

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

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

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

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

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

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

Заключение

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

что это такое, какие есть виды, как ее сделать правильно

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

Линейная

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

Дерево

Решето, сеть

Как сделать структуру сайта для продвижения, отталкиваясь от семантического ядра

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

Важные моменты

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

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

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

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

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

10 сервисов для создания структуры сайта в 2020 году / Хабр

Зачем нужны визуальные сайтмэпы?

Rarchy

Slickplan

Creatly

Как создать сайт? Структура и контент / Хабр

Начало

Основной совет

Структура

Главная страница

О нас

Продукты / услуги

FAQ

Вакансии

Блог

Контактная информация / связаться с нами

Ошибка 404

Правовая информация

Заключение

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

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

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

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

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

Для чего нужна правильная структура сайта

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

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

Запомнить

5 примеров эффективной информационной архитектуры

Карта сайта

Инвентаризация и аудит контента

Схема информационной архитектуры

Простая древовидная структура для клиентов

Визуальное представление действий

На что следует обратить внимание

полное руководство • Yoast

Содержание

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

Важность для удобства использования

Значение для SEO

а. Помогает Google «понять» ваш сайт

г. Это мешает вам соревноваться с самим собой

г. Он занимается изменениями на вашем сайте

Как настроить структуру вашего сайта

Идеальная структура сайта

Ваша домашняя страница

Навигация

Меню

Тропа из хлебных крошек

Таксономии

Теги

Контекстная внутренняя ссылка

Контекстные ссылки для блогов

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

Целевые страницы