Как сделать правильную HTML вёрстку
Как известно из прошлой статьи, чтобы поисковые системы корректно отображали вашу страницу в поисковой выдаче, мы должны сделать качественную HTML вёрстку. В данной же статье мы изучим важные HTML элементы, которые помогут вам сделать вашу страницу “читабельной” для поисковых систем.
Правильная HTML вёрстка также носит название семантическая вёрстка. В HTML5 появилось достаточно много тегов, которые предназначены для обозначения определенных блоков и данных. О них я и собираюсь поговорить.
Основные элементы HTML5
<header> - необходим для обозначения поисковым роботам места, где находится шапка сайта или определённого элемента. В шапке сайта обычно доступна основная информация о сайте: логотип, меню навигации, контактные данные и т.д. К примеру у элементов <article> или <section> могут быть свои <header> или <footer>, но для SEO это особо не имеет никакого значения (просто удобство, ведь можно структурировать блок статей, выделить заголовок статьи в шапку, а блок комментариев в подвал).
<footer> - аналогично <header> даёт ботам понимание того, где находится подвал сайта (обычно там бывает политика конфиденциальности, копирайт, контакты, ссылки на соцсети и ещё много полезных ссылок).
<article> - является довольно важным элементов в HTML5. Он реально способен повлиять на продвижение сайта в поисковых системах, дав боту понять, что именно в данной области находится статья со смысловым содержанием страницы. Всё что находится внутри данного тега индексируется роботом и страница получает больший вес и хорошую ранжировку в поисковиках.
<section> - обозначает секцию, то бишь блоки на сайте. Больше нужно для удобство понимания роботам что конкретно имеется на сайте.
<main> - содержит в себе главный контент страницы. Роботы лучше понимают, что содержимое страницы находится именно в этом блоке. Хорошим примером является использование <article> внутри <main>.
<nav> - размечает навигацию страницы. Подходит для объявления групп ссылок в меню, сайдбаре, подвале и т.д.
<aside> - показывает второстепенный контент, такой как сайдбар, блок рекламы или же баннер, т.е. всё что не относится к главному контенту. На счёт индексации информации в данном блоке информация расплывчатая. Некоторые боты вообще не индексируют содержимое данного элемента.
Дополнительные элементы HTML5
<audio> - полезный тег, который инициализирует и воспроизводит аудиозаписи на веб-странице. Путь к файлу с аудиозаписью можно задать через атрибут src или вложенный тег <source>. Внутри <audio> можно также вписать текст, который будет выводиться в браузерах, не работающих с этим тегом.
<video> - работает аналогично <audio>, отличается лишь тем, что объектом управления является видео на веб-странице.
Необходимо добавлять несколько версий аудио и видеозаписей, под разными кодеками, потому что не все браузеры поддерживают те или иные кодеки. Подробнее об этих тегах я расскажу в будущих статьях.
<canvas> - контейнер, в котором есть возможность нарисовать изображение средствами JavaScript. Логика построения объектов основана на математических формулах. С помощью данного элемента можно также создавать анимации, интерактивные приложения, игры и т.д.
<details> - блок, в который можно написать скрытый текст и он будет показываться при клике на содержимое внутреннего тега <summary>.
<mark> - выделяет фон текста определённым цветом, по умолчанию, в зависимости от браузера это жёлтый, синий, либо светло серый. Цвет задаётся с помощью CSS стилей. В целом <mark> также можно использовать, чтобы выделить ключевые запросы на странице.
<address> - тег, в который можно записать контактную информацию об авторе сайта. Поисковая система анализирует содержание данного тега для сбора информации. Этот тег можно применять где угодно, например в подвале сайте. В него можно также встроить другие теги, типа <p>, <span> или <a>.
<time> - можно использовать для обозначения даты и времени публикации конкретного материала на сайте. Благодаря этому тегу некоторые поисковики понимают точную дату публикации статьи на сайте.
<blockquote> - определяет цитату контента. Полезен, чтобы поисковой бот положительно отнёсся к копированию материалов с чужих сайтов, если в таком есть необходимость. Например, с помощью данного тега можно выводить известные всем термины, цитаты людей, превью фильмов, описания статей и т.д.
<cite> - этим тегом можно выделить название какой-нибудь статьи, книги, видео, произведения и т.д.
<code> - в него можно заключить программный код или формулы.
Заключение
На сегодняшний день HTML5 привнёс достаточно вклада, чтобы поисковые роботы могли правильно разбираться в содержимом веб-страниц. Код стал в разы компактнее и более структурированным. Однако без должного UI/UX сопровождающих невозможно добиться удержания аудитории, что значительно влияет на ранжирование страницы.
Чистый и оптимизированный код страницы позволяет пользователям со слабым интернет соединением быстрее получить доступ к информации на сайте. Это повышает вероятность того, что пользователь останется на сайте дольше, так как на нём удобно ориентироваться.
Помните, что HTML5 это всего лишь инструмент для вывода информации. А грамотная подача контента это работа дизайнера и копирайтера.
А квалифицированного дизайнера и опытного копирайтера, а также профессионала верстальщика, вы можете найти в Студии Али Велиева. Сделайте заказ прямо сейчас!
