Что такое On-Page SEO?

Вопрос

Что такое On-Page SEO и какие элементы страницы фронтенд-разработчик контролирует напрямую?

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

On-Page SEO — это оптимизация элементов, находящихся непосредственно на странице: title, meta description, иерархия заголовков, атрибуты alt, структура URL и внутренняя перелинковка. В отличие от off-page факторов (ссылки с других сайтов), всё это полностью в руках разработчика и верстается напрямую в HTML.

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

Ключевые on-page элементы, за которые обычно отвечает фронтенд:

• <title> — самый весомый on-page фактор. Должен быть уникальным для каждой страницы, отражать её содержимое и укладываться примерно в 50-60 символов (иначе Google обрежет его в выдаче). Формируется динамически на уровне страницы, а не статично на весь сайт.
• meta description — не влияет на ранжирование напрямую, но влияет на CTR (click-through rate) в выдаче, так как отображается как сниппет под заголовком. Должен быть уникальным, 150-160 символов, содержать релевантные ключевые слова естественно.
• Иерархия заголовков h1-h6 — один h1 на страницу, логичная вложенность разделов (см. предыдущий вопрос про семантику).
• alt у изображений — описывает содержимое картинки текстом. Важно для доступности (скринридеры) и для Google Images, а также как fallback, если картинка не загрузилась. Декоративные изображения должны иметь alt="", а не отсутствие атрибута.
• Внутренняя перелинковка (internal linking) — ссылки между страницами сайта передают "вес" (link equity) и помогают боту находить и обходить страницы. Анкорный текст ссылки (<a>текст</a>) должен быть описательным, а не "нажмите здесь".
• Структура URL — читаемый, короткий, содержащий ключевые слова URL (/blog/kak-uskorit-lcp лучше, чем /page?id=8321). URL должен быть стабильным — изменение структуры без 301-редиректов роняет накопленный SEO-вес страницы.
• Уникальность контента — дублирующийся title/description/текст на разных URL размывает релевантность и может привести к тому, что Google сам выберет, какую версию индексировать (canonical), не всегда ту, что нужна вам.

На практике во фреймворках вроде Nuxt эти вещи задаются через useSeoMeta / useHead на уровне каждой страницы, а не в одном глобальном файле — иначе все страницы получат одинаковый title, что убивает on-page SEO.

Пример

<head>
  <title>Кроссовки Nike Air Max — купить в Shop с доставкой</title>
  <meta
    name="description"
    content="Оригинальные кроссовки Nike Air Max. Более 20 моделей в наличии, доставка по России за 1-3 дня."
  />
</head>
<body>
  <h1>Nike Air Max: каталог</h1>

  <img
    src="/img/air-max-90.jpg"
    alt="Кроссовки Nike Air Max 90 белого цвета, вид сбоку"
  />

  <nav>
    <a href="/nike-air-max/air-max-90">Air Max 90</a>
    <a href="/nike-air-max/air-max-97">Air Max 97</a>
  </nav>
</body>

// Nuxt: уникальные meta-теги на уровне конкретной страницы
useSeoMeta({
  title: 'Кроссовки Nike Air Max — купить в Shop с доставкой',
  description:
    'Оригинальные кроссовки Nike Air Max. Более 20 моделей в наличии, доставка по России за 1-3 дня.'
})

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

• Почему meta keywords больше не используется современными поисковиками?
• Как правильно организовать alt для декоративных и информативных изображений?
• Что произойдёт с SEO, если поменять структуру URL без редиректов?