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

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 определяет, как будет открываться новый документ. Возможны такие значения этого атрибута:

  • _top (в текущем окне);
  • _blank (в новом окне);
  • _self (в текущем фрейме);
  • _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. Кроме определения валидности кода, здесь будет много полезной информации, от которой вы будете отталкиваться при продвижении сайта.

    Источник: blog.promopult.ru

    Ссылка на основную публикацию