<meta>: 문서 레벨 메타데이터 요소

This translation is in progress.

HTML <meta> 요소<base>, <link>, <script>, <style>, <title>과 같은 다른 메타관련 요소로 나타낼 수 없는 메타데이터를 나타냅니다.

콘텐츠 카테고리 메타데이터 콘텐츠. itemprop이 존재하면 플로우 콘텐츠구문 콘텐츠.
가능한 콘텐츠 없음. 빈 요소입니다.
태그 생략 빈 요소이므로 여는 태그는 존재해야 하고 닫는 태그는 존재해선 안됩니다.
가능한 부모 요소 <meta charset>, <meta http-equiv>인 경우 <head> 요소. http-equiv가 인코딩 선언이 아닌 경우 <head> 내의 <noscript> 요소도 가능합니다.
가능한 ARIA 역할 없음
DOM 인터페이스 HTMLMetaElement

특성

이 요소는 전역 특성을 포함합니다.

참고: name 특성은 <meta> 요소에 대해 특정한 의미를 가집니다. 하나의 <meta> 요소에서, itemprop 특성을 name, http-equiv 또는 charset 특성과 함께 설정할 수 없습니다.

charset
페이지의 문자 인코딩을 선언합니다. 문자 인코딩의 표준 IANA MIME 이름을 값으로 가져야 합니다. 표준안은 특정 인코딩을 요구하지 않지만, 대신 다음을 제안합니다.
  • UTF-8을 권장합니다.
  • 보안 위협을 방지하기 위해, ASCII와 호환되지 않는 인코딩을 사용하지 않아야 합니다. 해당되는 인코딩은 유해한 콘텐츠를 HTML의 일부로 판독할 수 있습니다. JIS_C6226-1983, JIS_X0212-1990, HZ-GB-2312, JOHAB, ISO-2022 계열과 EBCDIC 계열이 이에 해당합니다.

참고: ASCII와 호환되지 않는 인코딩이란 0x200x7E 사이의 8비트 코드 포인트를 0x00200x007E 사이의 유니코드 코드 포인트로 매핑하지 않는 인코딩을 말합니다.

  • CESU-8, UTF-7, BOCU-1, SCSU 인코딩을 절대 사용해서는 안됩니다. 이 인코딩을 통한 사이트 간 스크립팅 공격이 가능함이 입증되었습니다.
  • 모든 HTML5 인코딩 알고리즘이 UTF-32 인코딩을 UTF-16과 구분할 수 있는 것은 아니므로 UTF-32 인코딩은 사용하지 말아야 합니다.
참고:
  • 보안 취약점과 깨진 글자를 피하기 위해, 선언한 문자 인코딩은 페이지를 저장할 때 사용한 인코딩과 동일해야 합니다.
  • <meta> 요소는 반드시 <head> 요소 내에 있어야 하고, HTML 파일의 첫 1024바이트 내에 존재해야 합니다. 일부 브라우저는 인코딩을 결정하기 전에 1024바이트만 확인하기 때문입니다.
  • <meta> 요소는 문자 집합 결정 알고리즘의 한 부분일 뿐입니다. Content-Type HTTP 헤더와 바이트 순서 표식<meta> 값을 재정의할 수 있습니다.
  • 문자 인코딩을 정의할 것을 강력하게 추천합니다. 페이지의 인코딩을 정의하지 않은 경우 UTF-7 대체 사이트 간 스크립팅 기법과 같은 사이트 간 스크립팅에 노출될 수 있습니다.
  • charset 특성을 가진 <meta> 요소는 HTML5 이전의 <meta http-equiv="Content-Type" content="text/html; charset=IANAcharset">과 같습니다. IANAcharset charset 특성과 동등한 값입니다. 이 구문도 아직 사용할 수 있으나, 추천하지 않습니다.
content
http-equiv 또는 name 특성 중 사용하는 것의 값을 담습니다.
http-equiv
프래그마 지시문을 정의합니다. 특성의 이름(http-equiv(alent))에서 알 수 있듯이, 가능한 값은 특정 HTTP 헤더입니다.
  • content-security-policy
    현재 페이지의 콘텐츠 정책을 정의할 수 있습니다. 대부분의 콘텐츠 정책은 허용하는 서버 출처와 스크립트 엔드포인트를 지정해 사이트 간 스크립트 공격 방어에 도움을 줍니다.
  • refresh
    다음 항목을 지정합니다.
    • content 특성에 양의 정숫값을 설정한 경우, 페이지를 새로 고칠 때까지의 초.
    • content 특성이 양의 정숫값을 가지고 그 뒤를 문자열 ;url=과 유효한 URL이 뒤따른다면, 페이지를 해당 URL로 보낼 때까지의 초.
name

이 특성은 문서 레벨의 메타데이터의 이름을 정의합니다. itemprop, http-equiv 또는 charset 특성 중 하나라도 설정이 된 경우에는 설정할 수 없습니다.

이 메타데이터의 이름은 content 특성에 담긴 값과 연관됩니다. 이름 특성에 사용될 수 있는 값은 다음과 같습니다:

  • application-name은 웹 페이지 내에서 실행될 어플리케이션의 이름을 정의합니다.
    각주:
    • 브라우저는 이 값을 어플리케이션을 인식하는데 사용할 수 있습니다. 일반적으로 어플리케이션의 이름을 담고 있는 <title> 요소와는 달리 문서의 이름이나 상태와 같은 정보를 담을 수도 있습니다.
    • 단순한 웹 페이지에서는 어플리케이션의 이름을 정의할 수 없습니다.
  • author는 문서의 작성자를 정의합니다.
  • description은 페이지의 내용에 대한 짧고 정확한 요약을 담고 있습니다. Firefox나 오페라와 같은 여러 브라우저에서는 이를 즐겨 찾기 페이지의 기본 설명으로 사용합니다.
  • generator는 페이지를 생성한 소프트웨어의 식별자를 담고 있습니다.
  • keywords는 콤마(',')로 구분된 페이지의 내용과 관련된 단어를 담고 있습니다.
  • referrer는 문서에서 전송된 요청에 첨부된 HTTP 헤더의 참조자(Referer)를 제어합니다:
    <meta name="referrer"> 특성에 대한 content 특성의 값
    no-referrer HTTP Referrer header를 전송하지 않습니다.
    origin 문서의 origin을 전송합니다.
    no-referrer-when-downgrade 현재 페이지와 동일한 수준의 안전도를 가진(https→https) URLs의 참조자로 origin을 전송하나, 더 낮은 안전도 수준(https→http)의 URLs에 대한 참조자는 전송하지 않습니다. 이 값은 기본값입니다.
    origin-when-crossorigin 동일한 origin의 요청에 대해서는 (매개변수가 제거된) 전체 URL을 전송하나 그렇지 않은 경우에 대해서는 origin만 전송합니다.
    same-origin 동일 사이트 origin(same-site origins)의 요청에는 참조자를 전송하지만, cross-origin 요청에는 참조자 정보를 담지 않습니다.
    strict-origin 목적지(destination)의 안전도 수준이 현재와 동일하거나 더 높은 수준인 경우(HTTPS-> HTTPS)에만 참조자로 문서의 origin을 전송하고 목적지의 안전도 수준이 더 낮은 경우(HTTPS->HTTP)에는 전송하지 않습니다.
    strict-origin-when-cross-origin 동일한 origin의 요청이 수행될 때 전체 URL을 전송하되 목적지(destination)의 안전도 수준이 현재와 동일하거나 더 높은 수준인 경우(HTTPS-> HTTPS)에만 origin을 전송하고 목적지의 안전도 수준이 더 낮은 경우(HTTPS->HTTP)에는 헤더를 전송하지 않습니다.
    unsafe-URL same-origin 또는 cross-origin 요청에 대해 (매개변수가 제거된) 전체 URL을 전송합니다.

    각주:

    • 어떤 브라우저는 향후에는 없어질(deprecated) always, default 그리고 never 값을 참조자로 지원합니다.
    • <meta name="referrer">의 값을 document.write 또는 appendChild으로 설정하여 동적으로 삽입할 경우, 참조자의 작동을 예측할 수 없습니다.
    • 여러 정책이 서로 충돌할 경우에는 무참조자(no-referer) 정책이 적용됩니다.

This attribute may also have a value taken from the extended list defined on WHATWG Wiki MetaExtensions page. Although none have been formally accepted yet, a few commonly used names are:

  • creator which defines the name of the creator of the document, such as an organization or institution. If there are more than one, several <meta> elements should be used.
  • googlebot, a synonym of robots, is only followed by Googlebot (the indexing crawler for Google).
  • publisher which defines the name of the document's publisher.
  • robots which defines the behaviour that cooperative crawlers, or "robots", should use with the page. It is a comma-separated list of the values below:
    Values for the content of <meta name="robots">
    Value Description Used by
    index Allows the robot to index the page (default). All
    noindex Requests the robot to not index the page. All
    follow Allows the robot to follow the links on the page (default). All
    nofollow Requests the robot to not follow the links on the page. All
    none Equivalent to noindex, nofollow Google
    noodp Prevents using the Open Directory Project description, if any, as the page description in search engine results.

    Google, Yahoo, Bing

    noarchive Requests the search engine not to cache the page content. Google, Yahoo, Bing
    nosnippet Prevents displaying any description of the page in search engine results. Google, Bing
    noimageindex Requests this page not to appear as the referring page of an indexed image. Google
    nocache Synonym of noarchive. Bing
    Notes:
    • Only cooperative robots follow these rules. Do not expect to prevent e-mail harvesters with them.
    • The robot still needs to access the page in order to read these rules. To prevent bandwidth consumption, use a robots.txt file.
    • If you want to remove a page, noindex will work, but only after the robot visits the page again. Ensure that the robots.txt file is not preventing revisits.
    • Some values are mutually exclusive, like index and noindex, or follow and nofollow. In these cases the robot's behaviour is undefined and may vary between them.
    • Some crawler robots, like Google, Yahoo and Bing, support the same values for the HTTP header X-Robot-Tags; this allows non-HTML documents like images to use these rules.
  • slurp, is a synonym of robots, but only for Slurp - the crawler for Yahoo Search.
  • viewport, which gives hints about the size of the initial size of the viewport. Used by mobile devices only.
    Values for the content of <meta name="viewport">
    Value Possible subvalues Description
    width A positive integer number, or the text device-width Defines the pixel width of the viewport that you want the web site to be rendered at.
    height A positive integer, or the text device-height Defines the height of the viewport. Not used by any browser.
    initial-scale A positive number between 0.0 and 10.0 Defines the ratio between the device width (device-width in portrait mode or device-height in landscape mode) and the viewport size.
    maximum-scale A positive number between 0.0 and 10.0 Defines the maximum amount to zoom in. It must be greater or equal to the minimum-scale or the behaviour is undefined. Browser settings can ignore this rule and iOS10+ ignores it by default.
    minimum-scale A positive number between 0.0 and 10.0 Defines the minimum zoom level. It must be smaller or equal to the maximum-scale or the behaviour is undefined. Browser settings can ignore this rule and iOS10+ ignores it by default.
    user-scalable 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, and iOS10+ ignores it by default.
    Specification Status Comment
    CSS Device Adaptation
    The definition of '<meta name="viewport">' in that specification.
    Working Draft Non-normatively describes the Viewport META element
    See also: @viewport
    Notes:
    • Though unstandardized, this declaration is respected by most mobile browsers due to de-facto dominance.
    • The default values may vary between devices and browsers.
    • To learn about this declaration in Firefox for Mobile, see this article.
scheme
This attribute defines the scheme in which metadata is described. A scheme is a context leading to the correct interpretations of the content value, like a format.

Warning: Do not use this value, as it is obsolete. There is no replacement as there was no real usage for it.

Notes

Depending on the attributes set, the kind of metadata can be one of the following:

  • name를 사용한다면, it is document-level metadata, applying to the whole page.
  • http-equiv를 사용한다면, it is a pragma directive — information normally given by the web server about how the web page is served.
  • charset를 사용한다면, charset 선언이 되어서— 웹페이지 문자 인코딩에 사용된다.
  • itemprop를 사용한다면, it is user-defined metadata — transparent for the user-agent as the semantics of the metadata is user-specific.

Examples

<meta charset="utf-8">

<!-- Redirect page after 3 seconds -->
<meta http-equiv="refresh" content="3;url=https://www.mozilla.org">

Accessibility concerns

Refreshing content

Pages set with a refresh value run the risk of having the time interval being too short. People navigating with the aid of assistive technology such as a screen reader may be unable to read through and understand the page's content before being automatically redirected. The abrupt, unannounced updating of the page content may also be disorienting for people experiencing low vision conditions.

Viewport scaling

Disabling zooming capabilities by setting user-scalable to a value of no prevents people experiencing low vision conditions from being able to read and understand page content.

Specifications

Specification Status Comment
Referrer Policy
The definition of '<meta name="referrer">' in that specification.
Candidate Recommendation Defines values and semantics of <meta name="referrer">.
HTML Living Standard
The definition of '<meta>' in that specification.
Living Standard Added itemprop attribute
HTML5
The definition of '<meta>' in that specification.
Recommendation Added charset attribute
HTML 4.01 Specification
The definition of '<meta>' in that specification.
Recommendation

Browser compatibility

The information shown below has been pulled from MDN's Github (https://github.com/mdn/browser-compat-data).

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
metaChrome Full support YesEdge Full support 12Firefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
charsetChrome Full support YesEdge Full support 12Firefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
contentChrome Full support YesEdge Full support 12Firefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
http-equivChrome Full support YesEdge Full support 12Firefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
nameChrome Full support YesEdge Full support 12Firefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support

See also