<meta> — элемент для описания метаданных
HTML-элемент <meta> представляет такие метаданные, которые не могут быть представлены другими HTML-метатегами, такими как <base> , <link> , <script> , <style> или <title> .
| Категории контента | Мета данные. Если задан itemprop атрибут: flow content, phrasing content. |
|---|---|
| Допустимое содержимое | Отсутствует — это пустой элемент. |
| Пропуск тегов | Так как это пустой элемент, то открывающий тег должен присутствовать, а закрывающий — отсутствовать. |
| Допустимые родители | <meta charset> , <meta http-equiv> : <head> элемент. Если http-equiv это не заявленная декларация, то может быть внутри элемента <noscript> или <head> . |
| Допустимые ARIA-роли | Отсутствуют |
| DOM-интерфейс | HTMLMetaElement (en-US) |
Атрибуты
Этот элемент включает в себя глобальные атрибуты.
Примечание: атрибут name имеет особое значение для элемента <meta> и атрибут itemprop не должен быть задан в <meta> элементе в котором уже определены какие-либо name , http-equiv или charset атрибуты.
Этот атрибут задаёт кодировку символов, используемую на странице. Он должен содержать стандартное имя IANA MIME для кодировки символов. Хотя стандарт не требует определённой кодировки, он рекомендует:
- Авторам рекомендуется использовать UTF-8 (en-US) .
- Не следует использовать ASCII-несовместимые кодировки, чтобы избежать угроз безопасности: браузеры, не поддерживающие их, могут интерпретировать вредоносный контент как HTML. Это относится к семейству кодировок JIS_C6226-1983 , JIS_X0212-1990 , HZ-GB-2312 , JOHAB и EBCDIC .
Примечание: ASCII-несовместимые кодировки — это те, которые не преобразуют 8-битные коды точек 0x20 , 0x7E , 0x0020 , 0x007E в коды Unicode точек.
Предупреждение:
- Авторы не должны использовать CESU-8 , UTF-7 , BOCU-1 и/или SCSU , так как есть примеры атак межсайтового скриптинга (en-US) использующих данные кодировки.
- Авторам не следует использовать кодировку UTF-32 , потому что не все алгоритмы кодирования HTML5 могут отличить её от UTF-16 . Примечание:
- Указанный набор символов должен соответствовать одной странице. Нет веских оснований для объявления неточного набора символов.
- <meta> элемент должен находиться внутри элемента <head> и задаваться в 1024 первых байтах HTML страницы, поскольку некоторые браузеры смотрят только эти байты перед выбором кодировки.
- Этот <meta> элемент — часть алгоритма, определяющего набор символов (algorithm to determine the character set) страницы, который браузер поддерживает. Заголовок Content-Type и любые Byte-Order Marks элементы переопределяют данный элемент.
- Настоятельно рекомендуется определить кодировку символов. Если для страницы не определён набор символов, то некоторые cross-scripting технологии могут повредить страницу, например такие как UTF-7 fallback cross-scripting technique. Постоянная установка этого элемента будет защищать вас от этого риска.
- Этот <meta> элемент это синоним для pre-HTML5 <meta http-equiv=»Content-Type» content=»text/html; charset=IANAcharset»> где * IANAcharset *соответствует значению эквивалентного charset атрибута. Этот синтаксис по-прежнему разрешён, хотя и устарел и больше не рекомендуется.
Этот атрибут содержит значение для http-equiv или name атрибута, в зависимости от контекста.
Этот атрибут определяет прагму, которая может изменять поведение серверов и пользователей. Значение прагмы определяется с помощью content и может быть следующим:
- «content-language»
- : Эта прагма определяет значение языка страницы по умолчанию.
Примечание: Не используйте эту прагму, так как она устарела Используйте глобальный атрибут <html> элемента вместо этого.
- : Это значение позволит администратору веб-сайта определить политику содержания для обслуживаемых ресурсов. За некоторыми исключениями, политика в основном включают в себя указание происхождения сервера и конечные точки сценария. Это помогает предотвратить атаки межсайтового скриптинга.
Примечание:
- Не используйте эту прагму, так как она устарела. Используйте атрибут charset в элементе <meta> вместо этого. не может быть использована для выбора типа документа в XHTML документе, или в HTML5 документе, за которым следует XHTML синтаксис, никогда не задавайте MIME тип как XHTML MIME. Это будет некорректно.
- Только HTML документ может использовать контент-тип, так что большинство из них являются неиспользуемыми, поэтому они являются устаревшими и заменяются charset атрибутом.
- : Специализация этой прагмы — предпочтительный стиль таблиц, используемый на странице. content атрибут должен содержать заголовок <link> элемента который href связывает атрибут с CSS таблцей стилей, или заголовок <style> элемента, который содержит CSS таблицу стилей.
- : Эта прагма определяет:
- Количество секунд перезагрузки таблицы, если content атрибут содержит только целое положительное число;
- Время, в количестве секунд, за которое страница должна быть перенаправлена на другую, если content атрибут содержит целое положительное число, заканчивающийся строкой ‘ ;url= ‘ и корректный URL.
Примечание: Не используете эту прагму, так как она устарела. Используйте HTTP header set-cookie вместо этого.
Этот атрибут определяет имя уровня документа метаданных. Его не следует устанавливать, если один из атрибутов itemprop , http-equiv или charset также указан в наборе. Имя этого документального уровня метаданных связано со значением, которое содержится в content атрибуте.Допустимые значения для имени элемента, со связанными с ними значениями, хранятся посредством content атрибута:
-
application-name , определяет имя веб-приложения, запущенного на веб-странице;
Примечание:* Браузеры могут использовать его для идентификации приложения. Он отличается от <title> элемента, который обычно состоит из имени приложения, но также может содержать специальную информацию, как например имя документа или статус;
- Простые веб-страницы не определяют application-name meta.
Примечание: Некоторые браузеры поддерживают ключевые слова всегда, по умолчанию и никогда для реферера. Эти значения устарели.
Примечание: Динамическая вставка <meta name=»referrer»> (с помощью document.write или appendChild) создаёт недетерминизм, когда дело доходит до отправки рефереров. Также стоит отметить, что когда определяется несколько конфликтующих политик, применяется No-referrer policy.Атрибут также может иметь значение, взятое из существующего листа определений WHATWG Wiki MetaExtensions page. Хотя ни один из них официально не был принят, в число предложений входят несколько часто используемых имён:
Примечание:
- Только кооперативные роботы будут следовать правилам, определённым именем роботов.
- Роботу необходимо получить доступ к странице, чтобы считать мета значение. Если вы хотите скрыть от них информацию, то используйте robots.txt файл.
- Если вы хотите удалить страницу индекса, изменение мета в noindex будет работать, но только тогда, когда робот снова посетит страницу. Убедитесь, что файл robots.txt не предотвращает такие посещения. Некоторые поисковые системы имеют инструменты, позволяющие быстро удалить какую-либо страницу.
- Некоторые возможные значения взаимно исключают друг друга, такие как использование индекса и noindex или follow и nofollow одновременно. В этих случаях поведение робота не определено и может варьироваться от одного к другому. Поэтому избегайте этих случаев.
- Некоторые поисковые роботы-роботы, такие как Google, Yahoo Search или Bing, поддерживают те же значения в директиве HTTP, X-Robot-Tags: это позволяет им использовать эту прагму для документов, отличных от HTML, например изображений.
- viewport , который даёт подсказки о размере изначального размера viewport. Эта прагма используется только на некоторых мобильных устройствах.
Примечание:
- Хотя и не стандартизирован, этот атрибут используется разными мобильными браузерами, например Safari Mobile, Firefox for Mobile or Opera Mobile.
- Значения по умолчанию могут быть изменены у разных браузеров или устройств..
- Для изучения этой прагмы на Firefox for Mobile, посмотрите статью this article.
Этот атрибут определяет схему, которая описывает метаданные. Схема — это контекст, ведущий к правильной интерпретации content значения, например формата.
Примечание: Не используйте этот атрибут, так как он устарел. Для него нет никакой замены, поскольку реально он не использовался. Опустите его.
Замечания
В зависимости от установленных атрибутов, тип метаданных может быть одним из следующих:
Какие бывают META теги и зачем они нужны
В продолжении первого поста про DOCTYPE, я, как и обещал, продолжу про META теги.
META-теги — это необязательные атрибуты, размещенные в заголовке страницы, которые могут содержать ее описание, ключевые слова к ней, информацию об авторе, управляющие команды для броузера и поисковых роботов, и прочую служебную информацию, не предназначенную для посетителей.META-теги имеют два возможных атрибута
— <META HTTP-EQUIV="имя" CONTENT="содержимое">
— <META NAME="имя" CONTENT="содержимое">
META-теги должны находиться в заголовке HTML-документа между <HEAD> и </HEAD> (особенно это важно для документов, использующих фреймы).Стандартом HTML 4.01 значения и имена мета-тегов НЕ оговариваются, поэтому мы будем рассматривать те значения, которые уже устоялись в интернете и используются чаще других.
Пруфлинк: http://www.w3.org/TR/html401/struct/global.html#h-7.4.4.1
(The META element can be used to identify properties of a document (e.g., author, expiration date, a list of key words, etc.) and assign values to those properties. This specification does not define a normative set of properties.)Атрибут HTTP-EQUIV
META-теги с атрибутом HTTP-EQUIV эквивалентны HTTP-заголовкам. Обычно они управляют действиями броузеров и могут быть использованы для совершенствования информации, выдаваемой обычными заголовками. Теги такой формы могут дать такой же эффект, что и HTTP-заголовки, и на некоторых серверах автоматически могут быть переведены в настоящие HTTP-заголовки.
Некоторые генерируемые сервером поля заголовков не могут быть подменены значениями из META-тегов (в частности Date), другие подменяются только при ненормальном статус-коде (<>200). Когда заголовок не понятен, то значение HTTP-заголовка превалирует над значением META-тегов.Meta в html для чего
Тег <meta> (от англ. meta information — мета информация) определяет данные (они называются ещё метатеги), которые используются для хранения информации, предназначенной для браузеров и поисковых систем.
Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Разрешается использовать более чем один метатег, все они размещаются в контейнере <head> . Как правило, атрибуты любого метатега сводятся к парам « имя=значение », имена которых определяются ключевыми словами content , name или http-equiv .
Синтаксис¶
Закрывающий тег не требуется.
Атрибуты¶
charset¶
Указывает кодировку документа. Атрибут введён в HTML5 и предназначен для сокращения формы <meta> , которая задавала кодировку в предыдущих версиях HTML и XHTML.
Синтаксис
Значения
Название кодировки, например UTF-8.
Значение по умолчанию
content¶
content устанавливает значение атрибута, заданного с помощью name или http-equiv . Атрибут content может содержать более одного значения, в этом случае они разделяются запятыми или точкой с запятой.
Некоторые значения атрибута content для <meta name=»robots»> , предназначенных для поисковых роботов, приведены в табл. 1.
Табл. 1. Значения для meta name=»robots»
Значение Описание index Разрешает роботу индексировать данную страницу. noindex Запрещает роботу индексировать текущую страницу. Она не попадает в базу поисковика и её невозможно будет найти через поисковую систему. follow Разрешает роботу переходить по ссылкам на данной странице. nofollow Запрещает роботу переходить по ссылкам на данной странице. При этом всем ссылкам не передаётся ТИЦ (тематический индекс цитирования) и PagePank. noarchive Запрещает роботу кэшировать данную страницу. Допустимые значения атрибута content для <meta name=»viewport»> , которые предназначены для управления просмотром сайта на мобильных устройствах, приведены в табл. 2.
Табл. 2. Значения для meta name=»viewport»
Значение Допустимые значения Описание width device-width или целое положительное число Устанавливает ширину области просмотра в пикселях. height device-height или целое положительное число Устанавливает высоту области просмотра в пикселях. initial-scale Число от 0.0 до 10.0 Устанавливает соотношение между шириной устройства (device-width в портретном режиме или device-height в ландшафтном режиме) и размером области просмотра. maximum-scale Число от 0.0 до 10.0 Задаёт максимальное значение масштаба. Должно быть больше или равно minimum-scale, в противном случае игнорируется. minimum-scale Число от 0.0 до 10.0 Задаёт минимальное значение масштаба. Должно быть меньше или равно maximum-scale, в противном случае игнорируется. user-scalable yes или no Если указано no, то пользователь не сможет масштабировать веб-страницу. По умолчанию используется yes. Синтаксис
Значения
Строка символов, которую надо взять в одинарные или двойные кавычки.
Значение по умолчанию
http-equiv¶
Браузеры преобразовывают значение атрибута http-equiv , заданное с помощью content , в формат заголовка ответа HTTP и обрабатывают их, как будто они прибыли непосредственно от сервера.
Синтаксис
Значения
Любой подходящий идентификатор. Ниже приведены некоторые допустимые значения атрибута http-equiv .
Content-Type Тип кодировки документа.
expires Устанавливает дату и время, после которой информация в документе будет считаться устаревшей.
pragma Способ кэширования документа.
refresh Загружает другой документ в текущее окно браузера.
Значение по умолчанию
Устанавливает идентификатор метатега для пары « имя=значение ». Одновременно использовать атрибуты name и http-equiv не допускается.
Синтаксис
Значения
Любой подходящий идентификатор. Ниже приведены некоторые допустимые значения атрибута name .
author Имя автора документа. description Описание текущего документа. keywords Список ключевых слов, встречающихся на странице. viewport Управляет просмотром сайта на мобильных устройствах.
# Meta Information
Meta tags in HTML documents provide useful information about the document including a description, keywords, author, dates of modifications and around 90 other fields. This topic covers the usage and purpose of these tags.
# Page Information
# application-name
Giving the name of the Web application that the page represents.
If it’s not a Web application, the application-name meta tag must not be used.
# author
Set the author of the page:
Only one name can be given.
# description
Set the description of the page:
The description meta tag can be used by various search engines while indexing your web page for searching purpose. Usually, the description contained within the meta tag is the short summary that shows up under the page/website’s main title in the search engine results. Google usually uses only the first 20-25 words of your description.
# generator
Identifies one of the software packages used to generate the document. Only to be used for pages where the markup is automatically generated.
# keywords
Set keywords for search engines (comma-separated):
The keywords meta tag is sometimes used by search engines to know the search query which is relevant to your web page.
As a rule of thumb, it is probably a good idea to not add too many words, as most search engines that use this meta tag for indexing will only index the first20 words. Make sure that you put the most important keywords first.
# Character Encoding
The charset attribute specifies the character encoding for the HTML document and needs to be a valid character encoding (examples include windows-1252 , ISO-8859-2 , Shift_JIS , and UTF-8 ). UTF-8 (Unicode) is the most widely used and should be used for any new project.
All browsers have always recognized the <meta charset> form, but if you for some reason need your page to be valid HTML 4.01, you can use the following instead:
(opens new window) , to view all available character encoding labels that browsers recognize.
# Robots
The robots attribute, supported by several major search engines, controls whether search engine spiders are allowed to index a page or not and whether they should follow links from a page or not.
This example instructs all search engines to not show the page in search results. Other allowed values are:
Note: Explicitly defining index and/or follow , while valid values, is not necessary as pretty much all search engines will assume they are allowed to do so if not explicitly prevented from doing so. Similar to how the robots.txt file operates, search engines generally only look for things they are not allowed to do. Only stating things a search engine isn’t allowed to do also prevents accidentally stating opposites (such as index, . noindex ) which not all search engines will treat in the same way.
# Social Media
Open Graph is a standard for metadata that extends the normal information contained within a site’s head markup. This enables websites such as Facebook to display deeper and richer information about a website in a structured format. This information is then automatically displayed when users share links to websites containing OG metadata on Facebook.
# Facebook / Open Graph
# Facebook / Instant Articles
Twitter uses its own markup for metadata. This metadata is used as information to control how tweets are displayed when they contain a link to the site.
# Twitter
# Google+ / Schema.org
# Mobile Layout Control
Common mobile-optimized sites use the <meta name="viewport"> tag like this:
The viewport element gives the browser instructions on how to control the page’s dimensions and scaling based on the device you are using.
In the above example, content="width=device-width means that the browser will render the width of the page at the width of its own screen. So if that screen is 480px wide , the browser window will be 480px wide . initial-scale=1 depicts that the initial zoom (which is 1 in this case, means it does not zoom).
Below are the attributes this tag supports:
Attribute Description width The width of the virtual viewport of the device.
Values 1 : device-width or the actual width in pixels, like 480height The height of the virtual viewport of the device.
Values 2 : device-height or the actual width in pixels, like 600initial-scale The initial zoom when the page is loaded. 1.0 does not zoom. minimum-scale The minimum amount the visitor can zoom on the page. 1.0 does not zoom. maximum-scale The maximum amount the visitor can zoom on the page. 1.0 does not zoom. user-scalable Allows the device to zoom in and out. Values are yes or no . If set to no, the user is not able to zoom in the webpage. The default is yes. Browser settings can ignore this rule. Notes:
1 The width property can be either specified in pixels ( width=600 ) or by device-width ( width=device-width ) which represents the physical width of the device’s screen.
2 Similarly, the height property can be either specified in pixels ( height=600 ) or by device-height ( height=device-height ) which represents the physical height of the device’s screen.
# Automatic Refresh
To refresh the page every five seconds, add this meta element in the head element:
CAUTION! While this is a valid command, it is recommended that you do not use it because of its negative effects on user experience. Refreshing the page too often can cause it to become unresponsive, and often scrolls to the top of the page. If some information on the page needs to be updated continuously, there are much better ways to do that by only refreshing a portion of a page.
# Phone Number Recognition
Mobile platforms like iOS automatically recognize phone numbers and turn them into tel: links. While the feature is very practical, the system sometimes detects ISBN codes and other numbers as telephone numbers.
For mobile Safari and some other WebKit-based mobile browsers to turn off automatic phone number recognition and formatting, you need this meta tag:
# Automatic redirect
Sometimes your webpage needs a automatic redirect.
For example, to redirect to example.com after 5 seconds:
This is line will send you to the designated website (in this case example.com after 5 seconds.
If you need to change the time delay before a redirect, simply changing the number right before your ;url= will alter the time delay.
# Web App
You can set up your web app or website to have an application shortcut icon added to a device’s homescreen, and have the app launch in full-screen "app mode" using Chrome for Android’s "Add to homescreen"
Below meta tag(s) will open web app in full-screen mode (without address bar).
You can also set color for status bar and address bar in meta tag.
# Syntax
- <meta name="metadata name" content="value">
- <meta http-equiv="pragma directive" content="value">
- <meta charset="encoding label">
# Remarks
The meta tag is an HTML tag used to set the metadata of the HTML document. Meta tags need to go in the head element. A page may have any number of meta tags.
The meta tag keywords is not typically used by robots. Most search engines determine what keywords fit with the content on the web pages. That being said, nothing says you should no longer include the keywords meta tag.
The meta data of a page is mostly used by the browser (like the scaling of a document) and web crawling spiders used by search engines (Google, Yahoo!, Bing).
(opens new window) for use with <meta http-equiv> . However, many services across the internet (web crawlers, authoring tools, social sharing services, etc.) use the <meta name> form as a generic extension point for metadata. Some of these are listed on the spec’s wiki page