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

1. Вводная задача от заказчика, проблематика, цели

Клиент пришёл к нам с техническим заданием, где были детали по SEO и дизайн-макеты в Фигме. Нам нужно было:

• Привести дизайн-макеты к единому виду
• Проконсультировать клиента по атрибуту Sizes
• Сделать админку для редактирования контента
• Учитывать все детали SEO-оптимизации

Задача — разработать сайт на WordPress с учётом SEO-оптимизации.

2. Описание реализации кейса и творческого пути по поиску оптимального решения

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

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

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

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

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

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

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

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

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

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

Занимались SEO-оптимизацией

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

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

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

3. Результаты сотрудничества

В итоге, закрыли следующие задачи:

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

Николай Стебунов

Руководитель, Бюро интернет-маркетинга

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