10.1 Семантична розмітка
SEO (пошукова оптимізація) відіграє важливу роль у веб-розробці, оскільки допомагає покращити видимість веб-сторінок у результатах пошукових систем. Сучасна HTML-розмітка значною мірою впливає на SEO, допомагаючи пошуковим системам краще розуміти і індексувати контент. Розглянемо основні аспекти впливу SEO на сучасну HTML-розмітку.
Семантичні теги HTML5 допомагають пошуковим системам зрозуміти структуру і зміст веб-сторінки. Використання правильних тегів покращує доступність і робить контент більш зрозумілим для пошукових систем.
Приклади семантичних тегів:
<header>: заголовок сторінки або розділу<nav>: навігаційні посилання<main>: основний вміст сторінки<section>: тематично пов'язаний розділ<article>: незалежний блок контенту<aside>: додаткова інформація або бокова панель<footer>: підвал сторінки або розділу
Приклад використання:
<body>
<header>
<h1>Заголовок сайту</h1>
<nav>
<ul>
<li><a href="#home">Головна</a></li>
<li><a href="#about">Про нас</a></li>
<li><a href="#contact">Контакти</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Стаття 1</h2>
<p>Текст статті...</p>
</article>
<section>
<h2>Розділ</h2>
<p>Текст розділу...</p>
</section>
</main>
<aside>
<h2>Бокова панель</h2>
<p>Додаткова інформація...</p>
</aside>
<footer>
<p>© 2024 Мій сайт. Всі права захищені.</p>
</footer>
</body>
10.2 Мікророзмітка
Мікророзмітка (structured data) використовується для надання пошуковим системам додаткової інформації про вміст сторінки. Це допомагає пошуковим системам краще розуміти контент і покращує видимість сторінки в результатах пошуку.
Приклади схем (Schema.org):
- Article: для статей і новин
- BreadcrumbList: для хлібних крихт
- Product: для опису товарів
- Event: для опису подій
Приклад використання мікророзмітки:
<body>
<article>
<h1>Заголовок статті</h1>
<p>Автор: Ім'я автора</p>
<p>Дата публікації: 1 січня 2024 р.</p>
<img src="https://example.com/image.jpg" alt="Приклад зображення">
<p>Текст статті...</p>
</article>
</body>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Заголовок статті",
"author": "Ім'я автора",
"datePublished": "2024-01-01",
"image": "https://example.com/image.jpg"
}
</script>
10.3 Оптимізація заголовків і мета-тегів
Заголовки та мета-теги відіграють ключову роль в SEO, оскільки вони надають пошуковим системам і користувачам інформацію про вміст сторінки.
Мета-теги:
<title>: заголовок сторінки, відображуваний у результатах пошуку<meta name="description">: опис сторінки, використовуваний у сніпетах результатів пошуку<meta name="keywords">: ключові слова (не мають великого значення для сучасних пошукових систем)
Приклад використання мета-тегів:
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Приклад заголовка сторінки</title>
<meta name="description" content="Це приклад опису сторінки для SEO.">
<meta name="keywords" content="приклад, SEO, HTML">
</head>
<body>
<h1>Заголовок сторінки</h1>
<p>Контент сторінки...</p>
</body>
</html>
10.4 Оптимізація зображень
Оптимізація зображень включає в себе використання атрибутів alt та title, а також забезпечення швидкого часу завантаження завдяки використанню стиснення та сучасних форматів зображень (наприклад, WebP).
Приклад використання:
<body>
<h1>Приклад оптимізації зображень</h1>
<img src="example.jpg" alt="Опис зображення" title="Заголовок зображення" loading="lazy">
</body>
10.5 Хлібні крихти
Хлібні крихти (breadcrumbs) — це навігаційні елементи, які показують шлях користувача від головної сторінки до поточної сторінки. Вони допомагають користувачам легко орієнтуватися на сайті, надаючи посилання на попередні рівні навігації. Цей елемент є важливою частиною користувацького інтерфейсу, особливо для великих сайтів з глибокою ієрархією сторінок.
Основні аспекти хлібних крихт
Хлібні крихти представляють собою рядок посилань, який зазвичай відображається у верхній частині сторінки під заголовком або меню. Кожне посилання в ланцюжку веде до однієї з сторінок, через які користувач пройшов, щоб потрапити на поточну сторінку.
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/home">Головна</a></li>
<li class="breadcrumb-item"><a href="/category">Категорія</a></li>
<li class="breadcrumb-item active" aria-current="page">Поточна сторінка</li>
</ol>
</nav>
Типи хлібних крихт:
- Ієрархічні: показують ієрархію сайту, починаючи з головної сторінки.
- Приклад: Головна > Категорія > Підкатегорія > Поточна сторінка
- Хронологічні: показують послідовність дій користувача, що особливо корисно в процесі багатокрокової навігації або покупок.
- Приклад: Головна > Категорія > Продукт > Кошик > Оформлення замовлення
- Атрибутивні: використовуються для відображення атрибутів або тегів поточної сторінки, особливо корисні для сайтів з великою кількістю категорій і фільтрів.
- Приклад: Головна > Електроніка > Мобільні телефони > Смартфони > Apple
Переваги хлібних крихт:
- Покращення навігації: дозволяють користувачам швидко повернутися на попередні сторінки.
- SEO-переваги: допомагають пошуковим системам зрозуміти структуру сайту і покращити його індексацію.
- Зручність використання: роблять сайт більш інтуїтивно зрозумілим і зручним для користування.
- Зменшення показника відмов: спрощують навігацію, що може зменшити показник відмов, оскільки користувачі можуть легко повернутися на попередні сторінки, а не залишати сайт.
Переваги для SEO
Хлібні крихти відіграють важливу роль у SEO, оскільки вони допомагають пошуковим системам краще розуміти структуру сайту і покращують навігацію для користувачів. Правильне використання хлібних крихт може позитивно вплинути на ранжування сайту в результатах пошуку.
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ