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

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

Зачем нужна информационная архитектура

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

▶ улучшения пользовательского опыта — клиентам будет проще искать информацию на сайте, удобно передвигаться по страницам и находить ответ на свой вопрос за 1-2 минуты;

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

Составляющие информационной архитектуры

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

• навигацию,
• URL-адреса,
• перелинковку,
• страницы разделов и категорий,
• хлебные крошки,
• файл Sitemap.

Авторы книги «Информационная архитектура» Луис Розенфельд и Питер Морвиль определили три круга ИА:

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

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

• Где я нахожусь? Что есть на этом сайте?
• Я знаю, что мне нужно, но как это найти? Есть ли здесь это?
• Насколько профессионально сделан сайт? 
• Здесь есть то, что мне нужно. Но есть ли что-то, что тоже может мне пригодиться?

Задача сайта — ответить на все эти вопросы, предоставить искомое и возможность найти что-то еще (например, похожие товары). 

Как сделать структуру сайта

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

Вот 3 шага, которые помогут собрать правильную структуру для любого проекта.

Шаг 1. Сформируйте семантическое ядро

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

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

• самостоятельно придумать запросы пользователей, которым был бы полезен сайт — подумать, как бы вы искали представленные товары;
• подобрать запросы с помощью сервисов подбора ключевых слов;
• проанализировать семантику конкурентов, например, с помощью сервисов SpyWords или PR-CY.

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

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

Шаг 2. Продумайте структуру сайта

Розенфельд и Морвиль выделили 3 структуры сайта:

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

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

Последовательная система

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

Матричная система

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

Позже Брюс Клей выделил еще одну систему — Silo. Она напоминает последовательную, но дополнена некоторыми правилами. 

Silo-структура

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

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

После того как вы определились со структурой ресурса: 

• обозначьте главные разделы — для интернет-магазина одежды это могут быть «Каталог», «Мужчинам», «Женщинам», «Детям», «Новинки», «О компании», «Доставка»;
• продумайте структуру подразделов — например, для раздела с женскими вещами это могут быть «Верхняя одежда», «Деним», «Платья и юбки», «Для офиса»;
• обращайте внимание на детали — в разделе с новинками сразу могут располагаться карточки товаров, подраздел в данном случае не понадобится, а вот в «Доставке» нужно указать условия или разместить калькулятор для подсчета;
• продумайте структуру URL.

Яндекс советует создавать информативные URL. Это поможет сформировать логичную иерархическую структуру адресов. Она показывает путь пользователя по сайту. Например, URL для этой статьи— https://www.reg.ru/blog/chto-takoe-informacionnaya-arhitektura-dlya-seo-i-kak-ee-sozdat/. По адресу видно, что человек находится на сайте Рег.ру, а именно — в блоге на странице конкретной статьи. Простые и понятные URL хорошо воспринимаются пользователями, а поисковые роботы смогут лучше понять тему страницы. 

Обязательно визуализируйте архитектуру сайта. Это можно сделать с помощью специальных сервисов и интеллект-карт: Octopus.do, Xmind, MindMup, Miro.

Шаг 3. Проработайте навигацию

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

Хлебные крошки

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

Поиск по сайту

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

Хедер и футер

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

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

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

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

Фильтры для товаров

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

Карта сайта

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

Сгенерировать карту можно с помощью специальных ресурсов, например, MySiteMapGenerator. Для этого нужно ввести в строку адрес сайта и нажать кнопку «Перейти к созданию». Генератор работает бесплатно с ресурсами до 500 страниц. На выходе вы получаете xml-файл, который добавляется в корень сайта. Остается только сообщить поисковикам, что вы создали карту, — вставьте ссылку на нее в Яндекс Вебмастере и Google Search Console в специальное поле для sitemap.

Сделайте перелинковку

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

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

О том, как правильно реализовать перелинковку, читайте в нашей статье про внутреннюю перелинковку и ссылочный вес (кстати, это тоже пример перелинковки 😉)

Подберите надежный хостинг

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

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

⌘⌘⌘

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