Основная структура html-страницы

Основные рекомендации к структуре сайта

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

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

Ключевая рекомендация – логика вложенности. Посетитель сайта должен легко ориентироваться в вашем каталоге.

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

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

Основные требования можно выразить тезисно, взяв из официальной справки Яндекса:

1. Структура должна позволять легко ориентироваться на сайте;
2. Не используйте глубокую вложенность каталогов, пример: «site.ru/cat1/cat2/cat3/cat4/cat5/cat6/…», вы можете испытывать сложности с индексацией страниц уже после третьего уровня вложенности;
3. Старайтесь делать короткие URL адреса;
4. В URL адресах отражайте содержание каталога (используйте слова), например: «site.ru/noutbuki/igrovye/», только так, чтобы это не противоречило предыдущей рекомендации;
5. Ссылки на каталоги обязательно должны быть текстовыми;
6. Не используйте повторяющиеся токены в адресах каталогов, пример: site.ru/noutbuki/noutbuki/noutbuki/noutbuki/noutbuki/. Страницы с такими адресами могут хуже ранжироваться из-за спама в адресе.

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

С любой страницы пользователю должна быть доступна ссылка на главную страницу. Рекомендуем сделать логотип кликабельным.

Меню должно быть простым и отображать основные, наиболее популярные разделы сайта.

Данные рекомендации к структуре сайта можно отнести ко всем поисковым системам.

Требования к структуре сайта от Яндекса

Основная суть рекомендаций от Яндекса:

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

Требования от Google

Суть рекомендаций от Google:

«Навигация на сайте важна, поскольку она позволяет пользователям быстро найти то, что им нужно. Также структура навигации помогает поисковым системам понять, какой контент, по замыслу веб-мастера, наиболее важен…

Постарайтесь максимально упростить пользователям переход от общих тем к контенту, который им нужен…»

Конечно же в рекомендациях от Яндекса и Google есть технические моменты, связанные не только с удобством для пользователя, но и корректной обработкой структуры сайта со стороны поисковых роботов. Их тоже необходимо учитывать. С этой информацией вы можете подробнее ознакомиться в справочных материалах от самих поисковых систем.

Внешняя структура сайта

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

Давайте по порядку, рассмотрим базовое размещение элементов на сайте:

1. Голова, шапка, хедер все это названия верхней части сайта, блок в котором располагается эмблема, главное горизонтальное меню плюс добавочные элементы присущие данному сайту или его тематике (банеры, реклама, цветовая палитра, большое изображение).
2. Левый и правый сайдбар, может быть только один или оба, а может и вовсе не быть бокового меню, что редко встречается на практике. Главное предназначение этих блоков дать дополнительную информацию, направить посетителя вглубь сайта, заинтересовать слоганами и видео. Вкратце задержать посетителя как можно дольше на сайте.
3. Центральный блок, самый главный, это та информация или сервис, ради которого посетитель пришел на ваш сайт. Именно эта часть в первую очередь интересует пользователя. Контент должен быть легко читаем и заметен в первом экране, ну максимум во втором. Не нужно заставлять посетителя пролистывать все ниже и ниже в поисках того, что ему нужно сейчас же. В наше время люди разучились ждать, по этому с легкостью закроют ваш сайт и пойдут на другой.
4. Футер, подвал сайта, блок предназначен в первую очередь для размещения контактной информации (название компании, телефона, адрес). Так же активно используют подвал для добавления навигационного меню и других полезных ссылок.

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

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

Типовые проблемы структуры сайта

1. Дубли страниц на сайте.

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

Трудно определить, какая страница является основным документом, а какая возникла случайно. Особенно если внутренние и внешние ссылки ведут на разные дубли страниц.

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

Для борьбы с дублями можно использовать следующие инструменты: файл robots.txt и мета-тег «robots» для запрета индексации ненужных страниц, атрибут для указания основной страницы и 301-й редирект для перенаправления с дублей на основную страницу. Однако оптимальным решением является физическое блокирование появления дублей программными средствами.

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

2. Дубли title, description, keywords.

Title и description (название и описание страницы) должны быть уникальными для каждого документа. Мета-тег keywords должен быть уникальным, либо отсутствовать вовсе.

Для уникализации страниц пагинации можно добавлять к title и description номер страницы

Если страницы пагинации не имеют важного контента, то для них желательно в мета-теге «robots» прописать значение «noindex, follow» (не индексировать, но переходить по ссылкам)

3. Отсутствие title на страницах.

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

4. Меню на скриптах.

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

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

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

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

5. Слишком длинные УРЛы из-за высокой вложенности подкатегорий.

Чтобы этого избежать, следует минимизировать количество вложенных категорий и сократить их название в УРЛ. То есть, вместо полного транслита названия подкатегории использовать одно слово или несколько символов.

6. Битые ссылки.

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

7. Наличие на сайте страниц, никак не связанных с главной страницей.

Разделы или страницы, на которые нельзя попасть по ссылкам с главной всегда говорят о наличии серьезной проблемы с сайтом. Либо о взломе, либо о seo-разделе, который создан только для поисковых систем, а не для пользователей, либо о полном отсутствии логики у разработчика.

Описание структуры сайта пример: виды и особенности

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

Линейная структура сайта

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

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

Сфера применения сайтов с подобным размещением страниц весьма ограничена. 

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

Виды:

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

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

Древовидная структура сайта 

http://vistanews.ru/uploads/posts/2016-07/1469627212_1.gif » alt=»» width=»533″ height=»325″ />

Является самой оптимальной структурой, которую часто используют веб-мастера в своей работе.

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

Решетчатая структура (системы координат)

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

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

Легче будет воспринимать такой ресурс, если вы представите пример структуры сайта в виде схемы.

Смешанная структура (паутина)

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

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