Руководство по семантике HTML5 для улучшения SEO
В этом руководстве мы узнаем, что такое семантика HTML5 и как она помогает улучшить SEO сайта.
Что такое семантика HTML5?
Семантика была неотъемлемой частью HTML. Но ей стали уделять должное внимание только после появления HTML5.
Но все HTML-теги с определенным значением являются семантическими Например, заголовки (h1>, <h2>, <h3>, <h4>, <h5>, <h6>), упорядоченные и неупорядоченные списки (<ol>, <ul>, <li>), абзацы (<p>), изображения (<img>), таблицы (<table>, <thead>, <tbody>, <tfoot>, <tr>, <td>), элементы формы (<form>, <fieldset>, <label>, <input>, <textarea>) и ссылки (<a>).
HTML5 добавил в язык несколько новых семантических тегов: <figure>, <header>, <footer> (блочные теги) и <strong>, <em>, <mark> (строчные теги). Но по-настоящему важным стало введение четырех секционных элементов: <article>, <aside>, <nav> и <section>. Они позволяют создать более детальную архитектуру каждой HTML-страницы.
Как улучшить SEO с помощью семантики?
Поисковые роботы могут анализировать текст веб-страницы, но не видят, как различные части контента связаны друг с другом. Это можно исправить двумя различными способами:
- Используя семантику HTML
- С помощью расширенных сниппетов (структурированных данных).
Используйте лучшие семантические элементы
Не все семантические теги HTML5 предназначены для одной и той же цели. Существует три их основных типа:
- Блочные секционные элементы.
- Блочные несекционные элементы.
- Строчные элементы.
Блочные секционные элементы формируют структуру документа, которую могут понять поисковые роботы. К секционным HTML-тегам относятся:
- <article> - предназначен для разметки отдельных публикаций, таких как статьи или обзоры.
- <section> - используется для разметки блоков контента, которые логически связаны друг с другом. Например, контента с вкладками;
- <aside> - для структурирования сносок и меток.
- <nav> - для элементов навигации.
Тег <main> не является секционным элементом. Но это все равно семантический тег. Его можно использовать только один раз на каждой HTML- странице.
Как секционные элементы исключаются из структуры документа?
Секционные элементы создают разметку контента, которая находится вне структуры страницы. Поэтому для них можно задавать свои заголовки (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>), шапки (<header>) и подвалы (<footer>). Эти теги относятся только к секционному элементу и не являются частью страницы. Вот пример правильной разметки на HTML5.
<html>
<head>...</head>
<body>
<h1>Title of the Entire Page</h1>
<h2>Subtitle of the Entire Page</h2>
<article>
<h1>Title of the Article Section</h1>
<h2>Subtitle of the Article Section</h2>
</article>
</body>
</html>В примере видно, что можно использовать отдельный тег <h1> для элемента <article>. Он существует вне структуры страницы, потому что нельзя использовать два тега <h1> на одной странице.
Также у тега <article> могут быть свои <header> и <footer>, которые не входят в DOM страницы.
<html>
<head>...</head>
<body>
<header>Header of the Entire Page</header>
<article>
<header>Header of the Article Section</header>
<p>...</p>
<p>...</p>
<footer>Footer of the Article Section</footer>
</article>
<footer>Footer of the Entire Page</footer>
</body>
</html>Благодаря этой особенности семантических тегов поисковые системы могут обрабатывать автономные блоки как отдельные объекты.
Используйте несемантические элементы с умом
Несемантические теги стоит использовать только для стилизации веб-страницы. Например, чтобы добавить отступ к группе несвязанного между собой контента, нужно создать класс HTML и стилизовать его с помощью CSS. В этой ситуации лучше применить тег <div>, поскольку он не структурирует содержимое. Блочный тег <div> имеет строчный эквивалент. Это <span> , который можно использовать для стилизации строчного контента.
Планируйте структуру HTML-документа
Существуют инструменты, которые помогают создать логическую структуру веб-страницы. HTML Outliner – это инструменты, которые анализируют структуру веб-страницы.
Они реализованы в виде онлайн-сервисов, которые помогают определить потенциальные проблемы в структуре HTML-документа. Например, отсутствующие заголовки.
Также доступны специальные расширения для браузера. Например, HeadingsMaps для Firefox или HTML5 Outliner для Chrome. Они позволяют анализировать структуру HTML-документа с любого URL-адреса. Таким образом, можно быстро проверить, какую семантику HTML5 используют ваши конкуренты.
Для проверки структуры HTML-документа и некоторые разработчики используют текстовые браузеры. Например, браузер Lynx. Первоначально они были созданы для слабовидящих пользователей, которые просматривают веб-страницы с помощью программ чтения с экрана. Поисковые роботы воспринимают контент так же, как слепые люди. Поэтому текстовый браузер может стать полезным инструментом, используемым для выявления ошибок в структуре HTML.
Сделайте текстовые блоки легко читаемыми
Текстовые блоки веб-страницы должны быть легко читаемыми. Это помогает поисковым системам лучше понимать контент. Теги, используемые для «разбиения» контента, являются семантическими. К ним относятся: <img>, <figure>, <video>, <audio>, <ul>, <ol> и другие.
Заключение
Семантика HTML5 является важным шагом в создании хорошо ранжируемого контента и повышении удобства сайта для пользователей.