Как сделать правильную 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 это всего лишь инструмент для вывода информации. А грамотная подача контента это работа дизайнера и копирайтера.
А квалифицированного дизайнера и опытного копирайтера, а также профессионала верстальщика, вы можете найти в Студии Али Велиева. Сделайте заказ прямо сейчас!