Теги в html коде, обзор и описание тегов
Теги играют ключевую роль в процессе продвижения сайта. Любые манипуляции с HTML-кодом осуществляет программист, но и SEO-оптимизитору необходимо знать основные теги этого языка. Это позволяет правильно структурировать данные на страницах, отмечать важную информацию, выделять ее специальным шрифтом. Знание тегов необходимо как минимум для правильного составления ТЗ, как максимум – для понимания, как основные теги влияют на процесс оптимизации
Основная база
Существует определенный набор тегов, который оказывает непосредственное влияние как на структурирование информации, так и на общее продвижение страницы. Все действующие теги лежат в основе языка HTML. Его основная задача – предоставление данных поисковым роботам относительно содержания страницы. Переходя на страницу сайта, появляется грамотно сверстанный текст с подзаголовками, картинками и другими структурированными элементами. Добиться этого без использования тегов HTML, невозможно.
Основополагающими тегами выступают:
- «html» — Отвечает за все теги, используемые на сайте
- «head» — Включает основные теги «title», «meta», «link» и «script», предназначенные для предоставления технической информации о ресурсе
- «body» — Это весь контент, расположенный на сайте, предназначенный для потенциального пользователя. Все теги не видны, для пользователя открывается только визуал (картинки, текст, видео, аудио и т.д.).
Все это - основа языка HTML. Составные элементы пишутся согласно установленным требованиям W3C.
Структура HTML элемента
В основе HTML-кода лежит несколько элементов. Главным компонентом выступает тег. Его основное назначение – разграничение начала и конца элемента, который находится между ними.
Например, ключевым словом выступает «Продвижение сайтов». Для разграничения этого ключа необходимо поставить открывающий и закрывающий теги: «u»Продвижение сайтов«/u».
Бывают и парные теги, которые в обязательном порядке должны закрываться. Например: «i»Продвижение сайтов«/i»
Бывает и одинарные теги, например: «br» или «img»
В процессе структурирования текста активно используются и метатеги. Это разновидность стандартных тегов. Благодаря включению в текст метатегов, поисковые роботы получают основную техническую информацию о странице сайта. В данную категорию входят ключевые фразы, кодировка, правила индексирования и иная информация.
Метатеги находятся в определенной папке документа, в теге «head»
Внимание! Ключевые слова (keywords) и description принадлежат к метатегам, а вот title относится к тегам. Это необходимо запомнить!
Для чего пользователям и поисковым системам нужны теги
Поисковая система Google активно использует метатеги. Основное их назначение в заданном направлении – получение основной информации относительно содержимого страницы, с последующим включением в результаты поиска. Только вот для включения в результаты поиска, страница должна быть составлена согласно установленным требованиям W3C.
Пример использования метатегов: при поиске определенной информации, пользователю выдаются сайты с коротким описанием (сниппетом). Он формируется с помощью тега title и метатега description. Но, в случае некорректного составления заголовка, наличия спама и других проблем, Google заменит их на более подходящие по смыслу.
Внимание! Ознакомиться со списком метатегов, которые поддерживаются поисковой системой Google можно увидеть в справке Search Console.
Что касается пользователей, то и для них теги играют ключевую роль. SEO-ценность метатегов заключается в том, что наличие специальных тегов и метатегов показывает ключевую информацию как для пользователя, так и для поисковой системы. Чем лучше прописан сниппет, тем выше вероятность получения прямого отклика от клиента и перехода на основную страницу.
Как упоминалось ранее, наличие грамотно построенных тегов помогает поисковой системе считывать требуемую информацию, что положительно отражается как на ранжировании сайта, так и на его индексации.
Какие теги полезны для SEO
Теги title или description оказывают влияние на поисковую систему, что положительно отражается на процессе продвижения в ТОП. Но, универсального правила попадания в рейтинг лучших ресурсов, не существует. Переспам краткого описания ключевыми фразами – это не вариант продвижения. Многие эксперты рекомендуют так делать, но на практике, это не приносит ожидаемого результата.
Теги необходимо использовать правильно и без фанатизма, руководствуясь установленными правилами. Главное создать уникальную структуру, которая будет понятна как поисковым системам, так и пользователям. Наконец, теги должны выполнять свою прямую функцию.
Тег «title»
Тег «title» - предоставляет основную информацию о странице. Пожалуй, это любимый тег сеошников. Он одинаково полезен как для поисковых систем, так и для потенциальных пользователей. Отображается тег не только в кратком описании, а еще и в верхней строке вкладки браузера. Он помогает потенциальному пользователю свободно ориентироваться в открытых вкладках. Грамотное построение тайтла задерживает внимание пользователей, а также способно отображаться как анкор ссылки при репостах информации. При составлении тайтла необходимо добавить максимально полезные данные, которые будут интересны потенциальному пользователю.
Внимание! Общая длина «title» составляет не более 60-70 символов, знаки пунктуации исключены. Точка в конце описания не ставится.
В одном документе может находится только один тег, который обязательно находится в контейнере «head»
Тег «meta»
Основное назначение – предоставление дополнительной информации о странице. Тегпомогает поисковым системам считывать служебную информацию, которая не выводится на экран. Располагаются данные в контейнере «head».
В основе тега лежат определенные атрибуты: name, content, charset и http-equiv.
Атрибут name
Основное назначение атрибута – показать с каким тегом работает поисковая система. По стандарту, используются следующие имена:
- author — Указывает автора документа
- description — Предоставляет краткое описание
- keywords — Предоставляет список ключевых фраз
- robots — Предоставляет правила индексации страниц.
Заполнять метатег с ключевыми словами не обязательно, при ранжировании страницы он не играет никакой роли. Это было подтверждено представителями компании Google. Метатег description выводится в сниппет, не нужно включать в него множество ключевых фраз или неактуальную информацию. Главная задача description – объяснить пользователю, почему он должен выбрать именно ваш сайт. По стандарту, длина краткого описания не должна превышать 200 символов.
Что касается метатега robots – его основная задача заключается в полном сканировании всего документа. Он разрешает/запрещает краулерам поисковой системы индексировать контент на странице.
Атрибут content
Указанный атрибут функционирует в тесной связке с name. Его основная задача – раскрыть смысл метатега для поисковой системы. По факту, он отображает контент и информацию.
Атрибут charset
Основное назначение – кодировка документа. Указание кода требуется для того, чтобы текст и основная информация на странице корректно отображались. В случае ошибки, вместо данных будут показаны иероглифы.
Внимание! Не используйте одновременно несколько стандартов кодировки.
Обновленные поисковые системы самостоятельно определяют тип кодировки, что позволяет избежать проблем при отображении актуальной информации.
Атрибут http-equiv
Основное назначение – отображение содержимого HTTP-заголовка. Атрибут предназначен для серверов сбора дополнительной информации о странице. HTTP-заголовок отображает полезную информацию, в том числе, статус ответа сервера или его имя.
Возможно использование сразу нескольких метатегов.
Тег «a»
Основное назначение тега – создание ссылок и обозначение языка документа. Отсутствие указанного тега делает невозможным обозначение ссылки в HTML документе. Для указания необходимо обозначить сам текст и добавить ссылку.
Внимание! Ссылки в коде необходимо обязательно проверять. Ошибка указывает на то, что вставленная ссылка является битой. Следствие этого процесса – негативное отражение на процессе оптимизации. В итоге вы получаете некликабельную ссылку, которая не дает потенциальному клиенту перейти на основной сайт.
Атрибут href и hreflang
Атрибут href предназначен для указания основной ссылки на страницу.
Атрибут hreflang указывает на основной язык документа, на который была оставлена ссылка.
Тег «link»
Основное назначение тега «link» - расстановка приоритетов и «отношений» между страницами. Указанная информация предоставляется для поисковых систем. В его основе лежат три атрибута: href, hreflang и rel. С указанным тегом, атрибут href показывает ссылку на внешний файл, hreflang оповещает поисковые системы о наличии нескольких языковых версиях сайта.
Основное назначение атрибута rel заключается в простановке приоритетов между текущими документами и внешними документами. Указанный атрибут работает в связке с различными командами, в частности:
- rel="next" — Указывает ссылку на следующую страницу
- rel="prev" — Указывает ссылку на предыдущую страницу
- rel="nofollow" — Указывает ПС, что вес ссылки не передается
Внимание!Теги и очень часто путают между собой, что обусловлено одинаковым набором атрибутом. На практике, они выполняют различные роли и не взаимосвязаны между собой.
Тег «img»
Основное назначение – отображение контента с кратким описанием. Располагается на любой странице, где есть картинки. Работает с различными форматами изображений, в частности, PNG, JPEG или GIF.
- Атрибут src — Указывает основной путь к картинке, предоставляя ссылку на нее.
- Атрибут alt — Предоставляет альтернативный текст для изображения. Используется в том случае, если картинка по определенным причинам не откроется. Запускается автоматически.
- Атрибут title — Не стоит путать с тегом под аналогичным названием. Основное его назначение – описание содержимого картинки. Указанный атрибут не так важен, но заполнять его нужно минимально. Основное назначение title — это вплывающая подсказка при наведении курсора на картинку.
Теги «i», «b», «strong», «q»
Основное назначение указанных тегов – выделение важных элементов в тексте. За акцентирование текста отвечает определенный набор тегов. Они выделяют главные мысли и фразы посредством выделения, курсива, подчеркивания и т.д. Это удобно как для поисковой системы, так и для потенциального пользователя.
Основные теги для форматирования текста:
- «i» — Выделяет текст курсивом
- «b» — Выделяет текст жирным или полужирным
Дополнительно используется тег , который выделает текст полужирным. Ключевое достоинство указанного тега – взаимодействие с поисковыми системами. А вот стандартный полужирный «b» не отображается.
Что касается тега «q», то он предназначен для выделения цитат в тексте кавычками.
Теги «table», «ul», «ol», «li»
Основное назначение тегов «table», «ul», «ol», «li» - перенаправление на быстрые ответы. Это может быть таблица, список, или другой тип упорядоченной информации.
Тег «table» определяет структуру текста и содержимое самой таблицы. Внутри указанного тега располагаются дополнительные элементы, в частности, «caption», «td», «th», «tr».
- Элемент «caption» — предназначен для создания заголовков для описания таблицы
- Элемент «tr» — предназначен для создания строки таблицы
- Элемент «td» — направлен на создание отдельной ячейки в таблице
- Элемент «th» — направлен на создание заголовочной ячейки таблицы
Использовать теги «ul», «ol», «li» необходимо для определенных целей:
- «ul» — Обозначает список с буллетами (unordered list)
- «ol» — Обозначает нумерованный список (ordered list)
- «li» — Определяет отдельный пункт списка. Каждый элемент списка должен начинаться с тега «li» (list item)
Тег «h1», «h2», «h3», «h4», «h5», «h6»
Основное назначение тегов – структурирование текста по заголовкам и подзаголовкам. Каждый текст имеет определенную структуру, которая помогает как поисковым системам, так и пользователю находить актуальные данные на странице.
Наличие разделения на смысловые блоки облегчает процесс поиска требуемой информации. Использование тегов помогает развивать логику повествования и положительно воздействует на SEO. Включать ключевые фразы в заголовках необходимо использовать без фанатизма, только для раскрытия текста.
Внимание!Для структурирования текста используется шесть уровней заголовков от H1 до H6.
Как проверить функциональное назначение тегов
Теги должны корректно функционировать, в противном случае это негативно отобразиться на процессе предоставления информации. Для исключения ошибок необходимо периодически проводить анализ сайта.
Проведение детального анализа показывает страницы с с noindex и hreflang, rel="canonical" и rel="alternate", осуществляет проверку заголовков и метатегов. Дополнительно осуществляется проверка на уникальность, ограничения по длине, наличие дублей картинкой и т.д.
Для проверки можно использовать автоматизированные сервисы.
Остались вопросы? Специалисты компании МирСео24 помогут разобраться со всеми тегами и метатегами. Дополнительно, предоставляются комплексные услуги по продвижению.
Внимание! За дополнительной информацией обращайтесь по указанным номерам телефонов.