Теги

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

У слова в SEO есть и второе значение. Тегами называют метки, которыми помечают товары или статьи, а теговыми страницами называют подборки по этим меткам: «смесители с термостатом», «статьи про ремонт ванной». Оба значения встречаются в задачах постоянно, поэтому разберём их по очереди.

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

Тег записывают в угловых скобках, у большинства есть открывающая и закрывающая часть: <p>текст абзаца</p>. Тегов в HTML больше сотни, но для поиска значение имеют немногие:

Подробнее про заголовки в статье Заголовки H1–H6, про картинки в статье Атрибут alt, про списки и таблицы в выдаче в статье Быстрые ответы и расширенные сниппеты.

Страница услуги на блоках div и на нормальных тегах

Возьмём страницу услуги «Замена смесителя». В первом варианте всё сделано блоками div: заголовок отличается от текста только размером шрифта, цены вставлены картинкой, ссылки на соседние услуги работают через скрипт. Во втором варианте у страницы есть title и h1 «Замена смесителя», подзаголовки h2 «Цены» и «Как проходит работа», цены лежат в таблице, этапы оформлены нумерованным списком, ссылки на соседние услуги сделаны обычным тегом a. Для человека страницы выглядят почти одинаково. Для поисковика вторая понятна сразу: есть тема, разделы, цены, связи с другими страницами.

Теги и мета-теги

Обычные теги размечают то, что человек видит на экране. Мета-теги стоят в блоке head и описывают саму страницу для программ: описание для выдачи, правила индексации, кодировку. Title формально не мета-тег, но в SEO его обычно обсуждают вместе с ними. Про служебную часть страницы рассказываем в статье Мета-теги.

Где разметка подводит: заголовки шрифтом, ссылки-кнопки, цены картинкой

• Заголовки сделаны не тегами h1, h2, h3, а просто крупным жирным шрифтом. Человек видит заголовок, поисковик видит обычный абзац.
• Тег h1 обёрнут вокруг логотипа на всех страницах, а настоящий заголовок страницы размечен как div.
• Ссылки сделаны кнопками на JavaScript без тега a и адреса. Роботу некуда переходить.
• Таблица цен вставлена картинкой. Цифры для поиска не существуют.
• Жирное выделение каждой второй фразы ради поиска. Когда выделено всё, не выделено ничего, а текст тяжелее читать.

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

Теговые страницы в каталоге и блоге

Теговая страница собирает товары или статьи по общему признаку. В интернет-магазине это, например, «смесители для кухни с выдвижной лейкой», в блоге «все статьи про отопление». Для SEO такие страницы полезны, когда под них есть спрос: они закрывают запросы, для которых нет отдельной категории. По смыслу они близки к SEO-фильтрам, только собираются не из параметров фильтра, а из меток.

В проекте интернет-магазина сантехники мы дорабатывали SEO-фильтры и перестраивали структуру каталога под частотные коммерческие запросы. Это была часть большой работы вместе с технической оптимизацией и семантическим ядром, и по её итогам больше 800 запросов находятся в топ-10.

Когда теговые страницы вредят

Метки в CMS часто ставят без всякой системы: у каждой статьи по десять тегов, половина встречается один раз. В итоге сайт генерирует сотни пустых или почти одинаковых страниц, которые попадают в индекс и превращаются в дублированный контент. Чтобы этого не случилось:

• Создавайте теговую страницу под запрос с реальной частотой, а не под каждую метку.
• Следите, чтобы на ней было хотя бы несколько товаров или статей и она не повторяла категорию.
• Пишите для неё свои title, H1 и короткое вступление.
• Пустые и случайные метки закрывайте от индексации или удаляйте.

Найти лишние теговые страницы помогает краулер или выгрузка страниц в поиске из Вебмастера: отфильтруйте адреса с разделом меток и посмотрите, сколько на каждой материалов и есть ли на неё переходы из поиска за последние месяцы. Пустые страницы без трафика удаляйте или перенаправляйте на родительскую категорию. Если их сотни, это уже раздувание индекса, и чистить индекс придётся системно.

Закрывающие теги, атрибуты, жирный шрифт и страницы меток

Разметку страниц и структуру каталога проверяем на SEO-аудите, а теговые страницы и SEO-фильтры проектируем при SEO-продвижении.

Что почитать о HTML-тегах в стандарте и у Google

• HTML Living Standard (WHATWG): элементы HTML
• Google Search Central: руководство по поисковой оптимизации для начинающих

См. также: Атрибут alt, Мета-тег title, Дублированный контент, Семантическая вёрстка.