Какие базовые HTML теги важно знать для SEO-продвижения сайта [+чек-лист]

Разбираемся с мета-тегами и HTML тегами структуры, заголовков, форматирования, ссылок и изображений.

HTML — это стандартизированный язык разметки документов в интернете. Браузеры интерпретируют язык HTML и отображают уже отформатированный текст. Разметка документов осуществляется с помощью тегов, которые задают тексту определенные свойства.

Для раскрутки сайта необязательно досконально разбираться в HTML и быть гуру верстки. Но есть теги, работа с которыми неразрывно связана с SEO. И о них нужно знать.

«Теги», «мета-теги», «атрибуты», «элементы» — в чем разница?

Читая статьи о SEO, вы наверняка встретите эти термины. Но их часто путают, называя теги элементами, элементы — атрибутами.

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

<p></p>
<br>
<body></body>

Внутри тега располагается текст. В совокупности с тегом этот текст является элементом HTML. Элемент — это основная структурная единица документа, написанного на HTML. Вот примеры элементов:

<p>Этот тег свидетельствует о начале и конце абзаца</p>
<body>Текст, заключенный в этом теге, виден пользователю в браузере</body>

Элементы могут обладать атрибутами (свойствами). Они имеют стандартные значения или задающиеся пользователем. Атрибут прописывается в открывающем теге после имени элемента и перед закрывающей скобкой (>). Вот пример атрибута:

<a href="http://www.site.ru">Данный элемент содержит атрибут href</a>

Разновидностью тегов являются мета-теги. Это теги, предназначенные для представления структурированных мета-данных о веб-странице. Они прописываются между тегами <head> и </head> — то есть пользователи не видят их содержимое.

Вот примеры мета-тегов:

<meta name="author" content="Павел Павлов" />
<meta name="description" content="Описание документа" />
<meta name="document-state" content="Dynamic" />

Итак, с понятиями разобрались. Перейдем к самым важным HTML тегам для SEO.

HTML теги структуры документа

Каждый HTML документ имеет такую структуру:

<!DOCTYPE html>
<html>
<head>

</head>
<body>

</body>
</html>

В самом верху — строка декларации версии HTML. С нее начинается документ, который отвечает спецификации HTML определенной версии (например, в нашем случае это HTML 5).

Далее идет тег <html>. Он сообщают браузеру о том, что далее будет текст формата HTML.

После открывающего тега <html> идет открывающий тег <head>. Внутри него располагается служебная информация (пользователям она не отображается) — мета-теги, скрипты счетчиков статистики, коды валидации ресурса в Яндекс.Вебмастере, Google Search Console и других сервисах.

А вот информация внутри тега <body> как раз видна пользователям — именно здесь расположен основной контент (текст, изображения, видео и т. п.). То есть если вы хотите, чтобы контент отображался на странице, его нужно добавлять именно внутрь тега <body>.

Естественно, это не исчерпывающий список тегов структуры. Есть еще <header>, <article>, <footer>, <div> и другие. Но для понимания базовой SEO-оптимизации сайта рассмотренных тегов достаточно.

Не хотите тратить время на оптимизацию сайта? Автоматизируйте SEO в системе PromoPult. Подбор ключей, кластеризация, внутренняя оптимизация, линкбилдинг, наполнение сайта — все на полном автомате.

HTML теги заголовков

Заголовки важны для SEO, ведь они помогают определить поисковикам релевантность документов.

Первый тег — <title>. Он прописывается между тегами <head> и </head>. То есть информация в нем не отображается на странице, но поисковики ее учитывают и выводят как заголовок в результатах поиска.

Самая важная информация в <title> должна поместиться в 60 символов — примерно столько отражается в заголовках сниппетах поисковых систем. Общий же текст в <title> может быть длиннее.

Синтаксис такой:

<head>
<title>Заголовок страницы</title>
</head>

На одной странице допустим только один заголовок <title>.

Тег <title> часто называют мета-тегом — по той причине, что он размещается в служебном разделе <head>. И действительно, по своей сути он напоминает мета-тег. И если вы будете называть его мета-тегом, то страшного ничего не произойдет. Но формально это тег заголовка документа. Поэтому мы рассказали о нем именно в этом пункте.

Внутри тегов  <body>…</body> идут заголовки, которые отражаются в браузере. Главный заголовок заключен в парный тег <h1> — он единственный на странице, идет в самом начале. Потом содержимое разбивается на разделы заголовками <h2>, а уже после них — дробление на смысловые единицы с помощью <h3>. Заголовок уровня 3 (<h3>) не должен располагаться выше уровня 2 (<h2>).

Синтаксис:

<body>
<h1>Заголовок</h1>

 <h2>Заголовок второго уровня</h2>
 <h2>Заголовок второго уровня</h2>
  <h3>Заголовок третьего уровня</h3>
  <h3>Заголовок третьего уровня</h3>
<h2>Заголовок второго уровня</h2>
</body>

Теги — это только вершина SEO. Полный перечень работ вы найдете в чек-листе по оптимизации сайта.

HTML теги форматирования

Если их не использовать, то текст будет похож на «простыню», которую сложно читать. Благодаря форматированию в тексте можно расставить акценты, сделать его читабельным. Поисковики распознают теги форматирования и отдают предпочтение «удобным» текстам.

Для целей SEO достаточно использовать такие теги:

  • <p>...</p> (парный тег, обозначающий абзац);
  • <ul>...</ul> (маркированный список);
  • <ol>...</ol> (нумерованный список; <ul> или <ol> могут вкладываться друг в друга);
  • <li>…</li> (элемент списка);
  • <strong>…</strong> (выделение жирным);
  • <em>…</em> (выделение курсивом);
  • <blockquote>…</blockquote> (тег цитирования, обычно появляются кавычки, горизонтальная линия слева текста, и он сдвигается вправо).

Конечно, это далеко не все теги, но для эффективного продвижения сайта их достаточно.

Хороший оптимизированный контент — это долго и дорого. Но не всегда. В этом гайде описано, как на полном автопилоте заказывать коммерческий контент, полезный для посетителей и нравящийся Яндексу и Google.

Мета-теги

Можно выделить несколько ключевых направлений использования мета-тегов:

  • идентификация авторства;
  • передача поисковикам информации для создания заголовков гипертекстовых документов;
  • формирование карточки для отображения в социальных сетях;
  • влияние на режим отображения страниц.

Для целей SEO особенно важен мета-тег Description. Информация из него используется Google для формирования описания в сниппете. А вот Яндекс формирует сниппет на свое усмотрение. Но все поисковики учитывают информацию из Description для определения содержания страницы. Поэтому сюда обязательно стоит включить ключевые фразы.

Синтаксис выглядит так:

<meta name="description" content="Описание длиной около 170 символов" />

Для быстрой проверки заголовков title, h1-h6 и мета-тегов description и keywords на сайте используйте парсер PromoPult. Полезные лайфхаки по работе с ним — здесь.

Мета-тег Keywords при определении релевантности страницы поисковиками не учитывается. Но некоторые оптимизаторы до сих пор его прописывают. Выглядит он так:

<meta name="keywords" content="ключ 1, ключ 2, ключ 3 и т. д." />

Для SEO важен мета-тег Robots. С его помощью можно запретить или разрешить индексацию страницы и ссылок на ней. Мета-тег выглядит так:

<meta name="robots" content="index,follow" />

Значение index говорит о том, что роботам можно индексировать страницу (в противном случае меняем значение на noindex). Значение follow разрешает индексацию ссылок (в противном случае используем nofollow).

О каких еще метатегах полезно знать:

Viewport — используется для адаптации верстки сайта под мобильные устройства.

<meta name="viewport" content="width=device-width, initial-scale=1">

Content-Type — указывает на кодировку страницы (должна быть UTF-8).

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
или в HTML5: <meta charset="UTF-8">

Author — указывает на автора документа (особенно важен для блогов).

<meta name="author" content="Иванов Иван" />

Content-Language — указывает на язык страницы. Неправильно указанный язык приводит к более низкому ранжированию.

<meta http-equiv="content-language" content="ru" />
или в HTML5: <html lang="ru">

Для того чтобы страница корректно отображалась в соцсетях, тоже используются мета-теги. Например, протокол Open Graph поддерживает мета-теги Property. Эти мета-теги понимает Facebook, ВК, Pinterest, Twitter, LinkedIn, Telegram, WhatsApp, Viber, Slack и другие соцсети и мессенджеры.

Мета-теги для SEO — это обширная тема. В статье «Важные мета-теги для SEO-оптимизации сайта» все подробно описано.

HTML тег и атрибуты ссылок

С помощью тегов создаются гиперссылки. Синтаксис такой:

<a href="site.ru">анкор ссылки</a>

Атрибут href указывает на адрес документа в интернете.

Тег ссылки имеет атрибуты. Например, атрибут target определяет, как будет открываться новый документ. Возможны такие значения этого атрибута:

  1. _top (в текущем окне);
  2. _blank (в новом окне);
  3. _self (в текущем фрейме);
  4. _parent (в родительском фрейме).

Если атрибут target не задать, то по умолчанию будет использоваться значение _self.

При использовании атрибута target со значением _blank (открытие ссылки на новой вкладке) важно указать еще атрибут rel со значением noopener. Это закроет уязвимость, связанную с получением частичного контроля над страницей со стороны ресурса, на который был переход. Синтаксис такой:

<a href="site.ru" target="_blank" rel="noopener">анкор ссылки</a>

Рекомендуем почитать: «Что такое циклические ссылки на сайте и нужно ли их избегать?»

Для целей SEO часто требуется закрыть ссылку от индексации поисковыми роботами. Для этого используется атрибут rel со значением nofollow. Синтаксис такой:

<a href="site.ru" rel="nofollow">анкор ссылки</a>

HTML тег и атрибуты изображений

Для вставки и описания изображений тоже используется специальный тег. Для целей SEO особенно важны атрибуты alt.

Синтаксис тега изображения:

<img src="url" alt="альтернативное имя" title="описание изображения" width="размер (в пикселях или %)" height="размер (в пикселях или %)">

Здесь используются атрибуты:

  • src (атрибут, указывающий путь к файлу изображения);
  • alt (самый важный атрибут для SEO — текст из alt используется в поиске по картинкам; также этот текст появляется вместо изображений, если отключен их показ в браузере; );
  • title (данное описание выводится в виде всплывающей подсказки при наведении курсора на изображение; на SEO не влияет).
  • width и height (соответственно, ширина и высота изображения).

Подробный гайд по SEO изображений: «13 приемов оптимизации изображений: как выйти в топ поиска по картинкам»

Чек-лист самых важных тегов HTML для SEO

  • Теги структуры HTML документа: <html>, <head>, <body>
  • Теги заголовков: <title>, <h1> – <h6>
  • Теги форматирования текста: <p>, <ul>, <ol>, <li>, <strong>, <em>, <blockquote>
  • Мета-теги: description, robots, viewport, author, property, content-type, content-language
  • Теги и атрибуты ссылок: <a>, атрибуты href, target, rel
  • Теги и атрибуты изображений: <img>, атрибуты src, alt, title, width, height

Естественно, HTML-тегов намного больше — и если уметь ими пользоваться, это только плюс. Но для базового SEO вполне достаточно тех, что мы рассмотрели.

«Плаваете» в HTML и вам сложно оценить правильность кода? Закажите SEO-аудит в PromoPult. Кроме определения валидности кода, здесь будет много полезной информации, от которой вы будете отталкиваться при продвижении сайта.

⌃ ↩
Модуль профессиональных
инструментов
Вы выбираете площадки для рекламы
Съем позиций, работа с ядром,
парсеры. Любые объемы

Настоящий сервис собирает информацию, зарегистрированную в файлах «cookies» для целей адаптации функционала сервиса к потребностям пользователей, в целях сбора статистической информации для анализа и улучшения качества работы сервиса, а также в рекламных целях. При использовании данного сервиса, вы подтверждаете свое согласие на использование файлов «cookies». Файлы «cookies» будут сохранены в памяти вашего устройства (ЭВМ). Вы можете изменить настройки файлов «cookies» в вашем браузере, однако такие изменения могут повлиять на функциональность сервиса и ограничить его использование.

Настоящим Я даю свое полное согласие на получение электронных уведомлений (на указанные мой абонентский номер и адрес электронной почты), а также выражаю явное и полное согласие на сбор, хранение, обработку и передачу персональных данных, согласно положениям, изложенным в Политике конфиденциальности, расположенных по адресу: promopult.ru/rules.html?op=private, с которыми я ознакомился и принял.