Какие базисные HTML-теги принципиально знать для SEO: описание + чек-лист

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

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

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

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

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

< p >< /p >

< br >

< body >< /body >

Снутри тега размещается текст. В совокупы с тегом этот текст является элементом HTML. Элемент – это основная структурная единица документа, написанного на HTML. Вот примеры частей:

< p >Этот тег свидетельствует о начале и конце абзаца< /p >

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

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

< a href="https://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 >. Снутри него размещается служебная информация (юзерам она не отображается) – метатеги, скрипты счетчиков статистики, коды валидации ресурса в Yandex Веб-мастере, Гугл Search Console и остальных сервисах.
• А вот информация снутри тега < body > как раз видна юзерам – конкретно тут размещен главный контент (текст, изображения, видео и т. п.). Другими словами если вы желаете, чтоб контент отображался на страничке, его необходимо добавлять конкретно вовнутрь тега < body >.

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

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

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

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

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

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

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

< head >

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

< /head >

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

А ах так текст из < title > отображается в заголовке сниппета на поиске Yandex’а:

Тег < 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 довольно употреблять такие теги:

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

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

Метатеги

Метатеги употребляются в HTML документе для последующих целей:

• Идентификация авторства. Для данной для нас цели служит метатег Author:

< meta name="author" content="Михаил Булгаков" / >

• Передача инфы поисковикам для формирования заголовков и индексации документов. К примеру, директива noindex метатега Robots может запретить поисковым ботам регистрировать страничку:

< meta name="robots" content="noindex" / >

• Формирование карточки для отображения контента в соц сетях (о том, как приготовить веб-сайт к трафику из соцсетей, мы тщательно писали тут);
• Воздействие на режим отображения страничек. Например, тег Viewport задает режим отображения странички веб-сайта с адаптивной версткой на устройствах с различным разрешением экрана:

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

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

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

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

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

В которых вариантах употреблять noindex и nofollow, читайте в данной для нас статье.

Для целей SEO также важен метатег Description. Информация из него употребляется Гугл для формирования описания в сниппете (но так происходит не постоянно). А вот Yandex сформировывает сниппет на свое усмотрение. Но все поисковики учитывают информацию из 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:

• Content-Language – показывает на язык странички. Некорректно обозначенный язык приводит к наиболее низкому ранжированию в регионе продвижения.

< meta http-equiv="content-language" content="ru" / >

либо в HTML5: < html lang="ru" >

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

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 – соответственно, ширина и высота изображения.

Чек-лист самых принципиальных тегов 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 полностью довольно тех, что мы разглядели.