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

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

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

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

— Привести дизайн-макеты к единому виду

— Проконсультировать клиента по атрибуту Sizes

— Сделали админку для редактирования контента

— Учитывать все детали SEO-оптимизации

Подробнее об этапах расскажем ниже.

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

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

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

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

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

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

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

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

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

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

Сначала клиент просил добавить Critical CSS — когда для первого экрана стили прописаны не в отдельном файле/блоке, а непосредственно в коде. Но в процессе разработки мы от него отказались, потому что заметили скачки в контенте при загрузке страницы. 

— Привели дизайн-макеты к единому виду, чтобы сэкономить время во время вёрстки

— Проконсультировали клиента по атрибуту Sizes, чтобы ускорить загрузку страниц сайта 

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

— Учли все детали SEO-оптимизации. Поработали с загрузкой страниц, поиском и выдачей