Создание двух корпоративных сайтов по поставке оборудования для термообработки на платформе «1С-Битрикс» и решении «Аспро»

Задача по созданию сайта

К нам в «АБМ» ИТ-интегратор обратилась компания «Термомеханикс» для создания сайта по продаже оборудования Deya для термообработки. Особенностью обращения было то, что сайт необходимо было сделать к началу выставки производственных компаний, где планировалось принимать обращения от новых клиентов через сайт.

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

Как сайт будет реализован

В короткий срок создать новый сайт можно только на готовом решении, поэтому предложили клиенту заказать сайт на решении «Аспро». В котором уже есть всё необходимое: структура разделов и страниц, функциональность, гибкие настройки, адаптация под фирменный стиль, каталог и возможность заказать интересующую продукцию через формы обратной связи, а также по телефону и электронной почте.

В процессе проведения переговоров, мы выяснили, что клиент ранее уже приобретал лицензии на платформу «1С-Битрикс: Управление сайтом» в редакции «Стандарт», а также на флагманское решение «Аспро: Корпоративный сайт 3.0». Имеющиеся лицензии платформы и решения полностью подходили под задачи проекта, но срок их действия в скором времени заканчивался — мы предложили продлить лицензии в процессе работы.

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

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

Управление проектом

Управление проектом по созданию сайта мы ведём в нашем Битрикс24 — заводим проект и задачу с назначением ответственных, учётом трудозатрат и фиксацией рабочего процесса. Детализация из задачи после выполнения работ попадает в итоговый отчёт для сдачи-приёмки.

Создание сайта в «АБМ» ИТ-интегратор мы выполняем по отработанному годами внутреннему регламенту для снижения сроков проведения работ с одновременным повышением их качества. Частные случаи, которых не описаны в регламенте, решаются индивидуально нашими компетентными специалистами, прошедшими обучение и сертификацию.

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

Создание сайта бренда «Deya» на «1С-Битрикс» и «Аспро»

Получение доступов и лицензий

Сначала мы запросили у клиента доступ к панели управления доменом ycdeya.ru и номер имеющегося лицензионного ключа «1С-Битрикс: Управление сайтом»6, к которому привязан купон лицензии решения «Аспро: Корпоративный сайт 3.0»4.

Полученную информацию мы добавили в наши реестры с контролем доступа, что гарантирует их сохранность и своевременное продление.

Аренда и подготовка сервера Timeweb

Имеющийся у клиента обычный shared-хостинг (виртуальный хостинг) не подходил под задачи. В таком хостинге один сервер используется несколькими пользователями одновременно и они все вместе пользуются одним и тем же программным обеспечением без возможности его конфигурирования. А без этого снижается производительность и защищённость сайта.

Поэтому решено было сайт устанавливать на виртуальный сервер сайта Таймвеб5. Кроме преимуществ самого виртуального сервера и удобной панели управления, в Таймвеб выгодные тарифы, обширные возможности и отличная поддержка.

Мы зарегистрировали аккаунт провайдера облачной инфраструктуры Timeweb и оформили заказ виртуального сервера VDS для сайта по тарифу Cloud 50 с параметрами: CPU 2 x 3.3 ГГц, RAM 4 ГБ, NVME 50 ГБ.

На сервере настроили удалённый доступ через ssh-ключи и подключились с локальных рабочих мест по ssh в IDE Visual Studio Code.

К новому серверу привязали имеющийся домен через A-запись в DNS. Таким образом всё было подготовлено к конфигурированию сервера с последующей установкой на него сайта.

Настройка сервера и BitrixVM 

Настройка сервера начинается с обновления операционной системы и всех установленных пакетов, что мы и сделали. Затем создали пул управления сервером в виртуальной машине BitrixVM и настроили службу Push/RTC через NodeJS. Запустили задание на создание SSL-сертификата Let's Encrypt — и, они были успешно установлены для доменов (домен сайта без «www» и с «www»). Проверка цепочки сертификатов показала, что сертификаты установлены корректно.

Это значит, что сайт может работать по защищённому протоколу https, охраняя личные данные пользователей и улучшая ранжирование сайта в поисковых системах. Если SSL-сертификат не установлен, то браузеры выводят уведомление, что такой сайт небезопасен для использования.

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

Установка «1С-Битрикс» и «Аспро» с базовой настройкой

Для чистой установки сайта в корень его директории был загружен скрипт bitrixsetup.php и запущен мастер установки платформы «1С-Битрикс: Управление сайтом», а далее и решения «Аспро: Корпоративный сайт 3.0» с тематикой «Станки и оборудование» и видом «Универсальный».

В процессе установки был создан пользователь с правами суперадминистратора (с ID=1) для клиента, а также выполнены базовые настройки. В результате мы получили установленный сайт «Аспро: Корпоративный сайт 3.0» с готовой структурой и дизайном.

Для дальнейших работ были созданы служебные пользователи платформы с правами администратора. Выполнено обновление платформы «1С-Битрикс» и решения «Аспро», несмотря на то, что они были только что установлены. Выполнена настройка всех модулей платформы с проверкой на ошибки и производительность.

Сразу были выполнены настройки модуля «Проактивная защита», которые требуют дополнительной конфигурации служб сервера и «Битрикса». Все выявленные уязвимости, в том числе критические — были устранены.

Настроен почтовый сервер на postfix для отправки писем электронной почты из «1С-Битрикс». Дополнительно были настроены DNS-записи домена дял повышения доверия к почтовым отправлениям — это записи: SPF, DKIM и DMARK.

Также было настроено выполнение агентов cron (планировщике событий сервера), который работает стабильнее и производительнее, чем если бы события выполнялись на хитах.

В файле .htaccess настроили редиректы с «http» на «https» и с «www» на «без www» для склейки зеркал, чтобы дубликаты url сайта индексировались поисковыми системами, как один сайт, не конкурируя друг с другом. А чтобы страницы сайта с демонстрационной информацией не попали в поисковые системы сайт был полностью закрыт от индексации в robots.txt.

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

Настройка фирменного стиля

Фирменный стиль сайта включает настройку цвета, шрифта и логотипа с иконками. Мы запросили у клиента информацию о его фирменном стиле и получили файл логотипа. По которому определили цвета сайта: основной красный цвет (#e40615) и дополнительный голубой цвет (#00a0e8). Цвета были применены через переменные в специальном файле custom.css.

Под начертание букв в логотипе был подобран шрифт из доступных в решении «Аспро».

Файл логотипа был отредактирован под потребности сайта по размеру и пропорциям. На основе логотипа были сгенерированы файлы иконок в разных размерах для иконки браузера favicon и файла manifest.json, из которого иконки применяются для мобильных и прочих устройств. Логотип и иконки были добавлены в настройки решения «Аспро».

Настройка структуры сайта на «Аспро»

Работы по наполнению начинались с подготовки файла структуры сайта со всеми страницами сайта в табличном виде. Были проведены переговоры с клиентом по структуре сайта на основе файла, было решено использовать следующие страницы и разделы: «Главная страница», «Каталог», «Услуги», «Статьи», «О компании», «Контакты», «Соглашение на обработку персональных данных». А также было определено, откуда и какой контент будет использоваться для наполнения.

Были скрыты неиспользуемые страницы и разделы (но не удалены, как делают некоторые), которые изначально входят в состав решения «Аспро», для всех пользователей в публичной части сайта, при этом у администраторов сайта доступ остался. Аналогично были настроены все меню, для удобства скрытые пункты меню для администраторов были отмечены специальной иконкой. Также всё, что скрыто, было отмечено запрещённым для индексации роботами поисковых систем в файле robots.txt. Таким образом администратор сайта может безопасно готовить скрытые разделы и страницы перед публикацией, не утратив их.

Наполнение сайта

Контент для каталога товаров был предоставлен самым первым — с него и начали, наполнив раздел «Каталог».

По просьбе клиента были убраны подразделы в каталоге, чтобы в корневом разделе сразу были выведены товары. Стандартной подобной настройки не было, поэтому мы нашли решение с редиректами в файле .htaccess, исключающими подраздел в url, пример:

# RedirectMatch 302 ^/sections/delete_sections/$ /sections/

RedirectMatch 302 ^/product/multi-purpose-chamber-furnace-line/$ /product/multi-purpose-chamber-furnace-line/linii-khto-na-osnove-universalnykh-kamernykh-pechey-periodicheskogo-deystviya/

За каталогом последовало наполнение раздела «Услуги» — здесь, по согласованию с клиентом, был незначительно скорректирован демонстрационный контент решения «Аспро», который отлично подошёл под сферу деятельности клиента.

Далее был настроен раздел «Статьи» для самостоятельного наполнения клиентом. В качестве примера была опубликована одна статья, которую клиент сможет копировать и быстро создавать аналогичные публикации.

Обязательно были наполнены страницы «Контакты» и «О компании». Дополнительно на страницы были добавлены конверсионные кнопки «Задать вопрос» и «Позвонить».

В соответствии с Федеральным законом № 152-ФЗ «О персональных данных» была создана страница «Соглашение на обработку персональных данных».

Блоки каталога, услуг и статей блога — были выведены на «Главной странице». В самом верху настроены три адаптивных баннера в слайдере также с конверсионными кнопками.

Чтобы заявки на покупку оборудования приходили в Битрикс24 клиента, мы заменили стандартные формы обратной связи решения «Аспро» на CRM-формы Битрикс24, что является штатным функционалом и не требует доработки. Также настроен виджет сайта с онлайн-чатом.

В процессе наполнения были решены незначительные визуальные проблемы решения «Аспро», для чего мы создали тикеты в поддержку разработчика и предоставили временный доступ к сайту — он всё самостоятельно исправил.

SEO-оптимизация и веб-аналитика

Для всех страниц и разделов сайта настроены мета-теги:

• title — заголовок страницы, отображается в результатах поиска и в заголовке вкладки браузера.

• description — краткое описание содержания страницы, которое отображается в сниппете поисковой выдачи.

Для статических страниц мета-теги добавлены фиксированно, для динамических разделов (каталог, услуги, блог) — настроены шаблоны автоматической генерации мета-тегов для разделов и страниц, а также настроены теги изображений:

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

• title — задаёт всплывающую подсказку, которая появляется, когда пользователь наводит курсор на изображение. Этот текст не заменяет Alt, а дополняет его, предоставляя дополнительную информацию о картинке.

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

Была настроена и сгенерирована карта сайта sitemap.xml, ссылка на которую была указана в настройках индексации сервиса Яндекс.Вебмастер.

Для сбора данных о посещаемости был создан и добавлен на сайт счётчик веб-аналитики «Яндекс.Метрика». Доступ к счётчику был предоставлен клиенту на его адрес электронной почты.

Подготовка к запуску и публикация сайта

Установлены актуальные обновления на сервер и платформу «1С-Битрикс: Управление сайтом», а также на решения из «Маркетплейс», в том числе на решение «Аспро: Корпоративный сайт 3.0».

Были проведены стандартные проверки платформы: полное тестирование системы, проверка и оптимизация базы данных, проверка производительности, сканер безопасности и другие.

Далее сайт был открыт для индексации роботами поисковых систем в robots.txt и была создана резервная копия сайта средствами «1С-Битрикс».

Установка сайта на сервер CentOS93 завершена. С этого момента сайт был полностью готов для информирования посетителей и приёмки заказов.

Создание копии сайта по всем брендам

Спустя несколько месяцев от клиента был получен запрос на создание копии сайта по всем брендам для своей компании «Термомеханикс».

Если на первом сайте фокус был сделан на один бренд «Deya» и позиционирование в качестве представителя в России. То на новом сайте акцент должен быть сделан на компании «Термомеханикс» и отдельное внимание должно быть уделено продажам оборудования для термообработки разных производителей.

Кстати, клиент снова участвует в выставке — «Термообработка 2024»! На этот раз к нам обратились заранее, а значит будет больше времени на планомерную работу.

Копирование и установка второго сайта на «Аспро»

Платформа «1С-Битрикс: Управление сайтом» поддерживает многосайтовость — это возможность создавать несколько сайтов на одной лицензии продукта. Все сайты имеют разные адреса и публичную часть, но при этом одну административную панель и базу данных. Решение «Аспро: Корпоративный сайт 3.0»4 может быть также использовано для нескольких сайтов. Что в итоге составляет существенную выгоду на лицензиях.

В настройках виртуальной машины BitrixVM был создан второй сайт с ссылкой на ядро Bitrix первого сайта «Deya», настроен домен и сгенерирован бесплатный SSL-сертификат.

Наполнение контентом корпоративного сайта на «Аспро»

Обсудили с клиентом разделы сайта. На втором сайте раздел «Статьи» заменили на «Новости», а также в раздел «О компании» добавили подраздел «Бренды».

Установили логотипы, цвета, шрифт, иконки для браузера.

Чтобы создать каталоги товаров, мы создали инфоблоки для разделов «Оборудование» и «Услуги». Перенесли с первого сайта контент в разделах «Услуги» и «Контакты», после чего выполнили его настройку для корректного отображения на втором сайте. Настроили и опубликовали раздел «Новости».

В разделе «Оборудование» создали основные категории товаров. Наполнили конкретными товарами все категории, вывели их на главную. Создан и выведен на главную раздел «Бренды». На страницы для каждого из брендов добавлены текстовые описания.

Подключены и выведены на главную CRM-формы из Bitrix24 клиента. Добавлен промо-баннер выставки с отдельной CRM-формой.

Настроено применение разных стилей в файле custom.css для автоматического выбора стиля сайта. То есть, для каждого сайта у посетителей будут отображаться соответствующие стили.

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

Настройка индексации и SEO, подготовка сайта к эксплуатации

Итак, после наполнения сайта контентом специалисты «АБМ» ИТ-интегратор выполнили последние штрихи для настройки сайта и SEO. Большинство из них те же самые, что и для первого сайта:

• Создан и установлен новый счётчик Яндекс.Метрики.

• Открыты все разделы для индексирования в robots.txt.

• Для всех страниц и разделов сайта настроены мета-теги.

• Перевели корпоративный сайт «1С-Битрикс» с временного домена на основной.

• Выпустили SSL-сертификаты для основного домена.

• Настроены обязательные редиректы (HTTP — HTTPS, www — без www).

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

Чтобы устранить проблему, мы настроили права на папки и файлы в корневых директориях для первого и второго сайта — /home/bitrix/www/ и /home/bitrix/ext_www/.

Удалили карту первого сайта, создали ее заново. Затем сгенерировали и проверили карту второго сайта.

Добавили второй сайт в Яндекс.Вебмастер и Google Search Console. После этого карту сайта отправили на индексацию.

Перед выставкой мы тщательно проверили весь сайт, чтобы клиент не опозорился на выставке.

Нашли ошибку в верстке новости о выставке — исправили.

Проверили шаблон мобильной версии сайта. Найдены некорректные иконки в подвале сайта — исправили это в css-файле. Также была исправлена адаптивность изображения в разделе «О компании». Других проблем не обнаружили.

Приступили к финальному техобслуживанию сайта и сервера:

1. Создали снапшот сервера для фиксации его текущего состояния перед дальнейшими работами. Если что-то пошло не так, у нас есть возможность откатить процесс и начать его заново.

2. Обновили системы сервера, платформу «1С-Битрикс»6 и установленные решения.

3. Выполнен переход с MySQL 5.7 на MySQL 8.0.

4. Включили автокомпозитное кэширование, после чего перезагрузили сервер.

5. Поддомен для разработки удалён из сервиса Джино, из настроек платформы «1С-Битрикс» и из настроек сервера в службах httpd и nginx.

6. Перезагружены службы httpd и nginx.

7. Успешно сгенерированы новые SSL-сертификаты для основного домена.

8. Удалили снапшот сервера.

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

Закажите сайт или интернет-магазин на готовом решении

Мы в «АБМ» ИТ-интегратор оперативно запустили 2 корпоративных сайта, обеспечив легкую управляемость из единой административной панели и значительную экономию ресурсов на поддержке.

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