Що таке семантична верстка й навіщо вона потрібна для SEO

Верстка сайту — це створення структури гіпертекстового документа з використанням HTML-розмітки.

І поки ви не встигли закрити цю сторінку через абсолютно незрозумілий термін, дозвольте пояснити! Отже, навіщо потрібна семантична верстка? 

Коли ви відкриваєте будь-який сайт, одразу бачите, де тут основний блок з інформацією, де контакти, де панель навігації тощо. Це і є заслуга верстки — усе структуровано, логічно поділено на блоки, зручно розміщено на сторінці та оформлено в CSS.

Однак завдання семантичної верстки — не просто зробити комфортно користувачеві. Вона має й іншу важливу мету — створити правильну структуру сторінок для пошукових ботів, для котрих будь-яка з них — це лише набір коду. І якщо його не оформити правильно, то роботи просто не зможуть коректно зрозуміти, де який елемент знаходиться, де найважливіший контент на сторінці, а де другорядний, яку частину виводити в результатах пошукової видачі, а яку можна приховати або взагалі не треба індексувати. Це ті завдання, котрі вирішуються за допомогою семантичної верстки.

Що таке семантична верстка?

Семантична верстка — це підхід до розмітки сторінки, при якому наголос зроблено не на зміст, а на смислове призначення кожного блоку, а також на логічну структуру всього документа.

Для кращого розуміння погляньте на два приклади нижче:

Річ у тому, що обидва ці варіанти можна в підсумку оформити абсолютно ідентично, і на сторінці вони відображатимуться так, що звичайний користувач не помітить жодної різниці. Ось тільки з погляду семантики перший варіант не годиться.

Чому? Про це розповімо далі!

Чому семантика сайту важлива

Продовжимо розглядати наш приклад!

Тег p означає «параграф/абзац». З його допомогою зручно робити розбивку тексту з перенесенням рядка. Ось тільки з точку зору пошукових алгоритмів він не несе особливої ​​інформації. Ви можете обернути заголовок тегом p і навіть яскраво його ВИДІЛИТИ (ніколи так не робіть). Користувач зрозуміє, що це заголовок, але для алгоритмів Google він усе ще залишається звичайним блоком тексту — не більш важливим, ніж наступні. Без семантичної верстки ваша сторінка для пошукача буде просто великим текстовим документом, де неможливо виділити основну інформацію та ефективно використати алгоритми пошуку.

Семантична структура сайту є важливою з двох ключових причин.

1. Поліпшення позицій вебресурсу в пошуковій видачі

Розмітка допомагає пошуковикам краще розуміти, що саме знаходиться на сторінці, де розташована ключова інформація, а де не така важлива, де блок із навігацією, де хедер, а де футер, де основна стаття, а де повторюється на різних сторінках блок (наприклад, та ж навігація або контакти).

Можемо навести непоганий приклад користі від семантичної верстки. Введіть у Google запит «розклад поїздів Київ», і одним із перших результатів буде наступний графік:

Використовуючи правила семантичної верстки, розробники «показали» пошуковику, що це за блок і що саме його варто виводити в результатах пошуку за релевантним запитом. Якби розклад був у звичайних тегах p, пошукові роботи просто не зрозуміли б, що саме вони відповідають на запитання користувача й що їх варто показати у видачі.

2. Підвищення доступності вебсайту

Люди, які погано бачать (або незрячі), теж користуються інтернетом, тільки не так, як ми з вами. Для них створені спеціальні програми — скрінрідери, які зачитують текст зі сторінки. Аби скрінрідер працював коректно, визначав та вказував заголовки, основний текст, навігаційні елементи та інше, їх обов’язково потрібно обрамляти відповідними тегами.

В іншому випадку програма просто монотонно зчитує загалом всю інформацію зі сторінки, починаючи з назви сайту, закінчуючи списком контактів. Повноцінно користуватися вебресурсом без семантичної верстки люди з обмеженими здібностями просто не зможуть.

Історія появи HTML5

HTML5 (HyperText Markup Language, version 5) — це остання версія мови розмітки гіпертексту, яка використовується для створення вебсторінок і застосунків. Розроблення почалося ще у 2004 році та було завершене у 2014-му. Однак історія появи HTML5 почалася набагато раніше.

Перші версії HTML були створені в 1990 році Тімом Бернерсом-Лі, який у той час працював у ЦЕРНі — Європейській організації з ядерних досліджень. Тім запропонував створити систему гіпертексту для своїх колег, щоб полегшити їм доступ до інформації. Отже, HTML став першою мовою розмітки гіпертексту у світі.

З плином часу він ставав все більш популярним. Його почали використовувати не тільки для створення вебсторінок, але і для розроблення застосунків. Однак перші версії HTML мали багато недоліків. Наприклад, вони були несумісні з новими технологіями, які з'являлися на ринку. Крім того, HTML не міг підтримувати мультимедійні файли, як-от відео й аудіо.

У 1997 році був випущений HTML 4.0, що стало значним покращенням у порівнянні з попередніми версіями. Однак навіть із його виходом було зрозуміло, що мова потребує подальшого доопрацювання. У 2004 році почалася робота над HTML5.

Основною метою було усунення недоліків попередніх версій мови. HTML5 містить у собі безліч нових функцій і можливостей, як-от:

• підтримку мультимедіафайлів без використання плагінів;
• покращену роботу з графікою;
• розширені можливості роботи з формами;
• покращену семантику та багато іншого.

Розроблення HTML5 зайняло понад десять років і пройшло багато випробувань. Однак завдяки роботі багатьох талановитих розробників він став однією з найпопулярніших мов розмітки гіпертексту у світі. HTML5 має багато переваг перед попередніми версіями. Він забезпечує більшу свободу для розробників у виборі різних елементів, за допомогою яких можна створювати більш складні й інтерактивні сторінки. А завдяки відкритому коду розробники можуть вільно використовувати HTML5 для створення своїх проєктів без потреби у придбанні додаткових ліцензій.

Семантичні теги в HTML

З теорією трохи розібралися, тепер перейдемо до більш практичних речей: розглянемо основні семантичні теги HTML, познайомимося зі способами їхнього використання в сучасній верстці.

header

Цим тегом зазвичай позначають вступну частину розділу/сторінки. Говорячи простою мовою, header — це «шапка» сайту, яка здебільшого однакова на всіх сторінках. Тут переважно розміщують посилання на основні розділи сайту, контакти, кнопки зворотного зв’язку, вибір мови тощо.

nav

Це тег для навігаційного блоку на сайті. Він може бути вкладеним у хедер або залишатися окремим блоком. Іноді на одній сторінці зустрічається кілька навігаційних блоків — це нормально.

main

У цей тег вкладається основний вміст сторінки, який НЕ повторюється на інших. Крім того, на ній даний тег дозволяється використовувати лише один раз. Розміщення двох блоків main не дозволяється. Усередині main можуть бути article, section, aside та інші.

article

Тег позначає велику самостійну й завершену за змістом одиницю на сторінці. Найпоширеніший приклад — стаття в блозі. Але в article може обертатися невеликий віджет або вбудований у сторінку твіт.

section

Тег, у якому знаходяться окремі смислові блоки, які входять в одну логічну область. Це можуть бути, наприклад, посилання на товари, перелік послуг або просто самостійні текстові модулі.

aside

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

footer

Завершальна частина сторінки або окремого смислового розділу. На одній сторінці може бути декілька футерів, але зазвичай він один. Тут часто розміщують різноманітну додаткову інформацію та посилання: контакти, лінки на інші сторінки, логотипи тощо. footer також прийнято називати «підвалом» сайту.

Як розмітити сторінки сайту з точки зору семантики

Семантична верстка сайту — це насправді не дуже складний процес. Головне — дотримуватися логіки та елементарних правил розмітки.

Гарний спосіб краще розібратися в структурі сайту — візуально розділити сторінку на блоки/прямокутники, тому що кожна сторінка — це саме набір блоків та блоків всередині блоків:

Відкрийте сайт, зробіть скриншот сторінки та спробуйте в будь-якому графічному редакторі обвести блоки, вказавши, де який тег використовується (або може використовуватися).

Насправді в нас на сайті застосовується трохи інша верстка, але такий варіант, як на скриншоті, теж можливий. Головне для вас зараз — зрозуміти принципи блокової структури сторінок.

Приклади семантичної верстки

Ми наведемо кілька простих прикладів HTML-коду з коректною версткою. Зверніть увагу на структуру та вкладеність різних елементів.

header

nav

main

Хороший спосіб краще розібратися в семантичній верстці — вивчати код різних сайтів. Для цього вам достатньо відкрити сторінку, яка цікавить, і натиснути F12 (для браузера Safari алгоритм інший) — з’явиться блок з HTML-кодом і стилями. Тут же можна вибрати інструмент Inspector, який при натисканні на той чи інший елемент відразу покаже його в HTML-коді.

Основні помилки

Хоча HTML-верстка вважається нескладним завданням, але правильна семантична розмітка навіть зараз є далеко не на всіх сайтах, у тому числі дуже відомих.

Головне, що вимагає семантика HTML, — це не вивчити всі теги назубок, а зрозуміти логіку їхнього використання, що набагато важливіше. Саме логічний підхід допоможе уникнути таких поширених помилок, як:

• застосування section як обгортки для оформлення;
• надлишок блоків header;
• обрамлення всіх посилань у тег nav;
• плутанина з тегами main, article та

Ще одна досить часта помилка серед верстальників-початківців — використання семантичних тегів HTML для різного роду «прикрас» (наприклад, кольоровий шрифт, його накреслення, розмір та інше). Так не треба робити. Застосовуйте HTML лише для створення структури документа. Весь візуал робіть у CSS — це правильно.

Спробуймо пояснити, чому потрібно робити саме так.

Уявіть, що ви, розміщуючи статтю в блозі, вирішили, наприклад, виділити перші слова в кожному абзаці червоним кольором. Навіщо? Захотілося, і все тут. Чи можна це зробити прямо в HTML? Так! Достатньо застосувати додатковий тег font для зміни характеристик шрифту та задати йому колір. Ось тільки доведеться витратити чимало часу, тому що для кожного абзацу ви прописуватимете теги та оформлення вручну.

Ось ви, нарешті, все зробили, а через тиждень зрозуміли, що вийшло якось не дуже. Отже, тепер вам доведеться кожен абзац «чистити» вручну.

CSS дозволяє зробити все набагато швидше. Привласнюємо потрібним тегам p певний клас (однаковий для обраних нами), а в CSS буквально одним рядком прописуємо оформлення. Набрид червоний колір — міняємо всього одне правило, і він змінюється на дефолтний чорний ДЛЯ ВСІХ p із тим же класом. Або можна стерти правило для класу, щоб видалити оформлення.

Варто зазначити, що будь-яке оформлення безпосередньо в HTML — це більшою мірою виняток із правил, ніж стандартна практика. Тому використовуйте HTML лише для верстки. Не ускладнюйте собі та іншим розробникам життя.

Висновок

Семантична верстка та вміння правильно використовувати семантичні теги — це критично важливо насамперед для SEO. Просувати коректно структурований та систематизований сайт набагато простіше та ефективніше. А вебресурс, у якому допущено багато помилок або не використовується семантика верстки в принципі, ніколи не буде в топі Google.

Ми ведемо до того, що при розробці та просуванні сайтів дуже важливо не намагатися бездумно економити, звертаючись до верстальників-початківців або намагаючись верстати сторінки самостійно, не маючи належного досвіду. Якщо хочете, щоб усе було зразу зроблено правильно, а вам не довелося платити двічі за одну роботу, звертайтеся в Elit-Web. Ми завжди до ваших послуг!