<meta> - HTML-елемент метаданих
HTML-елемент <meta> представляє метадані, які не можуть бути представлені іншими мета-елементами HTML, такими як <base>, <link>, <script>, <style> або <title>.
Елемент <meta> надає інформацію про HTML-документ для браузерів, пошукових систем та інших веб-сервісів. Ця інформація не відображається на сторінці, але є важливою для її правильної обробки та індексації.
Синтаксис
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">Атрибути
Цей тег може мати глобальні атрибути.
charsetВизначає кодування символів документа.
UTF-8є рекомендованим значенням. Він повинен бути одним із перших тегів в<head>.nameВизначає ім’я метаданих. Використовується разом з атрибутом
content. Поширені значення:viewport: Налаштовує область перегляду для адаптивного дизайну.description: Короткий опис сторінки для SEO.keywords: Ключові слова, що описують вміст сторінки (менш важливий для сучасних пошукових систем).author: Автор документа.robots: Інструкції для пошукових роботів (наприклад,noindex,nofollow).
contentВказує значення для метаданих, визначених атрибутом
nameабоhttp-equiv.http-equivВикористовується для імітації HTTP-заголовків. Може використовуватися для налаштування кешування, автоматичного оновлення сторінки тощо. Поширені значення:
content-security-policy: Визначає політику безпеки контенту.content-type: Визначає MIME-тип документа (застаріло, використовуйтеcharset).default-style: Визначає бажаний стиль за замовчуванням.refresh: Автоматично оновлює сторінку через вказаний час.
propertyВикористовується для визначення метаданих за протоколом Open Graph (використовується соціальними мережами для створення розширених прев’ю посилань). Наприклад:
og:title,og:description,og:image.
Технічне резюме
| Категорія контенту | |
|---|---|
| Дозволений вміст | Немає, це пустий елемент. |
| Пропуск тегів | Повинен мати початковий тег і не повинен мати кінцевого тегу. |
| Дозволені батьківські елементи | Елемент |
| Роль ARIA | Немає відповідної ролі. |
| DOM інтерфейс |
|
Приклади використання
<!-- Основні метатеги -->
<head>
<meta charset="UTF-8">
<meta name="description" content="Це приклад сторінки з описом.">
<meta name="author" content="Іван Піпка">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head><!-- Автоматичне оновлення сторінки кожні 5 секунд -->
<head>
<meta http-equiv="refresh" content="5">
</head><!-- Метатеги Open Graph для соціальних мереж -->
<head>
<meta property="og:title" content="Заголовок">
<meta property="og:description" content="Опис, який буде відображатися в прев’ю.">
<meta property="og:image" content="https://html.ua/image.jpg">
<meta property="og:url" content="https://html.ua/page.html">
</head>Підтримка браузерів
<meta> | |||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
charset | |||||||||||||
content | |||||||||||||
http-equiv | |||||||||||||
name | |||||||||||||
scheme |