HTML :: Тег <meta>

Атрибут charset тега <meta>

Со служебным тегом <meta> (от англ. metadata – метаданные) мы уже кратко знакомились. Он формирует пустой элемент разметки «meta», который используется для хранения метаданных.

Для сообщения браузеру кодировки документа применяется атрибут charset. О кодировках мы будем говорить отдельно, пока следует запомнить, что если кодировку не задать, то документ может быть не правильно отображен. Поэтому в процессе верстки нужно всегда использовать элемент «meta» и указывать в нем атрибут charset="utf-8". В случае необходимости, разрешается использовать более одного элемента «meta», но атрибут charset должен задаваться только один раз в одном из элементов «meta».

Атрибуты name и content тега <meta>

Имеются у элемента «meta» и другие атрибуты. Так атрибут name задает имя (регистронезависимое) для пары «имя=значение». Используется совместно с атрибутом content, который, соответственно, устанавливает значение для данной пары. Разрешается указывать в одном атрибуте content сразу несколько значений, перечисленных через запятую или точку с запятой. Короче, при помощи этих двух атрибутов задается пара «имя=значение», которая определяется в следующем формате: <meta name="имя" content="значение">.

Перечислим некоторые из имен, задаваемых атрибутом name, и соответствующих им значений, указываемых в атрибуте content:

"author" – в атрибуте content указывается имя автора;
"copyright" – если страница разрабатывалась организацией, то авторство обычно не указывается, а используется название организации;
"description" – когда атрибут name имеет такое значение, в атрибуте content приводится краткое описание страницы, которое используется поисковыми машинами для индексации, а также выводе ими аннотации при выдаче по запросу;
"document-state" – для этого имени атрибут content может принимать два значения: "static" и "dynamic"; в первом случае поисковым машинам сообщается, что документ нужно индексировать только один раз и нет необходимости в индексации в дальнейшем; во втором случае от поисковых машин требуется постоянная индексация веб-страницы;
"robots" – для этого имени используется ряд значений атрибута content:
- "index" – роботам разрешается индексировать данную страницу;
- "noindex" – роботам запрещается индексировать данную страницу; при этом она не попадает в базу поисковой машины и, соответственно, её невозможно будет найти через поисковую систему;
- "follow" – роботам разрешается переходить по ссылкам на данной странице;
- "nofollow" – роботам запрещается переходить по ссылкам на данной странице; кроме того, ссылкам не передаётся ТИЦ (тематический индекс цитирования) и PageRank (определяет «важность» страницы);
- "noarchive" – роботам запрещается кешировать данную страницу;
"revisit" – используется для управления частотой индексации веб-страницы в поисковой системе; например, для переиндексации страницы раз в три недели в качестве значения атрибута content следует указать "21";
url – для этого имени атрибут content принимает в качестве значения адрес, по которому робот поисковой системы перенаправляется для индексации на другую страницу (текущая страница при этом не индексируется); это нужно для отмены индексации «зеркала» и генерируемых страниц.

Код с использованием элементов «meta» и его атрибутов показан в примере №1.

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. Использование элемента «meta» и его атрибутов

Значение viewport атрибута name

Отдельно хотелось бы обратить внимание на значение "viewport" атрибута name, которое указывает браузеру мобильного устройства, как обрабатывать размеры страницы и изменять ее масштаб, а также соответствующий ряд значений атрибута content (см. пример №2):

"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 (масштабирование в ряде случаев целесообразно запрещать, например, для мобильных приложений).

Отметим, что нами не были перечислены значения minimum-scale и maximum-scale атрибута content, т.к. их использование нежелательно.

HTML

htmlCodes

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

<!-- 1. Ширина области просмотра подстраивается -->
<!-- под ширину экрана мобильного устройства автоматически  -->
<!-- 2. Пользователю разрешается масштабировать страницу (user-scalable=yes) -->
<!-- Данный вариант в большинстве случаев наиболее оптимальный -->
<meta name="viewport" content="width=device-width, user-scalable=yes">

<title>Элемент «meta» и его атрибуты</title>
</head>
<body>
  Тут расположена выводимая информация.
</body>
</html>

Пример №2 Использование name="viewport" тега <meta>

Как видно из примера, значения атрибута content обычно перечисляются через запятую, а не записываются в отдельных элементах «meta».

В большинстве случаев для сайтов, которые специально не делались для мобильных устройств, следует применять конструкцию <meta name="viewport" content="width=device-width, user-scalable=yes">. В результате браузеры мобильных устройств самостоятельно выберут нужный масштаб и постараются вместить страницу в размеры окна браузера.

Атрибуты http-equiv и content тега <meta>

Атрибут content используется в паре не только с атрибутом name, но и с атрибутом http-equiv, который применяется для конвертирования метатега в заголовок HTTP. Заголовки представляют собой текстовые строки, которые используются при обмене сообщениями браузера с сервером и состоят из пар имя: значение (разделяются двоеточием). Сам атрибут http-equiv задает имя пары, аналогично атрибуту name, а атрибут content, соответственно, значение пары: <meta http-equiv="имя http-заголовка" content="значение">. Однако в одном элементе «meta» допускается использовать только один из атрибутов: или name или http-equiv. Браузеры преобразовывают значение атрибута http-equiv, заданное с помощью атрибута content, в формат заголовка 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">).

Еще раз кратко о служебной информации

Из всего сказанного выше первым делом нужно запомнить, что при верстке страниц важно указывать кодировку, задавать параметр «viewport», ссылки на внешние таблицы стилей (это понадобится нам уже при изучениии CSS) и заголовок документа. Еще раз напомним структуру кода перечисленных элементов: