SEO-разметка HTML: title, meta, заголовки и alt

Поисковая оптимизация начинается не с «магических плагинов», а с понятной разметки. HTML задаёт сигналы: о чём страница, какой заголовок в выдаче, что на изображении.

Title и description

title — главный текст вкладки и часто заголовок сниппета. Meta description влияет на текст описания в выдаче (не всегда напрямую на ранжирование, но на CTR — да). Пишите уникально под интент страницы.

Заголовки и контент

Один ясный h1, дальше логичные h2. Ключевые слова впишите естественно. Скрытый текст и переспам — путь к проблемам, не к росту.

Изображения и ссылки

Alt описывает содержание картинки. Анкоры ссылок — говорящие («курс CSS»), а не «тут». Практическое закрепление — в итоговом проекте.

HTML

<head>
  <meta charset="UTF-8">
  <title>Создание лендинга услуги — пошаговый гайд</title>
  <meta name="description" content="Как собрать лендинг услуги: структура блоков, HTML-каркас и ошибки новичков.">
  <link rel="canonical" href="https://example.com/landing-guide">
</head>
<body>
  <main>
    <h1>Как собрать лендинг услуги</h1>
    <h2>Структура первого экрана</h2>
    <p><img src="/hero.jpg" alt="Схема первого экрана лендинга с оффером и формой"></p>
  </main>
</body>

Практическое задание

Задание: улучшите SEO-каркас учебной статьи.

  • Уникальные title и description под тему страницы
  • Ровно один h1, минимум два h2
  • У изображения осмысленный alt
  • Есть хотя бы одна внутренняя ссылка с понятным анкором