Руководство по семантике 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-страницы.

Что такое семантика HTML5?

Как улучшить SEO с помощью семантики?

Поисковые роботы могут анализировать текст веб-страницы, но не видят, как различные части контента связаны друг с другом. Это можно исправить двумя различными способами:

  1. Используя семантику HTML
  2. С помощью расширенных сниппетов (структурированных данных).

Используйте лучшие семантические элементы

Не все семантические теги HTML5 предназначены для одной и той же цели. Существует три их основных типа:

  • Блочные секционные элементы.
  • Блочные несекционные элементы.
  • Строчные элементы.

Блочные секционные элементы формируют структуру документа, которую могут понять поисковые роботы. К секционным HTML-тегам относятся:

  1. <article> — предназначен для разметки отдельных публикаций, таких как статьи или обзоры.
  2. <section> — используется для разметки блоков контента, которые логически связаны друг с другом. Например, контента с вкладками;
  3. <aside> — для структурирования сносок и меток.
  4. <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-документа

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

Планируйте структуру HTML-документа - 2

Сделайте текстовые блоки легко читаемыми

Текстовые блоки веб-страницы должны быть легко читаемыми. Это помогает поисковым системам лучше понимать контент. Теги, используемые для «разбиения» контента, являются семантическими. К ним относятся: <img>, <figure>, <video>, <audio>, <ul>, <ol> и другие.

Заключение

Семантика HTML5 является важным шагом в создании хорошо ранжируемого контента и повышении удобства сайта для пользователей.

Пожалуйста, оставляйте свои комментарии по текущей теме статьи. За комментарии, отклики, дизлайки, подписки, лайки низкий вам поклон!

Пожалуйста, оставляйте свои отзывы по текущей теме статьи. За комментарии, отклики, дизлайки, лайки, подписки низкий вам поклон!

Ангелина Писанюкавтор-переводчик статьи «A Guide to HTML5 Semantics for Better SEO»