Строение сайта. Из чего состоит сайт

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

 

Иерархия и архитектура сайта

 

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

  1. Непонятно структурированный ресурс формирует негативный пользовательский опыт, что снижает количество возвратных посещений и увеличивает коэффициент отказов.
  2. Если пользователь не может быстро найти на сайте нужную информацию, это негативно сказывается на авторитете автора, отрицательно влияет на формирование бренда.
  3. Если клиент не может найти желаемый товар, покупок не будет, низкий коэффициент возврата инвестиций и слабые перспективы развития бизнеса.
  4. Если веб-страницы перепутаны, велика вероятность, что поисковый робот не сможет попасть на некоторые страницы и они не будут участвовать в поиске.
  5. Проблемы с поисковым продвижением.

 

Классической считается древовидная схема иерархии сайта:

– Главные тематические разделы – обычно не более пяти.

– Субразделы.

– Целевые или посадочные страницы.

 

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

 

Комплектация страниц сайт

  1. Главная или домашняя страница сайта.
  2. Новостной блог ресурса.
  3. Основные тематические разделы.
  4. Вложенные информационные страницы.
  5. Посадочные, целевые, продающие страницы.
  6. Служебные страницы: “О нас”, “Контакты”, “Партнерам”, “Пользовательское соглашение”, “Условия конфиденциальности”, HTML Карта сайта.
  7. Коммерческие страницы: “ Наши услуги”.
  8. Технические страницы и папки, недоступные для людей и служащие для обеспечения правильной работы сайта и настройки взаимоотношений с поисковыми роботами: Карта сайта XML, директория для хранения картинок и фотографий, директория медиаконтента, папка для скриптов и каскадных таблиц стилей.

 

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

 

Веб-страница

 

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

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

– Левая часть страницы. Важные навигационные элементы.

– Центральная часть страницы – основной контент.

 

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

 

Самый низ страницы называется подвал. Посетители редко туда попадают и поэтому в подвале размещаются ссылки различные служебные страницы и спецпредложения для партнеров и клиентов.

 

Что должно быть на веб-странице?

  1. Шапка сайта. Часто это тематическая картинка или фото, галерея или анимация.
  2. Логотип проекта. В левой части шапки. Логотип принято делать ссылкой на Главную.
  3. Слоган. Ниже шапки главная панель навигации. Обычно ссылки только на основные разделы.
  4. Под навигацией строка ссылок “хлебные крошки” как элемент юзабилити – чтобы клиент не заблудился на сайте.
  5. Название веб-страницы – Title. Заголовок статьи H1. Подзаголовки H2-H6. Тексты.
  6. Графический контент – фотографии, GIF-анимация, Flash-элементы.
  7. Видеоролики и аудиоподкасты.
  8. Рекламный контент: контекстные блоки и ссылки, баннеры, тизерная реклама.

 

Метатеги

 

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

 

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

Description – краткое описание содержания страницы. Этот тег поисковая система Google использует в качестве сниппета страницы в выдаче.

Keywords – ключевые слова, которыми оптимизирован контент на странице.

 

Статические и динамические сайты

 

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

 

Статический сайт – это просто набор файлов и папок, как в Моих Документах Windows. А динамический сайт состоит из контента, который хранится в базах данных и шаблона страницы. Динамический сайт конвертируется в HTML на сервере по запросу пользователя и только потом отправляется в браузер.

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

Поделитесь информацией с друзьями.

 

151 комментарий

Оставить комментарий
  1. В статье очень хорошо описана начинка.
    Доводилось делать сайт в начале 2000-ых. Ручками, в блокноте, на медленном интернете.
    Уже тогда были системы разработки сайтов: даже в ворде можно было верстать веб-страницы.
    У таких способов был один существенный минус: код страницы превращался в необъятную простыню. И действительно, написанный вручную код html хоть и делается много дольше, но несравнимо более компактен.
    С тех пор утекло много воды, выросли и скорости инета и мощность устройств. Но сам код написанный разными способами очень и очень отличается. И на этом фоне информация о структуре кода как-то уже забывается.

  2. Елена Романская

    Спасибо за поучительный курс, который я прохожу сейчас вместе с вами. Много нового.

  3. Адель, ваш базовый курс очень многое прояснил в сознании, стали понятны многие неизвестные понятия, а эта статья дополняет и систематизирует полученные знания!

  4. Отлично! Порядок на сайте и все довольны: и люди и машины! Забираю себе в закладки, спасибо Адель!

  5. Статья дополняет знания из курса, систематизирует их. Для меня она очень полезна и информативна.

  6. Спасибо за статью!

  7. Вася Алексеев

    Спасибо за отличную статью! Узнал для себя много интересного и познавательного.
    Продолжу путешествие по этому полезнейшему ресурсу!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *