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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Висновок

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

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