Мы используем cookie-файлы
Мы используем файлы cookie для обеспечения правильной работы нашего сайта, чтобы сделать нашу коммуникацию еще лучше! Используя сайт без изменения настроек, вы даете согласие на использование ваших cookie-файлов.
Принять
Настройки
Мы используем cookie-файлы
Настройки
Мы используем cookie-файлы
Мы используем файлы cookie для того, чтобы предоставить Вам больше возможностей при использовании сайта.

Какие html-теги важны для SEO-продвижения

Рассказываем, какие html-теги наиболее важны для поискового продвижения сайта

Что такое HTML

HTML (Hypertext Markup Language) - это код для разметки веб-страниц в браузере. Такая разметка необходима для структурирования данных и контента на веб-страницах, чтобы браузеры понимали, как отображать контент на странице сайта.

С помощью html-кода можно разделить текст на абзацы, добавить маркерные списки, таблицы и т.д. Также с помощью html можно перемещать контентные блоки по сетке страницы, оформлять изображения, ссылки и прочие элементы.

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

  • Заголовки
  • Абзацы
  • Маркерные списки
  • Ссылки
  • Изображения

Существует множество подобных типов контента и для каждого из них в html-коде используются различные теги, например:

  • Для оформления изображений используется тег <img>
  • Для формирования ссылок - тег <a>
  • Для заголовков теги <h1> - <h6>

Кроме тегов в html-коде присутствуют различные атрибуты, которые могут влиять на работу тега. Например, для того, чтобы ссылка открывалась в новом окне браузера используется атрибут Target.

Какие html-теги важны для SEO-продвижения

Для продвижения сайтов не обязательно подробно изучать язык html-разметки. Достаточно знать несколько основных тегов, которые могут помочь в продвижении сайта.

Мета-тег title

Мета-тег title - это самый важный тег для SEO-продвижения. Данный тег является одним из факторов ранжирования сайта. Поисковые системы уделяют особое внимание содержанию данного тега.

Мета-тег title размещается в разделе head в html-коде и выглядит следующим образом:

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

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

Данный мета-тег должен отражать основное содержание страницы.

Подробнее про мета-тег title можно прочитать в статье Как правильно заполнить мета-тег title.

Мета-тег description

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

Мета-тег description размещается в разделе head в html-коде, как правило, после тега title и выглядит следующим образом:

<meta name="description" content="Описание страницы">

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

В description можно более подробно раскрыть основное содержание страницы, добавить УТП и другие элементы, которые могут повлиять на решение пользователей перейти на сайт.

Данный тег позволяет улучшить CTR и повысить количество переходов на сайт.

Теги заголовков h1-h6

Данные теги прописываются в разделе html-кода - body. Данные теги являются контентной частью веб-страницы и отображаются на странице сайта.

Тегами h1-h6 обозначаются заголовки страницы.

Тегом h1 обозначается основной заголовок страницы. Данный тег должен присутствовать на всех страницах сайта и отражать основное содержание страницы. Тегом h1 должен быть размечен только один заголовок на странице.

Тегами h2-h6 размечаются подзаголовки. Данные теги отражают основную структуру страницы. При разметке заголовков тегами h2-h6 необходимо учитывать иерархию подзаголовков.

Синтаксис заголовков h-h6 в html-коде выглядит следующим образом:

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

Мета-тег Robots

С помощью Robots можно разрешить или запретить поисковым роботам индексировать страницу или переходить по размещенным на ней ссылкам.

Мета-тег Robots может иметь несколько значений:

  • index - страница разрешена для индексации
  • noindex - страница запрещена для индексации
  • follow - разрешена индексация ссылок на странице
  • nofollow - запрещена индексация ссылок на странице
  • all - аналог одновременного использования index и follow
  • none - аналог одновременного использования noindex и nofollow
  • noarchive -не выводить в поисковой выдаче ссылку на сохраненную в кэше копию страницы

В html-коде синтаксис мета-тега выглядит следующим образом:

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

Тег Canonical

Тег Canonical - указывает основной адрес страницы без GET-параметров.

Данный тег размещается в html-коде сайта в разделе <head></head>.

Canonical является рекомендацией для поисковой системы Яндекс и не является обязательным. При этом в некоторых случаях указание основной страницы может положительно повлиять на индексацию и избежать появление дублей страниц.

Синтаксис тега Canonical выглядит следующим образом:

<link rel="canonical" href="https://site.ru">

При размещении тега необходимо соблюдать последовательность атрибутов тега link.

Мета-тег Viewport

Мета-тег Viewport необходимо размещать на страницах сайта, если сайт адаптирован под мобильные устройства.

Наличие данного тега является важным фактором ранжирования, так как поисковые системы уделяют особое внимание адаптивности сайта под мобильные устройства.

Данный мета-тег размещается в разделе <head></head>.

Синтаксис мета-тега выглядит следующим образом:

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

Значение device-width атрибута widt дает команду браузеру подогнать ширину страницы под ширину экрана устройства. Значение 1 атрибута initial-scale запрещает масштабирование окна (например, при повороте экрана мобильного устройства).

Подробнее об анализе мобильной версии сайта можно прочитать в статье Как

провести аудит мобильной версии сайта.

Атрибуты alt и title для изображений

Атрибут Alt - это текст, который описывает содержание изображения в html-теге <img>. Данный текст отображается в коде сайта, а на странице выводится в том случае, если не удалось загрузить изображений. Таким образом Alt помогает пользователям узнать, что отражено на изображении в случае, если оно не загрузилось.

Синтаксис выглядит следующим образом:

<img src="image.jpg" alt="Описание изображения" />

Атрибут title включает в себя более расширенное описание содержания изображения и отображается при наведении курсора на изображение.


Синтаксис:


<img src="image.jpg" alt="Описание изображения" title="Описание изображения"/>


Наличие заполненных позволяет улучшить ранжирование сайта в поиске по картинкам.


Подробнее об анализе мобильной версии сайта можно прочитать в статье Как

провести аудит мобильной версии сайта.

Таблица базовых html-тегов,
которые важно знать SEO-специалисту

<!==...==>
Данный элемент используется для добавления комментариев и выводить в html-коде. На странице сайта содержимое тега не отображается.
<!DOCTYPE>
Предоставляет браузеру информацию о языке и версии документа
<html>
Указывает браузеру, что это html-документ
<head>
В данных тегах размещается информация, которая не выводится на странице сайта, но сообщает о содержании страницы. Также в данных тегах размещается информация и теги для поисковых систем.
<meta> 
Определяет мета-теги, которые предназначены для браузеров и поисковых систем. Содержание мета-тегов выводится в html-коде и не отображается на странице сайта. 
<title>
Заголовок документа, который отражает основное содержание страницы. Содержимое тега отображается в заголовке браузера, в поисковой выдаче и в расширенных сниппетах в социальных сетях.
<body>
Часть документа, в которой размещается контент веб-страницы. Содержимое тега выводится на странице сайта.
<h1>
Основной заголовок на странице
<h2> - <h6>
Подзаголовки 
<p>
Тег для обозначения текстового фрагмента
<a>
Обозначает текстовую гиперссылку
<b>
Выделяет текст жирным шрифтом
<br>
Перенос строки
<i>
Курсив
<li>
Элемент для обозначение маркированного или нумерованного списка
<ul>
Создает маркированный список
<img>
Элемент для добавления изоабражений
<link>
Определяет отношения между документом и внешним ресурсом. Также используется для подключения внешних таблиц стилей.
<div>
Элемент-контейнер для разделов HTML-документа. Используется для группировки блочных элементов с целью форматирования стилями.
<button>
Элемент для создания интерактивных кнопок.
<nav>
Элемент для обозначения навигационных ссылок на странице
<script>
Элемент для обозначения сценариев с использованием JavaScript
<strong>
Выделяет текст полужирным шрифтом
<span>
Элемент для обозначение контейнеров строчных элементов
<style>
Элемент для подключения стилей
<table>
Тег для создания таблиц
<footer>
Тег для разметки нижней части сайта (подвала сайта).
<header>
Тег для размещения вводной информации сайта, шапки сайта и главного меню с навигационными ссылками.
Пожалуйста, оцените статью
Читайте далее
Автор статьи
Дмитрий Лашманов
SEO-специалист
Опыт работы в SEO 4 года
60+ реализованных проектов

Дополнительные курсы:

SEO в СНГ - Rush Academy
SEO на запад - Rush Academy
UX/UI-дизайн - Skillbox
Школа экспертов Нетологии