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

Визитка

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

Корпоративный

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

Интернет-магазин

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

Онлайн-сервис

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

Информационный

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

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

Что такое домен и как его выбрать

Если вы создаёте онлайн-площадку с нуля, первый шаг — выбор домена. Это уникальное имя сайта. Домен обычно содержит название бренда — например, https://www.kinopoisk.ru.

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

• Правильно подбирайте домен верхнего уровня. Это окончание имени после точки. Оно указывает на тип, к которому относится сайт. Например, российские площадки могут ставить домен .рф или .ru, для международных некоммерческих иногда выбирают .org, а для коммерческих — .com.
• Учитывайте требования к длине и символам. Они зависят от зоны, которую вы выбрали. Например, для зоны .ru имя не должно превышать 63 символов. В таком домене можно использовать только арабские цифры, дефисы для разделения слов и латинские буквы, а первый символ — это обязательно число или буква.
• Постарайтесь сделать домен коротким, запоминающимся и простым для чтения. В этом случае выше вероятность, что человек запомнит адрес.

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

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

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

Чем отличаются хостинги и как их выбирать

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

Скорость работы. Важны два параметра:

1. Время обработки одного запроса — за какой срок загружается страница.
2. Задержка при передаче информации — сколько секунд информация с сервера идёт до браузера.

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

Uptime. Это метрика, которая позволяет увидеть, сколько времени сайт работает без простоев. Измеряется в процентах, идеальный показатель — это 95–100%.

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

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

Объём хранилища. От него зависит, сколько данных вмещает сервер. Объём провайдеры прописывают в тарифах. Чем больше страниц и контента, тем больше места он займёт на сервере.

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

Какую платформу для создания сайта выбрать

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

Вот что стоит учитывать.

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

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

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

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

Возможности для развития. Бывает, что предприниматель открывает небольшой интернет-магазин с 10–15 товарами, но планирует через год расширить ассортимент до 1 000 позиций. В этом случае лучше заранее узнать, позволит ли это платформа.

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

Как выбрать и разработать структуру и откуда брать контент

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

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

Какую структуру выбрать

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

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

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

Её часто используют в лендингах. Блоки идут последовательно и ведут к целевому действию. Человек просматривает экраны друг за другом, поэтому его путь легко смоделировать.

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

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

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

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

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

📍 Создайте уникальный и понятный адрес для каждой страницы (URL). Хорошо, если вид URL будет давать общее представление о том, какая информация находится на соответствующей странице.

Что учитывать при разработке дизайна

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

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

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

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

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

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

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

Как сделать вёрстку

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

Если вы делаете всё в конструкторе или берёте готовое решение на CMS, искать специалиста не нужно. Система превратит макет в финальное решение, которое можно сразу размещать в Сети.

Какие есть требования к контенту

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

• Публикуйте качественный контент. Сайтов становится с каждым годом всё больше, и конкурировать в таких условиях невозможно без полезного и интересного пользователям контента. Чтобы создать ценность для аудитории, публикуйте уникальные материалы, которые помогают потенциальным клиентам решить их запросы, — так вы сможете выделиться на фоне конкурентов.
• Следите за подачей и говорите на языке целевой аудитории. Например, вы продаёте детские вещи и планируете привлечь аудиторию молодых мам. В этом случае рассказывайте о том, что интересно родителям: делайте обзоры детских вещей из каталога, дополнительно рекомендуйте, как стирать одежду, подбирать ткани или определять размер.
• Добавляйте визуальные элементы. Видео и иллюстрации привлекают внимание, помогают воспринимать информацию, а ещё дополняют её. Например, дизайн нового смартфона проще показать на фото или видео, чем описывать текстом.
• Следите за релевантностью и полезностью материалов. Релевантность — это то, насколько материал соответствует выбранным поисковым потребностям (запросам). Полезность — насколько контент помогает пользователю решить его задачу.
• Не размещайте неприемлемые материалы. У Яндекса есть список критериев, которым должно соответствовать наполнение сайта. Здесь же приведены характеристики неприемлемого контента, который запрещено размещать. За нарушение требований позиции площадки могут снижаться в поисковой выдаче.

Как улучшить индексацию сайта

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

📍 Сообщите поисковым системам о страницах на сайте:

• Включите в Вебмастере обход по счётчику Метрики. Как добавить на сайт Метрику, расскажем в следующем разделе.
• Используйте протокол IndexNow, чтобы автоматически сообщать поисковым роботам об изменениях на сайте.
• Отправьте страницы на переобход в Вебмастере.
• Сделайте Sitemap. Это файлы, которые помогают поисковым системам быстрее находить страницы и отображать их в выдаче.

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

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

• Директивы Clean-param
• Редиректа с HTTP-кодом 301 на нужные страницы — чтобы указать роботу, какая страница должна отображаться в поиске
• Атрибута rel=«canonical»

Подробнее о дублях читайте на сайте Вебмастера.

📍 Скройте от индексирования страницы, которые не представляют ценности. С этим помогут:

• Директива Disallow в robots.txt, которая запрещает индексирование разделов сайта или определённых страниц
• Метатег noindex, который запрещает индексирование конкретной страницы
• HTTP-код ответа сервера 403, 404 или 410, который сообщает поисковому роботу, что страницы больше не существует

Как отслеживать эффективность после запуска

Чтобы анализировать статистику и оценивать эффективность работы площадки, подключите к сайту Яндекс Метрику. С её помощью вы можете отслеживать, какое количество человек и как взаимодействовали с площадкой. Сервис бесплатный.

Чтобы установить счётчик Метрики:

1. Перейдите на сайт Яндекс Метрики, войдите в аккаунт и создайте новый счётчик. Введите название, которое будет использоваться в статистике, и адрес сайта.
2. Получите код счётчика. Он отобразится в специальном окне — его можно выделить и скопировать. Если хотите скорректировать настройки счётчика, сделайте это заранее — при некоторых изменениях код тоже меняется.
3. this0link. Если сайт работает не на CMS или конструкторе, то установите счётчик Метрики через код сайта или HTML. Если используете готовую CMS, добавьте код через плагин.
4. Включите автоматические цели. Метрика сама создаст цели на основе некоторых действий пользователей. Это могут быть переходы в мессенджер, клики по телефону или даже покупка. Чтобы изменить их, перейдите в меню «Цели» в личном кабинете. Подробнее о настройках рассказали здесь.

Если счётчик установлен правильно, через некоторое время первые данные начнут отражаться в отчётах счётчика. Посмотреть статистику можно в разделе «Отчёты».

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

Чтобы добавить сайт в Вебмастер, перейдите в сервис и укажите адрес сайта, по которому он будет участвовать в Поиске. Далее следуйте инструкции, чтобы подтвердить права доступа на сайт.

Как сделать простой сайт от Яндекс Бизнеса

Если вы не хотите разрабатывать структуру, вбирать хостинг и CMS, можно сделать бесплатный сайт от Яндекса Бизнеса. Достаточно создать профиль вашей компании — всё остальное сделает сервис.

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

Устанавливать счётчик Яндекс Метрики дополнительно не нужно. Проверить показатели сайта можно в разделе «Статистика» в личном кабинете Яндекс Бизнеса.

Краткая пошаговая инструкция, как создать сайт самому

1. Определите цель, для которой создаёте площадку: продажа продукта, размещение рекламы, формирование лояльности к бренду. В зависимости от цели выберите тип будущего сайта.
2. Придумайте домен и зарегистрируйте его. Домен должен быть кратким, лёгким и запоминающимся.
3. Выберите провайдера и арендуйте хостинг, чтобы разместить онлайн-площадку в Сети.
4. Подберите платформу, чтобы управлять контентом. Например, для простой визитки с минимальным бюджетом можно использовать конструкторы, а также недорогие или бесплатные коробочные решения, а для крупных многостраничников — лицензионные платные CMS.
5. Продумайте структуру. Она должна быть удобной для пользователей, а также отвечать требованиям поисковой системы.
6. Разработайте дизайн-макет самостоятельно или обратитесь за помощью к дизайнеру. Если работаете в конструкторе, воспользуйтесь готовыми шаблонами.
7. Сверстайте разделы самостоятельно, если работаете в конструкторе, или обратитесь за помощью к фронтенд-разработчику.
8. Наполните площадку контентом. Он должен быть уникальным, полезным, достоверным и не содержать запрещённые материалы.
9. Разместите сайт в Сети и следите за его позициями в Поиске. Работайте над SEO, чтобы усиливать привлекательность для пользователей и повышать свои позиции в поисковой выдаче.
10. Отслеживайте показатели эффективности. Если они вас не устраивают, редактируйте контент и работайте над продвижением. Чтобы привлечь трафик на сайт, запустите продвижение и отслеживайте его эффективность.