Що таке мета-теги в HTML?
Мета-теги (<meta>), це елементи всередині блоку <head>, які містять метадані, службову інформацію про сторінку: кодування, опис, автора, ключові слова, налаштування адаптивності, інструкції для пошукових роботів тощо.
Вони не відображаються користувачу, але відіграють ключову роль у SEO, індексації, відображенні та технічній коректності сайту.
1. Де розміщуються мета-теги
Усі мета-теги завжди знаходяться всередині <head>, наприклад:
<head>
<meta charset="UTF-8">
<meta name="description" content="Купити кросівки Nike з доставкою по Україні">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>2. Основні типи мета-тегів
1. Кодування сторінки
<meta charset="UTF-8">Вказує браузеру, у якому кодуванні записаний документ. Без нього символи можуть відображатися спотвореними, нечитабельними знаками.
2. Опис сторінки (для SEO)
<meta name="description" content="Інтернет-магазин спортивного взуття. Доставка по всій Україні.">Це короткий опис сторінки, який пошуковики часто показують у сніпеті під заголовком. Має бути унікальним і довжиною 140-160 символів.
3. Ключові слова (застарілий тег)
<meta name="keywords" content="взуття, кросівки, Nike, Adidas">Раніше використовувався пошуковими системами для аналізу теми сторінки, але зараз не впливає на SEO. Можна використовувати для внутрішньої аналітики.
4. Налаштування адаптивності (viewport)
<meta name="viewport" content="width=device-width, initial-scale=1.0">Робить сайт адаптивним на мобільних пристроях:
width=device-width: ширина сторінки дорівнює ширині екрана,initial-scale=1.0: масштаб 100%.
Без цього сайт буде «стискатися» на телефонах.
5. Автор і права
<meta name="author" content="Jane Doe">
<meta name="copyright" content="© 2025 Oleh Design">Дозволяють вказати власника або розробника сайту.
6. Керування поведінкою пошукових роботів
<meta name="robots" content="index, follow">Інструктує пошукові системи:
index: індексувати сторінку,follow: переходити за посиланнями,noindex/nofollow: заборонити.
Приклад:
<meta name="robots" content="noindex, nofollow">Повністю виключає сторінку з індексації.
7. Мітки для соцмереж (Open Graph, Twitter Cards)
Дозволяють соцмережам (Facebook, Telegram, Twitter) коректно відображати прев'ю посилання.
<meta property="og:title" content="Мій блог про психологію">
<meta property="og:description" content="Чесні тексти про стосунки та самооцінку.">
<meta property="og:image" content="https://site.com/preview.jpg">
<meta property="og:url" content="https://site.com">3. Як браузери і пошукові системи використовують мета-теги
- Браузер: для коректного відображення тексту, масштабування, іконок, мови.
- Пошукові системи: для аналізу теми, опису та ранжування.
- Соцмережі: для створення прев'ю посилання (назва, зображення, опис).
Підсумок:
| Мета-тег | Призначення |
|---|---|
<meta charset> | Кодування тексту |
<meta name="description"> | Опис сторінки (для SEO) |
<meta name="viewport"> | Адаптивність під мобільні пристрої |
<meta name="robots"> | Керування індексуванням |
<meta name="author"> | Автор сторінки |
<meta property="og:*"> | Прев'ю для соцмереж |
Простими словами: Мета-теги, це «паспорт сторінки»: вони повідомляють браузеру та пошуковикам, що це за документ, як його показувати і кому він потрібен. Без них сторінка може бути незрозумілою для пошуковиків і незручною для користувачів.
Коротка відповідь
Для співбесідиКоротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.