Давай разберёмся, как использовать все возможности HTML и почему это основа для SEO, видимости в ИИ и структуры сайта.
Что такое семантический HTML?
HTML – это язык разметки, который придаёт тексту структуру. Например:
- Тег <p> обозначает абзац.
- Тег <h1> обозначает главный заголовок страницы.
- Тег <ol> создаёт нумерованный список.
- Тег <img> загружает изображение.
Раньше сайты делали именно так: контент оборачивали в нужные теги, а CSS использовали для оформления. Это помогало поисковикам и людям понимать структуру страницы.
Но потом появились WYSIWYG-редакторы и JavaScript-фреймворки, и HTML отошёл на второй план. Вместо понятных тегов вроде <p> или <table> появились бесконечные вложенные <div> и <span> . Теперь страницы стали бесструктурными, и их смысл можно понять, только когда браузер полностью загрузит и отрисует их.
Почему важна правильная структура HTML для SEO
Именно поэтому Google тратит ресурсы на рендеринг страниц в процессе индексации (хотя на самом деле не особо хочет этого делать).
Мы знаем, что Google обычно не успевает отрендерить новостную статью до того, как ей нужно попасть в блок Top Stories и другие места выдачи. Поэтому исходный HTML имеет огромное значение для новостных сайтов.
Качественный HTML позволяет Google без лишних усилий извлечь контент статьи и разместить её на достойных позициях в экосистеме поиска.
Роль семантического HTML
Семантическая разметка играет ключевую роль. Именно поэтому специалисты по SEO настаивают, чтобы заголовок статьи был обёрнут в тег <h1> и чтобы на странице статьи был только один такой тег.
Почему это важно
- Тег
<h1>указывает основной заголовок страницы. - Он показывает, где начинается статья.
- Помогает Google быстро найти и понять основной контент.
Google и другие поисковики тратят ресурсы на рендеринг страниц, но предпочитают работать с чистым HTML. Особенно это важно для новостных сайтов – если контент не видно в исходном коде, шансы попасть в топ снижаются.
Какие HTML теги являются семантическими
Помимо заголовка <h1>, существует множество других семантических HTML-элементов, которые помогают Google легче извлекать и индексировать контент вашей статьи.
Основные семантические теги для контента
- Абзацы: Используйте тег <p> для разделения текста на абзацы, а не <div> или <span>. Этот тег существует столько же, сколько и HTML, и предназначен именно для этого.
- Подзаголовки: Применяйте теги <h2>, <h3> и <h4>, чтобы структурировать страницу. Они помогают выделить разделы статьи и улучшить восприятие как пользователями, так и поисковыми системами.
- Изображения: Для отображения картинок, которые должны индексироваться Google, используйте тег <img>. Поисковик напрямую рекомендует это.
- Кликабельные ссылки: При создании ссылок на внутренние или внешние страницы применяйте тег <a> с атрибутом href, содержащим целевой URL. Это единственный формат, который Google гарантированно обрабатывает.
- Связанные ссылки: Тег <link> помогает установить связь между текущим URL и другим – например, для канонических страниц, таблиц стилей или языковых версий.
- Списки: Для маркированных списков используйте <ul>, а для нумерованных – <ol>. Стиль можно изменить с помощью CSS, но семантическую основу должны составлять именно эти теги.
- Выделение: Для акцентирования текста применяйте <em> (курсив) и <strong> (полужирное начертание).
Семантические теги для структуры страницы
- <head> и <body> разделяют метаданные страницы (в <head>) и основной контент (в <body>).
- <header> – обертка для верхней части сайта: логотип, меню, элементы навигации.
- <nav> – контейнер для основного меню сайта (включая мегаменю или компактные навигационные панели).
- <section> – выделяет отдельные смысловые блоки страницы, например, статью или блок комментариев.
- <article> – область основного контента, включая заголовок и текст статьи. Особенно ценен для новостных ресурсов.
- <aside> – дополнительный контент: боковые панели, рекомендации, последние новости.
- <footer> – нижняя часть сайта с контактами, ссылками и копирайтом.
Почему это важно для SEO
Применение семантических тегов помогает поисковым системам понять назначение каждого элемента на странице, ускоряет индексацию и повышает релевантность контента. Перед тем как использовать <div>, проверьте, нет ли уже подходящего HTML-тега для вашей задачи.
```html
Как это помогает искусственному интеллекту
Известно, что LLM-модели, такие как ChatGPT и Perplexity, используют открытый веб для обучения, а также для выполнения пользовательских запросов, требующих контента из интернета.
Однако мало кто знает, что LLM не обрабатывают JavaScript при анализе веб-страниц.
Исключением является Google, который вложил значительные ресурсы в рендеринг страниц для их индексации.
Поскольку Google Gemini – это единственная LLM, созданная на основе поискового индекса Google, именно она использует контент с полностью отрендеренных страниц.
Если вы хотите повысить шансы на то, что ChatGPT или Perplexity будут ссылаться на ваш ресурс, необходимо, чтобы весь контент страницы был доступен в исходном HTML-коде без необходимости рендеринга.
Использование семантической HTML-разметки для структурирования кода помогает LLM проще находить и определять основной контент страницы.
Моделям вроде ChatGPT гораздо легче проанализировать несколько десятков семантических тегов, чем сотни или тысячи вложенных <div>, чтобы выделить главное содержимое.
Если когда-либо появится так называемый «агентский веб» (в чем есть сомнения), семантический HTML, скорее всего, станет одним из ключевых факторов успеха.
При использовании бессмысленных <div> и <span> вероятность того, что ИИ неправильно поймёт, какие действия нужно выполнить, значительно выше.
Применяя семантические HTML-теги для кнопок, ссылок и форм, вы снижаете риск того, что ИИ-агент не справится с задачей.
Смысл, заложенный в корректные HTML-теги, подскажет ИИ, куда перейти и что сделать.
Что насчет структурированных данных
Можно подумать, что структурированные данные сделали семантический HTML устаревшим.
Действительно, с помощью структурированных данных можно в удобном машинном формате передать системам информацию о содержимом и назначении страницы.
Однако структурированные данные не были задуманы как замена семантическому HTML – у них совершенно иное назначение.
У структурированных данных есть ограничения, которых нет у семантической разметки.
- Они не укажут, какая кнопка добавляет товар в корзину.
- Не покажут, какой подзаголовок относится к важному абзацу текста.
- Не определят, по каким ссылкам стоит перейти для получения дополнительной информации.
Используйте структурированные данные, чтобы обогатить страницы и помочь системам понять ваш контент, но не забывайте и про семантический HTML.
Вместе семантический HTML и структурированные данные создают непревзойденную комбинацию.
Создавайте сайты, а не веб-приложения
Сайты для доставки контента (например, новостные порталы) в большинстве случаев значительно лучше работают в виде традиционных HTML-страниц, чем в формате веб-приложений.
Настоящие сайты строятся на HTML. Используя все возможности HTML, вы автоматически избегаете большинства технических проблем с SEO, характерных для веб-приложений.
Разрабатывайте именно сайты, и вы уже сделаете огромный шаг к лучшей видимости и индексируемости в поисковых системах.