Руководство по ведению сайта

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

Мы с радостью Вам в этом поможем.

Отдел технической поддержки:

  • 8-953-597-39-39
  • 8-902-957-59-88
  • 8-953-851-68-92
  • 8-908-202-01-99
  • 8-953-851-68-49

1. КАК ЗАЙТИ НА САЙТ ПОД ПРАВАМИ АДМИНИСТРАТОРА
2. ИЗМЕНИТЬ ДАННЫЕ УЖЕ ИМЕЮЩИЕСЯ НА САЙТЕ
2.1 Разместить/заменить документ
2.2 КАК РАЗМЕСТИТЬ ФОТОГРАФИИ
Создание новой галереи
Редактирование уже имеющейся галереи
2.3 КАК РАЗМЕСТИТЬ ВИДЕО
2.4 КАК РЕДАКТИРОВАТЬ УЖЕ ИМЕЮЩИЙСЯ ТЕКСТ
Редактирование простого текста
Редактирование таблиц
3. КАК ДОБАВИТЬ НОВОСТЬ
3.1 Если создали новость / страницу на сайте, а она не отображается в разделе новость / боковом меню
4. КАК ДОБАВИТЬ РАЗДЕЛ В БОКОВОЕ МЕНЮ


  1. КАК ЗАЙТИ НА САЙТ ПОД ПРАВАМИ АДМИНИСТРАТОРА

Логин и пароль от сайта направляется на электронный адрес учреждения.

После ввода данных Вы попадаете в «Консоль»
Далее в верхнем левом углу нажмите на «Домик» (перейти на сайт)

Так Вы перейдете на сайт с панелью инструментов

Поздравляем! Вы вошли на сайт как администратор.

  1. ИЗМЕНИТЬ ДАННЫЕ УЖЕ ИМЕЮЩИЕСЯ НА САЙТЕ

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

Откроется подраздел «Документы».
Теперь в панели инструментов нажимаем «Редактировать страницу/запись»


На экране появляется «Консоль».

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

Например если в Вашей организации нет платных услуг, то нужно прописать «Платных образовательных услуг не предоставляется».

Рекомендуем внимательно изучить Приказ № 831 “Об утверждении Требований к структуре официального сайта образовательной организации в информационно-телекоммуникационной сети “Интернет” и раздел сайта «Сведения об образовательной организации»

2.1 Разместить/заменить документ

Далее находим место, где должна располагаться новая информация.

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

Если нужно добавить новый документ, то выберите место, где он должен находиться и поставьте там курсор (Важно: курсор не двигать)

Для загрузки документа на сайт нажмите на кнопку «Добавить медиафайл» (кнопка расположена над панелью инструментов, где «Абзац», «Файл», «Изменить»)

Далее во вкладке «Загрузить файлы» нажмите «Выберите файл»
Обратите внимание:
• Документ должен быть не больше 20МБ;
• Его название не должно содержать символы, такие как : / № «» & % и так далее;
• Название документа не должно быть слишком длинным.

В открывшемся окне выберете документ, который нужно загрузить на сайт и нажмите «Открыть»


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

После нажмите на кнопку «Вставить в страницу/запись»

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

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

Если все верно, нажмите «Обновить».

Если, после загрузки, вы увидели в названии документа опечатку (или нужно прописать полное длинное название документа с символами), то нажмите кнопку «Добавить медиафайл». Далее выберите документ (уже загружен на сайт), название которого надо изменить, кликнув по нему мышкой. С правой стороны появятся «Параметры файла», там выберите раздел «Заголовок»

В данной графе можно поменять опечатку, прописать полное название документа.

Затем нажмите кнопку «Вставить в страницу/запись» (предыдущий файл с опечаткой нужно удалить, стерев название)


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


Теперь можно посмотреть, как информацию видят посетители сайта.

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

2.2 КАК РАЗМЕСТИТЬ ФОТОГРАФИИ

Фотографии размещаются в галерею.
В данном случае галерея — это настройки изображения (не путайте с разделом «Фотогалерея»)

2.2.1 Создание новой галереи

Внутри страницы «Редактирования», поставьте курсор, где необходимо вставить фотографии/картинки и нажмите кнопку «Добавить медиафайл»

Открывается «Библиотека файлов». Далее с левой стороны нажать кнопку «Создать галерею» – «Загрузить файл» – «Выберите файл»

Откроется окно поиска файлов на Вашем компьютере. Необходимо найти фотографии (картинки) в данном окошке.
Можно выделить сразу несколько фотографий и нажмите кнопку «Открыть»

Загруженные файлы (фотографии, картинки) всегда выделяются «Галочкой в верхнем правом углу»

Так же в низу, где написано «Выбрано 6 элементов» можно проверить сколько файлов загрузилось (слишком «тяжёлые», неправильного формата или с неправильным названием не загружаются)

Если все верно сделано, то нажмите кнопку «Создать новую галерею»

В разделе «Редактировать галерею» можно:

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

Далее в разделе «Настройки галереи» выставите:

  • Где «Ссылка» выбрать «Медиафайл» (Это ВАЖНО!)
  • «Колонки / столбцы» – от 1 до 5 в зависимости от количества фотографий (сколько фотографий будет в одной строке)
  • «Размер» – для 2 и более фото рекомендуем ставить «Миниатюру», для одного фото можно поставить «Средний» или «Полный».

По завершению всех настроек нажмите «Вставить галерею»

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

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


При нажатии на любую фотографию она будет увеличиваться до полного размера. Смотреть следующее фото можно нажав на стрелочку >
Закрыть просмотр фотографии можно нажав на крестик


Поздравляем! Вы успешно создали галерею!

2.2.2 Редактирование уже имеющейся галереи

Зайдите на страницу, где находятся фотографии, которую нужно дополнить или убрать фото.

Нажмите «Редактировать страницу/запись»

Далее кликните левой кнопкой мыши по любой фотографии. Все фотографии выделятся рамкой и появится «Карандаш» и «Крестик».

Нажмите на «Карандаш» – «Изменить»

Появится окно «Редактировать галерею»

В разделе «Редактировать галерею» можно:

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

Далее в разделе «Настройки галереи» выставите:

  • Где «Ссылка» выбираете «Медиафайл» (Это ВАЖНО!)
  • «Колонки / столбцы» – от 1 до 5 в зависимости от количества фотографий (сколько фотографий будет в одной строке)
  • «Размер» – для 2 и более фото рекомендуем ставить «Миниатюру»; для одного фото можно поставить «Средний» или «Полный».

Для того чтобы удалить фото из галереи, на ненужном фото нажмите «Крестик».

Для того чтобы добавить фото в галерею, нажмите «Добавить в галерею»

Появится окно «Библиотека файлов»

Если фото уже загружено на сайт, его надо найти во вкладке «Библиотека файлов»

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

Далее активируется кнопка в правом нижнем углу «Добавить в галерею»

Поздравляем! Вы успешно отредактировали галерею!

2.3 КАК РАЗМЕСТИТЬ ВИДЕО

Для более красивого оформления сайта, рекомендуем Вам загрузить видео в Одноклассники, ВКонтакте, Телеграм, РуТуб или в облачном хранилище.

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

2.4 КАК РЕДАКТИРОВАТЬ УЖЕ ИМЕЮЩИЙСЯ ТЕКСТ

Для изменения уже имеющегося текста на сайте, необходимо зайти на нужную страницу в режим «Редактирования». Далее ставите курсор на место, где будут изменения.

2.4.1 Редактирование простого текста

На рисунке ниже зеленой рамкой выделена панель инструментов для изменения текста. Принцип работы такой же, как в Word документе. Рекомендуем ставить выравнивание по ширине страницы.

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

По завершении редакции обязательно нажмите кнопку «Обновить»

2.4.2 Редактирование таблиц

Изменение таблиц (добавление/удаление таблица/строк/столбцов) происходит только во вкладке «Таблица»

По завершении редакции обязательно нажмите кнопку «Обновить»

Поздравляем! Вы успешно отредактировали таблицу!

  1. КАК ДОБАВИТЬ НОВОСТЬ

В верхней панели инструментов наведите мышкой на кнопку «Добавить», появится подменю, в нем выберите «Запись»

Далее появится новая запись. Пропишите название и заполните тело новости.

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

Далее в правой части экрана выставляем настройки новости.

Во вкладке «Опубликовать» можно изменить дату публикации на любую предыдущую «Опубликовать сразу- Изменить»

Во вкладке «Рубрики» можно выбрать, где будет отображаться данная запись (Новости, Страница педагогов и т.д.) для страницы педагогов вместо названия новости пропишите ФИО педагога, а в тело записи можно разместить методическую копилку, портфолио или иную информацию, необходимую для аттестации педагога.

Во вкладке «Изображение записи» можно установить картинку (заставку новости). Для педагогов можно установить фото педагога. Для «изображения записи» необходимо выбрать фотографии/картинки горизонтального формата.

После заполнения и проверки всех настроек нажмите «Опубликовать»

Поздравляем! Вы успешно добавили новость!

3.1. Если создали новость / страницу на сайте, а она не отображается в разделе новость / боковом меню. (потерялась)

Если это запись – новость

В боковом меню есть раздел «Карта сайта», зайдите туда.

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

Далее откройте нужную запись в режиме «Редактирования» и поставьте галочку во вкладке «Рубрика» справой стороны (см п.3)

Если это созданная страница и ее нужно вывести в боковое меню (см п.4)

  1. КАК ДОБАВИТЬ РАЗДЕЛ В БОКОВОЕ МЕНЮ

В верхней панели инструментов наведите мышкой на кнопку «Добавить», появится подменю, в нем выберите «Страницу»


Пропишите название будущей страницы и нажмите кнопку «Опубликовать».

После того, как прогрузится страница, с левой стороны в черном меню наведите на кнопку «Внешний вид» выберите пункт «Меню»

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

В разделе «Добавьте элементы меню» находим созданную страницу / запись / рубрику. Поставьте галочку напротив нужного и нажмите кнопку «Добавить в меню» (1 раз)

Вновь добавленный элемент появится в самом низу страницы.

Если устраивает его место расположение нажмите кнопку «Сохранить меню»

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

Обратите внимание, если новый элемент встанет для вышестоящего «Дочерним», то вышестоящий элемент не будет открываться, он станет заголовком.

Далее нажмите на «Домик» в верхнем левом меню страницы.

Поздравляем! Вы успешно добавили раздел в боковое меню!

Компания Lansite

Благодарим за сотрудничество!

Отдел технической поддержки:

  • 8-953-597-39-39
  • 8-902-957-59-88
  • 8-953-851-68-92
  • 8-908-202-01-99
  • 8-953-851-68-49

Сайт – это достаточно сложный механизм. Чтобы он развивался и приносил доход, необходимо работать с ним всё время. Ведение сайта – это очень многогранная и разносторонняя деятельность. Однако, несмотря на это, с этими задачами может справиться даже один человек. В этой статье рассмотрим, как вести свой сайт, что нужно для этого, какие навыки в себе придётся развивать и сложно ли это.

Сайт

Что значит вести свой сайт

Для того чтобы понимать, что такое ведение сайта, приведём ниже перечень того, что входит в этот процесс:

  • Ведение сайта – это в первую очередь наполнение его контентом. Именно контент продвигает в поисковиках, делает сайт нужным и интересным аудитории. Контент развивает сайт.
  • Ведение сайта – это обеспечение его безопасности. Это значит, что вебмастер должен не допускать попадания на сайт вирусов и других вредоносных элементов, которые плохо скажутся на развитии проекта.
  • Ведение сайта – это оперативная реакция на возникшие проблемы в работе и продвижении сайта.
  • Ведение сайта – это мониторинг новостей. Новостей о способах продвижения, обновлении алгоритмов поисковиков, новостей в нише, в которой создаётся сайт.

Разберём далее подробнее, что всё это значит.

Наполнение сайта контентом

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

  • Весь контент должен быть на одну тему, на которую выбрано создавать сайт. Изменение тематики по мере ведения сайта недопустимо.
  • Контент должен появляться на сайте регулярно. В первые месяцы жизни лучше публиковать часто – раз в сутки, или хотя бы 2-3 раза в неделю. Далее можно снизить темп и публиковать раз в 1-2 недели.
  • Контент должен быть полезным. То есть это должны быть не просто статьи для количества, лишь бы были, а контент, который реально решает задачи посетителей.
  • Контент должен быть уникальным. Копирование с чужих сайтов строго недопустимо и карается баном в поисковиках.

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

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

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

Обеспечение безопасности сайта

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

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

  • Выбирайте качественный хостинг. Это значит он должен быть не бесплатным, и не самым дешёвым. 2 500 – 3 000 рублей в год – это отличная цена хорошего хостинга.
  • Устанавливайте плагин защиты на сайт. Хватит одного самого простого, например, WPS Limit Login. Его одного будет достаточно.
  • На хостинге и на почте, привязанной к хостингу и сайту, включите двухфакторную авторизацию. Двухфакторная авторизация означает, что кроме пароля нужно будет сделать ещё какое-либо действие, чтобы войти, например, ввести код из СМС-сообщения, пришедшего на телефон.
  • Берегите также и свой компьютер, через который заходите в панель управления хостингом и сайт. На нём должен быть установлен антивирус с актуальным обновлением. Подойдёт встроенная в Windows система защиты. Но можно использовать и сторонний антивирус.
  • Не добавляйте на сайт плагины, темы и коды, которые были получены на не официальных, подозрительных источниках.
  • Придумывайте сложные пароли для панели управления хостингом, сайтом и почты, которая к ним привязана. Пароли должны представлять собой бессмысленный набор из большого количества символов, в большом и маленьком регистре, цифр и специальных символов.

О безопасности сайта почитайте также в этой статье.

Оперативное решение проблем

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

  • Используйте сервисы аптайма. Они проверяют периодически доступность сайта, и если он “падает”, сразу уведомляют об этом. Например, Uptime Robot. Когда получите уведомление о том, что сайт не работает, принимайте меры по его восстановлению.
  • Если сайт стал недоступен, не паникуйте. Ваша задача восстановить его работу как можно скорее. Иначе это плохо отразится на его продвижении. И в этой ситуации не нужно “нажимать на все кнопки и сразу”, а для начала напишите в поддержку хостинга. Если это проблема на их стороне, то вам надо просто подождать. Как правило, это исправляется в течение нескольких минут специалистами хостинга. Если окажется, что эта проблема на вашей стороне, то сделайте восстановление сайта из резервной копии на ту дату, когда сайт работал. Это тоже займёт несколько минут и сайт будет снова работать.
  • Ещё одна область, в которой требуется оперативная реакция вебмастера, чтобы вести сайт успешно, это уведомления из поисковых систем. Яндекс Вебмастер и Google Search Console уведомляют, если в процессе индексации возникли какие-то проблемы. Каждое такое уведомление требует внимание, но не каждое требует решения. Иногда поисковики просто предупреждают о потенциальной проблеме, а иногда проблема действительно есть и её надо как можно скорее исправить. Уведомления от поисковиков приходят на почту – на Яндекс и Gmail. Если вам тяжело контролировать сразу обе почты, то настройте пересылку с одной почты на другую, чтобы всё приходило в одну почту. Главное, чтобы вы вовремя получили уведомление о проблеме.

Мониторинг новостей

Чтобы вести, сайт вебмастеру нужно мониторить новости в двух областях.

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

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

Как вести свой сайт, что для этого нужно и что не нужно

Мы разобрались в том, как вести свой сайт. Давайте подытожим всё это, чтобы ответить на вопросы – что нужно, а что не нужно для ведения сайта.

Для ведения нужны следующие ресурсы:

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

Для ведения сайта не нужно следующее:

  • Не нужно быть компьютерным специалистом. Для ведения сайта достаточно уметь пользоваться компьютером на уровне среднего сотрудника офиса. И мощный компьютер для этого тоже не нужен. Подойдёт компьютер офисного уровня.
  • Не нужно быть программистом. Современные инструменты позволяют создавать и вести сайты, не написав ни одной строчки кода.
  • Для ведения сайта не нужно много денег. Единственный обязательно расход – это хостинг, который стоит до 3 000 рублей в год. Всё остальное, даже продвижение, делается бесплатно.
  • Для ведения сайта не обязательно регистрировать юридическое лицо, индивидуальное предпринимательство или становиться самозанятым. Это не обязательно даже тогда, когда сайт начнёт приносить доход. До определённого предела можно получать деньги без официальной регистрации.

Итак, вы решили быть последовательными и начать разработку сайта с самого важного и фундаментального этапа — со структуры (visual sitemap) и контента. Ок, значит, вы попали в правильное место, где мы собрали для вас инструкции и эффективные советы как это лучше всего сделать и с чего начать. Да пребудет с вами сила, так как такой фундаментальный гид за один присед вряд ли удастся осилить.

Пример структуры веб-сайта Octopus.do

Пример структуры веб-сайта (Блоки кликабельны)

Какие разделы включить? Что по поводу контента? Мы серьезно все продумали, потратили более месяца на исследования и собрали в этом гиде весь наш 18-летний опыт по созданию сайтов. Дочитав эту статью, вы обретете исчерпывающее представление о том, почему именно так должен быть структурирован сайт компании или продукта, мы также немного коснемся фундаментальных принципов SEO и планирования контента.

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

Начало

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

Кстати можно быстро и бесплатно визуализировать структуру почти любого веб-сайта c помощью инструмента visual sitemap generator, нужно просто ввести адрес сайта.

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

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

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

Звучит многообещающе? Тогда начинаем!

Основной совет

Навигация и футер

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

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

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

Максимизируйте CTR

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

Поэтому, разместив наиболее ценную информацию и элементы призыва к действию CTA (call-to-action) в эффективном первом поле экрана, вы увеличите показатель кликабельности (CTR — click-through rate) и завладеете вниманием посетителя. Речь идет буквально о 3-4 секундах, за которые посетитель сканирует экран и, не найдя быстро нужной информации, чаще всего сразу покидает страницу.

Призыв к действию (CTA)

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

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

Политика конфиденциальности GDPR

Если ваша целевая аудитория — это клиенты из стран ЕС, то обработка данных пользователей должна соответствовать правилам обработки персональных данных GDPR (General Data Protection Regulation), принятых в Европе.

Файлы cookies содержат персональные данные и могут использоваться для идентификации пользователей. И если вы собираете (например, установлена программа интернет-статистики вашего сайта) и обрабатываете эти данные, то не забудьте о всплывающей форме при первом визите, чтобы посетители могли дать свое согласие или отклонить cookies.

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

Структура

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

Вот эти страницы, из которых состоит грамотно сбалансированная структура сайта:

  • Главная
  • О нас
  • Продукты / Услуги
  • FAQ
  • Вакансии
  • Блог
  • Контакты
  • Ошибка 404
  • Правовая информация

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

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

  • Главная
  • О нас
  • Продукты / Услуги
  • Контакты
  • Правовая информация

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

Вы можете заранее выбрать организацию содержания каждой страницы из таких вот вайрфреймов (low-fidelity wireframes). Это очень удобно для вас и разработчиков.

Цель каждой страницы, включенной в структуру вашего сайта — преобразовывать посетителей в клиентов. Страницы образуют последовательности, постепенно подогревая интерес перемещающихся по ним посетителей, чтобы те в итоге очутились на странице вашего продукта или услуги. Все остальное является частью user flow (пользовательского потока).

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

Главная страница

Для чего создавать: зацепите внимание, произведите первое впечатление, оптимизируйте навигацию.

Содержание:

  • Hero image / Основной визуальный посыл
  • Продукт / Услуги
  • Ключевые преимущества
  • О нас
  • Вакансии
  • Отзывы (тематические исследования, рекомендации)
  • CTA

image
Пример главной страницы — iea.org

Может показаться, что главная страница является самой важной частью вашего сайта. Однако последние исследования показывают, что посетители проводят на ней не так уж и много времени. Среднее время сеанса составляет около 2 минут 17 секунд, при этом посещение главной страницы занимает около 7 секунд. Причина в том, что люди часто ищут сразу что-то более конкретное.

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

“Главная страница — это как лобби отеля. Хотя это и важная часть отеля, но это не то место, где ваши гости хотели бы остановиться. Они хотят попасть в свой номер.”

Hero image

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

Чтобы лучше понять какой посыл должно нести это изображение, ознакомьтесь с концепцией JTBD (jobs-to-be-done), краткий смысл которой состоит в том, что у клиента на данный момент есть конкретная задача / проблема, которую надо выполнить, и он ищет лучшее решение (продукт), который поможет ему в этом. Ваша же цель — дать ему понять, что ваш продукт решает эту задачу.

Ваши продукты / услуги

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

Обозначьте характеристики и преимущества продукта

Как сказал Саймон Синек в своей знаменитой речи — люди покупают не то, ЧТО вы делаете, они покупают то, ПОЧЕМУ вы делаете это.

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

Социальное влияние

Люди склонны прислушиваться и доверять своему окружению. Еще один прекрасный способ быстро внедрить и распространить информацию — это добавить отзывы о вашей компании или продуктах. Сосредоточьтесь на вашей целевой аудитории и добавьте соответствующие отзывы. Чем более известен и публичен автор отзыва, тем лучше. Не беспокойтесь, если вы еще не засветились на TechCrunch или Forbes; ваши посетители должны быстро установить положительный эмоциональный контакт с рецензентами, вот что важно на данный момент.

О нас

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

Содержание:

  • История / timeline
  • Цели и миссия компании
  • Отзывы
  • Команда
  • Партнеры
  • Видео
  • Статистика
  • Интересные факты

image
Пример страницы О компании — hines.com/about

Противоречиво, но главная страница существует не для того, чтобы проводить на ней много времени, аналогично и с разделом “О нас”. На самом деле он не совсем о вашей компании.

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

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

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

История компании

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

Ваши основные принципы

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

И снова отзывы

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

Вы также можете добавить агрегированные отзывы клиентов, достижения, бейджи и награды. Рассмотрите возможность размещения профиля вашей компании на различных информационных площадках (online listings). Это позволит получить два основных преимущества. Первое — качественные бэклинки на ваш сайт крайне привлекательны для SEO. Второе — если вы вкладываете ресурсы в сбор отзывов клиентов на таких платформах, то они, как правило, включают вас в рассылки и дают бейджи. А это — более широкий охват аудитории и повышение узнаваемости бренда.

Люди за кулисами

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

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

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

Партнеры

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

Запишите видео

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

Статистика и интересные факты

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

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

Продукты / услуги

Зачем создавать: продемонстрируйте свои продукты детально и обрисуйте в общих чертах их ценности.

Содержание:

  • Изображения
  • Описание
  • Особенности и преимущества
  • Цены
  • Отзывы / рекомендации
  • Контактная форма
  • FAQ

image
Пример страницы Услуги/Продукты — stripe.com/payments

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

Вместе или раздельно

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

Визуальный язык

Изображения продуктов имеют огромное значение и лучше всего выполняют свои функции контекстные образы.

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

Описание продукта

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

Особенности и преимущества (ценность)

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

Цены

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

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

Наличие отдельной ценовой страницы (продукты / услуги) хорошо для вашего SEO: больше страниц в вашем индексе, больше ключевых слов для ранжирования в содержании страницы. Еще одним преимуществом отдельного расположения цен является возможность точной настройки пути вашего клиента, особенно в воронках B2B. Но общее правило — лучше сразу экономить ресурсы и указывать цены на своей домашней странице.

Если вы хотите заручиться доверием ваших будущих клиентов, то не забудьте проинформировать их о безопасной обработке платежей, о ваших правилах возврата, отмены и обмена. Другим хорошим способом налаживания доверительных отношений является наличие пробного периода (trial).

Актуальность обратной связи

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

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

Будьте на связи

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

Как только вы наберете обороты, подумайте о внедрении комплексных платформ управления клиентами, таких как Intercom или HelpScout, с их функциями для чата и интерактивной средой связи с клиентами.

Подготовьте ответы на вопросы заранее

Еще один способ улучшить взаимодействие с пользователем на странице вашего продукта или услуг — включить раздел FAQ. Сосредоточьтесь на часто задаваемых вопросах в ваших входящих сообщениях и на семантике SEO.

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

Навигация

Страница продукта может служить Pillar страницей — быть хабом, аккумулирующим ценный органический трафик. И уже к ней линкуются релевантные кластерные страницы (Cluster pages). Помимо улучшения SEO, использование модели Pillar-Cluster значительно упорядочивает пользовательский поток на вашем сайте.

FAQ

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

  • Вопросы и ответы
  • Поиск
  • Живой чат

image

Пример страницы Помощь / FAQ — help.dropbox.com

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

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

Разделение по темам

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

Поиск

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

Отвечайте на вопросы напрямую

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

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

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

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

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

Вакансии

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

Содержание:

  • Преимущества работы у нас
  • Вакансии
  • Фильтры
  • Форма заявки
  • Медиа, связанные с ваше корпоративной культурой, мероприятиями, рабочей средой и т.д.

image
Пример страницы Вакансии — spotifyjobs.com

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

Чем вы лучше остальных?

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

Кого конкретно вы ищете?

Ключевой раздел вашей страницы «Карьера» — это вакансии. Как и FAQ, этот раздел нуждается в классификации. Сегментируйте свои вакансии по уровню профессионализма, или отделу. Если у вас много вакансий одновременно, рассмотрите возможность добавления фильтра или поля поиска.

Отдельная страница для каждой вакансии

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

Аргументируйте

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

Блог

Зачем создавать: делиться своими знаниями и опытом, исследованиями и идеями, получать мощную поддержку SEO.
Содержание:

  • Контент, который создает ценность
  • Привлекательные изображения
  • Видео
  • Комментарии
  • CTA
  • Ссылки на профили в соцсетях

image

Пример страницы Блог — goodonyou.eco/category/stories

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

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

“Напрасно ты приобрел знания, если не передал их другим”
Дварим Рабба (комментарий к Книге Второзаконие)

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

Мы уже упоминали про рейтинг по релевантным ключевым словам. Для этого убедитесь, что ваши тексты имеют относительно большой объем, не менее 250 слов. Для лонгридов — от 800 слов. Осторожно придерживайтесь SEO оптимизации текстов.

Добавив блог, вы естественным образом получаете еще одно преимущество: увеличение продолжительности сеансов пользователей, которое поднимает вас в поисковой выдаче. Чем более интересны ваши посты и записи, тем больше времени посетители будут тратить на их чтение и, кстати, не переписывайте (rewrite) чужие блоги, это неэффективно.

Далее уже конвертируете время, которое посетители проводят за чтением вашего блога, в достижение своих целей — добавляете CTA блоки, попап-окна с предложением подписаться на рассылку (но в меру и элегантно), ссылки на другие статьи и т.д.

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

Заманите читателя

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

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

С точки зрения Pillar модели это позволит URL-адресам, таким как «https://yoursite.com/blog/#seo», выступать в качестве идеальных хабов для накопления органического трафика со смежных кластерных страниц. Роботы идентифицируют страницы как смежные, если они правильно сшиты.

Упорядочьте содержимое

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

Изображения и видео

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

Позвольте аудитории высказаться

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

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

Кнопки навигации

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

Расшарьте контент

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

Страница новостей

Что у нас по новостям? Похоже, что на сайтах компаний менее 1% посетителей считают новости стоящими своего времени. Кроме того, корпоративные новости часто воспринимаются как слишком субъективные и самовосхваляющие. Изучите поведенческие паттерны групп пользователей; возможно, вы обнаружите, что тот небольшой процент посетителей, интересующихся вашими новостями — это те, кто конвертируются лучше остальных.

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

Контактная информация / связаться с нами

Зачем создавать: позволить посетителям оперативно связаться с вашей компанией и улучшить SEO.

Содержание:

  • Номера телефонов, e-mail (для разных целей)
  • Форма обратной связи
  • Карта

image

Пример страницы Контакты — rndhouse.com/contact

Хотя страница контактной информации является одной из базовых страниц для любого веб-сайта, она также является одной из самых важных.

К примеру, поисковые системы анализируют вашу карту сайта и оценивают вас выше, если они находят эту страницу.

Категоризация

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

Создайте форму

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

Местоположение

Еще одна полезная функция для страницы контактов — отображение местоположения вашего офиса на карте. Просто адрес уже никому неинтересен. Некоторые компании выходят за рамки стандартной Google Maps или Яндекс Карты и превращают свою карту в нечто уникальное.

Ошибка 404

Зачем создавать: Информирование пользователей об ошибках и перенаправление их на другие страницы.

Содержание:

  • Изображения / видео / интерактивные элементы
  • Сообщение об ошибке
  • Ссылки на другие страницы сайта

image
Пример страницы Ошибка — netflix.com/notfound

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

Ключевые моменты

Прежде всего, разместите ссылки на другие страницы. Как минимум должна быть ссылка на главную страницу.

Плохо, если ваша страница с ошибкой по сути является тупиком, такой вариант не понравится ни вашим посетителям, ни SEO. Можно и нужно перенаправлять трафик со страницы ошибки в правильное место.

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

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

Правовая информация

Зачем создавать: расскажите о своем соответствии требованиям законодательства.Содержание:

  • Политика конфиденциальности
  • Уведомления об авторских правах
  • Правила и условия пользования
  • Дисклеймер
  • Злоупотребление или жалобы контактная информация
  • Патенты
  • Корпоративная политика

image

Пример страницы Privacy Policy — samuelsre.com/privacy-policy

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

Убедитесь, что документация изложена безошибочно и проверена вашими юристами, а также:

  1. Содержит всю необходимую информацию, разбитую на пронумерованные абзацы
  2. Написана в понятной для большинства людей форме
  3. Соответствует общему дизайну сайта

Заключение

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

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

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

Что касается нас, авторов этого руководства, то мы занимаемся этим уже 18 лет. И весь свой опыт постарались аккумулировать (помимо этого гайда) в мощном и одновременно простом инструменте Octopus.do, с помощью которого вы сможете бесплатно создать структуру веб-сайта, планировать контент и делиться этим с кем угодно. Регистрация необязательна.

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

Никита Обухов

Создать хороший сайт — это проблема. Поэтому мы написали руководство, которое поможет сделать сайт без большой команды, в разумные сроки и за небольшие деньги. Все наработки, полученные за 15 лет работы в веб-дизайне, мы разложили по полочкам, сжали и рассказали как их применить, используя Tilda Publishing — платформу, которая помогает делать классные сайты. Читайте, следуйте, делайте и у вас обязательно все получится.

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

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

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

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

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

Пример

Разработка лендинга для школы дизайна. Страница должна объяснить будущим студентам и их родителям кто такой дизайнер.

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

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

Идея: Что если выделить несколько основных направлений дизайна: интерактивный дизайн, графический, промышленный и взять интервью у трёх самых крутых представителей? Личные истории очень эмоциональны и хорошо работают. Рассказать чем они живут, как добились успеха, добавить классные фотографии. Людям будет интересно прочитать, они для себя увидят, что это за человек, близок он, вдохновляет ли его образ жизни.

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

Нюанс: не пишите главную страницу как начало «дерева». Пусть страница «контакты» будет иметь тот же уровень, что и «главная». Это поможет, когда вы будете делать навигацию.

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

Исследование

Сайты конкурентов. Кросс-категории. Вдохновляющие примеры.

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

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

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

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

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

Ниже ссылки на ресурсы, где собраны хорошие образцы.

Эскиз сайта или прототип

Что такое прототип. Примеры прототипов. Как рисовать прототип, типовые элементы.

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

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

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

Думайте так, как будто вы делаете презентацию, мыслите экранами. Что вы хотели сказать? Вероятно, сначала надо показать какую-то крутую штуку, которая всех просто впечатлит и даст понять, куда человек попал, дальше рассказываете коротко о себе, потом — три преимущества, команда, несколько самых классных работ и контакты. Теперь вам просто нужно нарисовать всё, как оно должно быть.

Примеры того, как выглядят нарисованные прототипы

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

Совет: не рисуйте прототип слишком большим. Например, на листе А4 ширина окна должна быть 5−6 см. Лучше рисовать компактно и схематично, а на полях написать комментарии.

Старайтесь рисовать аккуратно — будет легче воспринимать. Обычно идей много, поэтому сделайте несколько вариантов и потом обсудить с коллегами, какой лучше.

Обложка. Линия потолще — заголовок. Тонкие линие — краткое описание. Короткие полоски сверху — меню

Изображения обозначаются перечеркнутыми прямоугольниками. Текст — прямыми линиями

Если картинка будет во весь экран, то так и нарисуйте — от края до края

Текст в колонках. Жирные линии — подзаголовки

Галерея изображений — перечеркнутый прямоугольник и управляющие элементы

Видео традиционно обозначаем треугольником

Ключевые особенности — схематичное изображение иконок и текст в колонках

Отзыв — фотография и текст

Кнопки и формы изображаются примерно так, как они и выглядят

Содержание

Где взять информацию для сайта. Как написать текст для сайта: ключевые пункты. Стиль текста.

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

Прежде всего, ответьте на вопрос: «Почему я хороший?»

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

Расшифруйте запись сами или наймите исполнителя. Стоит это около 20 рублей за минуту, найти человека можно на youdo.com За небольшую дополнительную плату, текст отредактируют и у вас, наконец, появится буква.

Все тексты пишите в текстовом редакторе, а не на сайте. Не занимайтесь написанием текста во время дизайна страницы или сайта. В текстовом редакторе намного быстрее редактировать: что-то вырезать, скопировать, переместить. Делать дизайн намного легче, когда текст готов.

Как написать текст для сайта

Если вы пишете текст самостоятельно, воспользуйтесь следующей схемой:

  • Напишите короткий текст о себе, своей компании. Это должна быть одна фраза, которая четко и ёмко формулирует, чем вы занимаетесь. Например, Тильда — сервис, который помогает создать впечатляющий сайт без технических навыков.
  • Напишите чуть более развёрнутый текст. Объясните, чем вы занимаетесь. Пишите просто — так, как если бы вы рассказывали это приятелю за чашкой кофе — максимально понятным языком.
  • Выделите три основных фишки — почему любят вас или ваш продукт.
  • Опишите преимущества. Расскажите с помощью чего ваш продукт решает проблему клиента, дайте детали.
  • Подумайте о заголовках. Хороший прием — формальные заголовки, типа «Команда», «Контакты» и т. д. поменять на эмоциональные. Например, вместо «Новости» написать «Будь в курсе», вместо «Контакты» — «Скажите привет».
  • Возьмите отзывы. Попросите ваших самых лояльных клиентов сказать пару слов о вас. Отлично работает.

Не пишите избитые фразы, типа: «молодая, динамичная, развивающаяся команда.»

  • Придумайте три ключевых цифры, люди любят цифры. Но старайтесь, чтобы они были осмысленными, понятными и что-то сообщали пользователю. Избегайте абстрактных величин, типа: обслужили 1000 клиентов, выпили 200 литров кофе, продали 38 000 плюшевых медведей. Хороший пример: 7,5 — средний балл IELTS среди наших выпускников. 3 минуты — копируется фильм с одного устройства на другое при помощи приложения.
  • Покажите команду, если она сильная. Личность всегда интересна, реальным людям доверяют больше, чем абстрактной компании.
  • Расскажите о партнерах или заказчиках, если ими можно гордиться.
  • Укажите специализацию. Если в вашем баре большой выбор крафтового пива, отметьте это отдельно.

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

Смело убирайте вводные конструкции, избегайте клише и канцеляризмов. Готовый текст проверьте с помощью сервиса glvrd.ru — он помогает очистить текст от словесного мусора, проверяет на соответствие информационному стилю.

Общий совет: если вы совсем не умеете писать, наймите копирайтера. Это стоит относительно недорого. Уже он будет брать у вас интервью и предоставит вам текст. Только не забудьте попросить сразу сократить его в три раза.

Дизайн

Раздел «Создано на Тильде». Выбор и адаптация шаблона. Навигация на сайте. Где взять хорошие фотографии для сайта. Что делать с логотипом. Сторонние сервисы и специальные функции. Подбор шрифта и шрифтовых пар. Как сделать сайт стильным. Публикация сайта. Тестирование.

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

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

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

Видеогид по основным функциям: базовые функции редактирования, настройки блока

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

www.arenaslab.com. Пунктов меню должно быть не более пяти

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

Где взять хорошие изображения

Фотографии — это важно, без них ничего не получится. Нет фотографий — считайте, что нет сайта. Не используйте клипартные фотографии. Рукопожатия бизнесменов и улыбающиеся домохозяйки — вчерашний день, такие фото не работают. Лучше сфотографируйте себя и своих коллег, чем искать готовые картинки по запросу «успешный предприниматель».

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

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

Библиотека иконок в настройках контента в Тильде

Логотип. Логотип должен быть горизонтальным. Вертикальные логотипы в вебе работают плохо. Как правило, логотип располагается в меню, а оно не должно занимать много места на экране. Если логотипа у вас нет, то просто напишите название проекта каким-то не системным шрифтом, типа Proxima или Futura.

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

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

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

Самое верное — взять разные гарнитуры из одного семейства, например PT sans и PT serif

Традиционное сочетание: шрифт без засечек для заголовков и с засечками для текста. Proxima Nova и PT serif

Иногда, в качестве приема, шрифт с засечками используют для заголовков. Georgia и Roboto

Общий стиль и аккуратность

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

wharf.co. Убедитесь, что на странице достаточно «воздуха» — вокруг текста и картинок есть пространство, они не слипаются и не мешают друг другу

time.gordasevich.ru. Если используете дополнительные цвета, делайте это очень аккуратно

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

Старайтесь быть аскетичным. Чем проще вы сделаете, тем меньше будет ошибок и сайт получится стильным.

Используйте фирменные цвета. Но это не значит, что нужно покрасить все в разные цвета. Наоборот, соблюдайте правило, что 90% — это черный и белый и10% какого-то активного цвета. Один дополнительный цвет — лучший вариант. Три использовать нельзя. Два очень аккуратно.

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

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

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

Не забудьте про статистику. Зарегистрируйтесь на Google Analytics или Яндекс Метрика, получите код и пропишите его в настройках.

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

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

Сайт, о котором вы мечтали, начинается прямо здесь

Если материал вам понравился, поставьте лайк — это помогает другим узнать о нем и других статьях Tilda Education и поддерживает наш проект. Спасибо!

Интернет-маркетинг с нуля

Курс, который научит вас продвигать свой сайт

Создание Landing Page

Бесплатный онлайн курс, который научит создавать эффективные посадочные страницы

Дизайн в цифровой среде

Теоретический курс Никиты Обухова по веб-дизайну

Советы

Как создать сайт. Подробная инструкция

От подготовки до полноценного запуска

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

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

Шаг 1

Определяем цель

Любой проект, особенно такой масштабный, как создание сайта, следует начинать с вопроса: «А зачем мне это делать?» Ответ важен по двум причинам:

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

Определитесь, какой сайт вам нужен:

  • Портфолио. Сайт или страничка с выполненными проектами, чтобы показывать свой опыт будущим работодателям или заказчикам.
  • Личный сайт (сайт-визитка). Создается для продвижения личного бренда и профессиональных услуг (сайты копирайтеров, психологов, юристов).
  • Блог (личный или корпоративный). В основном состоит из страниц со статьями.
  • Корпоративный сайт. Представительство компании в интернете. Там есть информация о том, чем компания занимается, где находится, как с ней связаться. Такие сайты могут генерировать заявки, но это не единственная их функция.
  • Лендинг. Одностраничник, главная цель которого — побудить посетителя совершить определенное действие (купить или оставить контакты, чтобы получить  дополнительную информацию).
  • Интернет-магазин. Сайт, который в основном состоит из карточек товаров. В интернет-магазине есть корзина и личный кабинет. Есть интеграции с системами оплаты и доставки. В общем, есть все возможности, чтобы клиент купил товар онлайн.

Личный сайт психолога. Главный экран.

Личный сайт психолога. На первом плане — фотография специалиста

Пример корпоративного сайта ИТ-компании

Корпоративный сайт ИТ-компании. Акцент на опыт.

Пример лендинга по программе онлайн-обучения

Лендинг обычно посвящен отдельному продукту

Шаг 2

Изучаем сайты конкурентов

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

Когда определите цели, проанализируйте сайты конкурентов. Изучите все сайты, которые близки к вашему проекту. Например, если хотите открыть ветклинику, вбейте в поисковике (желательно использовать и Яндекс, и Google, чтобы получить более цельную картину) «ветеринарная клиника» и начинайте просматривать результаты.

Обратите внимание на структуру каждого сайта — многостраничник это или лендинг. Оцените трафик (поможет сервис SimilarWeb) и функционал. Отметьте, есть ли интересные находки.

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

Пример таблицы для анализа конкурентов

Выберите 2-3 сайта, которые вам понравились больше всего, — на них и будете опираться при подготовке структуры, написании текстов и создании своего сайта.

Шаг 3

Проводим SEO-анализ и составляем семантическое ядро 

SEO (Search Engine Optimization) — это поисковая оптимизация сайта, которая помогает ему забраться на более высокие позиции в поиске по важным для вас запросам. А чем выше сайт, тем больше шансов, что люди на него перейдут.

Топ-3

Топ-3 по запросу «купить шторы». Эти ребята оказались здесь не случайно. Такие высокие позиции означают, что они много внимания уделили SEO

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

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

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

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

Если SEO для вас темный лес и вы не хотите в нем разбираться, найдите хорошего SEO-специалиста. Он проведет анализ и подготовит семантическое ядро, которое вы сможете использовать при подготовке структуры (о чем обязательно стоит написать на сайте) и при написании текстов (какие ключевые слова использовать, чтобы охватить нужные коммерческие и информационные запросы).

Где искать специалистов для проекта

Есть два основных пути, как искать людей для решения задач по сайту:

  1. Через знакомых.
  2. На специальных сайтах.

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

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

Поэтому если уж ищите специалистов на стороне, постарайтесь снизить риск неудачи:

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

Посмотрите портфолио. Хорошо, если у человека есть успешные проекты, которые близки к вашей тематике.

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

Хороший специалист Плохой специалист
Отталкивается не от задания, а от задачи. Со всем соглашается, делает, как скажут.
Предлагает лучшие варианты решений. Концентрируется на процессе, а не на результате.
Не делает то, что вредит результату. Ждет готовых решений от клиента.

Самые популярные биржи для поиска специалистов онлайн:

  • Weblancer.net;
  • Freelance.ru;
  • Freelancehunt.com;
  • Workspace.ru;
  • FL.ru.

Шаг 4

Покупаем домен

Домен — это имя и одновременно адрес сайта в интернете. Например, unisender.com.

Обычно в качестве домена выбирают название компании или бренда, свою фамилию (если это личный сайт) или слова, которые описывают сферу деятельности (окна.рф).

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

Имя сайта также включает доменную зону (домен верхнего уровня):

  • национальную (.ru, .рф, .ua);
  • международную (.com, .org, .net);
  • тематическую (.fitness, .business, .style).

Удобнее всего использовать национальный домен  (.ru для России, .ua для Украины), если вы предлагаете свои продукты жителям одной страны. Однако сайтов много и популярные слова почти наверняка заняты. При таком раскладе попробуйте выбрать одну из тематических зон (там конкуренция меньше) или проверьте другие варианты имени.

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

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

  • reg.ru;
  • nic.ru.

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

Стоимость доменов варьируется от 100 руб. до нескольких миллионов (премиальные домены с историей, на которых раньше были сайты).

Подборка доменов в сервисе nic.ru.

Как вам домен за 20 млн рублей?

Если домен официально не продается, то о цене придется договариваться с его владельцем.

Пример проверки домена в сервисе nic.ru.

Домен в зоне .ru занят. Можно попробовать его выкупить или остановиться на зоне .com

Больше рекомендаций по выбору домена читайте в статье «Что такое домен и как его выбрать».

Важно! Для России можно использовать домен на кириллице (сантехника.рф), там конкуренция ниже, чем в зоне .ru. Однако готовьтесь, что такой выбор осложнит работу с SEO сайта.

Шаг 5

Арендуем хостинг и SSL-сертификат

Хостинг — это место на сервере, где будет физически размещаться ваш сайт. Если домен — это ваш адрес, то хостинг — это дом по этому адресу.

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

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

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

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

Шаг 6

Рисуем структуру сайта и прототипы страниц

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

Вот простой пример структуры корпоративного сайта. Такие страницы есть почти на каждом подобном ресурсе:

  • Главная (часто оформляют как лендинг).
  • О нас (пишут о преимуществах и команде).
  • Продукты / Услуги (под каждый продукт или услугу выделяют отдельную страницу).
  • Отзывы/кейсы.
  • Вакансии (описывают не только вакансии, но и преимущества работы в компании).
  • Блог (если есть).
  • Контакты.
  • Правовая информация (политика конфиденциальности, политика cookies).

Структура даст окончательный ответ на вопрос: нужен ли вам многостраничник или вся информация спокойно уместится на одной странице. Тогда можно смело делать лендинг и не заморачиваться. Но надо учитывать, что одностраничники гораздо хуже подходят для SEO- продвижения.

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

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

пример прототипа страницы

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

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

Также в ходе создания прототипа важно определиться, какой функционал на сайте вам понадобится. Например, калькулятор, корзина, личный кабинет, раздел для размещения статей (блог), слайдер, карусель и т.д. От выбранного функционала будет зависеть, сможете ли вы создать сайт в конструкторе или вам потребуется CMS (система управления контентом).

Шаг 7

Пишем тексты, делаем фотографии

Если у вас нет опыта или времени на написание текста, подготовьте задание для копирайтера. Опишите, для какой аудитории предназначен текст, какой объем в знаках нужен, о чем писать, какие ключевые слова использовать (согласно анализу SEO). Чем подробнее распишите, тем лучше.

Пример готового SEO-ТЗ

Если все-таки решите писать тексты самостоятельно, проверьте орфографию и пунктуацию. Можно через «Орфограммку».

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

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

Шаг 8

Выбираем конструктор и собираем сайт

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

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

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

Шаблоны сайтов в конструкторе uKit

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

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

На что стоит обратить внимание при выборе конструктора:

  • Сколько в год будет обходиться содержание сайта. Есть ли бесплатный тариф и какие у него ограничения.
  • Есть ли в конструкторе все нужные функции. Если нет, можно ли добавлять свой код. Например, вы можете заказать калькулятор на стороне и вставить его в виде HTML-блока с кодом. Кроме того, подумайте, можно ли отказаться от каких-то наворотов в пользу простоты и функциональности.
  • Удобно ли работать в интерфейсе, все ли понятно.
  • Как быстро и насколько профессионально реагирует на запросы техподдержка. Задайте свои вопросы в чате или по телефону и по ответам сделайте вывод.
  • Предлагают ли хостинг и SSL-сертификат и на каких тарифах (не придется ли покупать все это отдельно).

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

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

Бесплатный конструктор лендингов Unisender Business

Создайте одностраничный сайт, настройте прием платежей, подключите свой домен и начинайте принимать заказы.

Создать лендинг

Как создать сайт. Подробная инструкция 10

Шаг 9

Если конструкторы не подошли, делаем на коробочной CMS

Более сложный путь — выбрать CMS (систему управления контентом) и создать сайт с помощью дизайнера и программиста-верстальщика. Можно сделать сайт на CMS и самому, но в этом случае новичкам лучше использовать конструктор.

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

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

Однако с учетом того, что 45% сайтов в зоне .ru работают на WordPress и эта система управления контентом бесплатная, предлагаю не усложнять себе жизнь. Если уж WordPress совсем вам не нравится, из бесплатных систем еще есть Joomla, а среди платных —  1C-Битрикс.

Рейтинг CMS

Рейтинг CMS согласно опросу 5 млн доменов в зоне RU

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

Шаг 10

Делаем макет

С CMS определились. Самое время подготовить задание на разработку макета. Проверьте, есть ли у вас все необходимые материалы для дизайнера:

  • Готовые тексты. Используйте тексты, которые будут на чистовой версии сайта. Иначе может получиться, что в дизайн они не поместятся, а потом придется переделывать.
  • Структура сайта и прототипы страниц, которые нужно задизайнить.
  • Референсы (какие дизайны сайтов вам нравятся, тут можно брать не только свою тематику).
  • Личные пожелания касаемо шрифтов, логотипов, цветов и т.д.

Соберите всю эту информацию в задание и передайте дизайнеру.

Шаг 11

Отдаем макет на верстку и программирование

Для программиста вам надо подготовить:

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

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

  • ссылка на политику конфиденциальности;
  • чекбокс на согласие на обработку персональных данных в формах;
  • уведомление о сборе персональных данных через cookies.

Автор блога UniSender Артём Чеховской

Артем Чеховской, редактор блога UniSender

Можно ли создать сайт на CMS без дизайнера и верстальщика

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

В качестве CMS я выбрал WordPress. Купил домен и хостинг, связал их друг с другом — инструкций, как это сделать, хватает. После этого установил WordPress на хостинг. Если будете качать WordPress с официального сайта, то там же найдете инструкцию по установке (на английском).

Некоторые хостинги предлагают бесплатно установить WordPress за вас. Я пользовался Hostinger и там такая функция была в личном кабинете.

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

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

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

Шаг 12

Настраиваем SEO

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

Я не буду подробно останавливаться на том, как это делать. В конструкторе вы сможете все настроить самостоятельно (там есть подсказки), а если сайт на CMS, позовете сеошника. Вот хороший чек-лист по SEO, который поможет ничего не забыть.

Настройка SEO в конструкторе uKit

Настройка метатегов и 404 страницы в конструкторе uKit

Важно! Обязательно зарегистрируйте сайт на Google Search Console и в Яндекс. Вебмастере. Эти сервисы помогут поисковикам быстрее проиндексировать сайт, найдут ошибки в SEO-настройках и посоветуют, что можно улучшить на сайте в целом.

Шаг 13

Тестируем сайт

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

Перечислю основные моменты, которые стоит протестировать, и сервисы, которые пригодятся на этом этапе.

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

Скорость загрузки и отображение в браузерах

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

Определить скорость загрузки страницы поможет бесплатный сервис Google PageSpeed Insights.

Советы по оптимизации сайта от сервиса Google PageSpeed Insights

Сервис покажет оценку скорости загрузки сайта от 0 до 100 и даст рекомендации, как можно улучшить результат

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

Удобство для мобильных пользователей

Для начала откройте сайт на своем телефоне, полистайте, понажимайте на кнопки. Будет сразу понятно, что именно стоит улучшить. Например, увеличить размер кнопок и изображений или ускорить загрузку.

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

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

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

Сервис подскажет, насколько хорошо страница адаптирована под мобильные, и посоветует, как исправить ошибки

Функционал

Постарайтесь вместе с вашими помощниками стать самыми дотошными пользователями:

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

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

Понятность

Все люди разные. Что очевидно для вас, не факт, что будет понятно посетителям сайта.

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

  • что вы предлагаете;
  • сколько это стоит;
  • почему стоит обращаться именно к вам;
  • как с вами связаться;
  • что ещё можно сделать на сайте.

Шаг 14

Запускаем

Запустить сайт — это разместить его в интернете на вашем хостинге и домене. Или нажать в конструкторе кнопку «Опубликовать».

На этапе запуска не забудьте позаботиться о статистике. Подключите и настройте Яндекс.Метрику и Google Analytics, чтобы анализировать поведение посетителей сайта.

А теперь самое интересное — это еще не конец, а только начало пути. Пока у вас есть сайт, его надо постоянно улучшать: делать более удобным, красивым и понятным для пользователей. Кроме того, надо регулярно обновлять контент (постить новые кейсы или статьи в блог, размещать новые товары). Поэтому разберитесь, как работать с сайтом в конструкторе или CMS и кто будет этим заниматься на постоянной основе.

Завершить статью хочу ответом на самый распространенный вопрос по созданию сайта: «Можно ли создать сайт самому бесплатно?» Короткий ответ — можно. Подлиннее — все зависит от ваших целей. Если вы делаете портфолио и даже сайт-визитку, можно спокойно использовать конструктор с бесплатным тарифным планом (например, Tilda). Если же вы задумали интернет-магазин, то без вложений не обойтись, как на конструкторе, так и в CMS.

ЭКСКЛЮЗИВЫ ⚡️
Читайте только в блоге
Unisender

Поделиться

СВЕЖИЕ СТАТЬИ

Другие материалы из этой рубрики

документ

документ

Не пропускайте новые статьи

Подписывайтесь на соцсети

Делимся новостями и свежими статьями, рассказываем о новинках сервиса

«Честно» — авторская рассылка от редакции Unisender

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

unisender

Понравилась статья? Поделить с друзьями:
  • Должностная инструкция старшего смены транспортной безопасности
  • Восстановление стс через госуслуги пошаговая инструкция
  • Баба на чайник своими руками пошаговая инструкция фото
  • Как настроить часы amst 3003 инструкция на русском
  • Министерство внутренних дел субъект осуществляющий руководство