HTML-теги для SEO: какие теги важны, с примерами

Поисковые системы и ИИ-ассистенты читают вашу страницу как код ещё до того, как кто-либо увидит её на экране. Горстка HTML-тегов для SEO определяет, как этот код понимается: какой URL попадёт в индекс, какой заголовок появится в результатах, о чём страница и как она выглядит при репосте. Google перечисляет поддерживаемые мета-теги и атрибуты на одной странице своей документации Search Central, и всё, чего нет в этом списке, не влияет на поиск Google. В этом руководстве разобран каждый полезный тег с примером, ошибки, которых стоит избегать, и теги, о которых можно забыть.

Какие HTML-теги важны для SEO?

Таблица ниже это справочный список. Теги в head описывают страницу для машин; теги в body структурируют то, что читают люди.

Какие теги head управляют тем, как Google показывает вашу страницу?

Тег title

Тег title самый важный тег страницы. Google говорит, что длина элемента title не ограничена, но заголовок-ссылка обрезается под ширину устройства, а на практике это около 50-60 символов на компьютере. Google также может его переписать: в его документации перечислены используемые источники, от элемента title и основного видимого заголовка до заголовков H1, тега og:title и анкорного текста ссылок, ведущих на страницу. Title, который совпадает с H1 и содержанием страницы, Google оставляет. Пишите уникальный title для каждой страницы, с основным ключевым словом ближе к началу и брендом в конце.

Метаописание

Метаописание не меняет ранжирование, но часто даёт сниппет под заголовком и поэтому влияет на клики. Google может заменить его фрагментом страницы, лучше подходящим под запрос. Пишите его как короткий ответ с последующей выгодой, от 120 до 160 символов, и никогда не используйте одно и то же описание на нескольких страницах.

Мета-тег robots

Мета-тег robots сообщает сканерам, что они могут делать со страницей. Чаще всего используется значение noindex, которое исключает страницу из результатов; среди других: nofollow, nosnippet и max-snippet, ограничивающее длину текстового сниппета. Для файлов без раздела head, например PDF, те же директивы указываются в HTTP-заголовке X-Robots-Tag. Забытый noindex на рабочем шаблоне одна из самых частых причин потери трафика, поэтому проверяйте его после каждого релиза.

Viewport и кодировка

Google указывает в документации, что наличие тега viewport свидетельствует об удобстве страницы на мобильных устройствах. Поскольку Google индексирует мобильную версию сайтов, этот тег нужен на каждой странице. Объявление кодировки (Google рекомендует UTF-8) предотвращает искажение символов в заголовках и сниппетах, что важно для многоязычных сайтов.

Какие теги сообщают Google, какой URL индексировать?

Два тега link в head управляют дубликатами и языками. Тег canonical указывает предпочтительную версию, когда один и тот же контент доступен по нескольким URL (фильтры, параметры отслеживания, HTTP и HTTPS). Google считает его сильной подсказкой наряду с редиректами и внутренними ссылками, поэтому он работает лучше всего, когда все сигналы указывают на один URL. Используйте абсолютный URL, держите один canonical на страницу и никогда не указывайте его на страницу, закрытую от сканирования или с noindex.

Атрибут hreflang сообщает Google, какую страницу показывать на каком языке или в каком регионе. Согласно руководству Google по локализованным версиям, каждая версия должна перечислять себя и все остальные, а значение x-default может указывать страницу для пользователей, чей язык не охвачен. Отсутствие обратных ссылок это самая частая ошибка hreflang: если страница A указывает на страницу B, страница B должна указывать обратно на страницу A.

Какие теги body помогают поисковым системам понимать контент?

Заголовки от H1 до H6

Заголовки задают структуру страницы. Используйте один H1, формулирующий тему, теги H2 для основных разделов и теги H3 для шагов или пунктов внутри раздела, не пропуская уровни ради внешнего эффекта. Google заявлял, что несколько тегов H1 не приводят к санкциям, но один понятный H1 остаётся самой простой структурой для пользователей и вспомогательных технологий. Заголовки H2 в форме вопросов («Как работает X?») также совпадают с тем, как люди формулируют запросы и промпты.

Альтернативный текст у изображений

В своих рекомендациях по SEO для изображений Google объясняет, что использует альтернативный текст вместе с компьютерным зрением и содержимым страницы, чтобы понять изображение, и что заполнение атрибутов alt ключевыми словами может привести к тому, что сайт сочтут спамом. Опишите, что показано на изображении, короткой фразой. Google также отмечает, что не индексирует фоновые изображения CSS, поэтому любому изображению, которое должно ранжироваться, нужен настоящий элемент img.

Ссылки и их атрибуты rel

Элемент a это то, как сканеры находят страницы, поэтому внутренние ссылки должны быть настоящими ссылками с href, а не кнопками, обрабатываемыми JavaScript. Атрибут rel уточняет исходящие ссылки: sponsored для платных размещений, ugc для комментариев и сообщений на форумах, nofollow для ссылок, которые вы не хотите одобрять. С 2020 года Google рассматривает эти значения как подсказки. Описательный анкорный текст помогает и пользователям, и поисковым системам.

Семантические элементы HTML5

Элементы вроде main, article, nav, header, footer и section сообщают машинам, какая часть страницы является основным контентом, а какие части повторяются на каждой странице. Сами по себе они не повышают позиции, но облегчают выделение основного контента для поисковых систем, программ чтения с экрана и ИИ-инструментов. Каждый элемент подробно описан в нашем руководстве по семантическому HTML. Внутри текста strong и em отмечают акцент; используйте их для ключевых терминов, а не для целых абзацев.

Какие теги формируют превью в соцсетях и расширенные результаты?

Протокол Open Graph, созданный Facebook и теперь читаемый большинством социальных сетей и мессенджеров, определяет теги og:title, og:description, og:image и og:url, из которых строится карточка превью при репосте страницы. Без них платформы угадывают, часто с неверным изображением. Проверить результат можно инструментом предпросмотра Open Graph до публикации.

Структурированные данные в формате JSON-LD, размещённые в теге script, описывают страницу словарём Schema.org: статья, продукт, организация, хлебные крошки, FAQ. Google использует их для расширенных результатов, а ИИ-системам они дают явные факты о сущности, стоящей за страницей. Разметка должна описывать то, что видно на странице. Их роль для ответов ИИ мы разбираем в руководстве по структурированным данным и ИИ-поиску.

Какие HTML-теги Google игнорирует?

Список поддерживаемых Google тегов подсказывает и то, что можно перестать поддерживать:

• Meta keywords: Google заявляет, что тег meta keywords не используется поиском Google и не влияет ни на индексацию, ни на ранжирование.
• Неизвестные мета-теги: Google игнорирует мета-теги, которые не поддерживает, например meta author или meta revisit-after.
• Атрибут lang: Google определяет язык страницы по её тексту, а не по атрибуту lang. Сохраняйте атрибут для доступности и других инструментов, а для связи языковых версий используйте hreflang.
• Meta refresh как редирект: он работает, но Google рекомендует вместо него серверный редирект 301.

Важны ли HTML-теги для ответов ИИ?

Да, и по простой причине: ChatGPT, Claude, Gemini и Perplexity извлекают из страниц фрагменты, а чистый HTML облегчает поиск этих фрагментов. Несколько ИИ-сканеров получают исходный HTML, не выполняя JavaScript, поэтому title, canonical или блок текста, вставленные скриптами, могут до них так и не дойти. Чёткая иерархия заголовков делит страницу на самодостаточные ответы, списки и таблицы удерживают факты вместе, а структурированные данные излагают факты без двусмысленности. Это техническая сторона оптимизации под генеративные поисковые системы: те же теги, что помогают Google, помогают и ИИ-ассистентам цитировать вас точно.

Как проверить HTML-теги страницы?

1. Прочитайте исходный код. Откройте исходный код (Ctrl+U) и найдите теги title, meta description, robots, canonical и hreflang. Если тег появляется только в отрисованной странице, он зависит от JavaScript.
2. Сравните с тем, что видит Google. Инструмент проверки URL в Google Search Console показывает HTML, который отрисовал Google, и выбранный им canonical.
3. Проверьте страницу за страницей. Бесплатное расширение Sorank для Chrome перечисляет отсутствующие или дублирующиеся теги и исправления для открытой страницы.
4. Проверьте весь сайт. Краулер находит дубли title, отсутствующий alt-текст и неверные canonical на тысячах URL; варианты сравнивает наша подборка инструментов технического SEO.
5. Перепроверяйте после каждого релиза. Именно при изменении шаблонов появляются теги noindex, сломанные canonical и пустые title.

Правильная настройка двенадцати тегов выше закрывает почти всё, что HTML может сделать для SEO; остальная работа это контент и ссылки. Если вам нужны страницы, которые сразу выходят с чистыми title, заголовками, внутренними ссылками и структурированным контентом, генератор статей для блога Sorank пишет и публикует их в режиме autopilot, от $49 в месяц при оплате за год (см. цены).