Сайт «Мастер Дома»
12/01/18
Редизайн и разработка сайта «Мастер Дома» ремонта бытовой техники в Москве.
Задача
Реанимировать сайт ремонта бытовой техники, подготовить его к поисковому продвижению, и в дальнейшем поднять его в поисковых позициях.
На момент запуска сайта и появления данного кейса, сайт имеет негативную репутацию в поиске, в том числе несколько инъекций в коде, которые котируются, как вирусы.
Под конец 2018-го года мы запустили новый внешний проект. Это — разработка на WordPress, целью которой было создание отличного сайта сервиса ремонта бытовой техники.
Подготовка проектной документации
Важная стадия проекта в нашей работе — подготовка проектной документации. В нее входит изучение потребителя, его поведенческих факторов. К сожалению в данном случае отсутствовал доступ к старой аналитике, собранной за время жизни домена, поэтоме пришлось довольствоваться домыслами, опытом заказчика и нашим личным опытом в данной области, как потенциальных потребителей, свершившихся, а также и принятие позиции DIY-щиков, домашних мастеров, которые не являются прямыми потребителями услуг ремонта бытовой техники.
Проектная документация
Результатом данного «мозгового штурма» является документация к проекту — подробное ТЗ, ментальные карты. Все это затем было трансформировано в прототипы, обычные прямоугольники серого цвета.

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

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

Да будет верстка
Скажем сразу, в этом проекте мы напрочь отказались от фреймворка Bootstrap. Вместо этого мы использовали разрабатываемую нашей командой библиотеку FA-Kit. Ее, как и Bootstrap можно собирать фрагментами, пользуясь возможностями SASS, но при этом она все равно остается более легковесной. Так как по сути там обработка сетки, шрифтов и кнопок.
Что в свою очередь дало результаты на тестах типа PagesSpeed.

Экспериментируем
В данном проекте мы пошли по нестандартному пути. Собирали фронт прямо в бэке. Сперва мы развернули проект на WordPress, создали базовую тему и пошли собирать страницы с блоками.
Да, любой проект мы собираем блоками и обычно проект сперва верстается, а затем натягивается на движок. После — редактируется, модифицируется.
Минус обычного подхода — раздрай и двойная работа. Готовую верстку затем необходимо порезать на блоки, которые будут разделены на фрагменты и начинены логикой языка программирования.
Обычные сборщики предполагают как раз сборку в единую верстку из фрагментов. Например pug позволяет создавать шаблоны, блоки, «шорткоды», которые затем собираются в единый файл html.
В данном же случае верстка изначально была разделена на такие части, как например:
- Шапка сайта
- Подвал сайта
- Блок основного содержимого между ними
- Блоки для билдера:
- Вывод категорий на главную
- Полная форма заявки
- Список логотипов
- И другие
Сокращаем временные разрывы
Таким образом у нас получилось немного сэкономить время на разработку. Так как разработка проводилась параллельно, фронт и бэкенд.
Оптимизация верстки для поискового продвижения
Нам кажется странным сегодня на этапе разбора дизайна на фрагменты перегружать сайт, который в дальнейшем станет неподъемным мастодонтом. В таком случае приходится снова лезть в дизайн, разбирать изображения, подгонять под размер, оптимизировать, перелопачивать верстку.
Нет, определенно наш подходил лучше:
- На этапе дизайна размеры изображений подогнаны на глаз в соответствии с их посадочными местами в верстке
- Изображения подогнаны попиксельно и экспортированы с оптимальным сжатием
- Код верстки сверстан таким образом, чтобы соответствовать семантической нагрузке контента
- И соответствует требованиям W3C
Разработка бэкенда
Когда мы разрабатываем сайты WordPress, обязательно используем фрейморки, такие как Unyson. По своей сути это расширение, которое позволяет сделать 2 основные вещи:
- Получить легкий pagebuider
- Начинить сайт дополнительными полями и вывести эти данные в «морду»
И, хотя, с данным дополнением мы получаем возможность реализации широкого спектра возможностей, в данном проекте основная работа проводилась средствами стандартного функционала WordPress.
Снова про SEO
Так как в проекте заложена ветвистая система подачи информации, речь идет о разделении на категории услуг, акции, географии и делению по производителю, решено было не насиловать функционал страниц и было созданы тип-посты и таксономии для их группировки.
Да будет Url твой правильный
В свою очередь это породило проблемы генерации урлов. Так как базово заложено проведение таксономий через разделитель, например «/blog/». Что нам категорически не подходило. Одно дело блог, другое — важная таксономия в качестве категории услуг. WordPress немного сопротивляется созданию нестандартной системы ЧПУ. Для данного проекта был разработан собственный генератор rewrite-rules, который позволил сформировать структуру и работать с родными функциями WordPress.
Таким образом страницы таксономий мы «посадили» в обычные страницы, а кастомные статьи получили возможность на них отображатся.
Хорошим примером работы этого решения является вывод цен в категории, например, стиральных машин.
Так же понадобилось переписать генерацию Unyson breadcrumbs (хлебные крошки), так как сайт имеет свою структуру url`ов. Данные параметры связи задаются вручную в настройках сайта.
Каждой кастомной записи — свой шаблон
Такое разделение позволило не только облегчить работу с большим количеством информации на сайт, но и задать каждой из страниц свой шаблон для вывода.
Помимо этого, для некоторых страниц тоже были созданы свои шаблоны, например FAQ — построен по принципу комментариев. В нем есть форма, из которой в админку попадают вопросы. И после ответа уходят обратно, уже в виде списка, который можно развернуть.

Только актуальное
Для акций мы сформировали логику, которая будет прятать вниз, а затем в архив морально устаревшие акции. Актуальные и постоянные поднимаются вверх, как пузырьки воздуха, дабы всегда быть на виду.
Каждому запросу — своя статья
Это действительно легкий и годный подход, который мы и использовали на старте. И хотя этот пункт — работа с текстом, в данном кейсе идет последний, начали мы работу с ними в самом начале, как только получили ядро и полный доступ к админке старого сайта.
А затем принялись скрещивать слона с единорогом реанимировать тексты.
Основная их проблема, да и в принципе проблема старого сайта в плане продвижения было то, что заголовки на страницах, в тайтлах были очевидно вытащены без какой-либо обработки из, например, WordStat. В чистом виде, повторяюсь.
Поэтому все это время работы с текстами мы пытались найти баланс между «ключи, ключи, ключи, побольше ключей» и «это можно читать».
При этом надо признать, что были блоки старых текстов, которые вполне вписывались в это «между» и, следовательно, были перенесены, как есть.