Ключові висновки
- Мета-теги надають важливу інформацію про веб-сторінку для пошукових систем, браузерів і веб-служб.
- Основні типи включають метаопис, відкритий графік, вікно перегляду та теги HTTP-equiv.
- Користувацькі метатеги пропонують гнучкість, але вимагають ретельної документації та планування.
Поряд із заголовком вашої сторінки, сценаріями та таблицями стилів, які вона використовує, головний розділ HTML може містити мета-теги. Це життєво важливо для SEO, доступності та загальної продуктивності веб-сайту.
Дізнайтеся, як використовувати мета-теги, і дізнайтеся про інформацію, яку вони можуть надати.
Мета-теги — це елементи, які надають додаткову інформацію про веб-сторінку. Браузери не відображають ці метадані безпосередньо, але будь-який інструмент може використовувати їх для різних цілей. Це стосується пошукових систем, браузерів та інших веб-служб.
Дані, які ви надаєте в мета-тегах, допомагають покращити позиції в пошуковій системі, сприяють швидкому відгуку та доступності веб-сайту, а також покращують відображення ваших сторінок у соціальних мережах.
Мета-теги є тегами, що самозакриваються; немає , оскільки вони не містять жодного вмісту. Вони містять усі свої дані в атрибутах. Ви можете додати мета-теги до головного розділу вашого HTML-файлу:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width-device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
</html>
Цей приклад шаблону HTML містить два метатеги в розділі head. Вони надають інформацію про набір символів (UTF-8) і область перегляду відповідно.
Більшість метатегів використовують комбінацію наведених нижче атрибутів для розміщення своїх даних.
- ім’я та вміст: атрибут name схожий на мітку, тоді як атрибут content зберігає дані, пов’язані з цією міткою. Це забезпечує гнучку, розширювану систему для зберігання будь-яких метаданих, які вам потрібні.
- властивість: цей атрибут іноді використовується як альтернатива назві та служить майже тій самій меті.
- http-equiv: цей атрибут означає «HTTP-еквівалент» і визначає HTTP-заголовок для значення, указаного в атрибуті content.
- схема: цей атрибут, який використовується з назвою, визначає тип даних в атрибуті вмісту.
Ви побачите, що наведені нижче мета-теги зазвичай підтримуються різними веб-службами та браузерами.
Тег метаопису
Цей фрагмент довжиною до 155 символів підсумовує вміст сторінки. Пошукові системи часто відображають його під заголовком сторінки та URL-адресою. Важливо надати стислий і точний опис, щоб заохотити користувачів натиснути посилання та відвідати вашу сторінку.
<meta name="description" content="A brief description of your page">
Відкрийте мета-теги Graph
Facebook та інші соціальні медіа-платформи значною мірою використовують ці теги. Вони використовують інформацію в цих тегах, щоб покращити представлення посилань на вашу сторінку, коли користувачі діляться нею. Мета-теги Open Graph містять такі атрибути, як og:title, og:description і og:image:
<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="A brief description of your page">
<meta property="og:image" content="URL of a related image">
Мета-теги SEO
Ці теги надають інформацію для пошукових систем і можуть допомогти підвищити рейтинг вашої сторінки. Вони також включені до списку найкращих практик SEO. Вони включають такі атрибути, як роботи, автор тощо. Незважаючи на те, що важливість цих тегів з часом зменшилася, все ще важливо включати їх у ваш документ HTML.
<meta name="robots" content="index, follow">
<meta name="author" content="Your Name">
Мета-тег Viewport
Метатег вікна перегляду є важливим елементом адаптивного веб-дизайну. Він повідомляє браузеру налаштувати макет веб-сторінки відповідно до ширини пристрою, забезпечуючи правильне відображення вмісту та його читабельність на мобільних пристроях.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Мета-теги еквівалент HTTP
Ці метатеги необхідні для керування певними аспектами того, як браузери та сервери обробляють веб-сторінки. Вони включають такі атрибути, як оновлення та X-UA-сумісність. Хоча їхній прямий вплив на SEO може бути різним, вони відіграють вирішальну роль у впливі на поведінку та сумісність сторінок.
<meta http-equiv="refresh" content="5;url=https://example.com">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Ви не будете використовувати їх усі одразу у своїх проектах, але все одно важливо добре розуміти різні доступні мета-теги. Крім того, використання мета-тегів дає переваги в покращенні організації документів HTML.
Мета-теги гнучкі, оскільки:
- Ви можете використовувати ім’я на свій вибір для зберігання будь-яких даних.
- Браузери не відображатимуть свій вміст, хоча він завжди буде доступний для перегляду в джерелі сторінки.
Ось приклад спеціального метатегу:
<meta name="target-audience" content="developers">
У цьому прикладі спеціальний тег визначає цільову аудиторію вмісту, вказуючи, що він націлений на розробників.
Спеціальні метатеги пропонують спосіб розширити стандартний набір тегів, які широко визнані. Однак важливо ретельно документувати власні теги, які ви використовуєте, і добре розуміти, як ви їх використовуватимете. Інші служби не використовуватимуть і не розпізнаватимуть їх за замовчуванням, тому ви, ймовірно, колись напишете власний код для їх обробки.