Ранее мы рассматривали тематики влияния meta tags на seo оптимизацию.
Выяснилось что мета описание можно использовать как пассивную рекламму.
Но что если можно брать простые теги в html коде, которые улучшают usability сайта, и продвигая этот параметр оптимизации, делать показатели seo метрику сайта выше! И конечно такое возможно. Рассмотрим влияние usability тегов на SEO продвижение.
Перед размещение тегов и их атрибутов не забываем сохранять синтаксис всего написанного, особенно элементов открывающих теги <> и закрывающих теги. Чистота синтаксиса кода так же учитывается поисковиком! Грамотный html код увеличивает шансы на успешное продвижение.
Содержание:
Какие теги улучшают usability
Само по себе влияние usability текста на динамику продвижения сайта нельзя недооценить.
Мы всегда задерживаемся на тех сайтах, где нам все удобно и понятно, где нет нужды лазить по интернету и выясняя, что за термины используются в лексических оборотах, итд..
Именно понятность восприятия контента и улучшают теги, работающие на подъем показателей usability.
Среди множества тегов в языке гипертекстовой разметки html мы можем особо отметить и описать свойства ниже приведенных html тегов и их атрибутов.
Атрибутом тега называют одно из возможных значений, характеризующее этот тег.
Если оборачивать в нужные теги текст, придавая тегам уместные в конкретном случае атрибуты, то влияние на seo оптимизацию сайта у этих тегов будет существенное.
<Viewport>
Самый известный тег, который серьезно улучшает usability это конечно Viewport.
P.S. сам тег Viewport не виден в тексте, а работает исключительно в коде html.
Данный, визуально оптимизирующий контент сайта тег, оптимизирует на экране область, которую будет видеть пользователь, заходящий именно со своего устройства.
Содержимое сайта подгоняется тегом viewport. под разрешение экрана вашего устройства. Смотрится удобно!
Технически подгонка сайта под разрешение экрана осуществляется с помощью атрибутов width, height и initial-scale.
Использование viewport тега даёт большое преимущество в продвижение сайта, потому что в 2023 году большинство устройств для входа в интернет являются мобильными.
Поисковики учитывают этот момент и дают флаг вперёд тем сайтам, которые имеют этот тег и адаптивность верстки.
<abbr>
Тег <abbr> это сокращение от abbreviation — аббревиатура.
Такого рода teg сильно поднимает восприятие читаемого текста. Это особенно результативно используется для usability странички когда пишется текст со сложными терминами.
Читающий такой текст человек, хорошо воспринимает написанный материал и скорее всего проводит более большее время на страничке. Это улучшает часть поведенческих факторов и поднимает такие странички по SEO.
К тому же данный тег виден поисковикам и участвует в семантическом ядре сайта, в то время как он скрыт от простых глаз.
Как правило тег<abbr> в языке текстовой разметки html свободно используется с
глобальными атрибутами ,
О таких атрибутах поговорим ниже.
Глобальные атрибуты для seo
Глобальные атрибуты — это прежде всего атрибуты для различных тегов! Атрибутом чего либо вообще называют вариации того к чему прикреплен атрибут или различные свойства прикреплённого к атрибуту объекта.
Например у одежды может быть атрибуты как : цвет, длинна, марка ткани..
В нашем случае объект для атрибута это — teg.
А само значение атрибута — это свойства тега.
Сколько атрибутов у тега — столько и свойств.
Смотрите как это реализуется на сайте: В языке разметки html атрибуты обозначают возможность на программном уровне менять свойства тегов к которым прикреплены эти атрибуты. Иными словами атрибуты позволяют создавать вариации тегов, вариации свойств тегов итд…
Глобальные атрибуты общие для всех HTML — элементов они характерны тем, что могут использоваться всеми элементами html, в том числе и tegами.
Тем не менее на некоторые элементы кода глобальные атрибуты могут не оказывать влияния..
- accesskey — позволяет настроить переключение через кнопки клавиатуры.
- class — атрибут позволяет обратиться к CSS через группу элементов.
- contenteditable позволяет посетителю редактировать контент в месте установки атрибута.
- dir — определяет направление написания текста.
- draggable атрибут позволяет перетаскивать текст и менять местами блоки информации.
- hidden — скрывает элемент в работе HTML5 + позволяет JavaScript подтягивать скрытые места.
- id — позволяет через скрипты задавать имя и производить с ним различные действия.
- lang — это сокращение от «language» показывает читателю контента, язык на котором написан документ или страничка.
- spellcheck — тег показывает поисковому роботу и браузеру что стоит проверять или нет правописание и грамматику в тексте элемента. Таким образом когда стоит делать проверку значение атрибута ставят как «true», а когда не нужно проверять граматику- ставиться значение атрибута «falls».
- style — это атрибут, задающий параметры для CSS-стилей, которые можно индивидуально задавать объектам на странице.
- tabindex,
- title.
Смотрите как это выглядит в коде:
<abbr title=«атрибуты, которые подходят для всех тегов»>глобальными атрибутами</abbr>
<blockquote>
Тег <blockquote> указывает раздел страницы сайта, который может представлять цитату или важную информацию.
Тег позволяет выделить нужную информацию, при этом на сайте такое выделение выглядит вполне нативно.
Если же поиграть с оформлением вида тега на странице через css стили то можно добиться улучшения читаемости тех участков текста, которым вы хотели бы придать повышенную значимость.
Цитата <blockquote> оформлена как вертикальная черта, которой может и не быть особо видной, как на рисунке выше.
А может наоборот, вертикальная черта тега <blockquote> будет оформлена как на фото ниже.. Повторимся, что стиль овормления тегов в тексте задаётся css параметрами.
По картинке выше можно понять, что из общего текста такой тег хорошо выделяет тематику текста, при этом не портит usability сайта.
Тег <cite>
Тег <cite> в HTML означает Citation Element. Он очень похож по свойствам с выше описаным <blockquote>, но имеет семантическое отличие от него.
Главным смысловым отличием тега <cite> от тега <blockquote> является указанием для<cite> текстового сылания на авторство, пренадлежность итд..
Например:
<cite>Война и мир</cite>Произведение Льва Толстого.
Тег <cite> браузер в тексте выделяет курсивом.
Синтаксис написания тега в тексте прост: <cite>Текст</cite>.
<datalist>
Следующим тегом тег <datalist>.
Этот тег значительно увеличивает usability на страничке, и позволяет нам выдавать списки выбора для посетителей.
Синтаксис тега заключается в том что есть открывающий элемент <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» ( горизонтальная черта) имеет свойство создавать визуальную черту. В атрибуты этого тега входят такие свойства, как толщина черты и ее длинна.
- Что бы задать цвет черты мы применяем атрибут style=»border-color: red;»
Если посмотреть на полный код тега и его атрибута, изменяющего цвет черты то выходит вот такая кодировка:
<hr style=»border-color: red;» />
2. Что бы задать и цвет и толщину у черты можно воспользоваться кодировкой
<hr style=»border: 2px solid grey;»>
Тег способен разделять текст на логические блоки, улучшая ориентируемость по сайту. И поисковики и люди видят такой текст гораздо нагляднее.
Атрибуты тега
Атрибуты тега<hr> перечислены через запятую:
- align — делает выравнивание линии тега <hr>,
- color — цвет линии <hr>,
- noshade — делает линию без объемных эффектов,
- size — толщина линии,
- width — ширина линии.