Как HTML 5 влияет на продвижение сайта

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

В сравнении с предыдущим стандартом HTML 4.01 новая ревизия языка включает целый ряд улучшений, упрощающих верстку:

• Поддержка векторной графики и медиа-объектов без подключения внешних плагинов;
• Использование кэша веб-приложений и баз данных SQL для кэширования данных;
• Автоматическая обработка синтаксических ошибок;
• Более детальная архитектура страниц, благодаря появлению таких секционных элементов и тегов, как article, header, footer, section, nav;
• Прирост в скорости загрузки содержимого в связи с удалением лишних элементов.

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

Блочные секционные элементы

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

С приходом HTML5 словарь семантических элементов веб-разработчика пополнился тегами, позволяющими более точно разметить контент: вместо стандартного блочного элемента <div>...</div> теперь используются более информативные для верстальщиков и поисковых роботов теги, например, <article>...</article> или <aside>...</aside>.

Теги <header> и <footer>

Как дать понять поисковым системам, где расположена «шапка» и «подвал» сайта? Для этого верстальщик заключает такие элементы, как лого, имя сайта, переключатель языков, корзину и меню в блок <header>...</header>. В свою очередь важно понимать, что у статьи может быть отдельный хедер.

<article>
  <header>
    <h1>Почему чемпионат Европы называется 2020?</h1>
    <p>Год не сменили из-за пандемии коронавируса:</p>
  </header>
  <p>Так как в 2020 году чемпионат Европы не проводился из-за пандемии и закрытых границ,
  было принято решение провести его в 2021 году сохранив оригинальный год.</p>
</article>

В нижнюю часть страниц, как правило, выносят контактные данные и копирайт, обрамляя ее тегами <footer>...</footer>.

Элемент <article>

Пожалуй, ключевой тег в SEO-продвижении: в нем содержится важнейшая для индексации информация. Это может быть как содержимое статьи или новости, так и групп статей при использовании вложенных элементов <article> наряду с сопутствующими <aside> или <section>.

Вспомогательный контент и <aside>

Почти ни один сайт не обходится без блоков, упрощающих навигацию или взаимодействие с платформой, отсутствие которых не навредит основному контенту. К таким элементам относятся, например, сайдбары и рекламные блоки.

Блок <section>

Универсальный тег section - обертка под секции с однородным контентом, для которого не предусмотрен отдельный тег - например, article или aside.

Разметка навигации и <nav>

В nav следует оборачивать любые элементы навигации: мобильное меню, пагинация (нумерация страниц или медиа-содержимого), внутренние ссылки в футере.

Основной контент - в блоке <main>

Чтобы указать поисковым системам на наиболее релевантный контент, используется тег main, который, как правило, располагается между блоками <header>...</header> и <footer>...</footer>.

Прочие теги для SEO-продвижения

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

Контактные данные в <address>

В тег address следует заключать контактные данные, причем разместить его можно в любой части страницы.

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

Медиа-объекты - <audio> и <video>

За воспроизведение и управление аудио и видеоконтентом отвечают элементы <audio> и <video>. Однако стоит учитывать несовместимость некоторых кодеков с разными браузерами.

Временная метка <time>

Время или дату публикации материала рекомендуется заключать в тег <time> - так поисковые роботы смогут распознать, насколько свежая статья и на основании этого проиндексировать ее.