Рекомендации по структуре веб-сайта
Опубликовано: 2020-12-17Веб-сайты - это, по сути, информационные ресурсы, публикуемые для использования людьми. Как и книги, они могут быть маленькими или большими по объему. Но, в отличие от книг, содержание веб-сайта может быть структурировано самыми разными способами, с использованием свободы выражения и дизайна.
В то же время веб-сайты должны следовать лучшим отраслевым практикам UX, а также привычкам и ожиданиям пользователей, поэтому свобода весьма ограничена. Структура веб-сайта является ключевым фактором для доступа к информации и ее использования целевой аудиторией. Поэтому его нужно строить по большому количеству правил.
Почему важна структура веб-сайта?
Структура веб-сайта относится к тому, как он построен, как все отдельные подстраницы на нем связаны друг с другом и какая иерархия соблюдается. Хорошая структура сделает поиск информации интуитивно понятным и простым в использовании.
Когда дизайнеры создают структуру сайта, им необходимо подумать о том, как посетители будут использовать сайт и перемещаться по его содержимому. Акцент смещается с того, что публиковать, на то, как и почему .
Структура веб-сайта - это фундаментальная концепция с трех основных точек зрения: цели владельца бизнеса, опыт посетителей сайта, которым он выгоден, и поисковые системы, которые сканируют, ранжируют и предоставляют контент нужным пользователям.
Как работает хорошая структура веб-сайта
Когда информация на веб-сайте хорошо структурирована и поддерживается соответствующим дизайном, счастливы все - владелец сайта, пользователи и поисковые системы.
Вот как работает хорошая структура:
Поддерживает цели владельца бизнеса и повышает ожидаемые результаты
Когда вы инвестируете в веб-сайт, вы должны ставить четкие цели в отношении его эффективности. Эти цели должны быть интегрированы и выражены структурой сайта.
Например, если вы хотите сосредоточиться на блоге и опубликованных ресурсах, вам необходимо включить лучшие статьи на главную страницу и сделать разделы ресурсов заметными в меню. Вы также можете настроить домашнюю страницу так, чтобы она открывалась для последних сообщений в блогах - это типичный вариант WordPress, используемый цифровыми издателями и блоггерами.
Панель администратора WordPress, настройки чтения - выбор домашней страницы в качестве статической страницы и страницы блога
Улучшает пользовательский опыт
Структура веб-сайта во многом влияет на восприятие пользователем веб-сайта. Когда информация логически структурирована и все интуитивно доступно, пользователи легко перемещаются по контенту, чтобы найти и использовать то, что они ищут.
Повышает эффективность вашего SEO за счет оптимизации сканирования роботов
Поисковые системы (Google) работают с инструментами, которые сканируют контент сайта и сортируют его для пользователей. Веб-сайты, удобные для сканирования, имеют хорошую структуру и поэтому имеют более высокий рейтинг в поисковых системах.
XX Рекомендации по структуре веб-сайта
Без четкого видения того, как спланировать веб-сайт и построить его структуру, невозможно заниматься веб-дизайном и разработкой.
Следующие передовые практики включают описанные выше перспективы и преимущества при планировании веб-сайта.
Советы по дизайну веб-сайтов: как улучшить вашу игру в веб-дизайне
1. Установите бизнес-цели и целевую аудиторию
Ваш веб-сайт - это инструмент для обслуживания вашего бизнеса. Планирование того, какую информацию вы будете публиковать на нем и как часто вы будете обновлять ее, является фундаментальным для структуры веб-сайта. Вам нужно определиться, какие товары или услуги вы будете представлять и продавать на сайте.
В зависимости от ваших целей и задач коммуникации вы можете выбрать один из двух основных подходов:
- Дизайн, ориентированный на пользователя - вся информация разбита по категориям и структурирована по целевым группам пользователей. Такой подход является обязательным для крупных компаний, таких как телекоммуникационные компании или учреждения, обслуживающие миллионы людей, где пользователям необходимо найти свою категорию и информацию, адаптированную к их потребностям.
ATT.com открывается непосредственно в разделе «Личные», но есть и для малого бизнеса и предприятий; на этом изображении - выбран раздел Enterprise
Подробнее: Инфографика: как разрабатывать ориентированные на пользователя концепции WordPress
- Дизайн, ориентированный на компанию или продукт - эти веб-сайты созданы для представления самой компании-владельца и / или ее продуктов. Они также могут включать разделы и страницы, ориентированные на определенные группы пользователей, но бренд по-прежнему остается в центре внимания.
Структура сайта IMDB.com ориентирована на производство: фильмы, телешоу и знаменитости.
2. Проведите исследование конкурентов
При разработке веб-сайта есть несколько причин исследовать конкурентов. Один из них - проверить, как структурированы их сайты.
Когда в центре внимания структура сайта, вы можете исследовать макет домашней страницы ваших конкурентов, то, как они группируют и представляют свои услуги, какова иерархия внутренних страниц, как организована навигация и каков поток поведения пользователей.
С точки зрения SEO исследование конкурентов поможет вам выяснить, какие отраслевые ключевые слова использовать для названий и URL-адресов основных страниц вашего собственного сайта, категорий, разделов и навигации.
Как использовать исследования конкурентов для улучшения вашей маркетинговой стратегии
3. Проведите инвентаризацию всего вашего контента.
Чтобы иметь возможность структурировать свой контент, вам нужно сначала описать, что вы хотите опубликовать на сайте. Когда у вас есть все, остается только сгруппировать его по категориям и выбрать правильные ярлыки.
Если это новый веб-сайт, вы можете составить список того, что вам нужно опубликовать на нем. Не забудьте указать, кто будет отвечать за создание контента и как часто он будет создаваться и обновляться.
При редизайне сайта аудит вашего контента также является одним из самых первых шагов.
Как выполнить редизайн веб-сайта, ориентируясь на контент
4. Определитесь с типами сообщений.
Типы сообщений - это термин, используемый для обозначения различных типов контента сайта WordPress. Каждый тип сообщения обычно связан с разным дизайном страницы, настраиваемыми полями и функциями.
DevriX использует тип сообщения "Портфолио" для публикации тематических исследований для клиентов.
По умолчанию WordPress имеет два основных типа сообщений - Страницы и Сообщения, которые появились в то время, когда CMS была исключительно платформой для ведения блогов, где в блогах требовалось иметь несколько «статических» страниц для более постоянного контента и сообщения в блогах для новостей и обновлений.
Какой бы ни была цель вашего веб-сайта, вам нужно будет использовать эти два основных типа сообщений. Итак, после того, как вы собрали и описали весь контент, который хотите и который нужно опубликовать на своем сайте, разделите его на два типа:
- Для страниц - более постоянная, консервативная или вечнозеленая часть, где информация не будет регулярно меняться, например, что вы делаете, каковы ваши основные услуги и почему вы занимаетесь бизнесом, - большая часть из них не зависит от времени.
- Для сообщений - динамическая часть, такая как новости, сообщения в блогах, официальные документы, исследования и т. Д. Или любой контент, который включает текущую информацию и будет постоянно создаваться в будущем.
Вы можете обнаружить, что вам нужно больше типов сообщений, таких как портфолио, отзывы, проекты . Хорошей новостью является то, что существует несколько плагинов для создания пользовательских типов сообщений в WordPress, а некоторые темы включают в себя множество. Кроме того, в более поздних версиях WordPress включил регистрацию произвольных типов сообщений.
Когда вы завершите выбор типа публикации, который вам нужен, будет намного проще структурировать свой сайт, чтобы включить их.
Страницы WordPress против сообщений WordPress, здравый смысл и SEO
5. Создайте путь покупателя и варианты использования
Путь покупателя на веб-сайте - это процесс, через который проходят пользователи от первого посещения до момента покупки продукта или услуги на сайте. Структура веб-сайта должна быть основана на этом процессе покупки, чтобы пользователям было легче найти то, что им нужно, и перейти к следующему этапу.
Путь конверсии: определите путь пользователя на своем веб-сайте
Варианты использования - это фундаментальная концепция юзабилити. Они представляют собой письменные описания того, как посетители будут использовать ваш сайт. Чтобы описать каждый вариант использования, вы должны перечислить последовательность простых шагов, основанных на намерениях пользователя и заканчивающихся достижением цели.
При выборе структуры сайта вам необходимо записать варианты использования для всех ваших целевых групп. Это даст вам четкое представление о поведении пользователей на вашем сайте, чтобы его структура могла его поддерживать. Это лучший способ спланировать функциональность вашего сайта.
Веб-сайт MVP: все, что вам нужно знать + инфографика
6. Проведите первичное исследование ключевых слов.
После создания веб-сайта вы сможете добавлять на него столько контента, сколько захотите.
Но в процессе планирования сайта - или его редизайна - крайне важно, чтобы структура сайта была построена с использованием наиболее значимых и релевантных ключевых слов, по которым вы хотите ранжироваться.
Вы собираетесь называть свои услуги «Продукты» или «Решения»? Вам нужен раздел «Бренды» в вашем интернет-магазине?
Обязательно включайте самые популярные термины, относящиеся к тому, чем вы занимаетесь. Используйте слова и выражения, которые будут в основе вашей маркетинговой стратегии SEO в ближайшие годы.
Существует множество инструментов, как бесплатных, так и платных, а также руководств по проведению первичного исследования ключевых слов для веб-сайта. Соедините их с умом и начните с наиболее разумных решений.
Правильное исследование ключевых слов для SEO
7. Используйте таксономии
Таксономия - это система, используемая для классификации опубликованного контента. Это стратегия добавления ярлыков и описательных терминов к тому, что вы публикуете. Таксономии используются для группировки похожих типов контента и определения отношений и сходства между этими группами.
В WordPress к типам сообщений добавляются таксономии. Существуют категории , которые могут быть иерархическими, и теги , которые представляют собой отдельные метки. Они создают систему классификации для типов сообщений, которая упрощает пользователям поиск нужного контента.
Категории публикаций на сайте DevriX
Поисковые системы также используют таксономии, поскольку они помогают сортировать и ранжировать контент соответствующим образом. После того, как вы окончательно определили ключевые слова, по которым хотите ранжироваться, и типы сообщений, которые будут их использовать, вам нужно просто добавить выбранные ключевые слова в качестве таксономий - категорий и тегов.
В WordPress таксономии не являются обязательными. Но их можно добавить в меню сайта, поэтому они тесно связаны со структурой сайта. Например, в блоге DevriX есть подменю для статей, основанное на трех основных категориях: бизнес, маркетинг и развитие:
8. Создайте простую и логичную навигацию.
Структура веб-сайта визуализируется в его дизайне, прежде всего, с помощью меню. Приоритеты вашего бизнеса должны быть реализованы в структуре меню и содержать ваш лучший контент.
Страницы и категории, включенные в меню, могут иметь подчиненных или быть созданы равными, без иерархии. Количество ссылок на каждом уровне называется шириной меню, а количество уровней - глубиной меню.
Что касается широты и глубины меню, следует соблюдать несколько простых правил.
- Не используйте много горизонтальных категорий - выбирайте максимум 7-8;
- Не заходите слишком глубоко - подчиненность не должна опускаться более чем на 3 уровня
- Держите его симметричным и сбалансированным - если в одном разделе слишком много подстраниц, а в другом только пара, вся структура может быть неправильной.
Типичный бизнес-сайт должен использовать простую и предсказуемую навигацию, расположенную в стандартном месте. На веб-сайте WordPress некоторые темы допускают два или даже более местоположения меню с возможностью выбора разных страниц и ссылок для каждой из них. Рекомендуется добавить меню в нижний колонтитул сайта и держать навигацию на боковой панели отдельно.
Параметры меню редактирования WordPress могут включать в себя страницы, сообщения, другие типы сообщений, пользовательские ссылки, категории.
9. Определитесь со структурой URL веб-сайта и постоянными ссылками.
Структура URL-адресов в WordPress предопределена в настройках.
Когда вы правильно изучите ключевые слова, создадите таксономию и определитесь с иерархией меню, будет легко завершить работу с постоянными ссылками. Ваши самые важные ключевые слова и таксономии должны входить в URL-адреса, чтобы сделать их более эффективными для SEO.
Вот несколько хороших практик для структуры URL-адресов на веб-сайте WordPress:
- Используйте структуру постоянных ссылок, которая объединяет имя сообщения с доменом следующим образом: https://yourwebsite.com/ post-name
- По умолчанию WordPress создает постоянную ссылку для ваших страниц и сообщений, включая все слова из их заголовков. Однако они могут быть слишком длинными и содержать неважные слова, поэтому отредактируйте их.
- Чтобы ваши страницы были лучше ранжированы в Google, используйте постоянные ссылки длиной около 60 символов.
- По возможности создавайте более короткие URL-адреса, сохраняя наиболее важные ключевые слова из заголовка - это также помогает поисковым системам индексировать ваши страницы.
- Удалите все стоп-слова, такие как союзы и местоимения.
- Используйте дефисы для разделения слов в постоянных ссылках, чтобы помочь пользователям и поисковым системам понять, о чем страница.
Постоянные ссылки / структура URL-адресов в параметрах WordPress - тип имени сообщения обычно является наиболее предпочтительным, поскольку он включает ключевые слова
10. Добавьте карту сайта для веб-сайта.
Карта сайта вашего сайта - это файл, который включает в себя все страницы вашего сайта и опубликованные медиа и показывает, как они взаимосвязаны. Он служит Google и другим поисковым системам в качестве дорожной карты для вашего контента и помогает им сканировать и классифицировать его быстрее и разумнее.
Карта сайта не является обязательной, но настоятельно рекомендуется, особенно для сложных сайтов. Файл также необходимо автоматически сгенерировать и обновить.
Существует множество инструментов, которые помогут вам создать и добавить карту сайта на ваш сайт WordPress, включая плагины. Однако в последней версии WordPress 5.5. Карты сайта XML включены по умолчанию, и пользователи также могут их видеть.
Если у вас есть какие-либо сомнения относительно структуры вашего сайта и того, что видят поисковые системы и люди во время навигации по нему, проверьте свою карту сайта.
Карта сайта ATT.com - создается как внутренняя страница в соответствии с дизайном
Планирование иерархии вашего веб-сайта
После того, как вы выполнили все вышеперечисленные задачи, доработка структуры сайта будет простой и быстрой. Вот несколько общих типов структур сайта, которые следует учитывать при окончательном выборе:
Иерархический веб-сайт означает, что одни страницы подчинены другим, а структура напоминает дерево. На типичном веб-сайте главная страница находится вверху. Из него вы переходите к другим страницам в главном меню, которые могут иметь дополнительные страницы.
Неиерархическая структура веб-сайта означает отсутствие подчиненных страниц. Когда контента мало и всего несколько страниц, все они могут быть созданы одинаковыми и отображаться в главном меню по горизонтали.
Пример веб-сайта без иерархии - Nika Agency - хотя на этом сайте есть раздел портфолио, страницы проектов не являются подстраницами, например https://nika.agency/ apothe-pure-details .html
Одностраничные веб-сайты - еще один хороший пример структур без иерархии. Нет родительских / дочерних страниц просто потому, что все публикуется на одной странице. Одностраничный дизайн - хорошее решение для событийных и рекламных сайтов с коротким сроком службы, тизерных страниц или бизнеса, которому нужно очень краткое представление, подобное визитной карточке.
GlobeKit - это веб-сайт с одним сервисом, который позволяет разработчикам быстро размещать в сети анимированные и интерактивные глобусы. Он состоит из 6 разделов, все они расположены на главной странице с интерактивной анимированной навигацией (прокруткой).
Существуют менее популярные типы структур веб-сайтов, такие как Последовательная, Матричная и База данных. Как вы уже догадались по их именам
- Последовательная модель вовлекает пользователей в последовательность шагов
- Матрица позволяет пользователям самостоятельно выбирать способ навигации по контенту сайта
- База данных построена на базе данных и использует ее атрибуты для поиска и создания пользовательского опыта.
Последние мысли
Общая структура бизнес-сайта должна быть чистой, простой и логичной. Проектирование структуры - фундаментальный процесс в дизайне и разработке веб-сайтов. Следование упомянутым выше передовым методам поможет гарантировать, что вы примете во внимание все важные факторы, чтобы структура вашего сайта соответствовала вашим бизнес-целям и целевым группам.
Росси Вичева
Гость Автор