Как избежать 404 для CSS-файлов с хешем после нового билда

При каждом новом билде веб-приложения генерируются файлы стилей с уникальным хешем в имени (например, index-a1b2c3.css). Поисковые боты, однажды проиндексировав старую версию, возвращаются к ней и получают ошибку 404. Разберём, как этого избежать, и оценим популярные решения.

Почему боты получают 404 на старые CSS

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

Вариант 1: хранение старых файлов в течение 3 месяцев

Это самый надёжный способ. Вы складываете все предыдущие версии CSS и JS в отдельную директорию и настраиваете сервер так, чтобы они были доступны по старым путям. Через 3 месяца (или другой срок) старые файлы можно удалять - к тому времени боты уже обновят индексацию. Минус: требуется дополнительное дисковое пространство и автоматизация очистки.

Вариант 2: редирект на статичный CSS через nginx

Идея: при запросе index-*.css перенаправлять бота (или всех пользователей) на index.css без хеша. Однако это плохое решение, так как:

• Потеря кэширования - браузеры будут загружать один и тот же файл, а не версию с хешем, что снижает производительность.
• Риск конфликта версий - если вы обновили стили, а старый файл ещё закэширован, пользователи увидят устаревший дизайн.
• Боты могут не выполнять редиректы - некоторые роботы (например, старые версии Googlebot) могут проигнорировать 301/302 и засчитать 404.

Лучшее решение: комбинация кэширования и редиректов

Оптимальный подход - настроить долговременное кэширование для файлов с хешем (Cache-Control: max-age=31536000) и использовать редирект 301 со старых URL на новые, если бот всё же запрашивает устаревший ресурс. В nginx это можно сделать так:

location ~* \.(css|js)\.(\w+)\.(css|js)$ {
    try_files $uri @fallback;
}
location @fallback {
    rewrite ^/index-(.*)\.css$ /index.css permanent;
}

Этот вариант гарантирует, что бот не получит 404, а пользователи будут забирать актуальную версию с хешем.

Дополнительные рекомендации

• Используйте CDN - он может автоматически обслуживать старые версии.
• Настройте X-Robots-Tag: noindex для страниц, которые ссылаются на несуществующие ресурсы.
• Регулярно проверяйте логи сервера на 404 ошибки по статике.

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