HTML — это базовый язык разметки, на котором создаются веб-страницы. Поисковые системы могут получать важные сигналы для ранжирования из определённых HTML-элементов. Ниже — ключевые из них для достижения SEO-успеха.
Глава 4: HTML-код и факторы успеха
Ht: HTML-тег заголовка (Title Tag)
Представьте, что вы написали 100 разных книг, но дали им одинаковое название. Как кто-либо поймёт, что они на разные темы?
Или если названия есть, но они не описательные — одно-два слова. Снова, как сразу понять, о чём книга?
HTML-заголовок (тег <title>) был и остаётся важнейшим HTML-сигналом для поисковиков, который помогает понять, о чём страница. Плохие заголовки — как плохие названия книг в примере выше. Настолько важны, что если Google сочтёт ваш <title> плохим или неинформативным, он может заменить его своим вариантом в выдаче.
Что делать?
Опираясь на исследование ключевых слов, продумайте, по каким запросам должна находиться каждая страница. Затем создавайте уникальные, описательные и привлекательные заголовки для каждой.
Рекомендации:
- Длина: 50-60 символов (чтобы не обрезались в выдаче).
- Ключевое слово — ближе к началу.
- Бренд — обычно в конце.
- Избегайте шаблонов и «мусорных» слов («Главная», «Добро пожаловать»).
Яндекс крайне чувствителен к заголовкам. В Яндекс.Вебмастере можно настроить автоматическую генерацию заголовков по шаблону, но лучше создавать их вручную для важных страниц. Яндекс иногда формирует свой заголовок на основе заголовка H1 или текста ссылок, ведущих на страницу.
Hd: Мета-тег описания (Meta Description Tag)
Это один из старейших HTML-элементов, который позволяет предложить поисковикам, как вы хотели бы, чтобы ваша страница описывалась в результатах поиска (сниппетах).
Если <title> — это название книги, то <meta description> — это аннотация на обложке, описывающая её содержание.
Технически: Мета-описание не является прямым фактором ранжирования. Это фактор кликабельности (CTR). Оно влияет на то, как выглядит ваш результат, если вы уже попали в топ благодаря другим факторам.
Почему же это фактор успеха?
- Описание, содержащее искомые ключевые слова (которые в выдаче часто выделяются жирным), привлекает взгляд.
- Хорошо составленное описание «продаёт» переход по ссылке.
- Всё это может привести к увеличению кликов, что косвенно положительно влияет на SEO.
Важно: Наличие тега не гарантирует, что поисковик будет использовать именно ваше описание. Алгоритм может сгенерировать свой фрагмент из текста страницы, если сочтёт его более релевантным запросу. Но дать системе хороший вариант — всегда полезно.
Рекомендации:
- Длина: 120-160 символов (оптимально для отображения).
- Призыв к действию (Call to Action): «Узнайте…», «Скачайте…», «Читайте обзор…».
- Уникальность для каждой страницы.
- Естественное включение ключевых слов.
Hs: Структурированные данные (Structured Data)
А что, если вы могли бы прямо «объяснить» поисковикам, о чём ваш контент, на их собственном «языке»? Это возможно с помощью структурированной разметки данных (schema markup) — специального кода, который помогает поисковым системам однозначно понимать содержание и структуру страницы.
Результат — это то, что Google называет «расширенным сниппетом» (rich snippet): результат поиска с дополнительными элементами, которые делают его более привлекательным и полезным (звёзды рейтинга, цена, калорийность блюда, дата мероприятия).
Прямым фактором ранжирования разметка не является. Но это мощный фактор успеха, потому что:
- Повышает кликабельность (CTR): Выделенный результат притягивает больше внимания.
- Улучшает понимание контента роботом, что может помочь в релевантности.
- Необходима для попадания в особые блоки (карусели товаров, «быстрые ответы» и т.д.).
Основной стандарт: schema.org. Размечать можно статьи, товары, организации, рецепты, события и многое другое.
Яндекс активно поддерживает микроразметку (как schema.org, так и свою форматную — Microformat, JSON-LD). Она критически важна для отображения в «колдунщиках» (специальных блоках выдачи Яндекса): карточках товаров, рецептов, организаций. Проверить разметку можно в валидаторе Яндекс.Вебмастера.
Hh: Теги заголовков (Header Tags: H1-H6)
Посмотрите на главный заголовок статьи. «Под капотом» он, скорее всего, оформлен HTML-тегом <h1>. Подзаголовки разделов — это <h2>, подразделы внутри них — <h3> и так далее.
Теги заголовков — это формальный способ обозначить ключевые разделы страницы. Поисковики давно используют их как дополнительный сигнал о тематике. Если слова, по которым вы хотите ранжироваться, находятся в этих тегах, у вас немного больше шансов появиться в результатах по ним.
Главное правило: Используйте теги логически и иерархически, отражая структуру документа (как оглавление).
- H1: Главный заголовок страницы. Должен быть один.
- H2: Основные разделы.
- H3: Подразделы внутри H2.
- Не пропускайте уровни (после H1 должен идти H2, а не сразу H3).
Чего избегать?
- Помещать в теги
H1-H2целые абзацы текста. - Использовать заголовки только для SEO, без визуального и смыслового выделения для пользователя.
- Создавать «скрытые» заголовки (например, с помощью CSS
display: none).
Заголовки полезны, когда они отражают реальную структуру страницы и делают контент удобочитаемым — и для людей, и для роботов.
Ha: Доступность (Web Accessibility)
Что это? Практика создания сайтов, которыми могут пользоваться все люди, включая тех, кто имеет ограниченные возможности (проблемы со зрением, слухом, моторными функциями). Это не только этический и юридический вопрос, но и фактор, улучшающий юзабилити для всех и качество кода.
Как это связано с SEO? Роботы поисковых систем — по сути, «слепые пользователи». Они полагаются на семантическую разметку и корректный HTML для понимания контента. Многие принципы доступности напрямую совпадают с лучшими практиками SEO:
- Альтернативный текст для изображений (alt): Помогает слабовидящим и является важным фактором для поиска по картинкам.
- Семантическая структура HTML: Правильное использование тегов
<header>,<nav>,<main>,<article>,<footer>помогает скринридерам и роботам навигировать по странице. - Заголовки (H1-H6): Создают логическую структуру, что критично и для доступности, и для SEO.
- ARIA-атрибуты: Дополнительно описывают элементы интерфейса для вспомогательных технологий.
- Цветовой контраст и управление с клавиатуры: Улучшают общий пользовательский опыт.
Практика: Проверьте свой сайт с помощью инструментов вроде WAVE Evaluation Tool или Lighthouse (раздел Accessibility). Начните с самого важного: добавьте осмысленные alt-тексты ко всем информативным изображениям и проверьте иерархию заголовков.