Разметка для SEO

Поисковая оптимизация на HTML: мета-теги, заголовки, Open Graph, микроразметка Schema.org, canonical, robots и структура страницы.

Уровень: начальный 12 разделов 1,5 часа

1. Как поисковик читает страницу

Поисковая система приходит на страницу, скачивает HTML, разбирает структуру и индексирует текст. Для неё страница — это не картинка, а документ: заголовки, абзацы, разметка. SEO начинается не с рекламы и ключевых слов, а с понятного браузеру и поисковику документа.

контент первичен: уникальный, осмысленный текст;
структура: один h1, логичные заголовки, семантические теги;
техника: скорость, мобильность, безопасность (https);
внешнее: ссылки с других сайтов и внутренние ссылки.

Правило настройки: сначала помогите людям, потом роботам. Страница, полезная человеку, почти всегда понятна и поисковику. Обратное — не факт.

2. Язык, кодировка, title и description

Первые атрибуты страницы — её «паспорт» для робота: язык в <html lang>, кодировка, уникальный title и description. Они показываются в поиске: title — заголовок сниппета, description — подстрока описания.

<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Как выбрать ноутбук 2026 — гайд | IT Уроки</title>
  <meta name="description"
        content="Практичный гайд: процессор, память, экран и выбор под задачи. Сравнение и чек-лист перед покупкой.">
</head>

title ≤ 60–70 символов: содержит ключевую мысль и уникален на каждой странице;
description ≤ 150–160 символов и содержит призыв (что сделает читатель);
lang="ru" помогает переводу и подборке языковых версий;
один h1 на страницу — главная тема документа.

Дублирующиеся title «О нас | Сайт», «Каталог | Сайт» на сотнях страниц — потеря ранжирования: каждый должен нести свою тему. Генерация названий в CMS — одна строка шаблона, но огромная ценность.

3. Заголовки — скелет документа

Заголовки h1–h6 структурируют текст так же, как для читателя: парсинг оглавления. Поисковик определяет по ним главную тему (h1) и подтемы (h2, h3). Размечайте ими реальные разделы, а не дизайнерский размер.

<h1>Как выбрать ноутбук в 2026 году</h1>

<h2>Процессор: что важно</h2>
<h3>Intel Core и AMD Ryzen — разница для задач</h3>
<h2>Оперативная память</h2>
<h2>Экран и вес</h2>

h1 — один, это тема всей страницы (не бренд, не «Главная»);
иерархия без прыжков: h1 → h2 → h3;
в заголовках — ключевые слова естественно, не спам;
заголовки не являются разметкой кнопок и списков.

4. Семантика и robots

Семантические теги (article, section, nav, main, time) помогают роботу отделить содержимое от служебного. Файлы robots.txt запрещают индексацию технических разделов, а мета-тег robots действует на страницу.

<article>
  <h1>…</h1>
  <time datetime="2026-03-10">10 марта 2026</time>
</article>

<!-- robots.txt -->
User-agent: *
Disallow: /admin/
Disallow: /search?

<!-- (не)индексация страницы мета-тегом -->
<meta name="robots" content="index, follow">

теги вместо div помогают роботу: article — статья, time — дата;
служебные разделы (admin, личный кабинет, поиск) закрываем от индексации;
noindex — у чёрновиков и дублей (страница параметров, фильтры);
robots.txt запрещает обход, но не гарантирует исключение из индекса — для этого noindex.

5. canonical и дубли

Одна и та же страница часто доступна по нескольким адресам: /item, /item?id=1, /item/?utm=.., печатная версия. canonical сообщает: «главный адрес этой страницы — такой». Такой сигнал склеивает дубли и переносит вес ссылок.

<link rel="canonical" href="https://site.com/item/42">

<!-- если параметры сортировки порождают адреса копий —
     на исходник ставится canonical -->

canonical указывает на главную версию при дублях URL;
адрес в canonical — абсолютный (с https://домен/);
главная версия должна открываться и быть индексируемой;
canonical на саму себя — нормальный и правильный вариант.

Самый частый источник дублей — приставленные к адресам параметры (utm, сортировки). Если они нужны для аналитики — их не индексирует само редирект, а canonical решает остальное.

6. Open Graph и соцсети

Когда ссылку вставляют в мессенджер или соцсеть, превью собирается из Open Graph-тегов: заголовок, описание, картинка. По умолчанию там будет первая картинка и часть текста — настройки формируют аккуратный сниппет с большим изображением.

<meta property="og:type" content="article">
<meta property="og:title" content="Как выбрать ноутбук 2026">
<meta property="og:description" content="Процессор, память и экран без лишней воды.">
<meta property="og:image" content="https://site.com/img/cover.jpg">
<meta property="og:url" content="https://site.com/item/42">
<meta name="twitter:card" content="summary_large_image">

og:title/description совпадают с сутью, а не с title страницы;
картинка 1200×630 (og:image) — стандарт по горизонтали с большим текстом-акцентом;
og:url совпадает с canonical: не давайте дублирующего адреса;
проверка превью — валидоторы (developers.facebook.com/tools/debug, Twitter card validator).

7. Микроразметка Schema.org

Микроразметка помечает данные для расширенных сниппетов: цена, рейтинг, часто задаваемые вопросы, адрес. Современный способ — JSON-LD в <script type="application/ld+json">: описание объекта без вмешательства в HTML.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Как выбрать ноутбук 2026",
  "datePublished": "2026-03-10",
  "author": { "@type": "Person", "name": "IT Уроки" },
  "image": "https://site.com/img/cover.jpg"
}
</script>

JSON-LD ни на что не влияет визуально — только для поиска;
валидируйте в Schema.org Validator / Search Console Rich Results;
не выдумывайте разметку «на событие», которого нет — штраф и потеря доверия;
часто достаточно Article, Product, FAQPage, Organization, LocalBusiness.

8. Sitemap и Search Console

sitemap.xml — карта страниц сайта для роботов: список URL, дат обновления и приоритетов. Search Console (сейчас простое зеркало Google) показывает, какие страницы проиндексированы, с ошибками и запросами.

<sitemap.xml>
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://site.com/notebook-guide</loc>
    <lastmod>2026-03-10</lastmod>
    <priority>0.8</priority>
  </url>
</urlset>

sitemap упрощает обход, но не обязателен для малых сайтов (каталог в шапке);
в sitemap — только индексируемые адреса, без дублей и noindex;
URL ссылается на себя в robots.txt (Sitemap: …);
Search Console сообщает об ошибках при загрузке и индексации.

9. ЧПУ и внутренние ссылки

Понятный адрес (ЧПУ) говорит о содержимом: /notebook-guide лучше /p?id=78. Внутренние ссылки ведут робота по сайту и передают вес страницам — это бесплатная и важная часть SEO.

<!-- хорошие адреса -->
https://site.com/guides/notebook-2026
https://site.com/item/42/recipe-cake

<!-- внутренние ссылки с описательным текстом -->
<a href="/guides/notebook-2026">как выбрать ноутбук</a>
<a href="/item/42">рецепт лимонного кекса</a>

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

10. Скорость и мобильность как фактор

Search считает быстрые и мобильные страницы более качественными: mobile-first индексация означает, что робот оценивает мобильную версию сайта. Core Web Vitals — часть уровня качества, поэтому оптимизация скорости — это и SEO.

<!-- мобильная версия: viewport обязателен -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- медленные ресурсы режут индекс: картинки с размерами и оптимизированы,
     шрифты с swap, JS с defer (подробности в курсе Производительность) -->

без viewport мобильный робот видит «зоопарк» страницы;
LCP/CLS/INP в порядке → страница в зелёной зоне качества;
мобильная версия — единственный вариант индексации: робот ходит по ней;
обстоятельности JS и шрифты не должны блокировать первую отрисовку.

11. Проверка индексации

SEO — цикл: публикация → индексация → анализ → правки. Проверять состояние удобно «изнутри»: видеть в поиске, считать в Search Console, экспортировать из аналитики.

проверка: site:site.com в поиске — сколько страниц в индексе;
Search Console: покрытие, ошибки, запросы и CTR по страницам;
инструменты тестирования: Rich Results, Schema validator;
аналог для Яндекса — Вебмастер: те же проверки.

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

12. Чек-лист разметки

Быстрый контроль технической базы перед публикацией.

lang, charset, уникальные title и description на каждой странице;
один h1, структурная иерархия заголовков;
семантика: article/section/nav/main/time используются по делу;
canonical на каждой индексируемой странице;
Open Graph собраны (отдельно проверьте картинку);
микроразметка валидна и честна;
robots.txt и sitemap.xml на месте, служебные разделы закрыты;
мобильная версия с viewport, страницы быстрые, без дублей URL.

Что дальше

Курс завершён.

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