Семантична верстка: як оптимізувати HTML-код для SEO
➡️ Підписуйся на наш канал: https://t.me/seopub
Що таке семантична верстка?
Семантична верстка — це підхід до створення вебсторінок мовою HTML, заснований на використанні HTML-тегів відповідно до їхньої семантики (призначенням), а також котрий припускає логічну та послідовну ієрархію сторінки.
Стандарт HTML із самого початку містив ряд семантичних тегів, але велику популярність семантична верстка отримала після початку робіт над HTML5.
Чому важливо оптимізувати HTML-код?
- Покращена доступність — семантичні елементи допомагають краулерам правильно інтерпретувати структуру сторінки.
- SEO-оптимізація - пошукові системи краще розуміють вміст сторінки, що покращує індексацію та ранжування.
- Покращення First Input Delay (FID) – браузер швидше визначає важливі частини сторінки та раніше робить її інтерактивною.
- Менше навантаження на сервер та швидший рендеринг — менше DOM-вузлів → менше переданих байтів HTML-коду → швидший TTFB (Time to First Byte).
- Оптимізація рендерингу сторінки — браузер швидше аналізує структуру сторінки, що зменшує час рендерингу (First Paint, First Contentful Paint).
- Покращення показників Core Web Vitals.
Процес розмітки сторінки з застосуванням HTML5:
1. Розмітка великих смислових елементів: header, nav, main, section, article, aside, footer.
- Header – це елемент вебсторінки, що знаходиться вище області контенту.
- Nav – це група посилань, що є навігацією по сайту.
- Main – це контейнер, який використовується для визначення основного контенту або головної частини вмісту вебсторінки.
- Section – являє собою універсальний розділ документа. Групує тематичний зміст і зазвичай містить заголовок.
- Article – визначає незалежний, самодостатній зміст від іншої частини сайту.
- Aside – це блок збоку від контенту для розміщення рубрик, посилань на архів, міток та іншої інформації. Він може бути частиною контенту або наскрізним блоком, який не належить до головного контенту на сторінці.
- Footer – це нижня частина сайту, в якій може знаходитися яка-небудь контактна інформація, нижнє меню, посилання.
Всі ці семантичні теги використовуються для великих смислових елементів.
Якщо у випадку з header, nav, main та foote – все зрозуміло, то як правильно використовувати section, article та aside?
Article – застосовується для виділення самостійної частини контенту.
Якщо у вас в контенті є абзац, який ви можете видалити та при цьому контент не втратить свого смислу – то цей абзац і є ваш блок <article>. Ось приклади, як в ніші iGambling використовують такий підхід:
Приклад взятий із сайту: https://www.spicycasinos.com/
Даний конкурент – розмістив опис кожного бонусу в окремий (самостійний) article.
Як ще можна використати блок article?
Блок article – стане нам в пригоді, якщо у нас є блок з відгуками. Для того, щоб текст відгуку не псував нам семантичне ядро статті – ми додаємо відгуки у вигляді окремих блоків (article), які не будуть належати до нашої статті.
Тут трохи простіше, бо цей тег відповідає за виділення блоків контенту, які належать до основного контенту на нашій сторінці.
Приклад взятий із сайту: https://www.casino.org/reviews/ruby-fortune-casino/
Тут тег Section слугує для виділення всіх блоків, які доповнюють нашу статтю.
! Важливо <h2> та <h3> - завжди знаходяться в одному Section, так як <h3> - це завжди доповнення до <h2>
Його ми використовуємо для додаткової перелінковки. Він може бути як всередині основного тексту, так і за межами основного тексту (сквозна перелінковка, яка повторюється на багатьох сторінках).
Все що для цього потрібно – це розмістити aside в середині Main або за його межами.
2. Розмітка текстових елементів:
Зображення — для оптимізації картинки використовується спеціальний тег <figure> - він скаже пошуковому боту, що зараз буде картинка та тег <figcaption> - в якому ми описуємо картинку.
Приклад:
<figure>
<img src="/wp-content/uploads/ruby-fortune-casino.webp" alt="Ruby Fortune Casino">
<figcaption>Ruby Fortune Casino</figcaption> - використовується для опису картинки
</figure>
Read more: https://html.com/tags/figure/#ixzz7mp32UWWO
Google рекомендує використовувати сучасний формат картинок WebP
Формат WebP був розроблений компанією Google для створення маленьких та якісних зображень, які можуть прискорити завантаження сторінок. Це новий формат файлів, який використовує стиснення без втрат якості фотографій.
Посилання на безплатний конвертер:
https://image.online-convert.com/ru/convert-to-webp
- Емодзі — були створені Google в комерційних цілях, але з часом їхні пошукові алгоритми перестав розуміти семантичне значення емодзі в тексті.
Пошукова машина зчитує кожен символ і навіть пробіли. Для нас пробіл нічого не значить, а для машини – кожен пробіл – це спец символ, який кодується в зрозумілу для машини мову.
Online Casino Reviews🏅 Best Casino Reviews
959132#959132#959132#959132#???#959132#959132#959132
Таким чином – використання емодзі може негативно впливати на оптимізацію сайту.
Конкурент інколи використовує емодзі, але він робить так, щоб емоджі не розбивало КС, наприклад в кінці речення.
Щоб уникнути таких проблем – Google створив семантично оптимізовані емодзі - https://www.w3schools.com/charsets/ref_emoji_smileys.asp
Де замість несемантичної картинки – використовуються спеціальний код, який робить картинку зрозумілою для бота.
- Тег <strong> - На заміну <meta name="keywords" content="best online casinos"> - прийшов семантичний тег <strong>. За його допомогою можна вказати Google – по яким ключам ми хочемо, щоб наша сторінка, краще ранжувалася в ТОП.
<strong>best online casinos</strong>
Тепер, коли ми розуміємо, як працюють всі семантичні блоки – ми можемо створювати відповідну структуру для своєї сторінки.
Один із наших успішних кейсів
Якщо в когось є якісь запитання або ви хочете поділитися своїми кейсами та спостереженнями – залишайте свої коментарі у телеграмі.