Тег <meta> HTML - мета теги, информация о странице

Рейтинг: 5 из 5, голосов 18

08 декабря 2017 г.

Мета тег <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 default-style refresh	Устанавливает HTTP заголовок для атрибута content. Сontent-type - Кодировка. Устаревшее значение, в HTML5 используйте charset (см. пример выше). Default-style - Предпочтительная таблица стилей. Refresh - Интервал автообновления страницы.
name	application-name author description generator keywords viewport	Имя мета тега. Как и http-equiv определяет суть мета тега. Application-name - имя веб приложения, которое представляет страница. Author - имя автора веб страницы. Description - краткое описание страницы. Generator - Указывает на программное обеспечение, использованное для создания страницы (для не рукописных страниц). Keywords - ключевые слова страницы. Viewport - некоторые параметры области просмотра страницы.

by Lebedev