HTML :: Тег <meta>

В HTML тег <meta> (от англ. metadata – метаданные) используется для хранения метаданных (служебных данных), предназначенных для браузеров и поисковых систем, и располагается внутри элемента <head>. Обычно на одной странице используется сразу несколько элеметов <meta> с различными значениями атрибута <name>.

Синтаксис

	<head>
		<meta>		             							(закрывающий тег не требуется)
	</head>

Атрибуты

charset – сообщает браузеру кодировку документа и должен задаваться только один раз в одном из элементов <meta>. Для веб-документов чаще всего используется кодировка UTF-8.
content – используется совместно с атрибутами name и http-equiv, устанавливая значения данных атрибутов. Разрешается указывать в одном атрибуте content сразу несколько значений, перечисленных через запятую или точку с запятой. При этом следует помнить, что одновременно использовать атрибуты name и http-equiv не разрешается.
http-equiv – используется для конвертирования метатега в http-заголовки. Может принимать значения:
- default-style – указывает предпочтительный для данной страницы стиль; при этом атрибут content должен содержать id элемента <link>, ссылающегося на требуемую внешнюю таблицу стилей, или элемента <style>, содержащего требуемую внутреннюю таблицу стилей;
- refresh – задает время в секундах до перезагрузки страницы (например, <meta http-equiv="refresh" content="15">) или перенаправления на другую страницу, если атрибут content содержит целочисленное положительное число (время в секундах), после которого идет строка с корректным url-адресом (например, <meta http-equiv="refresh" content="15; url=httрs://site.com">).
name – используется совместно с атрибутом content и определяет назначение текущего тега <meta>. Может принимать значения:
- author – в атрибуте content указывается имя автора;
- copyright – если страница разрабатывалась организацией, то авторство обычно не указывается, а используется название организации;
- description – когда атрибут name имеет такое значение, в атрибуте content приводится краткое описание страницы, которое используется поисковыми машинами для индексации, а также выводе ими аннотации при выдаче по запросу;
- document-state – для этого имени атрибут content может принимать два значения: static и dynamic; в первом случае поисковым машинам сообщается, что документ нужно индексировать только один раз и нет необходимости в индексации в дальнейшем; во втором случае от поисковых машин требуется постоянная индексация веб-страницы;
- robots – для этого имени используется ряд значений атрибута content:
  - index – роботам разрешается индексировать данную страницу;
  - noindex – роботам запрещается индексировать данную страницу; при этом она не попадает в базу поисковой машины и, соответственно, её невозможно будет найти через поисковую систему;
  - follow – роботам разрешается переходить по ссылкам на данной странице;
  - nofollow – роботам запрещается переходить по ссылкам на данной странице; кроме того, ссылкам не передаётся ТИЦ (тематический индекс цитирования) и PageRank (определяет «важность» страницы);
  - noarchive – роботам запрещается кешировать данную страницу;
- revisit – используется для управления частотой индексации веб-страницы в поисковой системе; например, для переиндексации страницы раз в три недели в качестве значения атрибута content следует указать "21";
- url – для этого имени атрибут content принимает в качестве значения адрес, по которому робот поисковой системы перенаправляется для индексации на другую страницу (текущая страница при этом не индексируется); это нужно для отмены индексации «зеркала» и генерируемых страниц.
viewport – указывает браузеру мобильного устройства, как обрабатывать размеры страницы и изменять ее масштаб. Cоответствующий ряд значений атрибута content имеет вид:
- "width" – значение задает ширину области просмотра и через знак равно в качестве значений принимает:
  - device-width - ширина области просмотра будет подстраиваться под ширину экрана (значение подходит для большинства случаев);
  - аппаратно-независимые пиксели - задается фиксированная ширина области просмотра в аппаратно-независимых пикселях, при этом доступен диапазон целых чисел от 200px - 10 000px (фиксированную ширину применять не рекомендуется!);
- "height" – значение задает высоту области просмотра (используется редко) и через знак равно в качестве значений принимает:
  - device-height - высота области просмотра будет подстраиваться под высоту экрана (значение подходит для большинства случаев);
  - аппаратно-независимые пиксели - задается фиксированная высота области просмотра в аппаратно-независимых пикселях, при этом доступен диапазон целых чисел от 223px - 10 000px (фиксированную высоту применять не рекомендуется!);
- "initial-scale" – устанавливает соответствие для пикселей CSS (это те пиксели, которые мы задаем в таблицах стилей) и аппаратно-независимых пикселей мобильного устройства (это виртуальные пиксели, которые являются результатом масштабирования аппаратных (физических) пикселей устройства, их величина примерно одинакова для всех устройств); проще говоря, свойство устанавливает стартовую величину масштабирования страницы; в качестве значения через знак равно принимаются числа от 0.1 до 10 (чем больше число, тем больше масштаб, т.е. увеличение страницы), например, "initial-scale=2" можно рассматривать, как увеличение масштаба страницы в два раза;
- "user-scalable" – разрешает либо запрещает пользователю изменять масштаб страницы; в качестве значения через знак равно принимает yes либо no (масштабирование в ряде случаев целесообразно запрещать, например, для мобильных приложений).
Также для элемента доступны универсальные атрибуты и соответствующие атрибуты-события.

Ссылки

Официальный сайт W3C: https://html.spec.whatwg.org/multipage/semantics.html#the-meta-element

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/HTML/Element/meta

Примеры

HTML

htmlCodes

<!DOCTYPE html>
<html>
<head>
		
	<!-- Сообщаем браузеру кодировку документа -->
	<meta charset="utf-8">  

	<!-- Указываем автора страницы -->
	<meta name="author" content="Romanovsky Peter">
	
	<!-- Описываем страницу -->
	<meta name="description" content="Атрибуты тега meta">
	
	<!-- Разрешаем индексировать страницу постоянно -->
	<meta name="document-state" content="dynamic">
	
	<!-- Разрешаем переиндексировать раз в 2 недели -->
	<meta name="revisit" content="14">
	
	<!-- Разрешаем роботам посещать и ходить по ссылкам страницы -->
	<meta name="robots" content="index, follow">
	
	<!-- Просим робота поисковой машины индексировать другую страницу. -->
	<meta name="url" content="https://site.name/html/teg_meta.html">
  
	<title>Пример №1</title>
	
</head>
<body>
	...
	Тут расположена выводимая информация.	
	...
</body>
</html>

Пример №1

HTML

htmlCodes

<!DOCTYPE html>
<html>
<head>
		
	<!-- Сообщаем браузеру кодировку документа -->
	<meta charset="utf-8">

	<!-- Перенаправление на другую страницу через 3 секунды -->
	<meta http-equiv="refresh" content="3; url=https://site.name/html/teg_meta.html">
	 
	<!-- 1. Ширина области просмотра подстраивается -->
	<!-- под ширину экрана мобильного устройства автоматически  -->
	<!-- 2. Пользователю разрешается масштабировать страницу (user-scalable=yes) -->
	<!-- Данный вариант в большинстве случаев наиболее оптимальный -->
	<meta name="viewport" content="width=device-width, user-scalable=yes">
  
	<title>Пример №2</title>
	
</head>
<body>
	...
	Тут расположена выводимая информация.	
	...
</body>
</html>

Пример №2