Руководство по семантике 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?
6 методов использования Google+ для улучшения видимости

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

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

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

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

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

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

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

  1. <article> - предназначен для разметки отдельных публикаций, таких как статьи или обзоры.
  2. <section> - используется для разметки блоков контента, которые логически связаны друг с другом. Например, контента с вкладками;
  3. <aside> - для структурирования сносок и меток.
  4. <nav> - для элементов навигации.
9 советов по Google Analytics для улучшения маркетинга

Тег <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>

Благодаря этой особенности семантических тегов поисковые системы могут обрабатывать автономные блоки как отдельные объекты.

SEO-аудит сайта для улучшения ранжирования в Google

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

Несемантические теги стоит использовать только для стилизации веб-страницы. Например, чтобы добавить отступ к группе несвязанного между собой контента, нужно создать класс 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 является важным шагом в создании хорошо ранжируемого контента и повышении удобства сайта для пользователей.

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