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

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

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

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

Оффер Заказчику от чего нельзя отказаться

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

В результате Заказчик выбрал:

создать сайт-визитку с нуля с чистого листа

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

Задачка была непростой, но страшно любопытной.

Как создать сайт с нуля: с чего начать

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

  • Регистрация и оплата хостинга (мин тарифный план)
  • Подбор, регистрация и оплата домена сайта
  • Создание концепции бренда и магазина в целом
  • Создание контента сайта
  • Установка CMS на хостинг
  • Шаблонный дизайн (установка и настройка)
  • Создание страниц 7-10 (Главная, Магазин с разбивкой по категории товаров (молочка, бакалея, кондитерка и т.д., Контакты, О компании + политика конфиденциальности)
  • Форма обратной связи, обратный звонок – в результате ссылка на отзывы в Гугл картах
  • Установка и настройка SSL сертификата, правильных файлов robots.txt и .htaccess и sitemap
  • Настройка безопасности (защита от хакеров, от ботов (спама) от несанкционированного доступа в админ панель (спец.вход) и другое.
  • Установка и настройка плагинов/виджитов
  • SEO оптимизация (подбор ключевых запросов и оптимизация под них)
  • Установка бэкапов магазина
  • Настройка аналитики/метрики: регистрация и подключение Гугл, Яндекс
  • Настройка доменной почты (опционно)
  • Консультация по использованию и управлению сайтом.

Шаг 1. Хостинг провайдер – хранилище сайта

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

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

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

Лично я использую этот хостинг и довольна им.

Шаг 2. Домен сайта: как вы “лодку” назовете

А вот с регистрацией домена в зоне .cy была долгая загвоздка.
Во-первых, их очень мало, большинство это представители,
мы говорим “перепродажники”, а цены просто
космос, не считая обязательного НДС в 19%.

Я нашла самого недорогого, они оказались во Франции,
зарегистрировались с заказчиком, благо не стали
проходить верификацию.

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

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

Решили не покупать домен пока не придут деньги на счет. Это и
заняло время. Я рассчитывала на 6 рабочих дней.
Вышло дольше из-за качелей по домену.

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

Шаг 3. Муторно, но важно: Концепция бренда и сайта “Олимп”

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

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

Название магазина и бренд “Олимп”

Здесь было просто, название есть – Олимп, берем такой же домен
olimp.cy и домен не занят, а это значит, что полное соответствие.

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

Но ключевой запрос “русские магазины” я не отметала, просто взяла
на заметку т.к. Гугл выдает в своих картах его магазин.

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

Слоган: На вершине вкуса и качества!

УТП: Продуктовый магазин в Ларнаке с национальным ассортиментом
товаров на любой вкус, высокого качества и приемлемыми ценами.

Инсайт: Вкус детства в гостеприимном магазине с национальным ассортиментом, где цена = качество.

Категории ассортимента и меню сайта

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

Я соединила колбасные изделия и рыбу, всю молочку, хлеб с бакалеей,
алкогольные напитки + воду + газировку, и все возможные
сладости. А также обязательные страницы “Главная”
“О нас” и “Контакты” + страница Продукты

как создать сайт с нуля
10 страниц в меню магазина Олимп

Да, еще пришлось создать страницу “Политика конфиденциальности”, но это
пошло бонусом от меня, потому что без нее не положено.

Структура страницы “Главная”

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

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

первая встреча посетителя с сайтом

Да, и поставила я слайды, которые периодически меняются
автоматически с затемненным фоном. Это я сделала
в помощью элементор, здесь подробнее →

Далее поставила блок – преимуществ магазина, то есть почему
они лучшие, что их отличает от конкурентов.

Я сделала “теплый” заголовок, который логически завершается
слоганом блока. Смотрите ниже скрин:

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

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

как создать сайт с нуля
блок достижений магазина

Блок с категориями на которые можно перейти и посмотреть
подробнее информацию.

как создать сайт с нуля
Блок категорий товаров магазина


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

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

Блок с логотипами поставщиков и подвал

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

Структура сайта как сделать без сервисов и инструментов

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

структура сайта-визитки на одном листе

Шаг 4. Контент и SEO оптимизация

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

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

Я так всегда говорю своим ученикам и подписчикам

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

Просто можете перейти и почитать для примера здесь →
или ниже нажимайте на картинку.

НАЦИОНАЛЬНЫЙ МАГАЗИН ОЛИМП

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

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

SEO оптимизация сайта и страниц.

Обычно это называется семантическое ядро. Здесь использовала подбор
ключевых запросов в яндекс вордстат и гугл keyword planner.

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

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

  • SEO заголовок (он отображается в поисковой выдаче)
  • Дискрипшн – короткое описание под поисковую выдачу
  • Картинки название, описание alt атрибут
  • Иерархия заголовков в содержимом страницы

Шаг 5. Как создать сайт с нуля за сутки

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

  1. Привязываем домен к хостингу.
    Я внесла DNS хостинга в аккаунте, где заказала домен
  2. На хостинге устанавливаем CMS.
    Установила вордпресс в С-панели хостинга
  3. Тема сайта по шаблону (дизайн сайта)
    Заказчик выбрал эту опцию, поэтому подобрала оптимально подходящий шаблон под продуктовый магазин. Убрала все исходящие ссылки на сторонние ресурсы и настроила основной шаблон. Почистила от шпионских данных, чтобы не отвлекали поисковых роботов в индексировании сайта.
  4. Настройка сайта (меню, категории, ссылки, страницы, файлы)
    Установила плагин транслитеризации, плагин конструктор, работа с файлами robots.txt и .htaccess, а также sitemap. Создание страниц (пустых пока), формирование меню.
  5. SEO оптимизация установка и настройка
    Установила SEO-плагин, настроила его, сразу же прошлась по общим настройкам сайта и внесла соответствующий контент.
  6. Установка и настройка безопасности сайта
    Установила и настроила плагины безопасности сайта магазина (вход в консоль, защита данных)
  7. Работа со страницами сайта
    дизайн страниц, корпоративные цвета, заполнение контентом, медиа материалами и сео оптимизация каждой страницы, перелинковка внутренняя и исходящие ссылки (гугл карты и соц.сети в перспективе)
  8. SSL сертификат и бэкап сайта (резервное копирование)
    сертификат в данном хостинге входит в стоимость услуги, поэтому техподдержка за 1 минуту сделали все сами. Бэкап также оформила на хостинге, но по желанию заказчика можно сделать и дополнительно, допустим резервное копирование сайта на гугл диск.
  9. Регистрация и установка аналитики и сервисов веб-мастера.
    Гугл аналитика и Гугл веб-мастер, Яндекс метрика и веб-мастер. Запуск индексирования сайта и sitemap.
  10. Оптимизация работоспособности сайта.
    Установка плагинов для оптимизации картинок, кэширования сайта, сжатия кода, CSS, Java и прочее. Проверка сайта через программу на наличие ошибок и исправление их.

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

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

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

У меня есть такой инструмент “Бизнес-навигатор” вы можете в меню найти его
и последовательно выполнять задачи. Но уроки открываются, только
зарегистрированным пользователям, это если нужно
с наглядным материалом и инструментами.

Подробнее о системе бизнес-навигатор

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

Пока этот метод остается неизменным и лучшим.
У кого есть бизнес-навигатор, то внимание
уделяйте блоку 3. (контент сайта/блога)



Успехов и Процветания Вам и Вашему Бизнесу!
Ваш Бизнес Гид Ирина

Оставляйте комментарии и отзывы