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