Что такое SEO и как оно устроено технически?

Вопрос

Что такое SEO, как поисковые системы обрабатывают страницы (краулинг, индексация, ранжирование) и почему это важно для фронтенд-разработчика?

Короткий ответ

SEO (Search Engine Optimization) — это оптимизация сайта так, чтобы поисковые системы могли его легко обойти (crawl), сохранить в своей базе (index) и показать высоко в выдаче по релевантным запросам (rank). Фронтендер напрямую влияет на первые два этапа: если бот не может обойти или разобрать страницу, она никогда не попадёт в выдачу — независимо от качества контента.

Подробный ответ

Поисковая система проходит три последовательных этапа:

1. Crawling (обход) — специальный бот (Googlebot и т.п.) переходит по ссылкам с уже известных страниц, скачивает HTML, а также выполняет JavaScript (с задержкой и не всегда полностью), чтобы найти новые URL. Обход ограничен crawl budget — количеством страниц, которое бот готов обойти за раз, поэтому лишние редиректы, дублирующиеся URL и медленный сервер этот бюджет расходуют впустую.
2. Indexing (индексация) — после скачивания страницы бот строит из неё DOM (Google рендерит JS через отдельный сервис, называемый Web Rendering Service), извлекает текст, заголовки, метатеги, структурированные данные и решает, добавлять ли страницу в индекс. Страница может быть обойдена, но не проиндексирована (например, из-за noindex или дублирующегося контента).
3. Ranking (ранжирование) — при запросе пользователя алгоритм сортирует проиндексированные страницы по сотням факторов: релевантность контента, скорость загрузки (Core Web Vitals), мобильная адаптивность, авторитетность домена (ссылки), безопасность (HTTPS) и т.д.

Почему это касается фронтендера:

• Рендеринг напрямую влияет на индексацию. Чисто клиентский SPA (CSR) отдаёт боту почти пустой HTML, а контент появляется только после выполнения JS — это увеличивает риск, что часть контента не попадёт в индекс или попадёт с задержкой. SSR/SSG (например, Nuxt) решают эту проблему, отдавая готовый HTML сразу.
• Семантика и структура HTML — заголовки h1-h6, атрибуты alt, доступный текст ссылок помогают боту понять, о чём страница.
• Производительность — Core Web Vitals официально входят в ранжирующие факторы Google.
• Технические детали — корректные статус-коды, canonical, robots.txt, sitemap.xml, отсутствие блокирующих индексацию ошибок — всё это в зоне ответственности разработчика, а не маркетолога.

Иными словами, SEO — это не только про ключевые слова и контент-маркетинг. Значительная часть — техническая, и она находится в руках фронтенд- и фулстек-разработчиков.

Пример

<!-- Минимальный "здоровый" HTML-документ с точки зрения краулинга и индексации -->
<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <title>Купить кроссовки Nike Air Max — интернет-магазин Shop</title>
    <meta
      name="description"
      content="Кроссовки Nike Air Max в наличии. Доставка по России, оригинал, гарантия."
    />
    <link rel="canonical" href="https://shop.example.com/nike-air-max" />
    <meta name="robots" content="index, follow" />
  </head>
  <body>
    <!-- Контент присутствует в исходном HTML сразу, а не подгружается через JS -->
    <h1>Nike Air Max</h1>
    <p>Оригинальные кроссовки с доставкой за 1 день.</p>
  </body>
</html>

Дополнительные вопросы

• Чем отличается crawl budget от crawl rate?
• Как проверить, что именно видит Googlebot на вашей странице?
• Почему страница может быть проиндексирована, но не показываться в выдаче?