Настольная книга веб-дизайнера. Практический курс по веб-дизайну и проектированию сайтов

– В идеале должны быть человеко-понятные URL (не ostrovok.ru/dee26ec1-b711-4979-9c43-4e2df1af14a2/?sid=ec48e5fd-fcaf-4ab0-9a70-be27797b832c, а ostrovok.ru/zakaz) .

– Делайте перелинковку (Линк – ссылка. Внешняя перелинковка – это размещение ссылок со страницы одного сайта на страницу другого. Внутренняя перелинковка – это расставление ссылок, которые ведут на другую страницу того же ресурса).

– Ссылайтесь на релевантные документы.

– Проверяйте корректность symlink-ов. Не должно быть цикличных страниц с большим количеством повторений, например web-revenue/sbor/sbor/sbor/sbor.

Symlink – символическая («мягкая») ссылка (также «симлинк», от англ. Symbolic link) – специальный файл в файловой системе, в котором вместо пользовательских данных содержится путь к файлу, открываемому при обращении к данной ссылке (файлу).

Целью ссылки может быть любой объект: например, другая ссылка, файл, каталог или даже несуществующий файл (в последнем случае при попытке открыть его должно выдаваться сообщение об отсутствии файла). Ссылка, указывающая на несуществующий файл, называется «висячей» или «битой».

При составлении структуры сайта надо учесть несколько важных факторов.

Уровень вложенности страниц на сайте

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

Настройка ЧПУ

Использование так называемых человекопонятных адресов страниц (ЧПУ) давно стало необходимой частью оптимизации. Еще десять лет назад для определения ресурсов в ходу были адреса веб-страниц, состоящие из наборов символов. Такие URL не несли полезной информации для пользователей, трудно запоминались и были неудобны для восприятия. ЧПУ – полная противоположность подобным URL. Теперь, опираясь только на адрес источника, можно определить, в какой раздел вы попали и чему будет посвящена статья. Например, ссылка https://вебакадемия.рф/coreldraw – ведёт на страницу курсов по программе CorelDRAW.

Удаление дублированного контента

Чтобы сделать грамотную структуру сайта, следует избегать дублированного контента, так как он приводит к пессимизации ресурса. Дублированный контент – это повтор контента (текста, фото, видео) на разных страницах сайта. Для этого необходимо отслеживать появление дублей с основных страниц и избегать ситуаций, способных повлиять на их возникновение.

4. Этапы планирования структуры сайта

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

Этап 1. Постановка задач

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

Этап 2. Создание списка разделов

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

Этап 3. Создание карты ресурса

Выбранные разделы группируются, составляя костяк будущей структуры сайта. Отдельно выводятся те страницы, которые не попадают в меню. Доступ к ним организуется с главной страницы. На этом этапе уже можно визуализировать всю схему структуры по выбранному типу, например, древовидную. См. рис.61.

Рис.61. Карта (структура) сайта

5. Программы для построения древовидной структуры сайта

Структуру можно построить практически в любой программе, например в MS Exel или MS Word, или даже нарисовать от руки на листке бумаги, но визуально это будет выглядеть непрофессионально, поэтому лучше воспользоваться специализированными программами.

Программы, помогающие создать структуру сайта:

XMind – программа для построения майнд карт, структур (есть как платная, так и бесплатная версия). Программа обладает достаточно широким функционалом, есть версии для Window, macOS, Linux.

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