Понимание семантической разметки: Основы и влияние на SEO
Введение
Привет всем! В этой статье мы поговорим о семантической разметке и о том, почему она важна для вашего сайта, если вы планируете заниматься поисковой оптимизацией.
Скриншот с Reddit
Давайте начнем с этого скриншота из темы на Reddit:
Нерациональное использование тегов
В последнее время можно встретить множество сайтов, разработчики которых просто не используют семантические HTML-теги. Некоторые думают, что их сайт и так SEO-дружественный. Некоторые просто не хотят заморачиваться. А некоторые до сих пор используют <div id="nav">, в то время как документация HTML5 рекомендует делать так: <nav>.
Но сейчас речь не об этом. Многие программисты традиционно используют такие конструкции, как <div id="nav"> для обозначения навигации или других структурных элементов страницы. Поэтому прежде чем мы перейдем к проблеме и ее решению, давайте рассмотрим основы.
Что такое семантическая разметка?
Семантический HTML, также известный как семантическая разметка, подразумевает использование HTML-тегов, которые передают смысл собственного содержимого, например заголовков, навигации, разделов страницы, списков и абзацев. Для наглядности приведем сравнение сайта с семантической разметкой и без нее.
В целом этот тип разметки выполняет две основные функции:
1. Упрощение работы поисковых роботов
Когда поисковый робот видит семантические HTML-теги, он безошибочно понимает, за что отвечает содержимое тега. Поэтому между двумя сайтами одной тематики предпочтение в результатах поиска будет отдано сайту с семантической разметкой (конечно, при условии, что остальные параметры находятся примерно на одном уровне).
2. Повышение доступности
Если вы думаете, что люди с нарушениями зрения не пользуются интернетом, то вы ошибаетесь. Просто они делают это по-другому. Они используют специальные программы, называемые скринридерами, которые «читают» и озвучивают содержимое страницы. Чем лучше сайт семантически размечен с точки зрения HTML, тем лучше (понятнее) он будет озвучен для пользователя.
Вот наглядное видео, демонстрирующее работу скринридера:
«Как пользователь скринридера воспринимает доступный и недоступный сайт»
Сравнение плохой и хорошей разметки
То же самое происходит с поисковыми роботами при индексации ваших страниц, если вы не используете необходимые HTML-теги. Вот пример с сайта web.dev (сайт в помощь разработчикам от Google).
Код без семантики
Сначала посмотрите на этот кусок кода, в котором используются только теги <div> и <span>.
Код с семантическими тегами
Теперь посмотрите на второй кусок кода, но на этот раз с семантическими тегами.
Семантика и модели восприятия
Естественно, во втором сценарии вы можете понять архитектуру сайта, даже если не знаете языка, на котором он написан.
А вот еще более интересный пример. Браузеры и поисковые системы используют модели для «чтения» содержимого сайта. Основной контент — через DOM (Document Object Model), а таблицы стилей — через CSSOM (CSS Object Model).
А программы для обеспечения доступности, такие как программы для чтения с экрана, используют модель объектов доступности (Accessibility Object Model, AOM). И вот как это выглядит на практике:
В первом случае без семантической разметки сайт выглядит просто как набор статичного текста. Более того, если сайт не позаботился о том, чтобы структурировать текст и сделать его читабельным для людей, то шансов у поисковой системы или программы чтения с экрана очень мало.
Семантический HTML имеет ряд преимуществ:
- ✅ Семантическая разметка облегчает создание адаптивного дизайна.
- ✅ Семантическая разметка облегчает внедрение микроданных Schema.org.
- ✅ Чистый и оптимизированный код, характерный для семантической разметки, способствует более быстрой загрузке страниц. Как мы знаем из предыдущих статей, это всегда хорошо.
- ✅ Google использует семантические теги для определения релевантности содержимого страницы, что может положительно повлиять на ранжирование страницы в SERPs.
Семантические элементы HTML
Давайте обсудим важные семантические теги, основные примеры их использования и распространенные ошибки. Их можно разделить на два типа:
- ● Первый — те, которые определяют структуру страницы.
- ● Во-вторых — те, которые определяют разметку текста на странице.
Сначала мы разделяем контент на логические блоки, а затем размечаем текст внутри этих блоков.
Структурные семантические HTML-теги
- <header> — определяет содержание, которое должно рассматриваться как вводная информация для страницы или раздела.
- <nav> — используется для навигационных ссылок. Он может быть размещен внутри тега
<header>, но часто вторичные теги<nav>используются и в других частях страницы, например, в боковой панели. - <main> — содержит основное содержание (также называемое телом) страницы. На странице должен быть только один тег
<main>. - <article> — независимая, самодостаточная единица контента, например, комментарий, твит, статья, пост и т. д.
- <section> — способ группировки тесно связанного контента на основе схожей темы.
- <aside> — определяет менее важный контент. Часто используется для боковых панелей.
- <footer> — используется в нижней части страницы. Обычно содержит контактную информацию, авторские права и некоторые элементы навигации по сайту.
Распространенные ошибки и рекомендации
- ◼️ <header>
Предпочтительнее иметь заголовок внутри, хотя часто допускается путаница с использованием тегов<section>и<div>. Важно, чтобы тег присутствовал на странице в единственном экземпляре. Распространенной ошибкой является включение в него неуникальных элементов, таких как навигация или авторские права. - ◼️ <nav>
Используется для основной навигации, а не для всех возможных групп ссылок. Например, меню в нижнем колонтитуле не обязательно должно быть в<nav>.
Интерлиньяж такого формата не считается основной навигацией. Для такой информации, с точки зрения семантики, предназначен тег<footer>.
Также ошибочно считать, что внутри<nav>можно использовать только списки. Допускается любая форма навигации. - ◼️ <main>
Допускается только один раз на странице. Ошибка — включение в него повторяющихся элементов, таких как навигация или авторские права. - ◼️ <article>
Желательно, чтобы тег содержал заголовок. Частая ошибка — путаница с<section>и<div>. - ◼️ <section>
Семантический раздел, желательно с заголовком. Ошибка — использование как обычного контейнера без структуры. - ◼️ <aside>
Может встречаться несколько раз и содержать заголовок. Ошибочно считается исключительно тегом для боковой панели, хотя применяется и к дополнительному контенту. - ◼️ <footer>
Может встречаться несколько раз и не обязательно должен быть в конце документа. Ошибка — ограничивать его только нижним колонтитулом сайта.
Раз уж мы заговорили об ошибках, то вот сравнение структуры двух тегов <nav> и <body> на простых примерах с семантической разметкой и без нее.
При такой структуре кода он вполне чист и читабелен. Каждый пункт нашего списка содержит необходимые ключевые слова.
А теперь пример того, как не следует размечать навигацию на сайте:
Внутри списка в теге <nav> часто используются теги заголовков
(h1, h2, h3) или <p> (абзац).
Оба этих тега находятся внутри тега <body> и служат для разметки основного содержимого.
*Дополнительная информация:
Использование ключевых слов в названиях пунктов меню — очень хорошая SEO-практика, которой часто пренебрегают.
По возможности используйте их только для самых важных ключевых слов.
«Тело» сайта
При такой структуре кода он вполне чист и читабелен. Каждый пункт нашего списка содержит необходимые ключевые слова.
А теперь пример того, как не следует размечать навигацию на сайте:
Внутри списка в теге <nav> часто используются теги заголовков
(h1, h2, h3) или <p> (абзац).
Оба этих тега находятся внутри тега <body> и служат для разметки основного содержимого.
*Дополнительная информация:
Использование ключевых слов в названиях пунктов меню — очень хорошая SEO-практика, которой часто пренебрегают.
По возможности используйте их только для самых важных ключевых слов.
«Тело» сайта
И снова чистый и читабельный код. Тег содержит контент с ключевыми словами.
В идеале тег должен «инкапсулировать» все семантические элементы, связанные с контентом.
К сожалению, подобные проблемы встречаются чаще, чем вы можете себе представить. Старайтесь обращать внимание на такие ошибки, особенно когда содержимое страницы выходит за пределы тега </body>, особенно если вы работаете с конструкторами страниц вроде Elementor или Bakery.
Семантические HTML-теги для текста
- <h1> (заголовок)
Тег H1 обозначает заголовок верхнего уровня. Обычно на странице есть только один заголовок H1. - <h2> — <h6> (подзаголовки)
Подзаголовки разного уровня важности. На одной странице может быть несколько заголовков одного уровня. - <p> (абзац)
Отдельный абзац текста. - <a> (якорь)
Используется для создания гиперссылок с одной страницы на другую. - <ol> (упорядоченный список)
Список элементов, отображаемых в определенной последовательности. Тег <li> содержит один элемент списка. - <ul> (неупорядоченный список)
Список элементов, не обязательно в определённой последовательности. Тег <li> содержит один элемент списка. - <q> (цитата в строке)
Используйте <q> для коротких цитат. Для многострочных цитат — <blockquote>. - <em> (курсив)
Используется для выделения текста, который нужно подчеркнуть логически. - <strong> (жирный)
Используется для текста, который требует логического акцента. - <code>
Блок компьютерного кода.
Не используйте семантические HTML-теги для стилизации.
Несмотря на то, что при использовании таких тегов стили автоматически применяются в браузере (например, текст внутри тега <a> обычно выделяется синим цветом и подчеркивается), это не означает, что семантические HTML-теги предназначены для форматирования текста.
Вот несколько типичных примеров неправильного использования семантических тегов:
- Использование тегов <h1> — <h6> для текста, который не является заголовком, просто для изменения размера шрифта.
- Использование более одного тега <h1> на странице. Правило простое: одна страница — один <h1>.
- Использование <blockquote> только для выравнивания текста, который не является цитатой.
- Использование <strong> или <em> только для добавления жирного или курсивного форматирования к тексту, который не нуждается в выделении.
Для стилизации всегда используйте таблицы стилей — CSS.
Кстати, лучше не использовать некоторые семантические элементы в <nav> и <footer>. Особенно это касается тегов заголовков, например, <h2> — это мощный HTML-элемент для SEO, и если он окажется в футере или навигации, то поисковая система запутается.
Давайте рассмотрим простой пример:
При такой структуре кода он вполне чист и читабелен. Каждый пункт нашего списка содержит необходимые ключевые слова.
А теперь пример того, как не следует размечать навигацию на сайте:
Внутри списка в теге <nav> часто используются теги заголовков
(h1, h2, h3) или <p> (абзац).
Оба этих тега находятся внутри тега <body> и служат для разметки основного содержимого.
*Дополнительная информация:
Использование ключевых слов в названиях пунктов меню — очень хорошая SEO-практика, которой часто пренебрегают.
По возможности используйте их только для самых важных ключевых слов.
«Тело» сайта
И снова чистый и читабельный код. Тег содержит контент с ключевыми словами.
В идеале тег должен «инкапсулировать» все семантические элементы, связанные с контентом.
Заключение
Дорогие друзья, спасибо, что дочитали нашу статью до конца! Хочу сказать, что хотя семантическая разметка, возможно, и не является фактором ранжирования, она все же влияет на релевантность индексации ваших страниц и восприятие контента на них.
Тема довольно простая и не требует глубоких знаний программирования, достаточно базового понимания HTML, и, к счастью, в сети есть множество видео и бесплатных курсов по HTML5.
