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