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

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

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

Как определить основные запросы пользователей?

Я это делаю с помощью сервиса https://wordstat.yandex.ru/. Вводим в поисковую строку ключевое слово — «психолог» и изучаем результаты.

Рис 1. Яндекс Вордстат (запросы и количество показов).

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

Рис 2. KeyCollector — программа для сбора запросов

Для этого я использую программу Key Collector. Мне она помогает найти самые частые релевантные запросы в поисковиках, приносящие основной трафик.

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

  • Психолог онлайн.
  • Психолог онлайн бесплатно.
  • Консультация психолога онлайн.
Рис 3. KeyCollector — полученные результаты по запросу психолог онлайн

Эти запросы собирают самый большой трафик и они являются коммерческим (их можно хорошо монетизировать).

С основными запросами определились. Теперь проанализируем конкурентов.

Анализ конкурентов

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

Рис 4. Стартовая страница Яндекса (поисковая строка и выбор региона).

Рекламные блоки я пропускаю и смотрю всё что ниже (без плашки «реклама», «Яндекс» и так далее).

Рис 5. Выдача Яндекса по запросу психолог онлайн.

Обычно я беру первую десятку проектов, у меня они такие:

  • psypsy.online
  • psychologi.online/psikholog/
  • psyhologram.ru/
  • www.psysovet.ru/
  • brainbild.com/
  • www.b17.ru/forum/
  • lifehacker.ru/online-psyhcologies/
  • journal.tinkoff.ru/short/find-psycho/
  • ivanvdovin.ru.

Давайте теперь внимательно посмотрим на каждый из них.

lifehacker и journal.tinkoff.ru можно сразу вычеркнуть — это информационные проекты, широкой направленности. b17.ru — мне так же не интересен, это форумный агрегатор. psychologi.online, psyhologram.ru, psysovet.ru и brainbild.com тоже убираю — это агрегаторы.

Конечно, если вы намерены делать агрегатор для психологов, то нужно быть готовым к тому что, такой проект потребует огромное количество времени времени и денег на его создание и продвижение. Примерные цифры: дизайн — около 150 тыс. рублей (удаленная одноразовая работа), разработка от 450 тыс. (Laravel, Битрикс или фреймворки), программирование системы парсинга контента (информации о специалистах), наполнение, обработка — всё это выйдет весьма недешево. Так же еще стоит учитывать траты на рекламу и продвижение, которых никогда не бывает достаточно. Такие проекты монетизируются обычно рекламой от Яндекса и Google + встроенными внутренними партнерскими программами (платные места, заявки психологам и так далее). При правильном подходе окупается достаточно быстро, при неправильном — можно потерять много времени и денег.

Цены и всё что я привел выше могут быть примерными, как в плюс, так и в минус. Это субъективная точка зрения.

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

Трафик наших будущих конкурентов

И так, давайте разберем трафик наших будущих конкурентов, делаю это в сервисе https://www.similarweb.com/. Сервис условно бесплатный. Начального функционала нам вполне хватит.

Для проекта — psypsy.online данных не хватило. Идем в сервис https://serpstat.com/ru/

Рис 6. Сервис Sertstat. Анализ сайта psypsy.online в Яндексе по региону Москва.

В выпадающим списке я выбираю Яндекс/Москва.

Рис 7. Трафик сайта psypsy.online в Яндексе по Москве.

Меня интересует график — Динамика трафика. Я обратил внимание, что динамика началась с января 2020 года.

После этого я проверяю дату регистрации в https://www.reg.ru/

Рис 8. Сервис reg.ru. Whois — дата регистрации сайта psypsy.online

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

Посмотрим ещё один проект — ivanvdovin.ru.

Рис 9. Сервис Similarweb — анализ трафика по всему сайту.

На графике примерные данные за месяц.

Рис 10. Сервис Serpstat. Анализ трафика по региону Москва (Яндекс).

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

Рис 11. Дата регистрации домена ivanvdovin.ru (сервис reg.ru).

Дата регистрации 2019 год, тоже достаточно молодой проект.

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

Выбор CMS

psypsy.online — сделан на Tilda.

Рис 12. Подвал сайта psypsy.online, определение CMS сайта.

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

ivanvdovin.ru — сделан на WordPress, информацию я получил из кода. По стоимости разработки в данном случае ситуация аналогичная с Тильдой.

Рис 13. Верстка сайта ivanvdovin.ru, определение CMS сайта.

Проектируем сайт

Для проектирования я использую — https://app.diagrams.net/. В нем я обрисовываю нужные мне элементы и страницы, которые я хотел бы видеть. Беру для MVP версии страницы конкурентов.

Рис 14. Проектирование будущего сайта с помощью сервиса diagrams.net

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

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

Какие нужны страницы для сайта

  • Главная страница — https://ivanvdovin.ru/. На неё мы выводим все статьи, которые публикуем на нашем сайте.
  • Страница категории — https://ivanvdovin.ru/category/deti/. Выводим статьи, которые посвящены данному разделу.
  • Страница статьи — https://ivanvdovin.ru/kak-zastavit-rebenka-uchitsya-v-shkole-i-delat-uroki/.
  • Визуальная карта сайта — https://ivanvdovin.ru/karta-sajta/. Нужна для того, чтобы пользователи могли быстрее найти нужную для них публикацию.
  • Страница контактов — https://ivanvdovin.ru/kontakty/. Публикуем на ней свои контакты + социальные сети.
  • Страница об авторе — https://ivanvdovin.ru/ob-avtore/. На ней пишем всю информацию о себе. Можем также разметить сертификаты, дипломы, курсы и другую информацию.
  • Карта сайта XML — https://ivanvdovin.ru/sitemap.xml. На ней размещаются страницы, которые будет забирать робот поисковых систем.

Полезные элементы для страниц

Рис 15. Статья в списке (элементы)

На страницах в списке к статьям выводим: автора, количество просмотров (лайки и перерепосты не так актуальны). Добавляем функционал публикации материала и обновления его + время, которые потребуется на прочтение статьи — взять можно тут https://tehnichka.pro/

Рис 16. Элементы: время на прочтение статьи и дата публикации и обновления.

Хлебные крошки не использую в блоге.

Рис 17. Хлебные крошки

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

Рис 18. Элементы, которые используются на странице статьи перед заголовком.

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

Рис 19. Содержание статьи.

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

Рис 20. Текстовая перелинковка между статьями.

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

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

Рис 21. Похожие статьи.

Функционал комментариев. Также полезен для получение обратной связи + обновляет саму статью. Дает положительный рост трафика.

Рис 22. Функционал комментариев.

Дизайн (UX и UI)

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

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

Рис 23. Скрин из Фигмы. Страница сайта, которые нужно сверстать.

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

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

Верстка и разработка

Основные правила для верстки: она должна быть адаптивная под все устройства и без ошибок. Ошибки вы можете проверить с помощью сервиса https://validator.w3.org/.

Рис 24. https://validator.w3.org/ — сервис для проверки верстки.

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

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

По разработке всё сложнее, для вас самое главное, чтобы все ваши элементы работали исправно, код был оптимизирован, сайт работал быстро на всех устройствах. Проверяйте ваш сайт в сервисе — https://developers.google.com/speed/pagespeed/insights/?hl=RU, он позволит вам узнать, насколько всё у вас хорошо.

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

SEO

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

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

На старте не забываем установить: Яндекс метрику, Яндекс вебмастер, Google Analytics, Google Webmaster. Всё это попросите установить разработчика, ничего сложного там нет.

Рис 25. Скрин из Яндекс метрики (трафик).

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

Одна из фишек для продвижения. Установка AMP страниц. Ознакомиться можно с функционалом по ссылке — https://developers.google.com/amp?hl=ru.

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

После установки AMP, показатель отказов с 10% упал до 5%.

Рис 26. Показатель отказов из Яндекс метрики.

Домен и хостинг

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

Свои сайты я размещаю на https://beget.com/ru. Быстрая поддержка, адекватные цены (сайт можно захостить за ~ 100 рублей в месяц), всё работает быстро и без тормозов.

UPDATE (декабрь 2020). У Beget периодически происходят падения. В октябре-декабре их было около 10 (лично на моих проектах). Поддержка отвечает крайне долго, свой ответ вы можете ждать около суток.

Аналитика

Очень важно на старте установить себе Яндекс метрику и Google Analytics. Данные инструменты смогут вам помочь в анализе вашей аудитории, узнать какой контент им заходит, а какой нет.

Рис 27. Основные параметры, которые нужно отслеживать в Яндекс Метрике.

Это одни из важных показателей. Более подробно, вы сможете почитать о них в справках — https://yandex.ru/support/metrica/.

Контент

Контент в блоге следующий: текст, тематические картинки, видео. Текстовый контент можно заказывать у копирайтеров на этой бирже — https://contentmonster.ru/. В идеале, пишем статьи самостоятельно в черновую, находим редактора и просим его привести текст в порядок.

Дополнительные сервисы для работы с текстом:

  1. Орфограммка.
  2. Advego.
  3. Главред.

Тематические картинки покупаю на стоках.

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

Монетизация

psypsy.online монетизируется за счет внутреннего сервиса. Работаю по системе подписок.

ivanvdovin.ru монетизируется за счет личных услуг, книг и донатов.

Помимо этих вариантов, вы можете зарабатывать на своем проекте с помощью: Google Adsense, Рекламной сети Яндекса и CPA-партнерок.

Стоимость

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

  • Tilda — от 110 000 рублей;
  • WordPress — от 160 000 рублей.

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

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