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

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

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

Структура сайта: базовые части

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

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

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

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

2. Визуальная часть

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

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

3. Контентная часть

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

4. Футер

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

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

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

Структура сайта: дополнительные части

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

1. Логотип

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

2. Призывы к действию

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

3. Боковое меню

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

4. Блог

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

5. Формы

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

О чем еще важно помнить

1. Хостинг

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

2. Доменное имя

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

3. SEO

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

Сергей Букринский

контент-менеджер Wix