Ключові аспекти метатегів
- Метатеги виконують важливу функцію, надаючи відомості про вебсторінку пошуковим системам, браузерам і різним вебсервісам.
- До основних типів належать метаопис, Open Graph, вікно перегляду та HTTP-еквівалентні теги.
- Персональні метатеги надають свободу дій, але вимагають ретельного оформлення та планування.
На додаток до заголовка сторінки, сценаріїв і таблиць стилів, головний розділ HTML може містити метатеги. Вони є надзвичайно важливими для SEO, доступності та загальної ефективності вебсайту.
Розглянемо, як використовувати метатеги та яку інформацію вони можуть передавати.
Метатеги – це елементи, що надають додаткові дані про вебсторінку. Браузери не відображають ці метадані напряму, але вони можуть бути використані різними інструментами. Це включає пошукові системи, браузери та інші вебсервіси.
Інформація, яку ви розміщуєте в метатегах, сприяє покращенню позицій у пошуковій видачі, забезпечує швидку реакцію сайту, його доступність і покращує відображення ваших сторінок у соціальних мережах.
Метатеги є самозакривними, тобто вони не мають кінцевого тегу </meta>, оскільки вони не містять внутрішнього контенту. Всі дані зберігаються в їх атрибутах. Метатеги розміщуються в головній частині вашого HTML-файлу:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Документ</title> </head> <body> </body> </html>
У цьому прикладі HTML-шаблону в розділі head є два метатеги. Вони містять відомості про кодування символів (UTF-8) та область перегляду.
Більшість метатегів використовують комбінацію наступних атрибутів для зберігання даних:
- name та content: атрибут name діє як ідентифікатор, тоді як content зберігає дані, що відносяться до цього ідентифікатора. Це забезпечує гнучку та розширювану систему для збереження будь-яких необхідних метаданих.
- property: іноді цей атрибут використовується як альтернатива name і виконує ту саму функцію.
- http-equiv: цей атрибут означає “HTTP-еквівалент” і визначає HTTP-заголовок для значення, зазначеного в атрибуті content.
- scheme: цей атрибут, що використовується з name, визначає тип даних в атрибуті content.
Нижче наведено перелік метатегів, які зазвичай підтримуються різними вебсервісами та браузерами.
Метатег опису
Цей опис довжиною до 155 символів стисло описує контент сторінки. Пошукові системи зазвичай відображають його під заголовком сторінки та URL-адресою. Важливо надати точний та лаконічний опис, щоб заохотити користувачів перейти за посиланням і відвідати вашу сторінку.
<meta name="description" content="Короткий опис вашої сторінки">
Метатеги Open Graph
Ці теги активно використовуються Facebook та іншими соціальними платформами. Вони використовують інформацію з цих тегів для покращення відображення посилань на вашу сторінку, коли користувачі ними діляться. Метатеги Open Graph містять такі атрибути, як og:title, og:description та og:image:
<meta property="og:title" content="Заголовок вашої сторінки">
<meta property="og:description" content="Короткий опис вашої сторінки">
<meta property="og:image" content="URL зображення">
SEO метатеги
Ці теги надають інформацію для пошукових систем і сприяють підвищенню рейтингу вашої сторінки. Вони входять до переліку найкращих практик SEO. Вони містять такі атрибути, як robots, author тощо. Хоча важливість цих тегів з часом зменшилась, їх включення до HTML-документа все ще є важливим.
<meta name="robots" content="index, follow">
<meta name="author" content="Ваше ім'я">
Метатег вікна перегляду
Метатег вікна перегляду є ключовим елементом адаптивного вебдизайну. Він вказує браузеру налаштувати вигляд вебсторінки відповідно до ширини пристрою, забезпечуючи правильне відображення контенту та його читабельність на мобільних пристроях.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
HTTP-еквівалентні метатеги
Ці метатеги необхідні для управління певними аспектами того, як браузери та сервери обробляють вебсторінки. Вони містять такі атрибути, як refresh і X-UA-Compatible. Хоча їх прямий вплив на 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="розробники">
У цьому прикладі користувацький тег визначає цільову аудиторію контенту, вказуючи, що він орієнтований на розробників.
Користувацькі метатеги пропонують спосіб розширити стандартний набір загальновизнаних тегів. Однак важливо ретельно документувати власні теги, які ви використовуєте, і розуміти, як ви будете їх застосовувати. Інші сервіси не будуть використовувати або розпізнавати їх за замовчуванням, тому, можливо, вам доведеться написати власний код для їхньої обробки.