0-800-759-750
Ми на зв'язку с 7:00 до 24:00
office@elit-web.ua

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

Поділіться
Зміст

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

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

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

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

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

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

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

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

    <p>Ваш креативний заголовок</p>

    <p>Відмінний текст</p>

    <p>І ще трохи відмінного тексту</p>

    <article>

    <h1>Ваш креативний заголовок< /h1>

    <p>Відмінний текст</p>

    <p>І ще трохи відмінного тексту</p>

    </article>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    <header>

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

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

    <nav>

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

    <nav>

    <main>

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

    <main>

    <article>

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

    <article>

    <section>

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

    <section>

    <aside>

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

    <aside>

    <footer>

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

    <footer>

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

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

    Тег

    Застосування

    <header>, <main>, <footer>

    Великі смислові блоки на сторінці

    <nav>, <section>, <article>, <aside>

    Окремі розділи всередині блоків

    <h1> — <h6>

    Заголовки з першого до шостого рівня

    <p>, <ul>, <div>, <span> та інші

    Дрібні блоки та елементи всередині смислових розділів

    <img>, <a>, <button> та інші

    Картинки, кнопки, посилання, невеликі текстові блоки та інше

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

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

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

    в будь-якому графічному редакторі обвести блоки

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

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

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

    <header>

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

    <nav>

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

    <main>

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

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

    HTML-код

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

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

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

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

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

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

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

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

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

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

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

    Висновок

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

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

    У Вас залишились запитання?
    Наші експерти готові відповісти на них.
    Залишіть ваші контактні дані.
    Будемо раді обговорити ваш проект!
    Отримати консультацію
    Наш менеджер зв'яжеться з Вами найближчим часом