Наш сайт использует cookie и данные об IP адресе для удобства вашей работы. Если вы не согласны - пожалуйста, покиньте сайт.
Согласен
Главная / Блог / Для чего нужны атрибуты HTML-тега

Для чего нужны атрибуты HTML-тега

Поделиться

Чтобы обеспечить результативность SEO-продвижения, необходимо использовать все инструменты, которые влияют на рейтинг сайта. Для роста позиций онлайн-ресурса нужно грамотно использовать HTML-теги, наполнять веб-сайт полезным и уникальным контентом. Такая оптимизация тегов и текстов положительно влияет на ранжирование и дает возможность интернет-ресурсу подняться в ТОП поисковой выдачи. А нахождение на первых строчках поисковой выдачи обеспечивает хороший трафик, ведь редко кто из пользователей ищет нужные товары или услуги на второй и последующих страницах.

HTML-теги

Что такое HTML

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

Из каких тегов состоит каркас веб-ресурса:

  • тег <html> — включает в себя все теги на сайте;
  • тег <head> — включает теги <title>, <meta>, <link> и <script>, заключающие в себе техническую информацию о странице;
  • тег <body> — в этом теге заключен весь контент сайта, предназначенный для пользователей (текстовые описания и статьи, изображения и т.д.).

Для создания сайтов, интернет-магазинов, лендингов используется около 100 HTML-элементов. Все они делятся на теги и мета-теги и пишутся по правилам, утвержденным Консорциумом Всемирной Паутины (W3C).

пример HTML

Назначение тегов

Теги нужны и поисковым системам, и пользователям интернета. Поисковики Яндекс и Google распознают информацию о веб-страницах по тегам. Именно по этим атрибутам роботы идентифицируют контент как релевантный или нерелевантный поисковому запросу, введенному пользователем при поиске нужного товара или услуги. Если в теге title и мета-теге description есть слова, соответствующие запросу, то они будут показаны в сниппете при выдаче результатов поиска. Сниппетом называется небольшой отрывок текста на сайте, который показывается поисковиком по тому или иному ключу. Сниппет коротко описывает содержание релевантной страницы.

Ценность тегов для SEO-продвижения:

  • Теги и мета-теги показывают и поисковому роботу, и пользователю, что именно ждет их на веб-странице.
  • От качества контента и оптимизации тегов зависит кликабельность страниц (соотношение количества переходов к общему числу просмотров). Если в сниппете коротко описано, что именно продвигает сайт, и человеку это интересно, он переходит на рекламируемую страницу.
  • Теги помогают браузеру считывать данные и преобразовывать их в удобочитаемый вид. Пользователь видит структурированный текст, упорядоченные элементы навигации и дизайна, картинки. А не текст, вписанный в HTML-код, непонятный пользователю.

нормализованный и маркированный текст

Какие теги наиболее полезны для SEO

Специалисты по SEO-продвижению знают важность использования тегов и мета-тегов в поисковой раскрутке. Такой тип интернет-рекламы требует больше времени для поднятия в ТОП (не менее 4-6 месяцев по популярным ключевым словам), но именно эти результаты наиболее стабильны и экономичны. Поднявшись на первые строки органического поиска по высокочастотным и среднечастотным ключам, сайт долго остается в лидерах (если грамотно поддерживать ресурс и наполнять его полезным и уникальным контентом, оптимизированным под поисковые запросы).

СЕО-категории

В Табл. 1 приведены основные теги и мета-теги, а также их вес в поисковом продвижении.

Табл. 1 Влияние тегов на SEO

Название тега Как отображается Как влияет на СЕО
Тег <title>, находится в контейнере <head> Отображается в верхней строке вкладок в браузерах, а также в виде анкора ссылки на веб-страницу сайта при репосте на странице в социальных сетях Помогает пользователю понять, что на странице есть тот контекст, который он ищет. Если он релевантен, кликабельность (количество переходов на веб-сайт) повышается. Оптимальная длина тайтла — 60-70 символов. Можно включить в этот тег слова «купить», «цена», «стоимость», а также геоданные, название бренда
Мета-тег description (meta name description), который заключен в контейнер <head> Name description content — это краткое описание документа (контента на странице), в которое вписаны ВЧ-, СЧ- или НЧ-запросы Дескрипшн выводится поисковым роботом в сниппет (если он максимально отображает суть текста на странице). Рекомендуемая длина такого мета-тега — 70-200 символов. Не стоит перенасыщать description ключами, образуя нечитабельный машинный текст. Такое описание не заинтересует потенциального покупателя товара или услуги
Мета-тег keywords, который заключен в контейнер <head> Meta name keywords — это перечень ключевых слов, которые не видны пользователям, но считываются поисковыми системами В настоящее время поисковые системы практически не придают значения этому мета-тегу при ранжировании веб-страниц
Мета-тег robots (meta name robots). Предназначен для сканирования веб-документа краулерами поисковиков. Краулерами называют программное обеспечение ПС, анализирующее веб-страницы и заносящее их в индекс Name robots content включает такие атрибуты как nofollow (запрет переходить по ссылкам и учитывать их вес), noindex (запрет индексировать наполнение страницы), index, nofollow (разрешение на индексацию страниц с запретом переходить
по ссылкам)
Дают возможность влиять на ранжирование той или иной страницы, закрывать или открывать нужные страницы для индексирования роботами поисковых систем

 

робот meta-name

Структура HTML-элементов

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

HTML-код выстраивается из отдельных элементов:

  • Тегов.
  • Мета-тегов.
  • Атрибутов с дополнительными характеристиками.

Тегом называется элемент языка HTML, разграничивающий начало и конец элементов. Он влияет на текст, который находится между тегами, в соответствии с их свойствами. Мета-теги являются разновидностями тегов, которые нужны поисковым системам для анализа технической информации о веб-страницах (описание, ключевые запросы, кодировка, правила индексации страниц и пр.). Атрибутом называется дополнительная характеристика, применяемая к тегу или мета-тегу.

Например, на странице есть некий заголовок. Он обозначается в коде при помощи открывающего тега <h1> и закрывающего тега </h1>. К данному заголовку дополнительно применяется атрибут align = “left“, выравнивающий заголовок по левой стороне веб-страницы. Для картинки используется тег <img>, добавляющий изображение на страницу. Атрибут alt необходим для добавления альтернативного описания картинки, если изображение по каким-то причинам не будет отображаться на странице сайта.

альт и тайтл

Атрибут http equiv предназначен для того, чтобы показать содержимое HTTP-заголовка. Meta http equiv дает поисковым системам много полезной информации — имя и статус сервера, ответ сервера о состоянии страницы (200, 404 и пр.). Этот же тег можно использовать для запрета индексации страницы.

Применение HTML-элементов

Для оптимальной разметки страницы можно использовать разное количество мета-тегов. Они проставляются в контейнере <head>. Атрибуты мета-тегов прописываются парами «имя=значение»:

<head>

 <meta content="...">

</head>

Табл. 2. Распространенные теги, атрибуты и их применение

Название тега, мета-тега Атрибут Назначение Особенности применения
Тег <a>
  1. href — атрибут, показывающий URL, на который нужно перейти по ссылке
  2. hreflang — атрибут, указывающий язык веб-страницы, куда ведет внешняя ссылка
Обозначение внешней или внутренней ссылки Для проставления ссылки нужно указывать текст анкора и URL-адрес или просто адрес без текста (для безанкорных ссылок)
Тег <img>
  1. src — показывает путь (ссылку) к изображению
  2. alt — предназначен для создания альтернативного текста, показываемого, если картинка не отображается
  3. title — атрибут, описывающий изображение (текстовая подсказка при наведении курсора)
Отображение фотографий, иллюстраций формата PNG, JPEG или GIF Для повышения рейтинга веб-сайта тег <img> заключается в контейнер <a>. Картинка становится ссылкой, по которой можно перейти на другой онлайн-ресурс
Теги <i>, <b>, <strong>, <q>   Помогают выделить слова или текстовые блоки на веб-странице Данный тег влияет на удобочитаемость текста, повышая комфортность восприятия. Это может помочь улучшить поведенческие факторы сайта — за счет того, что пользователи дольше остаются на странице
Теги <table>, <ul>, <ol>   Предназначены для формирования списков текста Положительно влияют на поведенческие факторы за счет структурирования больших массивов текста. Улучшают восприятие представленной информации

Как использовать теги для разметки

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

заголовки и подзаголовки

Заголовки <h1> … <h4> разбивают текст на разделы

Структурирование текстовой информации с помощью заголовков разного уровня позволяет разбить контент на смысловые блоки. Таким образом пользователь может сразу найти ту информацию, которая ему нужна — следуя названию подзаголовка.

Зачем нужно использовать заголовки:

  • Разметка текста с помощью заголовков <h1> … <h6> необходима и для пользователей, и для роботов поисковых систем.
  • Поисковики анализируют названия заголовков, чтобы определить их релевантность поисковому запросу, который водят люди в поисковую строку.
  • Правильное использование заголовков от <h1> … <h4> по иерархии повышает рейтинг сайта. Если заголовки переставить местами и расположить их неправильно, это может привести к проседанию позиций веб-ресурса.

Чтобы повысить эффективность поискового продвижения, нужно гармонично вписывать ключевые запросы в заголовки разного уровня. При этом важно соблюдать определенные правила. Нельзя вписывать сразу несколько ключей, превращая заголовок в длинную нелогичную фразу. Но при этом можно усилить продающие свойства ключевого запроса названием города или региона, фразами «купить», «цена», «заказать» и пр.

выдача Яндекс

Дополнительные советы по использованию тегов и мета-тегов

Для подбора популярных ключевых запросов, которые вписываются в теги и мета-теги, используйте сервис Яндекс.Вордстат и другие ресурсы. Не стоит злоупотреблять использованием ключей. Слова должны быть написаны без ошибок, в правильном склонении, без жаргонизмов. Фразы вроде «цена окна Москва» только оттолкнут пользователя. Использовать спецсимволы, кавычки, запятые нужно только по необходимости.

HTML-теги и атрибуты являются необходимыми элементами создания любого сайта, интернет-магазина, лендинга и другого онлайн-ресурса. С помощью этих элементов создается запланированная структура текста, задаются цвета и шрифты, размечается страница, располагаются тематические изображения. В рамках эффективного SEO HTML-теги и атрибуты влияют на поведенческие факторы. Пользователям нравится находиться на страницах, где все понятно, тексты не сливаются в одно сплошное полотно, а разбиты на блоки по смыслу.

Доверьте рутину нам
Зарегистрируйтесь сейчас и получите 200 лимитов БЕСПЛАТНО!

 
Поделиться
Будь в курсе первым!