Техподдержка сайта на React: Экзегет

Сайт был создан в 2017 году: разработчики пропустили этап тестирования и сдали его заказчику совсем сырым. У него были свои особенности.

1. Ошибки компиляции. Далеко не все из них были сложными: зато их количество было внушительным;
2. Неактуальные данные на тестовом;
3. SEO-ошибки.

Работу решили строить по отработанной схеме. В чат с заказчиком добавлена вся техническая команда из middle- и senior-программистов и аккаунт-менеджера. Узнаем о проблемах из Telegram, быстро задаем дополнительные вопросы, ставим задачу в наш трекер — Redmine. Фиксируем детали задачи и трудозатраты, а затем отчитываемся клиенту в чате.

Часть актуальных и работающих страниц регулярно отдавали 404-ю ошибку. Пришлось повозиться с отладкой проекта, но мы нашли причину. Предыдущие программисты проверяли страницы на наличие заполненного title. Если он не был указан, специалисты настраивали редирект на страницу с ошибкой 404. Такое решение привело и к проблемам в поисковом продвижении: страницы выпали из индекса и не ранжировались в выдаче.

Мы модифицировали код и устранили ошибки.

Кроме отдельных страниц отдавали 404-ю ошибку многие фото на сайте. Так происходило из-за неправильного формирования ссылки. Программисты нашли проблему в коде и настроили правильную генерацию ссылок.

По подробному ТЗ от клиента провели техническую SEO-оптимизацию сайта:

• исправили ошибки HTML;
• добавили нужные теги в robots.txt;
• сделали динамическую генерацию sitemap;
• закрыли от индексации ссылки из личного кабинета;
• настроили правильные редиректы.

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

По желанию клиента настроили вывод мета-тегов. Теперь они выводятся в связке современного HTTP middleware framework Koa и уже давно зарекомендовавшей себя библиотеки React Helmet.

Ссылка на Telegram-канал в подвале сайта определялась в сервисах-анализаторах как проблемная. Самое очевидное и легкое решение — закрыть ее от индексации. С тегом noindex проблема решалась только в Яндексе, но не в Google.

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

Новая функция нужна были и SEO-специалистам, и администраторам сайта. Раньше для замены title и description требовались технические специалисты, которые вносили изменения в базу данных.

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

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

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

Сначала исправили банальные ошибки — настроили правильную генерацию URL-адресов, чтобы страницы при переходе не отдавали 404-ю ошибку.

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

С этим клиентом мы уже видим хорошие результаты. За 2 месяца сотрудничества:

• количество технических ошибок снизилось более чем в 2 раза;
• на тестовом и боевом появились актуальные компоненты и решения;
• все страницы были проиндексированы поисковиками.