Мета тег <meta> HTML определяет информацию о веб странице. Теги группы meta называют мета тегами, а содержимое мета тега - метаданными. Метаданные указывают различную техническую информацию о документе, в основном для браузеров и поисковых систем и не видны пользователю на сайте.
Часто используются meta-теги: author, description, keywords, viewport, charset.
Мета теги находятся в области <head> HTML документа (подробнее про <head>). Вставить или, как говорят, прописать мета теги можно в любом порядке и количестве.
Использовать meta теги не обязательно, но мы рекомендуем заполнять хотя бы мета теги description, viewport, charset. Это будет плюсом для внутренней оптимизации сайта.
Синтаксис
<meta атрибут="значение" атрибут="значение">
Примеры использования <meta> в HTML коде
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Мета теги в HTML документе. Описание популярных мета тегов, примеры использования на веб странице">
<meta name="author" content="Ivan Ivanov">
</head>
</html>
Основные мета теги
Ниже приведены несколько основных тегов <meta> с комментариями по применению и примерами использования.
Meta-тег description
Краткое описание документа (страницы сайта). Поисковые системы могут использовать содержимое мета тега description для вывода в сниппете поисковой выдачи.
Пример использования мета тега description
<meta name="description" content="Краткое описание страницы">
Meta-тег keywords
Ключевые слова страницы. Ранее использовался для указания поисковым системам основные смысловые фразы веб-страницы. На данный момент существуют разные мнения как правильно и стоит ли заполнять мета тег keywords.
Пример заполнения мета тега keywords
<meta name="keywords" content="ключевое слово 1, ключевое слово 2, ключевое слово 3">
Meta-тег viewport
Задает некоторые параметры окна просмотра в браузере. Атрибут width указывает ширину окна просмотра (вьюпорта), initial-scale - коэффициент масштабирования при первом открытии страницы.
Пример использования мета тега viewport
Мета тег для адаптивного сайта: указывает, что ширина вьюпорта подгоняется под размеры устройства:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Meta-тег charset
Кодировка веб страницы. Наиболее частое значение: "UTF-8".
Пример использования мета тега кодировки charset
<meta charset="UTF-8">
Meta тег refresh
Мета тег с атрибутом http-equiv="refresh" указывает время автоматического обновления страницы. Страница будет автоматически перезагружаться с интервалом указанным в content атрибуте. Значение указывается в секундах.
Пример использования meta http refresh
<meta http-equiv="refresh" content="45"> <!-- Обновление страницы каждые 45 секунд -->
Поддержка браузерами
Тег | ![]() |
![]() |
![]() |
![]() |
![]() |
<meta> | Да | Да | Да | Да | Да |
Атрибуты
Атрибут | Значения | Описание |
---|---|---|
charset |
character_set |
Указывает кодировку HTML документа. |
content |
тестовое значение |
Основное содержимое мета тега. Зависит от других атрибутов. Используется вместе с http-equiv или name. |
http-equiv |
content-type |
Устанавливает HTTP заголовок для атрибута content. Сontent-type - Кодировка. Устаревшее значение, в HTML5 используйте charset (см. пример выше). |
name |
application-name |
Имя мета тега. Как и http-equiv определяет суть мета тега. Application-name - имя веб приложения, которое представляет страница. |