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

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

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

Внутри тегов  <body>…</body> идут заголовки, которые отражаются в браузере. Главный заголовок заключен в парный тег <h1> — он единственный на странице, идет в самом начале. Для SEO это самый значимый заголовок, он отражает суть документа, именно в него следует вписывать самые частотные ключевые фразы. Далее текст разбивается на разделы заголовками <h2>, а уже после них — дробится на смысловые единицы с помощью <h3> — <h6>.

Важно запомнить: заголовок нижнего уровня (например, <h3>) не должен располагаться выше заголовка верхнего уровня (например, <h2>).

Синтаксис:

<body>

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

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

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

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

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

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

</body>

А вот как отформатированный при помощи заголовков текст отображается в браузере:

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

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

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

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

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

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

Конечно, это далеко не все теги, но чтобы самостоятельно отформатировать текст и не обращаться к верстальщику, SEO-специалисту будет достаточно этого набора.

);

  • Влияние на режим отображения страниц. К примеру, тег Viewport задает режим отображения страницы сайта с адаптивной версткой на устройствах с разным разрешением экрана:
  • <meta name="viewport" content="width=device-width, initial-scale=1">

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

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

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

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

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

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

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

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

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

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

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

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

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    или в HTML5: <meta charset="UTF-8">

    • 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>

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

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

    Источник

    Просмотров:

    Добавить комментарий