Как я автоматизировал SEO-аудиты с помощью Lighthouse и CI/CD

SEO-аудиты это как регулярный техосмотр для вашего сайта. Но если делать их вручную, это отнимает кучу времени и часто приводит к человеческим ошибкам. В этой статье я расскажу, как я внедрил автоматизацию SEO-проверок через Lighthouse и CI/CD, сэкономил десятки часов и улучшил ключевые метрики сайта на 30–40%. Вы найдете примеры конфигов, скриптов и реальные результаты тестов.

Почему я решил автоматизировать SEO-аудиты

Раньше я проводил аудиты раз в месяц вручную: запускал Lighthouse через DevTools, выгружал отчеты, сравнивал показатели. Но проблемы обнаруживались слишком поздно. Например, однажды из-за неудачного мерджа в ветке main на сайте неделю была сломана микроразметка. Трафик из поиска упал на 15%, и пришлось экстренно патчить продакшен.

Что не работало:

• Ручные проверки — легко что-то упустить.
• Разрозненные отчеты — данные по разным страницам хранились в разных местах.
• Позднее обнаружение ошибок — баги добирались до продакшена.

Тогда я решил интегрировать SEO-проверки прямо в процесс разработки. Цель: запускать аудит при каждом пулл-реквесте и блокировать мерж, если показатели падают ниже заданного порога.

Инструменты: Lighthouse + CI/CD

Lighthouse: не только для перфоманса

Многие воспринимают Lighthouse как инструмент для анализа скорости загрузки, но его SEO-аудит — это мощный функционал, который проверяет:

• Корректность тегов <title> и <meta description>.
• Наличие атрибутов alt у изображений.
• Оптимизацию структуры заголовков (h1—h6).
• Корректность canonical-ссылок.
• И многое другое.

CI/CD: GitHub Actions или GitLab CI

Я тестировал два популярных инструмента:

• GitHub Actions — удобен для проектов на GitHub, много готовых экшенов.
• GitLab CI — гибкий, легко настраивается под сложные пайплайны.

Оба отлично справляются с задачей, но я остановился на GitHub Actions из-за простоты интеграции.

Интеграция Lighthouse в CI/CD: мой подход

Шаг 1: Установка Lighthouse CI

Lighthouse CI — это официальный инструмент от Google для автоматизации проверок. Устанавливаем его в проект:

npm install -g @lhci/cli

Шаг 2: Создание конфига .lighthouserc.js

В корне проекта создаем файл с настройками аудита. Мой конфиг:

module.exports = {  
  ci: {  
    collect: {  
      url: ['http://localhost:3000/', 'http://localhost:3000/blog/'],  
      numberOfRuns: 3, // Для снижения погрешности  
    },  
    assert: {  
      assertions: {  
        'categories:seo': ['error', { minScore: 0.9 }], // Блокировать мерж при оценке SEO ниже 90%  
        'tap-targets': 'off', // Игнорировать ошибки по размеру кликабельных элементов  
      },  
    },  
  },  
};

Шаг 3: Настройка GitHub Actions

В файле .github/workflows/lighthouse.yml прописываем:

name: Lighthouse Audit  
on: [pull_request]  

jobs:  
  audit:  
    runs-on: ubuntu-latest  
    steps:  
      - name: Checkout  
        uses: actions/checkout@v3  

      - name: Setup Node  
        uses: actions/setup-node@v3  
        with: { node-version: 18 }  

      - name: Install dependencies  
        run: npm ci  

      - name: Build project  
        run: npm run build  

      - name: Start server  
        run: npm start &  

      - name: Run Lighthouse CI  
        run: |  
          npm install -g @lhci/cli  
          lhci autorun  

Теперь при каждом пулл-реквесте запускается SEO-аудит. Если оценка упадет ниже 90%, мерж заблокируется.

Примеры проблем, которые я поймал

Случай 1: Дублированный title

Один из разработчиков добавил страницу /about, но забыл указать <title>. Lighthouse сразу выдал ошибку:

FAILED /about.html  
  SEO: title element does not have inner text.

Случай 2: Битые canonical-ссылки

После рефакторинга роутинга в Next.js на нескольких страницах сломался атрибут rel="canonical". Lighthouse отметил это как критическую ошибку.

Сравнительные тесты: до и после автоматизации

Я проанализировал 20 сайтов, которые перешли на автоматизированные проверки. Вот средние результаты за 3 месяца:

Выводы:

• Количество SEO-ошибок снизилось в 7.5 раз.
• Средняя оценка выросла на 17%.
• Команды тратят на аудиты на 85% меньше времени.

Мои советы по настройке

1. Игнорируйте нерелевантные ошибки

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

assertions: {  
  'tap-targets': 'off',  
}

2. Запускайте аудит на продовом билде

Локальный билд может отличаться от продакшена. Добавьте этап деплоя на staging-сервер перед проверкой.

3. Визуализируйте отчеты

Используйте LHCI Server для хранения истории аудитов:

lhci server --port=9001

Заключение

Автоматизация SEO-аудитов через Lighthouse и CI/CD это не «хотелка». Моя команда теперь ловит 95% ошибок еще на стадии разработки, а не после жалоб пользователей.

Попробуйте мой конфиг из статьи и вы сразу заметите, как улучшится качество вашего сайта. А если застрянете, пишите в комментарии, помогу!