Этап 3 из 19 · ≈ 3 ч

Основы SEO

Полезно знать с Junior

Что нужно поисковикам от страницы — заголовки, мета-теги, скорость, индексируемость и разметка.

Поисковик должен страницу найти, прочитать и понять.

Что важно знать

  • <title> и <meta name="description"> — то, что видно в выдаче; уникальные для каждой страницы.
  • Семантические заголовки и осмысленный текст в HTML.
  • Индексируемость: контент, который появляется только после выполнения JavaScript, поисковики видят хуже и позже — для важных страниц используют SSR или статическую генерацию.
  • robots.txt, sitemap.xml, канонический адрес (rel="canonical") против дублей.
  • Структурированные данные (schema.org в JSON-LD) — расширенные сниппеты.
  • Скорость и Core Web Vitals влияют на ранжирование.
  • Человекочитаемые адреса и корректные коды ответа: 404 для несуществующих страниц, 301 для переездов.
  • Open Graph-теги — превью ссылок в мессенджерах и соцсетях.

Критерии освоения

Junior ≈ 3 ч

  • Задаёт уникальные title и description, семантические заголовки и человекочитаемые адреса

Практика. Проверить свой сайт в Lighthouse по разделу SEO и исправить все замечания.

Middle ≈ 4 ч

  • Настраивает robots.txt, sitemap, канонические адреса и Open Graph
  • Объясняет, почему контент только на клиенте хуже индексируется, и выбирает SSR или статическую генерацию для публичных страниц
  • Добавляет структурированные данные schema.org

Практика. Настроить sitemap, канонические адреса, Open Graph и JSON-LD для каталога и проверить в инструментах поисковиков.

Проверка знаний

Войдите, чтобы пройти тест: сданный тест отмечает тему пройденной на карте и в ИПР.

Вопросы с собеседований

Смотреть все
Что фронтенд-разработчику нужно знать про SEO?Junior

Поисковик должен получить содержимое страницы, понять его и оценить качество. Для этого: контент доступен в HTML без обязательного выполнения JS (SSR или статическая генерация для публичных страниц), уникальные title и description, один h1 и иерархия…

Полный разбор
Какие мета-теги нужны странице — title, description, Open Graph?Junior

title — заголовок во вкладке и в выдаче (до ~60 символов), meta description — сниппет (~150 символов), viewport — для мобильных, canonical — основной адрес страницы, robots — noindex при необходимости. Open Graph (og:title, og:description, og:image, og:url) и…

Полный разбор
Зачем нужны robots.txt и sitemap.xml?Junior

robots.txt в корне сайта говорит роботам, какие разделы не обходить (админка, корзина, бесконечные фильтры) и где лежит sitemap. Это не защита: страница может попасть в индекс по внешним ссылкам, а закрывать индексацию нужно мета-тегом robots noindex…

Полный разбор
Что такое семантическая разметка HTML и зачем она нужна?Junior

Семантические теги описывают смысл содержимого: header, nav, main (один на странице), article, section, aside, footer, заголовки h1–h6 по иерархии, button для действий, a для переходов, ul/ol для списков, table для таблиц данных. Это нужно скринридерам…

Полный разбор
Чем отличаются CSR, SSR, SSG и ISR?Middle

CSR — сервер отдаёт пустую страницу и JS, всё рисует браузер: просто, но медленный первый показ и слабое SEO; подходит для личных кабинетов. SSR — HTML собирается на сервере на каждый запрос: быстрый первый показ и SEO, свежие данные, но нужен сервер и время…

Полный разбор

Документация

← Вся карта «Frontend-разработчик»

Партнёр платформы

Разбор собеседования с sotto

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

Разбор собеседования