Основа продающего сайта: что такое информационная архитектура и как ее создать
В начале октября в России отмечают день архитектора. Но мы уверены, что это еще и праздник всех веб-мастеров, SEO-специалистов и дизайнеров, которые вместе работают над архитектурой домов сайтов. Да-да! Качественная архитектура сайта помогает создать удобный пользовательский интерфейс и улучшить ранжирование в поисковиках. А как ее создать — читайте в статье.
Зачем нужна информационная архитектура
Весь контент, который находится на сайте, должен логично разбиваться по разделам и блокам, чтобы найти нужный продукт/статью можно было интуитивно. Как в библиотеке — разыскать книгу было бы невозможно без продуманной системы навигации. Поэтому архитектура необходима для:
▶ улучшения пользовательского опыта — клиентам будет проще искать информацию на сайте, удобно передвигаться по страницам и находить ответ на свой вопрос за 1-2 минуты;
▶ повышения рейтинга сайта в поисковых системах — для поисковиков важны уровень вложенности страниц и структура URL, поэтому сайт с понятной и продуманной архитектурой лучше индексируется и получает больше трафика.
Составляющие информационной архитектуры
Архитектура сайта — структура страниц и их взаимосвязь, которая помогает пользователям ориентироваться на странице. Термин относится не только к сайтам, но и к приложениям. Архитектура включает:
- навигацию,
- URL-адреса,
- перелинковку,
- страницы разделов и категорий,
- хлебные крошки,
- файл Sitemap.
Авторы книги «Информационная архитектура» Луис Розенфельд и Питер Морвиль определили три круга ИА:
1) контекст — это цели бизнеса, ресурсы и ограничения;
2) содержание — типы документов, объем, имеющаяся структура;
3) пользователи — аудитория, ее задачи и потребности, действия при поиске информации.
![Три круга информационной архитектуры](https://img.reg.ru/news/blog_10102023_image1.png)
Идея в том, что у пользователей, которые пришли на сайт, множество вопросов. Они могут не задумываться об этом, но подсознательно искать ответы на каждый из них. Вопросы могут быть такими:
- Где я нахожусь? Что есть на этом сайте?
- Я знаю, что мне нужно, но как это найти? Есть ли здесь это?
- Насколько профессионально сделан сайт?
- Здесь есть то, что мне нужно. Но есть ли что-то, что тоже может мне пригодиться?
Задача сайта — ответить на все эти вопросы, предоставить искомое и возможность найти что-то еще (например, похожие товары).
Как сделать структуру сайта
Разрабатывать архитектуру сайта лучше на уровне проектирования. Когда сайт готов, менять структуру достаточно сложно и трудозатратно, но в перспективе это поможет сделать ресурс более удобным. Сам процесс напоминает начало строительства дома — на этом этапе важны не детали, а общее понимание: сколько комнат будет, как они будут располагаться.
Вот 3 шага, которые помогут собрать правильную структуру для любого проекта.
Шаг 1. Сформируйте семантическое ядро
Семантическое ядро — совокупность ключевых запросов, по которым ваш сайт будет показываться пользователям в поисковике.
![Семантическое ядро интернет-магазина вязаных вещей](https://img.reg.ru/news/blog_10102023_image2.png)
Нужно найти целевые запросы, по которым будет продвигаться сайт. Сделать это можно разными способами:
- самостоятельно придумать запросы пользователей, которым был бы полезен сайт — подумать, как бы вы искали представленные товары;
- подобрать запросы с помощью сервисов подбора ключевых слов;
- проанализировать семантику конкурентов, например, с помощью сервисов SpyWords или PR-CY.
В блоге есть пошаговая инструкция о том, как собирать семантику и писать SEO-тексты для сайта.
Если вы планируете многостраничный сайт, учтите, что на каждой из страниц должны быть свои ключевые слова. Если целевые запросы будут дублироваться, может произойти каннибализация ключевых слов — страницы начнут конкурировать друг с другом за одни и те же фразы.
Шаг 2. Продумайте структуру сайта
Розенфельд и Морвиль выделили 3 структуры сайта:
Иерархическая система
Она позволяет выделить важные части и разделить весь контент на более узкие категории. По мере продвижения вглубь пользователь будет погружаться в тему. Если вам нужен сайт-визитка или портфолио с небольшим числом страниц, такая система подойдет. Также эту систему часто реализуют в приложениях, например, для заказа еды. Для крупных проектов эффективнее будет выбрать один из следующих вариантов.
![Иерархическая архитектура сайта](https://img.reg.ru/news/blog_10102023_image3.png)
Последовательная система
В этой структуре лучше всего отслеживаются сценарии пользователя — она позволяет избежать большого количества выбора, чтобы не перегружать потенциальных клиентов. При этом весь контент логично разделен на смысловые блоки.
![Последовательная архитектура сайта](https://img.reg.ru/news/blog_10102023_image4.png)
Матричная система
Эта система через продуманную структуру ссылок позволяет пользователю передвигаться хаотично — то есть он сам выбирает предпочтительный путь.
![Матричная архитектура сайта](https://img.reg.ru/news/blog_10102023_image5.png)
Позже Брюс Клей выделил еще одну систему — Silo. Она напоминает последовательную, но дополнена некоторыми правилами.
Silo-структура
Основная идея метода в том, что главную страницу с любой другой соединяет минимальное количество кликов. Все страницы на сайте делятся на разделы по смыслу и семантике, далее — на тематические подразделы. Чем меньше кликов до цели, тем легче пользователям добраться до сути, а поисковым роботам — просканировать контент.
Такая структура подходит почти всем сайтам — она удобна и помогает улучшить пользовательский опыт.
![SILO-архитектура сайта](https://img.reg.ru/news/blog_10102023_image6.png)
После того как вы определились со структурой ресурса:
- обозначьте главные разделы — для интернет-магазина одежды это могут быть «Каталог», «Мужчинам», «Женщинам», «Детям», «Новинки», «О компании», «Доставка»;
- продумайте структуру подразделов — например, для раздела с женскими вещами это могут быть «Верхняя одежда», «Деним», «Платья и юбки», «Для офиса»;
- обращайте внимание на детали — в разделе с новинками сразу могут располагаться карточки товаров, подраздел в данном случае не понадобится, а вот в «Доставке» нужно указать условия или разместить калькулятор для подсчета;
- продумайте структуру URL.
Яндекс советует создавать информативные URL. Это поможет сформировать логичную иерархическую структуру адресов. Она показывает путь пользователя по сайту. Например, URL для этой статьи— https://www.reg.ru/blog/chto-takoe-informacionnaya-arhitektura-dlya-seo-i-kak-ee-sozdat/. По адресу видно, что человек находится на сайте Рег.ру, а именно — в блоге на странице конкретной статьи. Простые и понятные URL хорошо воспринимаются пользователями, а поисковые роботы смогут лучше понять тему страницы.
Обязательно визуализируйте архитектуру сайта. Это можно сделать с помощью специальных сервисов и интеллект-карт: Octopus.do, Xmind, MindMup, Miro.
![Пример архитектуры](https://img.reg.ru/news/blog_10102023_image7.png)
Шаг 3. Проработайте навигацию
Когда общая структура готова, можно переходить к отдельным ее частям. Например, навигации. Вот несколько составляющих грамотной навигации:
Хлебные крошки
Хлебные крошки — это цепочка страниц от главной до той, на которой в данный момент находится пользователь. С крошками легче и комфортнее ориентироваться по сайту: посетитель знает, куда зашел и как вернуться на шаг назад. Кроме того, крошки содержат внутренние ссылки, что положительно отражается на индексации.
![Хлебные крошки](https://img.reg.ru/news/blog_10102023_image8.png)
Поиск по сайту
Для крупных многостраничных проектов и интернет-магазинов с большим количеством товаров поиск по сайту необходим. Не обязательно включать в поиск все страницы сайта, достаточно сделать его только для товарных категорий и услуг — клиенты вряд ли станут искать информацию о компании или часы работы. Если у вас обширная база знаний, то отдельно стоит предусмотреть поиск и по статьям.
![Реализация поиска в Рег.ру](https://img.reg.ru/news/blog_10102023_image9.png)
Хедер и футер
Хедер — шапка сайта, меню вверху страницы, где обычно располагаются ссылки на важные разделы. На сайте ветеринарной клиники, например, это адреса медцентров, информация об услугах, медперсонале, акциях и кнопка записи на прием — всё, что может понадобиться пользователю в моменте.
![Хедер на сайте клиники](https://img.reg.ru/news/blog_10102023_image10.png)
Главная цель информации в хедере — помочь клиенту сориентироваться и показать, где быстро найти необходимую информацию.
Футер — нижняя часть сайта, ее еще называют подвалом. Здесь вы уже можете разместить все разделы сайта по категориям: информацию о компании, политику конфиденциальности, новости, блог, отзывы, форму подписки на рассылку.
Если пользователь пролистал вниз страницы, вероятно, он заинтересовался компанией, но не смог найти интересующую информацию или хочет узнать о фирме больше — и такую возможность надо предоставить.
Фильтры для товаров
Представьте, что вы выбираете мебель для дома и точно знаете ее габариты и цвет, который подойдет под интерьер. Прокручивать страницу в поиске подходящих дивана и стола можно бесконечно — проще ввести параметры и выбирать уже из релевантной выдачи. Для этого как раз и нужны фильтры — они помогают пользователю быстрее найти желаемое.
![Фильтр для товаров](https://img.reg.ru/news/blog_10102023_image11.png)
Карта сайта
Sitemap — практически путеводитель по сайту, список ссылок на все страницы ресурса с соблюдением иерархии. Он необходим для поисковых роботов, которые сканируют все страницы ресурса — карта показывает, какой контент есть на сайте и где его искать. Без файла Sitemap роботу понадобится немало времени, чтобы обойти весь ресурс, особенно если он содержит десятки и сотни страниц.
Сгенерировать карту можно с помощью специальных ресурсов, например, MySiteMapGenerator. Для этого нужно ввести в строку адрес сайта и нажать кнопку «Перейти к созданию». Генератор работает бесплатно с ресурсами до 500 страниц. На выходе вы получаете xml-файл, который добавляется в корень сайта. Остается только сообщить поисковикам, что вы создали карту, — вставьте ссылку на нее в Яндекс Вебмастере и Google Search Console в специальное поле для sitemap.
Сделайте перелинковку
Перелинковка — это связь одних страниц с другими с помощью ссылок. Перелинковку можно делать между страницами одной или разной иерархии, связать с ее помощью подразделы и статьи с товарами. Но эффективнее будет, если связанные страницы похожи по смыслу.
Кроме того, на более важных страницах нужно регулярно размещать ссылки на новые, недавно опубликованные. А в статьях, если вы ведете блог на сайте, ссылаться в новых материалах на старые.
О том, как правильно реализовать перелинковку, читайте в нашей статье про внутреннюю перелинковку и ссылочный вес (кстати, это тоже пример перелинковки 😉)
Подберите надежный хостинг
Даже продуманная архитектура не поможет органически продвинуть сайт, расположенный на ненадежном сервере — пользователи не вернуться, если страницы долго загружаются, а сам ресурс подвержен сбоям. Кроме того, если сервер часто «падает», не защищен от DDoS-атак, а у сайта отсутствует SSL-сертификат, он никогда не попадет в топ поисковой выдачи и не получит стабильный трафик. Новые страницы не смогут индексироваться, а старые перестанут отображаться в поиске.
В нашей Базе знаний есть материал, который поможет подобрать хостинг для любого проекта.
⌘⌘⌘
Невозможно создать удобный сайт без предварительной подготовки и базового понимания иерархии страниц. Понятная архитектура поможет сделать ресурс удобным для пользователей и поисковых роботов. А выбрать надежный хостинг для сайта можно в Рег.ру.