Тег <meta>
Тег <meta> в HTML використовується для надання метаінформації про веб-сторінку. Він допомагає браузерам, пошуковим системам і соціальним платформам правильно інтерпретувати та відображати сторінку. Мета-теги не мають видимого вмісту, але відіграють ключову роль у SEO-оптимізації, адаптації сторінки до різних пристроїв та управлінні її поведінкою.
Цей тег завжди розміщується в секції <head> HTML-документу. Інформація вказується через атрибути, такі як name, content, charset, і використовується для завдання параметрів, наприклад, кодування символів, опису сторінки або інструкцій для пошукових роботів.
Атрибути
Специфічні атрибути
- charset — використовується для визначення кодування символів веб-сторінки. Наприклад:
<meta charset="UTF-8">- name — вказує тип метаінформації (“description”, “keywords” тощо). Наприклад:
<meta name="description" content="Опис сторінки для пошукових систем.">- http-equiv — задає директиви для браузера, наприклад, автоматичне оновлення сторінки або її тип вмісту. Наприклад:
<meta http-equiv="refresh" content="5">- content — містить значення, пов’язане з атрибутами name або http-equiv.
Глобальні атрибути
Тег <meta> підтримує всі глобальні атрибути HTML, але на практиці використовуються лише:
- id — унікальний ідентифікатор елемента. Застосовується рідко для ідентифікації мета-тегу в специфічних сценаріях JavaScript.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Детальний опис тегу <meta> у HTML.">
<meta name="robots" content="index, follow">
<meta http-equiv="refresh" content="30">
<title>Приклад використання мета-тегу</title>
</head>
<body>
<h1>Приклад сторінки</h1>
<p>Це демонстрація використання мета-тегів.</p>
</body>
</html>
Додаткові моменти
- Тег <meta> є самозакритим, тому його не потрібно завершувати іншим тегом.
- Використання <meta charset=”UTF-8″> забезпечує коректне відображення тексту з різними мовами.
- Мета-тег <meta name=”viewport”> необхідний для адаптації сторінки до мобільних пристроїв.
- Для кожної сторінки сайту важливо забезпечити унікальні значення атрибутів name і content, особливо для description.
- Пошукові системи та соціальні мережі використовують метаінформацію для формування результатів видачі та попереднього перегляду (наприклад, у Facebook чи Twitter).
