Внутренняя SEO оптимизация, Программирование

Влияние тегов на seo

meta_information

Ранее мы рассматривали тематики влияния meta tags на seo оптимизацию.

Выяснилось что мета описание можно использовать как пассивную рекламму.

meta_information

Но что если можно брать простые теги в html коде, которые улучшают usability сайта и продвигая этот параметр оптимизации делать показатели seo метрик у сайта выше! И конечно такое возможно. Рассмотрим влияние usability тегов на SEO продвижение.

Перед размещение тегов и их атрибутов не забываем сохранять синтаксис всего написанного, особенно элементов открывающих теги <> и закрывающих теги. Чистота синтаксиса кода так же учитывается поисковиком!

Какие теги улучшают usability

Само по себе влияние usability на динамику продвижения сайта нельзя не дооценить. Мы всегда задерживаемся на тех сайтах, где нам все удобно и понятно.

Именно понятность восприятия контента и улучшают теги, работающие на подъем показателей usability.

Среди множества тегов в языке гипертекстовой разметки html мы можем особо отметить и описать свойства ниже приведенных тегов. Влияние на seo оптимизацию сайта у этих тегов весьма существенное.


<Viewport>

Самый известный тег, который серьезно улучшает usability это конечно Viewport.

viewport_teg

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

Содержимое сайта подгоняется тегом Viewport под разрешение экрана вашего устройства. Смотрится удобно!

Использование этого тега даёт большое преимущество в продвижение сайта, потому что в 2023 году большинство устройств для входа в интернет являются мобильными.

Поисковики учитывают этот момент и дают флаг вперёд тем сайтам, которые имеют этот тег и адаптивность верстки.


<abbr>

Тег <abbr> это сокращение от abbreviation — аббревиатура.

<abbr>

Такого рода teg сильно поднимает восприятие читаемого текста. Это особенно результативно используется для usability странички когда пишется текст со сложными терминами.

Читающий такой текст человек, хорошо воспринимает написанный материал и скорее всего проводит более большее время на страничке. Это улучшает часть поведенческих факторов и поднимает такие странички по SEO.

К тому же данный тег виден поисковикам и участвует в семантическом ядре сайта.

Как правило данный тег html свободно используется с
глобальными атрибутами , такими как:

  • accesskey — позволяет настроить переключение через кнопки клавиатуры.
  • class — атрибут позволяет обратиться к CSS через группу элементов.
  • contenteditable позволяет посетителю редактировать контент в месте установки атрибута.
  • dir — определяет направление написания текста.
  • draggable атрибут позволяет перетаскивать текст и менять местами блоки информации.
  • hidden — скрывает элемент в работе HTML5 + позволяет JavaScript подтягивать скрытые места.
  • id — позволяет через скрипты задавать имя и производить с ним различные действия.
  • lang — это сокращение от «language» показывает читателю контента, язык на котором написан документ или страничка.
  • spellcheck — тег показывает поисковому роботу и браузеру что стоит проверять или нет правописание и грамматику в тексте элемента. Таким образом когда стоит делать проверку значение атрибута ставят как «true», а когда не нужно проверять граматику- ставиться значение атрибута «falls».
  • style,
  • tabindex,
  • title.

Смотрите как это выглядит в коде:

<abbr title=«атрибуты, которые подходят для всех тегов»>глобальными атрибутами</abbr>


<blockquote>

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

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

Цитата оформлена как вертикальная черта.

teg_blockquote

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


<datalist>

Следующим тегом тег <datalist>.

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

Teg_datalist

Синтаксис тега заключается в том что есть открывающий элемент  <datalist> и закрывающим  элементом </datalist>. Отсюда становиться ясно что тег у нас парный.

Атрибут value используется в теге <datalist>. Применение атрибута идёт совместно с тегом <option>, который указывает некоторое значение, отправляемые на сервер при заполнение формы тега <datalist>.

Как пример:

<!DOCTYPE html>

<html>

<head>

<title>Выбор оснастки</title>

</head>

<body>

<div>Выберите оснастку</div>

<input list=»Tools» />

<datalist id=»Tools»>

<option value=»Гайка»>

<option value=»Болт»>

<option value=»шайба»>

</datalist>


А вот это пример datalist в деле! Если попробуете вставить в поле оснастки значения то поймёте как работает тег!

Выберите оснастку


<hr>

Тег <hr>  «horizontal rule» ( горизонтальная черта) имеет свойство создавать визуальную черту. В атрибуты этого тега входят такие свойства, как толщина черты и ее длинна.

  1. Что бы задать цвет черты мы применяем атрибут style=»border-color: red;»

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

<hr style=»border-color: red;» />

2. Что бы задать и цвет и толщину у черты можно воспользоваться кодировкой

<hr style=»border: 2px solid grey;»>

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

Атрибуты тега

Атрибуты тега<hr> перечислены через запятую:

  • align — делает выравнивание линии тега <hr>,
  • color — цвет линии <hr>,
  • noshade — делает линию без объемных эффектов,
  • size — толщина линии,
  • width — ширина линии.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *