Разработали сайт для строительной компании по всем канонам SEO-оптимизации: кейс Дачвилл

Привет, это Лиза из Лиги А! В октябре прошлого года к нам пришёл клиент с задачей — сделать многостраничный сайт на WordPress. Пришли рассказать, как поработали с дизайн-макетами, картинками, админкой и SEO. Рассказываем, как это было.

Мы в Лиге разрабатываем проекты для дизайн-студий, диджитал-агентств и продуктовых команд. Работаем с разными форматами — от простых лендингов до сложных сервисов.

Ведём телеграм канал и другие соцсети про нашу айтишную жизнь — пишем о проектах, клиентах и работе с дизайнерами.

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

— Помогли сделать дизайн-макеты лучше, чтобы потом было легко и быстро собрать проект в рамках единой системы компонентов

— Предложили решения по реализации отдельных задач, связанных с функционалом или визуалом

— Помогли найти подходящие решения по анимации и адаптации элементов под разные экраны и устройства

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

— Применили все свои знания и опыт по SEO-оптимизации — теперь сайт максимально заточен под дальнейшее продвижение

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

Помогли сделать макеты лучше

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

Вместе с этим, мы приводили макеты к единому виду — правили шрифты и отступы, чтобы на этапе разработки нам было удобнее и быстрее верстать страницы.

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

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

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

Добавили отзывчивые изображения

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

Для работы с контентом на сайте мы использовали атрибут Sizes и указали браузеру, какое изображение нужно использовать в зависимости от размера и разрешения устройства.

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

Сделали админку

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

Не было смысла писать что-то кастомное или тащить сложные решения, поэтому мы остановились на самой популярной — WordPress.

Учли все детали SEO

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

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

Для оптимизации мы использовали:

— Классы и тэги — инструменты для организации и идентификации контента на сайте, которые помогают сайту быстрее найти нужный блок.

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

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

Менеджер проекта — Катя

Фронтенд-разработчик — Оля

Бэкенд-разработчик — Ваня

Тестировщик — Саша

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

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

Работу с нами можно начать даже на самом раннем этапе — когда ещё нет дизайна, но уже возникла мысль что-то обновить. Мы с партнёрами погрузимся в ваш бизнес и сделаем сайт как надо)

Пишите на почту или сразу мне в телеграм — @gingerliza.