Тег <meta> | Справочник HTML
http://belarusweb.net
Основы создания сайтов

Тег <meta>

Описание

Тег <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 – задает время до перезагрузки страницы или перенаправления на другую страницу, если атрибут content содержит целочисленное положительное число, после которого идет строка с корректным url-адресом (например, <meta http-equiv="refresh" content="15;url=httр://belarusweb.net">).
  • 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 (масштабирование в ряде случаев целесообразно запрещать, например, для мобильных приложений).
  • Также для элемента доступны универсальные атрибуты и соответствующие атрибуты-события.

Ссылки

Примеры

<!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">
	
	<!-- Перенаправление на другую страницу через 2 секунды -->
	<meta http-equiv="refresh" 
	content="2; url=http://belarusweb.net/html/html_spravochnik/teg_meta/teg_meta.html">
  
	<title>Пример №1</title>
	
</head>
<body>
	...
	Тут расположена выводимая информация.	
	...
</body>
</html>

Пример №1

<!DOCTYPE html>
<html>
<head>
		
	<!-- Сообщаем браузеру кодировку документа -->
	<meta charset="utf-8">
	 
	<!-- 1. Ширина области просмотра подстраивается -->
	<!-- под ширину экрана мобильного устройства автоматически  -->
	<!-- 2. Пользователю разрешается масштабировать страницу (user-scalable=yes) -->
	<!-- Данный вариант в большинстве случаев наиболее оптимальный -->
	<meta name="viewport" content="width=device-width, user-scalable=yes">
  
	<title>Пример №2</title>
	
</head>
<body>
	...
	Тут расположена выводимая информация.	
	...
</body>
</html>

Пример №2