titleSEO-аудит страницы за пять минут

Где живёт SEO-информация

Код страницы делится на две части. В <body> лежит всё, что видит посетитель: тексты, картинки, кнопки. А в <head> — служебная информация для браузера, поисковиков и мессенджеров. Посетитель её не видит, но именно отсюда Яндекс берёт заголовок для выдачи, а Telegram — картинку для превью ссылки.

Чтобы заглянуть в head, откройте DevTools, во вкладке Elements разверните строку <head> по треугольнику. Вот теги, которые стоит проверять:

На Тильде всё это задаётся в настройках страницы: заголовок и описание — в основных настройках, canonical и запрет индексации — в разделе SEO, превью — в разделе для соцсетей. А проверять результат удобнее всего в DevTools: там видно, что в итоге попало в код.

Title и description: что увидят в выдаче

Title и description — это ваше «объявление» в органической выдаче. От них зависит, кликнут на сайт или на конкурента. Правила простые:

• Title — 30–65 символов. В начале главный запрос («генеральная уборка»), дальше уточнение: город, выгода, бренд. Длинный заголовок поисковик обрежет многоточием.
• Description — 100–160 символов. Выгоды, цифры, призыв к действию. Хорошая проверка: подойдёт ли этот текст как объявление в Директе?
• Уникальность. У каждой страницы свои title и description. Одинаковые на десяти страницах — типичная ошибка шаблонов.

Поисковик не обязан брать ваше описание: иногда Яндекс и Google собирают сниппет из текста страницы. Но хорошее description повышает шанс, что покажут именно его.

Превью ссылки в мессенджерах

Когда ссылку отправляют в Telegram или VK, мессенджер берёт данные из тегов Open Graph: og:title, og:description и og:image. Без них превью получается пустым или случайным, и по ссылке кликают реже. Для рассылок и посевов в каналах это особенно важно.

Мессенджеры запоминают превью. Если вы исправили теги, а Telegram показывает старую версию, отправьте ссылку боту @WebpageBot: он обновит превью.

Заголовки H1–H6 и alt у картинок

Заголовки на странице — это её оглавление. По ним поисковик понимает структуру и главную тему:

• H1 — один на страницу, это её тема с главным запросом.
• H2 — разделы: «Что входит в уборку», «Цены», «Отзывы».
• H3 — подразделы внутри H2. H4–H6 на лендингах нужны редко.

Частая ошибка в конструкторах: дизайнер выбирает тег по размеру шрифта. Логотип становится H1, потому что он крупный, а важный раздел — обычным текстом.

Alt — текстовое описание картинки. Его читают поисковики и программы для незрячих, а ещё по нему картинка может попасть в поиск по изображениям. Пишите alt как подпись для человека: «Кухня после генеральной уборки», а не «уборка уборка москва недорого».

Поиск во вкладке Elements

Искать глазами в длинном коде долго. Кликните по дереву во вкладке Elements и нажмите Ctrl+F (на Mac — Cmd+F). Внизу появится строка поиска. Она понимает обычный текст, например <h1, и CSS-селекторы — короткие формулы для поиска элементов. Полезные для SEO:

Исходный код и Elements — не одно и то же

Во вкладке Elements показана страница в её текущем состоянии, после того как отработали все скрипты. А исходный код — то, что сервер отдал браузеру в самом начале. Открыть его можно сочетанием Ctrl+U (на Mac — Cmd+Option+U) или правой кнопкой → «Просмотр кода страницы».

Разница важна для SEO. Если блок появляется только после работы скрипта — например, каталог, цены или отзывы из стороннего виджета, — в исходном коде его нет. Яндекс и Google умеют выполнять скрипты, но не всегда и не сразу. Самое важное для поиска — заголовки, основной текст, цены — надёжнее держать прямо в исходном коде.

В исходном коде тоже работает поиск Ctrl+F. Если нужной фразы там нет, а на странице она есть — значит, её дорисовал скрипт.

Микроразметка

Микроразметка — данные о компании в формате, понятном поисковику: название, адрес, телефон, рейтинг, цены. Благодаря ей в выдаче могут появиться звёздочки, адрес и другие подробности. Чаще всего её записывают блоком <script type="application/ld+json"> в head. Проверить, что поисковик её понимает, можно в валидаторе микроразметки Яндекс Вебмастера или на validator.schema.org. А сверить данные с сайтом можно прямо в коде — этим и займёмся.

Бонус: Lighthouse проверит базовое SEO сам

Откройте вкладку Lighthouse, оставьте отмеченной категорию SEO и нажмите Analyze page load. Через полминуты появится оценка и список проблем: нет description, страница закрыта от индексации, у картинок нет alt, текст слишком мелкий для телефона, ссылки без понятного текста. Это не заменяет ручную проверку, зато хорошо ловит забытые мелочи.

Чек-лист пятиминутного SEO-аудита

1. Нет noindex в meta robots (поиск в Elements: noindex).
2. Canonical ведёт на адрес этой же страницы.
3. Title 30–65 символов, с главным запросом в начале, уникальный.
4. Description 100–160 символов, с выгодами и призывом.
5. Есть og:title, og:description и og:image, превью в Telegram выглядит прилично.
6. H1 один, и он про тему страницы.
7. H2 отражают разделы страницы, уровни не перепрыгивают без причины.
8. У содержательных картинок есть осмысленный alt (поиск: img:not([alt])).
9. Важные тексты и цены есть в исходном коде (Ctrl+U, затем Ctrl+F).
10. Телефон, адрес и рейтинг в микроразметке совпадают с сайтом.

Домашнее задание

Пройдите чек-лист на своём лендинге и на странице главного конкурента. Сравните title и description: чьё «объявление» в выдаче вы бы кликнули? Отправьте ссылку на свою страницу себе в «Избранное» Telegram и посмотрите на превью. Если что-то нашлось, исправьте в настройках страницы и проверьте результат в DevTools ещё раз.