Какие HTML-теги должен каждый SEO-специалист

Мы уверенны что среди наших клиентов, есть много профессионалов IT, работающих над интересными проектами. Если у Вас возникает желание рассказать о них, Вы можете разместить статью в нашем блоге. А чтоб было интересней, мы сделали конкурс статей, каждый месяц три победителя будут получать призы.

Категории

Статья также доступна на украинском (перейти к просмотру).

Основные ШТМЛ теги для СЕО

Оглавление:

HTML (англ. HyperText Markup Language) — язык разметки гипертекста. Язык, с помощью которого мы объясняем браузеру, как должна выглядеть страница на дисплее у пользователя. Как на DESKTOP, так и на мобильных устройствах.

Как можно убедиться по диаграмме “Периодическая таблица успешного ранжирования” правильная HTML разметка с Мета тегами и структурой является важным фактором в успешном продвижении.

HTML разметка является каркасом любой веб-страницы.

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

Теги делятся на два типа парные и непарные.

К парным относятся те, которые содержат в себе открывающий <...> и закрывающий тег </…>.

Пример: маркированный список <ol> </ol>, <li></li>.

В непарных содержится лишь один открывающийся тег.

Пример: вставка картинки <img>, горизонтальная линия <hr>.

Основные теги в HTML разметке

Рассмотрим три главных тега, которые содержит любой HTML документ:

<!DOCTYPE html>

указывает тип существующего документа, в данном случае это HTML.

<html></html> - определяет границы HTML документа. Внутри него содержатся все теги, в том числе и основные парные <head></head> и <body></body>.

<head></head>

В этом контейнере располагается информация, которая предназначена для браузера и поисковых систем.

Содержимое этого парного тега не отображается напрямую в браузере для пользователя. Исключение составляет лишь Мета тег <title></title>

В нем он найдет название страницы.

<body></body>

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

!DOCTYPE html
  html
  head
  <title>Название документа</title>
  </head>
  <body>
  <h1>Главный заголовок страницы</h1>
  <p>Отображаемый на странице в абзаце</p>
  <body>
  <html>

Мета теги

Мета теги располагаются между тегами <head></head>.

Подробнее о правилах и рекомендациях по составлению мета тегов ТАЙТЛ и ДЕСКРИПШН смотрите здесь.

Meta robots

meta name="robots"content="index, follow"

Данный метатег указывает поисковой машине, что делать со страницей. Индексировать или нет, а также передавать ли ссылочный вес.

Значение “robots” — доступ открыт для всех поисковых роботов.
Значение “googlebot” — для поискового робота Google.

Рассмотрим основные значения атрибута content:

index — страница доступна для индексации роботом;
noindex — страница запрещена к индексации;
follow — ссылки, которые расположены на странице;
nofollow — передача ссылочного веса запрещена;
mone — аналогично noindex, nofollow;
all — аналогично index, follow.

Meta charset

Данный Мета тег указывает браузеру на тип кодировки документа.

Это необходимо для корректного отображения текста пользователю в нужной кодировке.

Основной вид кодировки, который применяется для кириллицы — это “wiindows-1251” и “utf-8”.

Поэтому, если у Вас на экране после копирования в ШТМЛ документ возникли “крякозябры”, то пересохраните этот документ в указанных выше кодировках.

Возможные варианты написания этого Мета тега:

<meta charset="UTF-8">;
<meta charset="windows-1251">.

Meta keywords

В данном Мета теге указываются ключевые слова, которые используются в контенте. Однако, в современных реалиях содержимое этого тега никак не влияет на качество продвижения.

Поэтому заполнять их необязательно. Разве что для собственного удобства. Приведу пример данного Мета тега, как заполненного, так и пустого.

<meta name=keywords content="хостинг, украинский хостинг, UNIX хостинг, ASP хостинг, WINDOWS хостинг, хороший хостинг, надежный хостинг, удобный хостинг, быстрый хостинг, платный хостинг, ASP.NET хостинг, купить хостинг, дешевый хостинг, хостинг php, хостинг joomla, хостинг wordpress, хостинг киев, профессиональный хостинг, хостинг в Украине, купить хостинг">;
<meta name=keywords content="">.

В блоке <head></head> также располагаются и ссылки <link>. Они устанавливают привязку данного документа с другими страницами, например CSS стилями и JS страницами.

В отличие от тега <a>, всегда размещается в блоке <head></head> и не создает ссылку.

Атрибут “canonical”

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

Когда возникают страницы с одинаковым контентом, но разными УРЛами.

Такие явления возможны при пагинации или наличии фильтра товаров.

Как правильно настраивать фильтры товаров, а также использовать атрибуты index. follow и canonical смотрите здесь.

Также с помощью этого атрибута мы объясняем поисковой системе, каким должен быть УРЛ. c WWW и косой чертой в конце “/” или без.

Пример синтаксиса написания:

<link rel=canonicalhref="https://freehost.com.ua/">

Заголовки и подзаголовки <h1></h1> - <h6></h6>

Для обозначения главного заголовка и подзаголовков используйте парные теги по следующему образцу:

<h1>Главный заголовок статьи</h1>;
<h2>Подзаголовок h2</h2>;
<h3>Подзаголовок h3</h3>.
И т.д. до подзаголовка h6.

Внимание!

Главный заголовок h1 должен размещаться на странице только один раз.

Подробнее о правильной иерархии заголовков и подзаголовков и написании статей читайте здесь.

Тег <a>

Используется для создания ссылок в документе, как внутренних, так и внешних.

Для внешних ссылок после в кавычках укажите href="абсолютный адрес ссылки”

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

target="_blank" — после того, как пользователь кликнет по такой ссылке, страница загрузится в новом окне браузера.

Ваш сайт, а останется на нем, а внешняя ссылка просто откроется в соседнем окне;

rel="nofollow" — этот атрибут означает, что поисковому роботу дается указание не переходить по этой ссылке и не передавать ссылочный вес по ней.

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

Адрес ссылки может быть абсолютным и относительным.

Абсолютный адрес указывается полностью и работает везде, вне зависимости от точки входа.

Пример синтаксиса внешней ссылки с абсолютным адресом:

<a href="https://gtmetrix.com/" target="_blank" rel="nofollow">Gmetrix.com</a>

Относительные адреса составляются и работают относительно текущего документа или каталога. Используются для внутренних ссылок.

Пример синтаксиса внутренней ссылки с относительным адресом. Ссылка размещена на странице “купить домен”:

<a href='domaintransfer/'>можно подавать заявку на перенос</a>

Внутренняя ссылка может ввести и на ту же страницу, на которой она находится

Такие ссылки называются “якорями”. Их можно использовать для удобного оглавления с автоматическим переключением на нужный подзаголовок.

Ознакомьтесь с синтаксисом:

<ul>
<li><a href="/faq/articles/kak-napisat-i-optimizirovat-seo-tekst/#1">Схематическая таблица оптимизированной статьи</a></li>
<li><a href="/faq/articles/kak-napisat-i-optimizirovat-seo-tekst/#2">Основные термины и сервисы для написания статей</a></li>
<li><a href="/faq/articles/kak-napisat-i-optimizirovat-seo-tekst/#3">Сервисы, которые используются для написания статьи</a></li>
</ul>
<h2 id="1">Схематическая таблица оптимизированной статьи</h2>
<h3 id="2">SEO оптимизированный текст</h3>
<h3 id="3">Контент сайта</h3>

Действуйте по следующему алгоритму:

Присвойте каждому заголовку/подзаголовку или ключевому слову уникальный id;
В оглавлении после href="относительная ссылка на действующую страницу/#id”;
Пример работы таких ссылок Вы сможете увидеть в оглавлениях.

Теперь рассмотрим использование внутренних ссылок на сайте

Внутренние ссылки, это те ссылки при клике по которым происходит переход внутри действующего сайта.

Внутренние ссылки также

<section></section>

Определяет собой раздел документа. Тематически и по смыслу сгруппированный контент с заголовком.

<p></p>

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

<footer></footer>

Определяет собой подвал сайта.

В нем располагаются имя автора, контактные данные, ссылки на соц. сети, правовая информация, ссылки на продвигаемые страницы.

<!-Комментарии -->

Комментарии используются как заметки на полях, чтобы верстальщики и программисты их читали, а машина - нет.

Также комментарии не будут отображаться в окне браузера.

Комментариями можно отметить например начало и конец тегов, секций, списков и т.д.

Писать комментарии нужно в следующем формате <!-Текст комментария -->

Также Вы можете “закомментировать” и HTML код.

<!-<h2 class="section_title">For all devices</h2>-->.

Т.е. код не будет физически удален со страницы, но учитывать его ни браузер, ни поисковые системы не будут.

Маркированный и нумерованный список

В любой статье используются списки.

Они нужны для манулов, инструкций, перечислений и т.д.

Для оформления списка используйте следующие парные теги:

<ol></ol> - открытие и закрытие нумерованного списка;
<ul></ul> - открытие и закрытие маркированного списка;
<li></li> - обозначает пункты ненумерованного или нумерованного списка.

Акцентирование в тексте статьи

Если Вам необходимо выделить определенные слова и тезисы в статье, то используйте следующие парные теги:

<em></em>- курсив;
<strong></strong> - жирный.

При этом стоит отметить, что теги <em> и <strong> — это подчеркивание смысловой важности выделенных слов для поисковых систем.

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

Максимум - 1-2 раза на весь текст и не берите в выделения основные ключевики.

Тег для размещения картинок <img>

Непарный тег.

Составляется по следующему синтаксису

<img src="images/pic.png" width="100" height="200" alt="Альтернативное название картинки" title="Заголовок картинки">

В теге укажите следующие атрибуты:

src="images/pic.png" — адрес картинки;
width="100" height="200" - ширина и высота картинки. Можете указать только один из параметров - width="100", второй параметр браузер установит автоматически. Размеры картинок указываются в px в стилях CSS, а для в документах HTML - нет;
Также ширину картинок можно сделать и на всю ширину страницы width="100%". Однако после Google June 2021 Core Update для нормального показателя Cumulative Layout Shift (CLS) необходимо указывать ширину и высоту картинки. Указывайте реальные размеры картинок;
alt="Альтернативное название картинки" - Этот текст опишет картину, если по какой-то причине она не отобразится.
Он помогает понять поисковой системе, что за картинку Вы разместили, поэтому добавляйте в АЛЬТ ключевые слова.
title="Заголовок картинки" - Дополнительное описание картинки. Пользователь сможет его прочитать, если навести курсором на картинку.

Пример применения атрибута class

Lorem Ipsum — это текст-"рыба", часто используемый в печати и веб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн.

Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.

Тег <script>

Данный тег применяется для описания скриптов. Тег является парным <script></script> и может содержать в себе как ссылку на внешнюю программу, так и сам текст программы, если скрипт расположен в самом HTML документе.

Скрипты могут находиться в неограниченном количестве по всему HTML документу.

Однако, скрипты, которые должны работать в первую очередь должны располагаться в блоке <head></head>.

Пример синтаксиса ссылки на внешний скрипт:

<script src="//freehost.com.ua/js/jquery-1.9.1.js"></script>

Для ускорения загрузки рекомендуется выносить скрипты в отдельный файл.

Необязательный JS советуется размещать снизу, чтоб не замедлять загрузку страницы.

Но также допускается размещать скрипты и в самом HTML файле.

Например, скрипт для микроразметки FAQ мы размещаем внизу страницы.

Выводы

Из вышеописанного следует сделать следующие выводы:

Любому SEO-специалисту необходимы базовые знания по языку разметки гипертекста (HTML). Основной справочник для HTML верстки — это HTMLbook. Пользуйтесь им
Основная информация для браузеров и поисковых систем содержится в блоке <head></head>;
Скрипты и таблицы стилей CSS, которые нужны только для данной HTML страницы и то, что можно загрузить асинхронно (может догрузиться потом) загружайте в отдельный файл.

Но те таблицы стилей CSS, которые загрузить обязательно, рекомендуется встраивать в код страницы;

Допускайте поменьше пустых строк, пробелов и закомментированных строк. Если Вы уверены, что Вам не придется править код в будущем, может его сжать с помощью специального скрипта;
Полезный контент должен размещаться ближе к началу HTML коду. Товары и услуги, заголовки и контентная часть должна находиться в коде выше тех блоков, которые дублируются на всех страницах сайта, например пункты меню.
При этом визуально товары и услуги должны находиться выше остального контента, чтобы пользователю не приходилось прокручивать вниз, чтобы добраться до того, что они ищут. В реальности тексты статей с описанием товаров и услуг они читать не будут;
Проверяйте HTML код Вашей страницы на ошибки с помощью валидатора. https://validator.w3.org/unicorn/?ucn_lang=ru;

Мы что-то упустили или в чем-то ошиблись? Напишите об этом в комментариях, мы с удовольствием на них ответим!

Дата: 05.07.2021

Автор: Яременко Владислав под редакцией Евгения Шермана

Основные HTML теги и атрибуты для качественного SEO продвижения