SEO — как сайт попадает в поиск

1. Как работают поисковики

Поисковая система делает три вещи: краулит (обходит страницы роботом), индексирует (сохраняет содержание в базу) и ранжирует (решает, что показать на запрос). Задача разработчика — сделать первые два этапа беспроблемными.

# жизненный цикл страницы в поиске
1. Робот находит страницу по ссылке или sitemap.xml
2. Скачивает HTML и связи (CSS, JS, картинки)
3. Разбирает содержание и складывает в индекс
4. По запросу пользователя алгоритм ранжирования
   решает: показать ли страницу и на каком месте

2. Семантический HTML и заголовки

Роботы не «видят» слой вёрстки так, как люди. Поэтому HTML должен описывать структуру: один <h1> на странице, логичные <h2>/<h3>, и семантические теги.

<main>
  <h1>Как настроить Nginx за час</h1>
  <article>
    <h2>Шаг 1: установка</h2>
    <p>...</p>
    <h3>Установка на Debian</h3>
  </article>
</main>

• Один <h1> на страницу — он и есть её тема;
• Заголовки по уровню: не прыгайте с h2 на h4 без причины;
• Семантика: <article>, <nav>, <main>, <footer>;
• Альт к картинкам: alt — это ещё и SEO-текст.

// у каждой картинки — осмысленный alt
<img src="cat.jpg" alt="Рыжий кот на диване">

3. Meta-теги и Open Graph

Заголовок страницы <title> и описание meta description показываются в сниппетах поиска. Open Graph задаёт превью для соцсетей и мессенджеров.

<head>
  <title>Как настроить Nginx за час | IT Уроки</title>
  <meta name="description" content="Пошаговая настройка
        Nginx: установка, server, location, HTTPS.">

  <!-- Open Graph -->
  <meta property="og:title" content="Как настроить Nginx">
  <meta property="og:description" content="Пошаговая настройка">
  <meta property="og:image" content="https://site.ru/preview.png">
  <meta property="og:type" content="article">
</head>

4. Core Web Vitals и скорость

Core Web Vitals — метрики скорости и стабильности, которые поисковики учитывают при ранжировании. Три главных показателя:

LCP  — Largest Contentful Paint
       когда появился главный контент (норма < 2.5 c)
INP  — Interaction to Next Paint
       отклик на клики (норма < 200 мс)
CLS  — Cumulative Layout Shift
       насколько страница «прыгала» (норма < 0.1)

5. Мобильная версия

Больше половины трафика — с телефонов, и поисковики индексируют именно мобильную версию (mobile-first indexing). Если сайт плохо читается на телефоне, ранжирование страдает.

// обязательный viewport в head каждой страницы
<meta name="viewport" content="width=device-width,
      initial-scale=1.0">

// не фиксируйте мелкие шрифты и тач-элементы
body { font-size: 16px; }
button { min-height: 44px; }

• шрифт от 16 px — комфортный минимум на мобильных;
• кнопки и ссылки — с достаточной тач-зоной;
• никакого горизонтального скролла на 360 px;
• картинки с srcset для разных экранов.

6. Schema.org — разметка для «богатых» сниппетов

Schema.org — общий словарь разметки, понимаемый поисковиками. JSON-LD в <head> описывает: рецепт, товар, статью, FAQ, организацию. За такую разметку в выдаче появляются рейтинги, цены и ответы.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Как настроить Nginx за час",
  "author": { "@type": "Person", "name": "IT Уроки" },
  "datePublished": "2026-01-10"
}
</script>

7. sitemap.xml и robots.txt

robots.txt подсказывает роботу, куда ходить не нужно, а sitemap.xml — список страниц, которые стоит проиндексировать.

# robots.txt — в корне сайта
User-agent: *
Allow: /
Disallow: /admin/
Sitemap: https://example.ru/sitemap.xml

# sitemap.xml — список страниц
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://example.ru/</loc>
    <lastmod>2026-01-10</lastmod>
  </url>
  <url>
    <loc>https://example.ru/nginx.html</loc>
    </url>
</urlset>

8. Аналитика и Search Console

Без данных SEO слепо. Два минимума для каждого сайта: аналитика посещений и поисковый консоль (Google Search Console, Яндекс Вебмастер).

// аналитика (Яндекс Метрика / GA4) в head
<script>
  (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a
  ||[]).push(arguments)};m[i].l=1*new Date();
  m[i].t=1*new Date();}...
</script>

// подключение консоли: добавить сайт → подтвердить
// Ownership через TXT-запись в DNS или мета-тег

9. Типичные ошибки и чек-лист

Большинство проблем SEO находятся и лечатся за вечер. Ведите такой чек-лист перед каждым релизом:

☐  HTTPS включён и редирект с HTTP настроен
☐  title и description уникальны на каждой странице
☐  один <h1>, иерархия заголовков
☐  alt у всех картинок
☐  sitemap.xml и robots.txt отдают 200
☐  нет битых ссылок (проверить: 404 в Search Console)
☐  страницы не дублируются (www/без www, http/https)
☐  Canonical-тег на главной версии страницы

10. Скорость загрузки и Core Web Vitals

Скорость — фактор ранжирования и главный враг конверсии: каждая лишняя секунда теряет покупателей. Google использует Core Web Vitals: LCP, INP и CLS.

// ключевые улучшения быстродействия
1. WebP/AVIF вместо JPEG, кэш через CDN
2. отложенная загрузка скриптов (defer, async)
3. Lazy loading изображений loading="lazy"
4. фиксированные размеры медиа против CLS
5. сжатие gzip/brotli + HTTP/2

11. Структура сайта и перелинковка

Понятная иерархия страниц помогает и людям, и поисковикам. Перелинковка распределяет вес между страницами и позволяет найти любую страницу не глубже трёх кликов.

Дом → Категория → Страница товара / статьи
3 клика максимум до любой страницы
каждая категория ссылается на смежные
хлебные крошки (breadcrumbs) везде
без ссылок на битые/пустые URL

• title и H1 — уникальные, содержат главный ключ страницы;
• URL короткие, читаемые, без параметров: /catalog/iphone-15;
• внутренние ссылки — анкоры с описательным текстом;
• XML-карту и robots.txt обновляйте при открытии новых разделов.

12. Региональное и мобильное SEO

Бизнес с локальными клиентами выигрывает за счёт региональности. Плюс Google перешёл на mobile-first индексацию: мобильная версия — базовая.

// региональные сигналы
✓ Н/НТП: «ремонт квартир в Казани»
✓ адрес и телефон на сайте, карты-local (Google Business / Яндекс Бизнес)
✓ heading и текст с регионом
✓ региональные каталоги и отзывы

13. Международное SEO: hreflang

Сайт с версиями на разных языках сталкивается с проблемой: поисковик не знает, какую версию показывать пользователю из конкретной страны. Тег hreflang связывает версии страницы между собой и подсказывает регион и язык.

<link rel="alternate" hreflang="ru" href="https://site.ru/">
<link rel="alternate" hreflang="en" href="https://site.com/">
<link rel="alternate" hreflang="x-default" href="https://site.ru/">

• каждая языковая версия ссылается на все остальные, включая себя;
• для разных стран одного языка — пары язык/регион: ru-ru, ru-by;
• x-default — версия по умолчанию, если язык не определён;
• hreflang добавляют и в HTTP-заголовок Link, если версии раздаёт код.

14. Технический аудит: план на день

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

// типовой технический аудит (порядок)
1. Серверные коды: карта 200/301/404 по разделам
2. Индексация: количество страниц в консоли
3. Canonical: дубли и путаница
4. title/description: длины и дубли
5. Скорость: LCP/INP/CLS на мобильном
6. Структура: трёхкликовость, битые ссылки
7. Разметка: ошибки Schema.org
8. Ошибки краулинга из Search Console

Проверки автоматизируются: краулер собирает весь сайт за минуты и отдаёт проблемы в CSV. В CI такие проверки держат как часть пайплайна — тогда поломка метрики попадёт к дежурному до пользователей.

// быстрая проверка кода ответа (curl)
curl -s -o /dev/null -w "%{http_code} %{url_effective}\n" \
  -L https://example.ru/nginx

15. SEO для интернет-магазинов

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

<meta name="robots" content="noindex">
// параметры фильтров и шагов пагинации закрываем
<link rel="canonical" href="https://shop.ru/catalog/phones">

• цена и остаток на складе — в разметке продукта;
• отзывы с реальным рейтингом — в сниппет;
• читаемые URL категорий вместо «?id=123»;
• фото в WebP с srcset и alt по названию товара.

16. E-E-A-T: доверие и качество контента

E-E-A-T — «опыт, экспертиза, авторитетность, доверие». Это не балл, а набор сигналов, по которым поисковик решает, показывать ли ваш контент на сложные запросы: медицина, финансы, юридические вопросы.

// сигналы доверия на странице
✓ автор с именем и биографией (Person)
✓ даты публикации и обновления
✓ контакты и страница «О компании»
✓ цитаты, данные, источники
✓ реальные отзывы и кейсы
✓ текст без воды и переспама

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

17. Семантическое ядро и кластеризация

SEO начинается не с тегов, а со слов: какие запросы пользователь печатает, чтобы найти ваш товар. Семантическое ядро — список таких запросов, собранный из подсказок, статистики и конкурентов.

1. собрать десятки запросов по теме
2. убрать мусор (неизвестные слова, «мусорные» фразы)
3. сгруппировать: ключ → страница
4. назначить страницы под кластеры

Кластеризация объединяет запросы по интенту: «купить куртку», «купить куртку мужскую» и «купить мужскую куртку» — один кластер, одна страница. Разные интенты («сшить куртку» или «как выбрать куртку») — отдельные страницы, иначе одна не ответит на оба.

18. SEO для SPA: SSR и пререндер

Одностраничные приложения на React/Vue отдают почти пустой HTML — краулеры видят только контейнер #root. Роботы могут выполнять JS, но ненадёжно, поэтому SPA требует специальной защиты.

• SSR — серверный рендеринг: HTML отдаётся готовый (Next.js, Nuxt);
• динамический рендеринг — роботам отдаётся пререндеренный HTML, людям обычное приложение;
• пререндер — статический HTML после сборки для нежной разметки;
• все маршруты должны иметь уникальные title/meta/OG, а не клоны главной.

# конфиг пререндера для SPA (пример)
routes: [ '/', '/catalog', '/product/*' ]
renderer: { headless: true, timeout: 10s }

19. Расширенные элементы выдачи

Помимо обычного сниппета, поисковики выделяют пункты выдач: избранные сниппеты (featured snippets), блоки «Люди также спрашивают», картинки. Попадание в них резко поднимает CTR.

Формат избранного сниппета:
«как установить node js» → ответ абзацем + шаги внутрь страницы.

• избранный сниппет получают страницы с коротким прямым ответом (абзац, список, таблица);
• оформляйте ответ конспектом: вопрос в заголовке h2/h3, ответ сразу под ним;
• структурированные данные (раздел 8) усиливают видимость в rich results;
• подписи к картинкам и alt помогают попасть в «Картинки» поиска.

20. Контент и ссылочная масса

Поиск ранжирует страницы по авторитетности: сколько и какие сайты на них ссылаются. Качество ссылок важнее количества, и прирост качества — результат контента, который цитируют.

• полезный контент притягивает ссылки органически (статьи, данные, инструменты);
• гостевые публикации логичны на тематических ресурсах — не каталогах;
• ссылки со страниц с нулевым трафиком почти не передают вес;
• покупаемые «донаты» рискованны: переспам ведёт к санкциям поиска.

Что цитируют вместо вас?
статистика → свои исследования
практики → чек-листы и гайды
инструменты → бесплатные утилиты

Что дальше

Соберите любую страницу, прогоните её через Lighthouse, подключите Search Console и понаблюдайте за индексацией неделю-другую. Про скорость и запросы — HTTP и DNS и Хостинг и деплой. Семантику разберите в HTML, а если сайт на фреймворке — в Nuxt или Next.js есть готовые решения для мета и пререндера.

← Вернуться к курсам