Структура сайта: полное руководство
![Из чего состоит сайт](https://static.wixstatic.com/media/72c0b2_4fc4819f9d1841248facdda31c484d78~mv2.jpg/v1/fill/w_584,h_334,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/72c0b2_4fc4819f9d1841248facdda31c484d78~mv2.jpg)
Хороший сайт похож на собранную мозаику: совершенно разные элементы в нем идеально соединяются друг с другом, образуя цельную и красивую картинку.
Перед тем, как создать собственную страницу, необходимо разобраться, как устроена структура сайта. В этом руководстве вы узнаете, из чего состоит сайт, а также познакомитесь с базовой терминологией веб-дизайна.
Структура сайта: базовые части
Все части в этом разделе необходимы для корректной работы сайта — поэтому убедитесь, что они присутствуют на каждой странице.
1. Хедер и меню Хедер (который еще называют «шапкой» сайта) — располагается в самом верху страницы над контентной частью. Он почти всегда включает в себя логотип и верхнее меню, которое помогает посетителям с навигацией по сайту.
От типа страницы зависит, что именно будет располагаться в хедере. Например, если вы планируете создать интернет магазин, логично поместить в хедер различные категории товаров — так посетитель быстрее найдет то, что ему нужно. Сайт благотворительной организации может поместить в хедер форму для пожертвований или ссылку на релевантную страницу, чтобы наверняка привлечь внимание читателя.
В любом случае, при одном взгляде на хедер посетителю должно быть понятно, куда идти и на что нажимать: так вы удержите внимание читателя и уменьшите показатель отказов.
2. Визуальная часть
Сразу после хедера обычно следует раздел с изображением, серией изображений или видео. Хедер и визуальную часть под ним обычно называют «обложкой» или «первым экраном». Обложка играет решающую роль в создании первого впечатления и зачастую определяет, останется ли посетитель на сайте или закроет страницу после пары секунд.
Помните, что визуальная часть должна быть напрямую связана с контентом сайта. Например, интернет магазин может разместить на обложке изображения продукции, а сайт портфолио — изображение фрилансера или его лучшие работы. Выбирайте изображения и видео в высоком разрешении — это придаст сайту профессиональный облик.
3. Контентная часть
Контентная часть следует сразу после обложки, и содержит более подробную информацию о владельце сайта, бизнесе или организации. Здесь вы можете поместить короткий текст о себе или о бренде, расписать философию компании, поместить небольшую галерею с товарами-бестселлерами или просто оставить кнопку с призывом к действию. Главное, чтобы после прочтения этой части у посетителя не оставалось вопросов, о чем именно ваш сайт.
4. Футер
Футер (еще называемый «подвалом») — это самая нижняя часть сайта. Обычно на ней дублируется меню с ссылками на все важные страницы, включая те ссылки, которые не представлены в хедере.
Кроме этого, в футер помещают адрес, номер мобильного телефона и другую контактную информацию. Эта часть особенно важна для владельцев бизнеса, которые хотят оставаться на связи с клиентами.
И наконец, в футере располагаются ссылки на социальные сети — списком или в виде миниатюрных иконок. Это помогает привлечь новых пользователей, сформировать клиентское сообщество и повысить узнаваемость бренда.
![основные части сайта](https://static.wixstatic.com/media/72c0b2_54ab513f8d1e4c57a14bcb6d6756c310~mv2.jpg/v1/fill/w_139,h_337,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_avif,quality_auto/72c0b2_54ab513f8d1e4c57a14bcb6d6756c310~mv2.jpg)
Структура сайта: дополнительные части
Как мы уже упомянули, обычная схема сайта включает в себя хедер, изображения, контентную часть и футер. Однако дополнительные части помогут вам добиться еще более удовлетворительных результатов — например, увеличить трафик или повысить узнаваемость бренда.
1. Логотип
Логотип — это важная часть идентичности бренда; он олицетворяет ваш бизнес и помогает выделиться на фоне конкурентов. Обычно лого помещают в верхний левый угол сайта и делают кликабельным — чтобы при нажатии на него посетитель возвращался на главную страницу. Чтобы создать логотип онлайн, не прибегая к услугам дизайнера, воспользуйтесь Wix Logo Maker.
![Как создать логотип онлайн](https://static.wixstatic.com/media/72c0b2_f3a055890ac847659208b24cf481f8fc~mv2.jpg/v1/fill/w_139,h_105,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_avif,quality_auto/72c0b2_f3a055890ac847659208b24cf481f8fc~mv2.jpg)
2. Призывы к действию
СTA (call-to-action)— это короткие тексты в повелительном наклонении, которые побуждают пользователя к покупке или другому действию, которое переводит его на следующий уровень маркетинговой воронки. Обычно CTA помещают на кнопки, которые ведут важные для конверсии страницы. Наличие кнопок с CTA повышает продажи и уменьшает показатель отказов.
![пример призыва к действию](https://static.wixstatic.com/media/72c0b2_58f091372c87429b8fdf7f48de86b0df~mv2.jpg/v1/fill/w_139,h_83,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_avif,quality_auto/72c0b2_58f091372c87429b8fdf7f48de86b0df~mv2.jpg)
3. Боковое меню
Боковое меню — еще один популярный элемент html структуры сайта, который обычно находится в правой части экрана и выдвигается по щелчку. Туда помещают важную информацию, которая не поместилась в основное меню: расширенную навигацию, форму подписки на рассылку, рекламные баннеры и другие элементы. Владельцы интернет магазинов могут поместить в боковое меню мини-галерею с выгодными предложениями — так пользователи увидят их еще до того, как познакомятся с основным контентом сайта.
4. Блог
Наличие блога — это дополнительная возможность привлечь на сайт новых посетителей. Самый наглядный тому пример — вы, прямо сейчас читающие статью в блоге Wix. У создания блога есть пара важных преимуществ. Во-первых, он поможет глубже рассказать о вас или о ваших продуктах и заработать авторитет в индустрии. Во-вторых, сайт с регулярно обновляемым блогом лучше индексируется поисковыми системами — а значит, ваш сайт будет чаще показываться в топ-10 запросов Google, Yandex и других сервисов.
![пример блога на сайте](https://static.wixstatic.com/media/72c0b2_ea749b8d97744127adcf39431f66c90a~mv2.jpg/v1/fill/w_139,h_99,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_avif,quality_auto/72c0b2_ea749b8d97744127adcf39431f66c90a~mv2.jpg)
5. Формы
Формы используют в различных целях: например, для более быстрой обратной связи с клиентами или чтобы собрать базу подписчиков для рассылки. Традиционно форму помещают в нижнюю часть сайта, или создают для нее отдельную страницу.
![](https://static.wixstatic.com/media/72c0b2_6d1d79aee8cf4f6888b435e5a7293707~mv2.jpg/v1/fill/w_139,h_185,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_avif,quality_auto/72c0b2_6d1d79aee8cf4f6888b435e5a7293707~mv2.jpg)
О чем еще важно помнить
1. Хостинг
Хостинг — это сервер или группа серверов, где хранятся все данные о сайте. Он необходим для нормального функционирования сайта — без хостинга посетители просто не смогут загрузить страницу. Пользователи, решившие создать сайт на WIx, получают хостинг автоматически — так что им не нужно платить за сторонние сервисы и волноваться о доступности страниц.
2. Доменное имя
Мы писали подробное руководство о том, как выбрать доменное имя — то есть, название вашего сайта в адресной строке. Если вкратце, хорошее доменное имя должно быть кратким, связанным с брендом и легким для ввода и произношения. Помните, что сайты с доменом первого уровня легче запомнить и найти в поисковых системах.
3. SEO
SEO — это процесс оптимизации контента, изображений, дизайна и структуры сайта, которое поможет страницам лучше индексироваться в Google, Yandex и других поисковых системах. Это, в свою очередь, выведет сайт на верхние строчки результатов по релевантным поисковым запросам. Чтобы начать, почитайте наш подробный гайд по SEO-оптимизации или воспользуйтесь бесплатным сервисом Wix SEO-Мастер.
![](https://static.wixstatic.com/media/72c0b2_3952297e0c2a4774ac169c879e245b81~mv2.png/v1/fill/w_60,h_60,al_c,q_85,blur_3,enc_avif,quality_auto/72c0b2_3952297e0c2a4774ac169c879e245b81~mv2.png)
Сергей Букринский
контент-менеджер Wix