Этапы разработки сайта (от сеошника)

В данной статье хочу кратко описать процессы разработки сайта для тех, кто с этим столкнулся впервые. Этапы будут описываться на примере разработки сайта https://lantan-c.ru/

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

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

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

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

Даже беглый анализ выдачи по запросам с приставкой “опт”, “оптом” говорит о том, что вполне можно обойтись одним сайтом под интернет магазин. Почти все конкуренты из ТОП-10 выбрали именно эту модель.

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

Также, по выдаче видно, что конкурировать придется и с маркетплейсами: Озон, Яндекс Маркет, Авито, Вайлдбериз, Тиу и т.д.

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

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

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

Беглый анализ провожу с помощью сервисов Арсенкина - arsenkin.ru

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

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

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

Во второй основной категории Аксессуары уже содержатся подкатегории со своими фильтрами товаров в каждой подкатегории, так как в рамках одного фильтра создать адекватную сортировку невозможно. Так у нас появляются подкатегории: Спирали, Головки, Шнеки, Держатели и так далее.

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

В зависимости от размеров проекта вам могут понадобиться следующие сервисы: wordstat, keys.so, Key Collector

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

И хочу внести ясности, что я подразумеваю под “структурой сайта”. Структура сайта (в моем случае) это структура его разделов и подразделов. Знаю, что для некоторых структура сайта это содержание его отдельных страниц. Здесь и далее “структура сайта” - это его ветвь вложенности (разделы, подразделы), а содержание страниц - это содержание отдельно взятой страницы или типа страниц (заголовок, картинки, текст, блоки внимания и т.к.).

Для визуализации структуры можно использовать различные сервисы. Все зависит от проекта. Например, если мне нужно создать просто структуру для передачи ее другим специалистам, я могу ее сделать прямо в Excel:

Или то же самое можно сделать в XMind.

В данном случае, так как весь проект реализовывал я сам, то я использовал сервис weje.io Этот сервис позволяет помимо построения структуры сайта, вести весь процесс проектирования в одном месте. В дальнейшем вы это увидите.

Итог: Готова ветвь вложенности разделов сайта. Для реализации использовал сервис weje.io

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

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

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

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

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

Тут я тоже рекомендую обращаться к толковым верстальщикам. В идеале конечно, чтобы вы были способны проверить качество верстки после завершения этих работ. На помощь вам могут прийти сервисы validator.w3.org - для проверки валидности кода, pagespeed.web.dev - для проверки скорости загрузки сайта (корявый код вряд ли покажет хорошие результаты), search.google.com/test/mobile-friendly - для проверки адаптации под мобильные устройства. Ну и конечно же смотрите на код сами.

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

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

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

Начинать этот этап стоит на этапе прототипирования или даже раньше, но точно не позже.

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

Как это часто бывает «Сделать хотело козу, палец застрял в носу…»

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

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

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

С тем, как проект выглядит на одной доске можно ознакомится по ссылке (часть данных перенесена на новую доску, где идет процесс переезда на новый шаблон): https://app.weje.io/b/-MuyvslEgzLRvG-gOrxw/zUa9MTKXrWNt7ThMxbxAoS6wSXy1