Понимание семантической верстки: основы и влияние на SEO

Друзья, всем большой SEO-привет! В этой статье мы поговорим на тему семантической разметки и почему это важно для вашего сайта, если вы планируете заниматься поисковой оптимизацией.

А начать хочется именно с этого скриншота треда с реддита:

В последнее время можно встретить множество сайтов, разработчики которых напросто не используют семантические html-теги. Кто-то думает, что их сайт и так seo-friendly. Кто-то просто не хочет заморачиваться. А кто-то до сих пор использует <div id="nav">, в то время как документация к HTML5 рекомендует делать так: <nav>.

Но сейчас речь не об этом. Многие программисты традиционно используют такие конструкции, как <div id="nav">, чтобы обозначить навигацию или другие структурные элементы страницы. Итак, перед тем, как мы перейдем к проблеме и ее решению, взглянем на основу.

Семантический HTML, он же семантическая разметка, подразумевает использование HTML-тегов, передающих смысл собственного содержимого, например, заголовки, навигация, разделы страницы, списки и абзацы.

Для наглядности, вот так в сравнении выглядит сайт с семантической разметкой и без.

Вообще у данного вида разметки есть две основные функции:

Первая — Упрощение жизни поисковым роботам.
Что это значит? Когда поисковый робот видит семантические html-теги, он точно понимает за что отвечает содержимое тега. То есть между двумя сайтами одной тематики, предпочтение в выдаче будет отдано сайту с семантической разметкой (конечно, при условии, что остальные параметры находятся на приблизительно одном и том же уровне).

Вторая — Повышение доступности вашего сайта.
Если вы думаете, что люди с нарушением зрения не используют интернет, то вы заблуждаетесь, только вот делают они это по-другому. Они используют специальную программы — скринридеры, которые “читают” и озвучивают содержимое страницы. Чем лучше в плане семантического HTML размечен сайт, тем лучше (понятнее) он будет озвучен для пользователя.

Вот наглядное видео, которое демонстрирует работу скринридера:
"How a screen reader user experiences an accessible and inaccessible website."

Примерно то же самое происходит и с поисковыми роботами при индексировании ваших страниц, если вы не используете нужные HTML-теги. Вот еще один пример с сайта web.dev (сайт для помощи разработчикам от компании Google). Сначала посмотрите на этот кусок кода, где используются только теги <div> и <span>.

А теперь взгляните на второй кусок кода, но уже с наличием семантических тегов.

Естественно, во втором случае можно понять архитектуру сайта, даже если вы не знаете язык, который используется на сайте.
Вот еще более интересный пример. Браузеры и поисковые системы используют модели для “чтения” содержимого сайта. Основное
содержимое через DOM (Document Object Model) и таблицы стилей через CSSOM (CSS Object Model).

А вот программы доступности вроде скринридеров используют модель
AOM (Accessibility Object Model).

И вот так это выглядит на практике:

В первом случае без семантической верстки, это выглядит просто набором статичного текста. Причем, если на сайте не позаботились о структурировании текста и не сделали текст читабельным для человека, то шансов у поисковика или скринридера совсем немного.

● Семантическая верстка облегчает создание адаптивного дизайна.
● Семантическая верстка облегчает внедрение микроразметки Schema.org.
● Чистый и оптимизированный код, характерный для семантической верстки, способствует более быстрой загрузке страницы. А как мы знаем из прошлых статей, это всегда хорошо.

Ну и вишенка на торте, ради которой и писалась данные статья:
● Google, использует семантические теги для определения релевантности содержимого страниц, что может повлиять в лучшую сторону на ранжирование страниц в SERP.

Давайте рассмотрим важные семантические теги, базовые примеры использования и ошибки. Разделить их можно на два вида:

● Первые — отвечают за структуру страницы
● Вторые — отвечают за разметку текста на странице

Сначала мы размечаем содержимое на логические блоки, а затем уже размечаем текст внутри блоков.

● <header> – определяет содержание, которое следует рассматривать как вводную информацию страницы или раздела.
● <nav> – используется для ссылок навигации. Его можно расположить внутри тега <header>, но вторичные теги <nav> для навигации также часто используются в других частях страницы, например в сайдбаре.
● <main> – содержит основное содержание (также называемое телом) страницы. На странице должен присутствовать только один тег.
● <article> – независимая, отделяемая смысловая единица, например комментарий, твит, статья, пост и т.д.
● <section> — это способ группировки близкого контента по схожей теме.
● <aside> – определяет менее важное содержание. Его часто используют для сайдбаров
● <footer> – используется в нижней части страницы (подвале). Обычно включает контактную информацию, авторские права и некоторую навигацию
по сайту.

Типовые ошибки и рекомендации. Здесь мы закрепим материал по каждому тегу, отсутствие которых, сильно упростит вам жизнь в дальнейшем.

◼ <header>.
Желательно наличие заголовка внутри, при этом часто допускаются ошибки в виде путаницы с использованием тегов <section> и <div>.<main>: Важно, чтобы тег присутствовал в единственном экземпляре на странице, исходя из его определения, и частая ошибка заключается в том, что в него заключают не уникальные элементы, которые повторяются на других страницах — навигацию, копирайты и тому подобное.

◼ <nav>
Используется для основной навигации, а не для всех возможных групп ссылок. А вот считать ли навигацию основной или нет, остается на усмотрение верстальщика. Например, если у вас есть меню в подвале сайта, его необязательно оборачивать в <nav>. В подвале обычно находится краткий список ссылок, таких как ссылка на главную, копирайт и условия.

Перелинковка такого формата не считается основной навигацией. Для такой информации с семантической точки зрения предназначен тег <footer>.

Что касается распространенных ошибок, многие ошибочно считают, что внутри тега <nav> допустим только список навигационных ссылок, но согласно спецификации он может содержать навигацию в любой форме.

◼ <main>
Важно, чтобы тег присутствовал в единственном экземпляре на странице, исходя из его определения, и частая ошибка заключается в том, что в него заключают не уникальные элементы, которые повторяются на других страницах — навигацию, копирайты и тому подобное.

◼ <article>
Желательно, чтобы внутри этого тега присутствовал заголовок и частая ошибка заключается в том, что его путают с тегами <section> и <div>.

◼ <section>
Смысловой раздел документа (страницы), неотделимый, в отличие от
<article>. Желательно, чтобы внутри него , как и в случае с <article> присутствовал заголовок и частая ошибка заключается в том, что его путают
с тегами <article> и <div>.

◼ <aside>
Тег может иметь свой заголовок и встречаться несколько раз на странице. Однако часто его ошибочно считают тегом только для боковой панели (сайдбара) и используют для разметки основного контента, который связан
с окружающими его элементами.

◼ <footer>
Элемент может встречаться несколько раз на странице и тег не обязан находиться в конце раздела. Однако частой ошибкой является использование его исключительно в качестве подвала сайта.

Раз уж мы заговорили об ошибках, то вот сравнение структуры двух тегов <nav> и <body> на простых примерах с семантической версткой и без.
Вот так код выглядит вместе с семантическими тегами.

При такой структуре код достаточно чист и читабелен. При этом в
каждом пункте нашего списка присутствует нужное ключевое слово.

Ну а вот пример того, как не нужно размечать навигацию на сайте:

Внутри списка, в теге <nav> частенько используются теги заголовков
(h1, h2, h3) или <p> (текстовый абзац). И тому и другому тегу место внутри тега <body> для разметки основного контента.

*Дополненительная информация.
Использование ключевых слов внутри названия пунктов меню — очень хороший SEO-прием, который частенько игнорируются. По возможности, используйте его только для самых важных ключей.

Снова чистый и читаемый код. Внутри тега находится содержимое с ключевыми словами. В идеале тег должен “закрывать “ все семантические элементы, связанные с контентом.

К сожалению, эти вещи встречаются чаще, чем вы можете представить. Старайтесь обращать внимание на такие ошибки, когда контент страницы выходит за тег </body>, особенно, если вы работаете с конструкторами
страниц вроде Elementor или Bakery.

Идем дальше.

Это те теги, которые, помимо форматирования, также передают смысл текстового содержимого.

● <h1> (заголовок)
Тег H1 обозначает заголовок верхнего уровня. Обычно на странице есть только один заголовок H1.

● <h2> до <h6> (подзаголовки)
Подзаголовки разных уровней важности. На одной странице может быть несколько заголовков одного уровня.

● <p> (параграф)
Отдельный параграф текста.

● <a> (якорь)
Используется для создания гиперссылок с одной страницы на другую.

● <ol> (упорядоченный список)
Список элементов, отображаемых в определенном порядке, начиная с маркеров. Тег <li> (элемент списка) содержит один элемент списка.

● <ul> (неупорядоченный список)
Список элементов, которым необязательно следовать определенному порядку, начиная с маркеров. Тег <li> (элемент списка) содержит один
элемент списка.

● <q> / <blockquote>
Цитата текста. Используйте <blockquote> для длинных многострочных цитат и <q> для коротких встроенных цитат.

● <em> (выделение)
Используется для текста, который нужно выделить.

● <strong> (сильное выделение)
Используется для текста, который нужно особенно выделить.

● <code>
Блок компьютерного кода.

Не используйте семантические теги HTML для стилизации. Несмотря на то, что в браузере при использовании таких тегов автоматически применяются стили (например, текст внутри тега <a> обычно синий и подчеркнут), это не означает, что семантические теги HTML предназначены для оформления текста.

1. Использование тега <h1> до <h6> для текста, который не является заголовком, с целью изменения его размера шрифта.

2. Использование больше одного тега <h1> на странице. Правило простое: одна страница — один <h1>

3. Использование <blockquote> просто для того, чтобы выровнять текст, который не является цитатой.

4. Использование <strong> или <em> просто для добавления полужирного или курсивного начертания тексту, которому не нужно выделение.

Для стилизации всегда используйте таблицы стилей — CSS.
Кстати, лучше не использовать некоторые семантические элементы в <nav> и <footer>. Особенно теги заголовков, например, <h2>— это мощный HTML-элемент для SEO и если он находится в футере или навигации, поисковый робот будет в замешательстве.

Рассмотрим простенький пример:

Он видит элемент <h1>, предполагая, что страница оптимизирована для поисковых систем, а затем он видит набор из H3 в ссылках футера. Если теги заголовков окажутся там, где нет никакого отношения к содержанию, которое вы пытаетесь продвигать с помощью SEO, то вы зря тратите ресурсы.

Конечная цель при работе с семантической версткой — принимать осмысленные решения, уменьшать путаницу и, следовательно, улучшать результаты поиска.

Мы рассмотрим в статье три варианта, по возрастанию сложности.
Однако вариантов может быть куда больше, все зависит от того, какие инструменты вы используете.

Все предельно просто. Переходите на нужную вам страницу, в рамках примера возьмем Google.com.

А теперь наводим курсор на пустое пространство без элементов и нажимаем на правую кнопку мыши, далее выбираем пункт View page source или используем хоткей Ctrl +U. Ивуаля:

Перед вам полностью HTML код нужной вам страницы. Изучайте и смотрите корректность нужных вам тегов. Найти их проще всего через Ctrl + F (поиск по странице).

В целом очень похож на первый вариант, но есть ряд отличий. С начала все точно также. Переходите на нужную страницу, наводите курсор на пустое пространство без элементов и нажимаете на правую кнопку мыши, но теперь выбираете пункт Inspect или используем хоткей F12.

Выбираете в верхнем меню Elements и нажимаете Ctrl + Shift + C, чтобы перейти в режим курсора. Теперь наводите курсор на любой элемент на странице и код автоматически подсвечивается в правой части экрана.

Самый сложный метод. Если вы не работаетес SEO на постоянной основе, вряд ли вы будете покупать платный доступ. Тем не менее в Semrush вы можете использовать бесплатный триал. Сам инструмент сильно
упрощает жизнь при работе с поиском ошибок.

Нам нужен инструмент Site Audit. Создаем проект и вводим URL вашего сайта.

Теперь выбираем количество страниц, которое просканирует сервис в рамках аудита.

После того как все страницы будут просканированы — переходим в проект и выбираем раздел Issues.

Как раз можно увидеть, что среди ошибок есть следующее –
7 pages don't have an h1 heading.

Нажимаем на Why and how to fix it и следуем рекомендациям. Вот так просто и быстро.

Ну и ниже конечно будут представлены страницы, на которых, как раз выявлены данные ошибки.

Друзья, спасибо, что дочитали нашу статью до конца!😀 Хочется сказать, что пускай семантическая разметка и не является фактором ранжирования, тем не менее, она все равно влияет на релевантность индексации ваших страниц и восприятия контента внутри.

Тема весьма простая и не требует глубоких знаний программирования, достаточно базового понимания HTML, благо в сети можно найти огромное количество роликов и бесплатных курсов по HTML5. Будем рады, если поделитесь в комментариях💬 собственным опытом работы с семантическими тегами.