Тег | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
3.0+1.0+4.0+1.0+1.0+1.0+1.0+

Спецификация

HTML:3.24.015.0XHTML:1.01.1

Описание

<meta> определяет метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Разрешается использовать более чем один метатег, все они размещаются в контейнере <head>. Как правило, атрибуты любого метатега сводятся к парам «имя=значение», которые определяются ключевыми словами content, name или http-equiv.

Синтаксис

HTML
<head>
  <meta content="...">
</head>
XHTML
<head>
  <meta content="..." />
</head>

Атрибуты

charset
Задает кодировку документа.
content
Устанавливает значение атрибута, заданного с помощью name или http-equiv.
http-equiv
Предназначен для конвертирования метатега в заголовок HTTP.
name
Имя метатега, также косвенно устанавливает его предназначение.

Закрывающий тег

Не требуется.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <title>Тег META</title>
  <meta charset="utf-8">
  <meta name="GENERATOR" content="Microsoft FrontPage 4.0">
  <meta name="ProgId" content="FrontPage.Editor.Document">
 </head>
 <body>
  <p>...</p>
 </body>
</html>

htmlbook.ru

Тег | HTML справочник

Поддержка браузерами

Описание

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

Обычно на одной странице располагается по несколько элементов <meta>, но с различными атрибутами, которые используются например для определения описания страницы, ключевых слов, указания автора документа, последнего изменения, указания кодировки HTML-документа и т.д.

Примечание: содержимое элементов <meta> не отображается на веб-странице.

Атрибуты

charset:
Указывает кодировку символов для текущего HTML-документа. Чаще всего используется кодировка UTF-8.

Тег <meta> с атрибутом charset лучше всего располагать в качестве первого дочернего элемента внутри элемента <head>. Чтобы текст на странице отображался корректно, кодировка, указанная в значении атрибута должна совпадать с кодировкой самого документа.

content:
Содержит произвольный текст, который определяет значение, ассоциируемое с атрибутом http-equiv или name, в зависимости от их значения.
http-equiv:
Контролирует действия браузера на данной веб-странице (эквивалент HTTP заголовков). При отображении страницы браузер будет следовать инструкциям, заданным в атрибуте.

Возможные значения атрибута:

  • default-style: указывает предпочтительный стиль для использования на странице. Атрибут content должен содержать идентификатор элемента <link>, который ссылается на таблицу стилей CSS, или идентификатор элемента <style>, содержащего таблицу стилей.
  • refresh: указывает время в секундах до перезагрузки страницы или время до перенаправления на другую страницу, если в атрибуте content после указания времени идет строка «;url=адрес_страницы»: 
    
<!-- обновление страницы через 10 секунд -->
<meta http-equiv="refresh" content="10">

<!-- Перенаправление на другую страницу через 10 секунд -->
<meta http-equiv="refresh" content="10;url=httр://www.puzzleweb.ru">
name:
Определяет название метаданных. Данный атрибут используется совместно с атрибутом content.

Примечание: атрибут name не должен использоваться в элементе, если в нём уже установлен атрибут http-equiv или charset.

Возможные значения атрибута:
  • application-name: указывает название веб-приложения, используемого на странице.
  • author: указывает имя автора документа.
  • description: определяет краткое описание к содержимому страницы.

    Примечание: стоит уделить особое внимание к описанию страницы с помощью атрибута description, так как многие посетители будут сталкиваются с этой информацией во фрагменте ссылки на ваш сайт в результатах поиска.

  • generator: указывает один из пакетов программного обеспечения, используемого для создания документа.
  • keywords: содержит список ключевых слов, разделенных запятыми, соответствующих содержимому страницы.
  • robots: определяет поведение поисковых роботов на странице.
    Значения атрибута content для <meta name=»robots»>:
    Значение    		ОписаниеПоисковик
    indexразрешает роботу индексировать страницувсе
    noindexзапрещает роботу индексировать страницувсе
    followпозволяет роботу переходить по ссылкам на страницевсе
    nofollowзапрещает роботу переходить по ссылкам на страницевсе
    noodpзапрещает использование общего описания сайта из каталога DMOZ, если таковое имеется, к описанию данной страницы на странице результата поискаgoogle, yahoo, bing
    noarchiveпредотвращает кэширование страницы поисковой системойgoogle, yahoo
    nosnippetпредотвращает отображение любого описания страницы на странице результатов поискаgoogle
    nocacheсиноним значения noarchivebing
  • viewport: позволяет определить размер и/или масштаб области просмотра веб-страницы в мобильных браузерах. Параметры для области просмотра указываются в атрибуте content через запятую: 
    <meta name="viewport" content="width=device-width, height=device-height,
 initial-scale=1.0">
    Значения атрибута content для <meta name=»viewport»>:
    ЗначениеПример значенияДопустимые значенияОписание
    widthwidth=device-width
    width=320    		положительное целое число от 1 до 10000 или device-widthОпределяет ширину в пикселях. Специальное значение device-width указывает, что ширина области просмотра будет равна ширине экрана устройства.
    heightheight=device-height
    height=640    		положительное целое число от 1 до 10000 или device-heightОпределяет высоту в пикселях. Специальное значение device-height указывает, что высота области просмотра будет равна высоте экрана устройства.
    initial-scaleinitial-scale=2.0положительное число от 0.0 до 10.0Задает масштаб страницы при ее первоначальном просмотре.
    maximum-scalemaximum-scale=2.5положительное число от 0.0 до 10.0Задает предел увеличения веб-страницы.
    minimum-scaleminimum-scale=0.5положительное число от 0.0 до 10.0Задает предел уменьшения веб-страницы.
    user-scalableuser-scalable=noбулево значение (yes или no)При использовании значения no, пользователь не сможет масштабировать веб-страницу. Значение по умолчанию — yes.

Тег <meta> так же поддерживает Глобальные атрибуты

Стиль по умолчанию

Нет.

Пример


<head>
  <meta charset="UTF-8">
  <meta name="description" content="Портал для Web разработчиков">
  <meta name="keywords" content="HTML,CSS,XML,JavaScript">
  <meta name="author" content="Автор Я">
</head>

<body>
  Содержимое страницы
</body>

Результат данного примера в окне браузера:

puzzleweb.ru

Тег meta — служебные команды

Тег meta задает некоторые служебные команды браузеру или поисковым системам: кодировку страницы, описание страницы для поисковиков, автора страницы и так далее.

Принцип работы тега такой (за некоторым исключением): задается имя команды (в атрибуте name или в атрибуте http-equiv), а значение команды задается в атрибуте content. По сути данный тег содержит в себе группу тегов (команд), общее название которым мета-теги

Тег meta не требует закрывающего тега.

Тег meta следует использовать внутри тега head.

Популярные примеры использования

Кодировка документа

В настоящее время стандартом кодировки является utf-8. Теоретически явно (через тег meta) кодировку можно и не задавать — браузер должен вас понять. На практике я бы не советовал так поступать — кодировка может сбиться и вместо русского текста вы увидите крокозябры.

В HTML5 кодировка задается в упрощенном виде:

Раньше кодировка задавалась так (сейчас так делать не стоит, устарело, можете встретить в устаревающих учебниках):

<meta http-equiv="content-type" content="text/html; charset=utf-8">

Описание документа

Мета-описание документа предназначено для поисковиков, в нем должно лежать краткое описание страницы. Из этого описания при некоторых условиях поисковик может сделать сниппет страницы сайта. Сниппет — это короткое описание страницы сайта при поиске. Соответственно мета-описание страницы следует делать таким, каким вы хотите видеть сниппет страницы на поиске и для каждой страницы сайта свое.

Пользоваться следует так:

<meta name="description" content="Эта страница рассказывает от мета-тегах.">

Ключевые слова документа

Мета-keywords (ключевые слова) предназначены для поисковиков, чтобы указать самые главные слова, по которым будут искать страницу. В настоящее время из-за злоупотреблений со стороны веб-мастеров поисковики не придают значения этому мета-тегу.

Пользоваться следует так (ключевые слова и фразы перечисляются через запятую):

<meta name="keywords" content="Метатег, Мета-описание, HTML редирект" >

Редирект (перебрасывание на другую страницу)

Можно сделать, чтобы при заходе на некоторую страницу пользователя автоматически перебрасывало на другую (например, если страница переехала). Пользоваться так (5 — это количество секунд, через которые произойдет переброс):

<meta http-equiv="refresh" content="5; url=http://www.example.com/">

Больше примеров

Больше примеров вы можете найти по данной ссылке.

Возможные атрибуты

АтрибутОписание
name Имя мета-тега. Значение мета-тега с данным именем задается атрибутом content.
http-equiv Позволяет устанавливать http заголовки, для отправки их в браузер. Задает имя заголовка. Значение заголовка задается атрибутом content.
content Устанавливает значение атрибута, заданного с помощью атрибута name или http-equiv.
charset Задает кодировку документа. В настоящее время стандартом является utf-8.

code.mu

Все о мета тегах | HTML/xHTML

14.1K

Мета теги используются для описания свойств HTML документа и должны находится в рамках тега HEAD. Если в документе используется тег TITLE, то мета теги рекомендуется вставлять в документ после него.

Мета теги имеют очень широкую функциональную направленность, но многое еще не стандартизировано или находится на стадии разработки.

Мета теги могут идентифицировать авторство HTML документа, его адрес и как часто он обновляется. Поисковые системы используют мета теги для индексации и формирования заголовков HTML документов.

Мета теги могут влиять на режим отображения HTML документов, хотя сами на экран не выводятся.

Далее будут описаны мета теги, принятые большинством поставщиков услуг и программ для сети интернет.

Мета теги типа NAME содержат текстовую информацию о документе, его авторе и некоторые рекомендации для поисковых машин. Например: Robots, Description, Keywords, Author, Copyright.

Мета теги типа HTTP-EQUIV влияют на формирование заголовка документа и определяют режим его обработки.

Эти теги не отражаются броузерами, но обрабатываются некоторыми поисковыми машинами. Как правило, нет необходимости использовать эти теги одновременно. В большинстве случаев достаточно одного информационного тега, позволяющего идентифицировать автора или принадлежность документа.

Тег Author должен содержать имя автора, если сайт принадлежит организации, имеет смысл использовать тег Copyright. Информация обязательно должна заключаться в кавычки, например:

<META Name= Author content="Смирнов Сергей">

Дополнительно информационные теги могут содержать атрибут «Lang», указывающий язык, на котором написано значение свойства. Пример:

<META Name= Author Lang="ru" content="Смирнов Сергей">

Мета тег Description — служит для краткого описания странички.

Он используется поисковыми машинами для индексации и в качестве краткой аннотации при ссылке в ответе на запрос. И именно по содержанию этого тега пользователь поисковой системы будет оценивать, соответствует ваш сайт его ожиданиям или нет.

Если тег Description отсутствует, то в качестве описания поисковые машины используют первую строку текста или отрывок из текста с найденным ключевым словом.

Желательно чтобы длина описания не превосходила 80 символов. Пример:

<META Name="Description" content= "Сайт про ...">

Мета тег Document-state — предназначен для управления индексацией поисковых роботов. Может иметь два значения:

Static — Нет необходимости индексировать эту страницу в будущем.

Dynamic — Индексировать эту страницу регулярно (по умолчанию).

Режим «Static» предназначен для страниц, которые не меняются в принципе. Если содержание вашей страницы периодически меняется, то использовать этот тег необязательно. Пример:

<META Name="Document-state" content ="Dynamic">

Мета тег Generator — это всего лишь один из «славного» семейства тегов широко используемых генераторами HTML кода в своих целях. Как правило, для владельца сайта эти теги не несут полезной нагрузки.

Мета тег Keywords используется поисковыми машинами для оценки релевантности.

Слова, содержащиеся в теге Keywords, рассматриваются поисковыми машинами как рекомендация, но иногда именно этой капли не хватает, чтоб перевесить чашу.

При формировании списка ключевых слов для мета тега Keywords необходимо использовать слова, содержащиеся в тексте документа. Слова, не содержащиеся в тексте, можно использовать в очень небольших количествах, два — три слова. Вставлять их надо в конец списка.

Ключевые слова не должны повторятся в теге Keywords, в крайнем случае, не более двух раз.

В мета теге Keywords имеет смысл использовать не более 10 слов, большее количество релевантности не увеличит.

В Большинстве случаев поисковые машины находят ключевые слова, стоящие во множественном числе (cats), даже если поиск задан в единственном числе (cat). Поэтому рекомендуется в тег Keywords заносить английские существительные во множественном числе.

Роботы некоторых поисковых машин не переходят к новой строке при анализе мета тега Keywords, поэтому не рекомендуется разбивать его на несколько строк.

Пример:

<META Name="Keywords" content="пример, meta, тега">

Если документ написан на нескольких языках, можно использовать добавочный атрибут lang для выбора кодировки (смотри описание мета тега Content-Language).

Пример:

<META Name="Keywords" lang="ru" content="пример, meta, тега">
<META Name="Keywords" lang="en-us" content="meta tegs, example">

Но более предпочтительно сделать отдельные страницы, каждая на своем языке с переходами с одной на другую, с помощью тегов <A> и <Link>.

Мета тег Resource-type — описывает состояние данного документа. Если его значение отлично от “Document”, то поисковые системы не будут его индексировать.

Предназначен для использования в крупных проектах, с множеством документов разного типа.

Некоторые возможные значения:

Build
Classification
Creation
Document — Принимается по умолчанию.
Formatter
Host
Operator
Random text
Rating
Site-languages
Subject
Template
Version

Пример:

<META Name="Resource-type" content ="Document">

Мета тег Revisit — указывает поисковому роботу, через сколько дней ему нужно вернуться и переиндексировать данный документ.

Пример (приходить раз в неделю):

<META Name="Revisit" content="7">

Мета тег Robots — содержит указания для роботов поисковых машин, собирающих информацию о HTML документах в сети.

Значение свойства Robots может состоять из следующих директив, разделенных запятыми:

Index — эта страница должна быть индексирована.

Noindex — эта страница не должна индексироваться.

Follow — прослеживать гиперссылки на странице.

Nofollow — не прослеживать гиперссылки на странице.

All — = index, follow (принято по умолчанию).

None — = noindex, nofollow.

Тег <META name=Robots content=»all»> ничего не меняет в работе робота поисковой машины, так как значение «all» принято по умолчанию.

Но если эта страница создается динамически или очень часто обновляется, то нет смысла ее индексировать, так как информация о странице в поисковой машине и ее истинное содержание будут разными.

В этом случае можно рекомендовать поисковой машине не индексировать эту страницу, а только отслеживать на ней гиперссылки, что бы проиндексировать остальную часть сайта

<META name=Robots content="noindex,follow">

При использовании тега, запрещающего отслеживание гиперссылок

<META name=Robots content="index,nofollow">

часть сайта может остаться не проиндексированной, так как внутри сайта роботы перемещаются по гиперсылкам. И те страницы, переход на которые заблокирован, не будут индексированы.

Мета тег Robots имеет приоритет над директивами управления, заданными в файле robots.txt.

Мета тег Subject используется поисковыми машинами для определения тематики документа. Но до тех пор, пока поисковые системы не согласуют классификационные таблицы, использование этого тега не всегда оправдано.

Мета тег URL — служит для исключения из индексации генерируемых страниц и зеркал. Встретив этот тег, робот поисковой машины должен прекратить индексацию текущего документа и перейти по указанной ссылке. Пример:

<META Name="URL" content= "http://www.Main-Site.com">

Мета тег Content-Language — это указание языка документа. Используется поисковыми машинами при индексировании. Хотя большинство из них умеют различать язык по тексту.

Некоторые возможные значения (стандарт [ISO639], [ISO3166]): de, el, en, en-GB, en-US, en-cockney, es, fr, it, i-navajo, ja, he, nl, ru, pt.

Пример:

<META HTTP-EQUIV="Content-language" content ="ru">

В спецификации HTML 4.0 есть альтернативная возможность явного указания языка — <html lang=»en»>

Meta тег Content-Script-Type — Определение языка программирования сценариев.

Некоторые из возможных значений: text/javascript, text/perlscript, text/tcl, text/vbscript.

Пример:

<META HTTP-EQUIV="Content-Script-Type" content="text/javascript">

Если тег Content-Script-Type не используется, то тип языка программирования сценариев, отличный от принятого по умолчанию, должен быть указан непосредственно в каждом теге <SCRIPT>, пример

<SCRIPT type="text/javascript">

В одном документе допускается использование нескольких языков программирования сценариев. Указание языка в теге <SCRIPT> имеет более высокий приоритет, в рамках текущего тега <SCRIPT>.

Мета тег Content-Style-Type — указавает язык таблицы стилей, значение «text/css» принимается по умолчанию, если оно вас устраивает и вы не используете в этом документе теги <Style> и <Span>, то использовать этот тег необязательно. Пример:

<META HTTP-EQUIV="Content-Style-Type" content="text/css">

Броузеры определяют язык таблиц стилей по следующему алгоритму:

Если в объявлении МЕТА задается язык таблиц стилей, то определяет последнее объявление в потоке символов.

Если язык таблиц стилей задается в объявлении STILE, язык таблиц стилей определяет последний заголовок в потоке символов.

Если язык таблиц стилей не задан, по умолчанию используется язык «text/css».

Мета тег Content-Type — Отвечает за указание типа документа и кодировки символов.

Использовать мета тег Content-Type надо только с учетом некоторых нюансов.

Во — первых, кодировка символов текста должна соответствовать кодировке, указанной в теге.
Во — вторых, сервер не должен менять кодировку текста при обработке запроса броузера.
В — третьих, если сервер меняет кодировку текста, он должен скорректировать или удалить мета тег Content-Type.

Несоблюдение этих требований может привести к следующему: web-сервер автоматически определит кодировку запроса клиента и отдаст страничку web-броузеру перекодированной. Броузер, в свою очередь, будет читать документ в соответствии с мета тегом Content-Type. И если кодировки не совпадут, то прочитать документ можно будет только после ряда замысловатых манипуляций. Особенно это характерно для старых броузеров IE 3.x — 4.x и Netscape 4.x.

Внимание! Мета тег Content-Type очень часто вставляется генераторами HTML кода.

Некоторые из возможных типов кодировки (стандарт [ISO10646]): Windows-1251, KOI8-r, ISO-8859-1.

Пример:

<META HTTP-EQUIV=”Content-Type” content="text/html; charset=windows-1251">

Мета теги Expires — управляет кэшированием. Если указанная в теге дата прошла, то броузер должен сделать повторный сетевой запрос, а не использовать копию из кэша. Если изначально указать прошедшую дату, то документ не будет кэшироваться.

Некоторые поисковые роботы могут отказаться индексировать документ с устаревшей датой.

Дата должна указываться в стандарте [RFC850].

Пример:

<META HTTP-EQUIV="Expires" content="Wed, 26 Feb 1999 08:21:57 GMT">

Мета тег PICS-Label — (Platform-Independent Content rating Scheme Label) ) определяет уровень доступности сайта (sex, violence), но может использоваться и в других целях.

Pragma — Контроль кэширования. При значении “no-cache” кэширование данного не рекомендовано. Предназначен для документов, получаемых в результате работы скрипта. Пример:

<META HTTP-EQUIV="Pragma" content ="no-cache">

Мета тег Refresh — определение задержки времени в секундах, после которой броузер автоматически обновляет документ. Дополнительная возможность — автоматическая загрузка другого документа. Пример:

<META HTTP-EQUIV="Refresh" content ="4; URL=http://www.name.com/">

Если нужно просто обновить документ, то URL указывать не обязательно.

Set-Cookie — Настройка cookie броузера.

Пример:

<META HTTP-EQUIV="Set-Cookie" content="NAME=value;
EXPIRES=date; DOMAIN=domain_name; PATH=path; SECURE">

Атрибуты EXPIRES, DOMAIN, PATH и SECURE при необходимости можно опустить.

Пример:

<META HTTP-EQUIV="Set-Cookie" content="NAME=value;">

NAME — Имя cookie, не может содержать символы перевода строки, пробелов, точки с запятой (;) и табуляции.

EXPIRES — Время хранения cookie. После указанной даты (в формате «Wdy, DD-Mon-YYYY HH:MM:SS GMT») истекает время хранения cookie.

DOMAIN — Домен, для которого задается значение cookie. Для доменов COM, EDU, NET, ORG, GOV, MIL, INT значение можно задавать сокращенно «MY.COM», оно будет распространяться и на домен «WWW.MY.COM». Для всех остальных (в том числе и RU) значение надо задавать полностью «WWW.MY.RU».

PATH — Устанавливает подмножество документов, на которые распространяется действие cookie. При значение «/doc» действие cookie будет распространено на все файлы и каталоги в этой директории начинающееся на «doc» (/doc/, /document/, /doc2/, docs.html, doc-test.htm).

Если этот атрибут опущен, то значение cookie распространяется только на документы директории, в которой расположен текущий документ.

SECURE — Указывает, что информация о cookie должна пересылается через HTTPS (HTTP с использованием SSL). В противном случае информация о cookie будет пересылается по протоколу HTTP.

Перед запросом к серверу, броузер проверяет cookie. И если атрибуты NAME, DOMAIN и PATH совпадают, броузер посылает cookie серверу.

Если cookie принимает новое значение, старое значение удаляется.

Броузер имеет ряд ограничений по работе с cookie:

Единовременно может храниться не более 300 значений cookie.
Cookie не может превышать 4 Кбайт.
От одного сервера (домена) не может быть более 20 cookie.
Эти ограничения могут быть несколько иными, в зависимости от настройки и типа броузера.

Если происходит превышение лимита (общего или по домену) удаляется первая по времени запись. Удаление происходит, не зависимо от значения атрибута EXPIRES.

При превышении 4 Кбайт, cookie усекается.

Пример:

<META HTTP-EQUIV="Set-Cookie" content="NAME=cookexample;
EXPIRES=Monday, 22-FEB-02 21:11:51 GMT; DOMAIN=WWW.MY.RU;
PATH=/; SECURE">

Мета тег Window-target — определяет окно текущей страницы. Приведенный пример может быть использован для прекращения появления новых окон броузера при применении фреймовых структур. Действует для многих (но не для всех) броузеров. Пример:

<META HTTP-EQUIV="Window-target" content ="_top">

www.internet-technologies.ru

| HTML | WebReference

Элемент <meta> (от англ. metadata — метаданные) определяет данные (они называются ещё метатеги), которые используются для хранения информации, предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Разрешается использовать более чем один метатег, все они размещаются в контейнере <head>. Как правило, атрибуты любого метатега сводятся к парам «имя=значение», имена которых определяются ключевыми словами content, name или http-equiv.

Закрывающий тег

Атрибуты

charset
Задаёт кодировку документа.
content
Устанавливает значение атрибута, заданного с помощью name или http-equiv.
http-equiv
Предназначен для конвертирования метатега в заголовок HTTP.
name
Имя метатега, также косвенно устанавливает его предназначение.

Пример

<!DOCTYPE HTML>
<html>
 <head>
  <title>META</title>
  <meta charset="utf-8">
  <meta name="GENERATOR" content="Microsoft FrontPage 4.0">
  <meta name="ProgId" content="FrontPage.Editor.Document">
 </head>
 <body>
  <p>...</p>
 </body>
</html>

Спецификация ?

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

×

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — элемент полностью поддерживается браузером;
  •  — элемент браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 09.10.2018

Редакторы: Влад Мержевич

webref.ru

Meta теги. Учебник html

Глава 10

В первой главе этого учебника, об общем построении html документа, я говорил о том, что все html документы должны иметь вот такой шаблон кода:

<html> — начало документа
<head> — начало головы
</head> — закрытие головы
<body> — начало тела
</body> — закрытие тела
</html> — конец документа

Где между тегами <body> </body> указывается информация предназначенная для вывода на экран в нужном нам виде, а между тегами <head> </head> исключительно служебная информация предназначенная для поисковых систем и браузеров тех или иных пользователей. Так что же это за информация такая и для чего она нужна? Отвечу, планомерно и порционально в этой главе.

С тегом <title> мы уже знакомы, с помощью него мы указываем имя документа в заголовке страницы. Теперь новый тег <meta> (закрывающего тега не требует) с помощью него мы и будем указывать эту самую служебную информацию на нашей страничке.

<meta> тег имеет следующие атрибуты:
  • http-equiv — указывает браузеру как следует обработать основное содержание документа, точнее на основе каких данных.
  • name — информационное имя. (применяется в паре с атрибутом content)
  • content — информационное содержание, связанное с мета именем (name)

Теперь на примерах будем вникать в суть дела.

Пример (очень нужный и важный):

<meta http-equiv=»Content-Type» Content=»text/html; Charset=Windows-1251″>

Сначала расскажу зачем необходима эта строка в заголовке html документа. Данная запись указывает браузеру кодировку в которой была написана данная страница — формат документа и раскладку клавиатуры, в данном случае это кириллица для Windows. Если эту строку не писать в заголовке страницы, то есть большая вероятность что весь текст на Вашей странице отобразится в виде непонятных человеку «иероглифов» у разных пользователей тех или иных браузеров. Конечно, пользователь может применить к такому документу команду в браузере Вид->Кодировка->Кириллица, но он может не знать о данной функции, да и зачем утруждать человека данным действием.

Теперь разберём по «слогам» нашу запись:
<meta http-equiv=»Content-Type» — указываем что в этом мета теге мы будем заниматься Content-Type — типом содержания
Content=»text/html; — а именно его текстом
Charset=Windows-1251″> — документ для Windows — Кириллица где 1251 кодировка раскладки клавиатуры, так например Английская клавиатура будет задаваться Charset=Windows-1252

В настоящее время продвинутые веб-мастера рекомендуют использовать кодировку UTF 8

То есть писать в голове документа вот так:

<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>

Пример:

<meta http-equiv=»Content-Language» Content=»ru»>

В этой строчке говорится о том что язык Language документа является русским Content=»ru»

Неправильная установка языка и раскладки клавиатуры может привести к печальным последствиям.

Пример:

<meta name=»author» Content=»Остап Бендер»>
<meta name=»copyright» Content=»»Рога и копыта» Остап Бендер»>

Данные метаописатели предназначены для заявления об авторских правах непосредственно в заголовке html кода, так name=»author» указывает имя автора страницы, а name=»copyright» авторское право (копирайт) в котором может указываться фамилия, имя, отчество автора сайта, название фирмы, бренда.. и т. д. Кроме того включив в заголовок документа такое описание Вы значительно упростите задачу поисковой машине при поиске Вашего сайта по имени автора, названию фирмы, бренду…

Пример:

<meta name =»Generator» Content=»Microsoft Notepad»>

Если хотите можете указать с помощью какого html редактора была написана данная страница.

Пример:

<meta name=»description» Content=»Производим закупку по выгодным ценам рогов и копыт!»>

Description — краткое описание страницы. Данное описание частенько используется поисковыми системами для вывода в результатах поиска, по какому либо запросу, информации о сайте и его назначении.

Пример:

<meta name=»keywords» Content =»рога, копыта, рожки, рог, копыто, копытце, закупка, покупка, приобретение, выгодно, продать, купить, сбыть, реализовать, корова, бык, коровьи, бычьи, оплата, деньги, наличные, цена, цене»>

Keywords — ключевые слова веб-страницы, опять таки предназначены для поисковых машин.

Представьте что Вы ищете в какой либо поисковой системе сайт с информацией о том где можно продать те же рога и копыта 🙂 Какие слова и фразы Вы будите вводить в строке «Поиск»? ну наверно что то типа: «Где продать коровьи рога?» или «Реализовать копыта по выгодной цене» Так вот если определить ключевые слова и так сказать предугадать мысли потенциального посетителя можно надеяться на то, что та или иная поисковая система выдаст ссылку на Ваш сайт в первых строчках результата поиска. Конечно ввод данного метоописателя не есть гарант того что именно Ваш сайт займет первые места в поиске по данным словам, но всё же не стоит им пренебрегать. Впрочем, оптимизация и раскрутка сайта это отдельная тема для разговора.

Помните что описание description не должно превышать по длине более 200 символов, а ключевые слова keywords 1000 символов, иначе это может пагубно отразится при продвижении Вашего сайта в ТОП поисковых систем.

Пример:

<meta name=»Publisher-Email» Content=»Ваш_e-mail@сервер.домен»>
<meta name=»Publisher-URL» Content=»http://www.Ваш_сайт/»>

Думаю понятно.. здесь указывается адрес Вашего почтового ящика Publisher-Email и адрес сайта Publisher-URL

Пример:

<meta name =»revisit-after» Content=»15 days»>

Если некая страница на Вашем сайте подразумевает постоянное обновление и/или дополнение информационным содержанием, то хорошо было бы включить данное описание в заголовок данной страницы. Такое введение позволит программе роботу своевременно посещать Ваш сайт и индексировать его содержание. В нашем примере мы заявили о том, что собираемся обновлять содержание на странице не менее одного раза в 15 дней, можете не сомневаться программа робот возьмет Ваши планы себе на заметку и будет приходить «к Вам в гости» раз в пятнадцать дней, для того чтобы проверить ничего ли у Вас не изменилось..

Пример:

<meta http-equiv=»expires» content=»Sun, 24 jan 2010 12:28:36 GMT+03:00″>

Для того чтобы ускорить загрузку страницы, а так же сэкономить трафик современные браузеры сохраняют посещаемые пользователем страницы в кэш (на жёсткий диск), и при повторном посещении загружают их не с сервера, а непосредственно с кэша. На самом деле такая функция хороша собой.. но есть одно «но», дело в том что в браузере может отображаться уже устаревшая информация, какой либо страницы. Представьте, к примеру, Ваш сайт представляет собой некое периодическое новостное интернет издание, а пользователь получит, вместо самых свежих новостей, уже устаревшую информацию, ту которая хранится у него в кэше!! и не разобравшись в чем «беда» примет Ваш сайт за «мертвый» заброшенный и никем не обновляемый.

Для того чтобы принудительно заставить браузер загружать ту или иную страницу не с жёсткого диска, а с сервера необходим мета тег с данным синтаксисом, где указывается день недели, число месяц год время (чч:мм:сс) и часовой пояс(GMT+03:00 — время Московское + три часа). День недели и время дня можно не указывать. Теперь при чтении страницы браузером страница будет грузится с сервера, если указанная дата и время настало или просрочено, и напротив из кэша если указанное время еще не наступило.

Ниже на всякий случай приведены таблицы сокращений от Английских слов на месяцы и дни недели

Месяцы:От Английского:Сокращения:
ЯнварьJanuaryJan
ФевральFebruaryFeb
МартMarchMar
АпрельAprilApr
МайMayMay
ИюньJuneJun
ИюльJulyJul
АвгустAugustAug
СентябрьSeptemberSep
ОктябрьOctoberOct
НоябрьNovemberNov
ДекабрьDecemberDec
Дни недели:От Английского:Сокращения:
ПонедельникMondayMon
ВторникTuesdayTue
СредаWednesdayWed
ЧетвергThursdayThu
ПятницаFridayFri
СубботаSaturdaySat
ВоскресеньеSundaySun

Атрибуту content можно присвоить значение «0» <meta http-equiv=»Expires» content=»0″> в этом случае страница всегда будет загружаться с сервера.

И еще.. некоторые поисковые роботы могут отказаться индексировать документ с заведомо устаревшей датой. — не искушайте судьбу..

Пример:

<meta http-equiv=»pragma» content=»no-cache»>

А такая запись вовсе запретит браузеру кэшировать данную страницу.

Пример:

<meta name=»robots» content=»Index,follow»>

Данный мета тег предназначен для подачи поисковому роботу той или иной команды.

Список возможных команд роботу:

  • Index — индексировать страницу
  • Noindex — не индексировать страницу
  • Follow — прослеживать гиперссылки на странице
  • Nofollow — не прослеживать гиперссылки на странице
  • All — индексировать страницу и прослеживать гиперссылки на странице (по умолчанию)
  • None — не индексировать страницу и не прослеживать гиперссылки на странице

Пример:

<meta http-equiv=»Refresh» content=»10; URL=http://www.mysite/index.html»>

Если вдруг по каким либо причинам Вы задумаете поменять URL адрес Вашего сайта то хорошо было бы на старом месте оставить страницу вроде этой:

<html>
<head>
<meta http-equiv=»Content-Type» Content=»text/html; Charset=Windows-1251″>
<meta http-equiv=»Refresh» content=»10; URL=http://www.mysite/index.html»>
<title>Переадресация</title>
</head>
<body>
<font size=»+1″>
Адрес сайта был изменен, через 10 секунд Ваш браузер будет автоматически перенаправлен по новому адресу:<br>
<a href=»http://www.mysite.ru/index.html»><b>http://www.mysite.ru/</b></a><br>
Нажмите <a href=»http://www.mysite.ru/index.html»>здесь</a> для того чтобы выполнить переход немедленно.<br>
Приносим извинения за доставленные неудобства.
</font>
</body>
</html>

Разберём и осмыслим строчку из примера:

<meta http-equiv=»Refresh» content=»10; URL=http://www.mysite/index.html»>

meta http-equiv=»Refresh» — Refresh (восстановление) указывает браузеру что данную страницу необходимо обновить
content=»10; — обновить через заданное количество секунд (в нашем случае десять)
URL=http://www.mysite/index.html»— адрес новой/другой страницы на которую следует перейти.

Пример:

<meta http-equiv=»Refresh» content=»30″>

А вот если в заголовке Refresh URL адрес упустить, как показано в примере, то тогда браузер будет постоянно через каждые 30 секунд (ну или не 30.. сколько пропишите через столько и будет..) обновлять содержимое данной страницы.

Такой метод широко используется в новостных лентах, где информация идет так сказать потоком и требует постоянного обновления.

Пример:

<meta http-equiv =»Page-Enter» Content=»RevealTrans(Duration=1.0, Transition=0)»>
<meta http-equiv =»Page- Exit » Content=»RevealTrans(Duration=3.0, Transition=23)»>

Данные заголовки создают визуальные эффекты при переходе с одной страницы на другую.

  • Page-Enter — Эффект появления страницы
  • Page- Exit — Эффект исчезновения страницы

В которых:

  • Duration — время действия эффекта в секундах
  • Transition — Один из номеров предлагаемых эффектов (от 0 до 23) перечисленных в таблице:
НомерОписание эффектаНомерОписание эффекта
0Прямоугольники внутрь12Растворение
1Прямоугольники наружу13Вертикальная панорама внутрь
2Круг внутрь14Вертикальная панорама наружу
3Круг наружу15Горизонтальная панорама внутрь
4Наплыв наверх16Горизонтальная панорама наружу
5Наплыв вниз17Уголки влево — вниз
6Наплыв вправо18Уголки влево — вверх
7Наплыв влево19Уголки вправо – вниз
8Вертикальные жалюзи20Уголки вправо – вверх
9Горизонтальные жалюзи21Случайные горизонтальные полосы
10Шажки горизонтальные22Случайные вертикальные полосы
11Шажки вертикальные23Случайный выбор эффекта

Пример:

Файл page1.html

<html>
<head>
<meta http-equiv=»Content-Type» Content=»text/html; Charset=Windows-1251″>
<meta http-equiv =»Page-Enter» Content=»RevealTrans(Duration=1.0, Transition=12)»>
<title>Эффекты перехода страниц</title>
</head>
<body bgcolor=»#c5ffa0″>
<center>
<h3>На заметку:</h3>
<font size=»+1″>Эффекты перехода с одной страницы на другую работают не во всех браузерах.</font><hr><br>
<font size=»+1″>Нажмите на «Перейти» чтобы перейти к следующей странице<br>
и оценить эффект перехода от одной странице к другой.</font><br><br>
<a href=»page2.html»><font size=»+2″>»Перейти»</font></a>
</center>
</body>
</html>

Файл page2.html

<html>
<head>
<meta http-equiv=»Content-Type» Content=»text/html; Charset=Windows-1251″>
<meta http-equiv =»Page-Enter» Content=»RevealTrans(Duration=2.0, Transition=23)»>
<title>Эффекты перехода страниц</title>
</head>
<body bgcolor=»#c0e4ff»>
<center>
<h3>На заметку:</h3>
<font size=»+1″>Эффекты открытия и закрытия веб-страниц будут видны только при переходе <br>
от одной страницы к другой или же при помощи кнопок «назад» «вперёд». <br>
При первом открыти страницы, а также во время перезагрузки<br>
эффекты перехода видны не будут.</font><hr><br>
<font size=»+1″>Нажмите на «Перейти» чтобы перейти к следующей странице<br>
и оценить эффект перехода от одной странице к другой.</font><br><br>
<a href=»page1.html»><font size=»+2″>»Перейти»</font></a>
</center>
</body>
</html>

  • Ещё раз напомню о том что мета теги стоит применять умело и грамотно особенно это касается команд для робота и кодировки символов, иначе весь Ваш труд может пойти насмарку..

  • Заголовок Refresh (автоматический переход на другую страницу) можно использовать не совсем стандартно.. Некоторые авторы используют его для создания своего рода «презентации» слайд шоу, где сменяющиеся страницы и есть кадры презентации. Представьте заходит человек на такой сайт а тут ему «Откинетесь на спинку кресла и расслабьтесь..»:) а далее сами по себе пошли картинки, графики, тексты.. а последняя страница тупиковая где пользователь берёт сайт «в свои руки» или же может замыкаться на первую. Только всегда помните о золотом правиле веб-мастера: Главное не переборщить!



www.webremeslo.ru

| Справочник HTML

Элемент <meta> определяет метаданные (технические данные) HTML-документа. К подобным данным относят краткое описание страницы, ключевые слова, данные об авторе документа, о последнем изменении документа и т.д. Метаданные не отображаются на странице, но интерпретируются браузерами и поисковыми системами.

Разрешается использовать более чем один метатег, все они размещаются в контейнере <head>.

Метаданные документа выражаются в виде пар «имя-значение» («свойство-значение»), где атрибуты name или http-equiv указывают имя (свойство), а атрибут content этого же элемента указывает значение.

Если задается атрибут name или http-equiv, то должен быть задан атрибут content. В обратном случае атрибут content не используется.

Синтаксис

<head>
  <meta>
</head>

Закрывающий тег

Не требуется.

Атрибуты

charsetHTML5
Указывает кодировку символов для текущего HTML-документа. Авторам рекомендуется использовать значение UTF-8.
Тег <meta> с атрибутом charset лучше всего располагать в качестве первого дочернего элемента внутри элемента <head>. Чтобы текст на странице отображался корректно, кодировка, указанная в значении атрибута должна совпадать с кодировкой самого документа.
content
Устанавливает значение атрибута, заданного с помощью name или http-equiv.
http-equiv
Контролирует действия браузера на данной веб-странице (эквивалент HTTP заголовков). При отображении страницы браузер будет следовать инструкциям, заданным в атрибуте:
default-style — указывает предпочтительный стиль для использования на странице. Атрибут content должен содержать идентификатор элемента <link>, который ссылается на таблицу стилей CSS, или идентификатор элемента <style>, содержащего таблицу стилей.
refresh — указывает время в секундах до перезагрузки страницы или время до перенаправления на другую страницу, если в атрибуте content после указания времени идет строка «url=адрес_страницы».
Автоматическая перезагрузка страницы через заданный промежуток времени, в данном примере, через 30 секунд:
<meta http-equiv="refresh" content="30">
Если необходимо сразу перебросить посетителя на другую страницу, то можно указать URL-адрес в параметре url:
<meta http-equiv="refresh" content="0; url=http://wm-school.ru/">
name
Обеспечивает дополнительное описание тега. Если этот атрибут опущен, он считается эквивалентным атрибуту http-equiv. Не должен использоваться в случае, если для элемента уже заданы атрибуты http-equiv, charset или itemprop.
application-name — указывает название веб-приложения, используемого на странице.
author — используется для указания имени автора веб-страницы:
<meta name="author" content="Max White">
description — является описанием страницы, оно чаще всего используется поисковыми системами для определения, чему та посвящена, например:
<meta name="description" content="Описание содержимого страницы">
generator — указывает один из пакетов программного обеспечения, используемого для создания документа, например:
<meta name="generator" content="Joomla 3.5">
keywords — содержит список ключевых слов, разделенных запятыми, соответствующих содержимому страницы, например: 
<meta name="keywords" content="Ключевые слова через запятую">
pragma — предотвращает кэширование страницы браузером, например:
<meta http-equiv="pragma" content="no-cache">
expires — может быть использован для указания того, когда у страницы должен истечь срок актуальности (и она должна быть удалена из кэша), например:
<meta http-equiv="expires" content=" Fri, 04 Apr 2018 23:59:59 GMT">
robots — показывает, должны ли поисковые системы включать данную страницу в результаты поиска. Например, значение nofollow устанавливает, что поисковые системы могут включать данную страницу в результаты поиска, но не должны показывать страницы, на которые ведут ссылки с нее: 
<meta name="robots" content="nofollow">
viewport — позволяет разработчикам управлять размером исходной области просмотра на различных устройствах:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width — указывает браузеру задать ширину области просмотра равную ширине экрана устройства какой бы она ни была;
initial-scale=1.0 — устанавливает начальный уровень масштабирования при первой загрузке страницы браузером.
scheme
Указывает полезную информацию о схеме или названии самой схемы, которая должна быть использована для уточнения значения свойства атрибута content.

Элемент поддерживает глобальные атрибуты и события.

Стилизация по умолчанию

Нет.

Различия между HTML 4.01 и HTML5

Атрибут scheme не поддерживается в HTML5.

В HTML5 был добавлен атрибут charset, который облегчил определение кодировки символов страницы:

  • HTML 4.01: <meta http-equiv=»content-type» content=»text/html; charset=UTF-8″>
  • HTML5: <meta charset=»UTF-8″>

Пример использования:

Определяем метаинформацию о HTML документе:

Пример HTML:

Попробуй сам
<!DOCTYPE html>
<html>
 <head>
  <title>Заголовок страницы</title>  
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="keywords" content="HTML, Meta Tags, метаданные">
  <meta name="description" content="Сайт об HTML и CSS">
 </head> 
 <body>Основное содержимое страницы</body>
</html>

Спецификации

Поддержка браузерами

Элемент
<meta> 2+ 1+ 3.5+ 1+ 1+ 1+
Элемент
<meta> 1+ 1+ 6+ 1+

Дополнительная информация

Группа значений атрибута NAME

Группа значений атрибута HTTP-EQUIV

HTML уроки: HTML Мета-теги

HTML Раздел Head

HTML Элементы


wm-school.ru

No related posts.