SEO

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

Как улучшить 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 используют конкуренты.

Руководство по семантике HTML5 для улучшения SEO

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

Руководство по семантике HTML5 для улучшения SEO

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

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

Заключение

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *