Семантическая верстка (семантический HTML-код) — это подход к верстке страниц сайта, основанный на использовании HTML-тегов в соответствии с их семантическим предназначением, а также предполагающий логичную и последовательную иерархию страницы.
Проще говоря, семантика нужна для правильной разметки структуры страницы и использования логически правильных блоков.
Это упростить работу поисковым роботам и позволит лучше сканировать страницы вашего сайта, а значит выше поднимать в поисковой выдаче. А пользователи будут получать более качественный и структурированный контент, который легче воспринимается.
Зачем она нужна
Есть две основные задачи:
- Улучшение индексации роботами.
Когда поисковый робот видит семантические html-теги, он точно понимает за что отвечает содержимое тега. Поэтому выбирая между двумя сайтами одной тематики, предпочтение в выдаче будет отдано сайту с семантической разметкой - Повышение доступности сайта.
Удобство сайта — один из ключевых параметров, которые также учитываются поисковыми системами. Удобным сайт должен быть и для людей с нарушением/потерей зрения. Пользователи с такими особенностями используют специальные программы — скринридеры. Эти программы которые “читают” и озвучивают содержимое страницы при наведении мыши или при помощи пальца. Чем лучше семантическая HTML разметка сайт, тем понятнее программа будет описывать блок и его содержимое для пользователя
Влияние на сео
Влияние семантической верстки на сео сайта:
- Облегчает верстку адаптивного дизайна
- Облегчает внедрение микроразметки Schema.org
- Чистый, оптимизированный код способствует быстрой загрузке страницы, что положительно влияет на лояльность поисковых систем
- Google использует семантические теги для определения релевантности содержимого, что влияет на ранжирование страниц в SERP
Основные семантические теги
<header> — определяет содержание, которое следует рассматривать как вводную информацию страницы или раздела.
<nav> — используется для ссылок навигации. Его можно расположить внутри тега <header>, но вторичные теги <nav> для навигации также часто используются в других частях страницы, например в сайдбаре.
<main> — содержит основное содержание (также называемое телом) страницы. На странице должен присутствовать только один тег.
<article> — независимая, отделяемая смысловая единица, например комментарий, твит, статья, пост и т.д.
<section> — это способ группировки близкого контента по схожей теме.
<aside> — определяет менее важное содержание. Его часто используют для сайдбаров
<footer> — используется в нижней части страницы (подвале). Обычно включает контактную информацию, авторские права и некоторую навигацию
по сайту.
<h1> — Тег H1 обозначает заголовок верхнего уровня. Обычно на странице есть только один заголовок H1.
<h2> до <h6> — Подзаголовки разных уровней важности. На одной странице может быть несколько заголовков одного уровня.
<p> — Отдельный параграф текста.
<a> — Используется для создания гиперссылок с одной страницы на другую.
<ol> — Список элементов, отображаемых в определенном порядке, начиная с маркеров. Тег <li> (элемент списка) содержит один элемент списка.
<ul> — Список элементов, которым необязательно следовать определенному порядку, начиная с маркеров. Тег <li> (элемент списка) содержит один
элемент списка.
<q> / <blockquote> — Цитата текста. Используйте <blockquote> для длинных многострочных цитат и <q> для коротких встроенных цитат.
<em> — Используется для текста, который нужно выделить.
<strong> — Используется для текста, который нужно особенно выделить.
<code> — Блок компьютерного кода.
