We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

메타 요소(<meta>) 는 다른 메타-관련 요소들(<base>, <link>, <script>, <style> or <title>) 로 나타내어질 수 없는 메타데이터를 나타냅니다.

속성 세트에 따르면, 메타데이터의 종류는 다음 중 한 가지가 될 수 있습니다.

  • name이 설정된 경우는 문서 레벨의 메타데이터로, 전체 페이지에 적용됩니다;
  • http-equiv이 설정된 경우, pragma 지시어, 즉 (일반적으로 웹서버가 제공하는) 웹페이지가 어떻게 제공되어야 하는지에 대한 정보입니다;
  • charset이 설정된 경우, charset 선언, 즉 웹페이지를 작성하는 일련의 형식에 사용되는 charset에 대한 정보입니다; HTML5
  • itemprop이 설정된 경우는 사용자정의 메타데이터로, 의미가 사용자별로 다르므로 사용자 에이전트에 투명(transparent)하게 제공됩니다. Living Standard Unimplemented
  • 컨텐트 카테고리메타데이터 컨텐트.
    itemprop 속성이 존재하는 경우, flow 컨텐트, phrasing 컨텐트.
  • 허용된 컨텐트 없음. empty element.
  • 태그 생략 빈 요소이므로, 시작 태그가 있어야하고 종료 태그는 없어야한다.
  • 허용된 부모 요소들<meta charset>, <meta http-equiv>: <head> 요소.
    http-equiv 가 인코딩 선언이 아닌 경우, <head> 요소 내부의 <noscript> 요소 내부에 들어갈수 있다.
    <meta name>: 메타데이터 컨텐트를 허용하는 모든 요소들.
    <meta itemprop>: 메타데이터 컨텐트를 허용하는 모든 요소들이나  phrasing 컨텐트를 허용하는 모든 요소들.
  • DOM 인터페이스 HTMLMetaElement


이 요소는 전역 설정을 포함합니

Note: 전역설정인 name<meta> 요소에서 특징적인 의미를 가지며, name, http-equiv, charset 중 하나 이상이 사용된 곳에서 itemprop는 사용할 수 없습니다.

charset HTML5
이 속성은 페이지에서 사용되는 문자 인코딩을 선언합니다. 이것은 어떤 요소의 lang 속성에 의해 지역적으로 오버라이드될수 있습니다. This attribute is a literal string and must be one of the preferred MIME name for a character encoding as defined by the IANA. Though the standard doesn't request a specific character encoding, it gives some recommendations:
  • 작성자는 UTF-8를 사용하는것이 좋습니다.
  • Authors should not use ASCII-incompatible encodings (i.e. those that don't map the 8-bit code points 0x20 to 0x7E to the Unicode 0x0020 to 0x007E code points) as these represent a security risk: browsers not supporting them may interpret benign content as HTML Elements. This is the case of at least the following charsets: JIS_C6226-1983, JIS_X0212-1990, HZ-GB-2312, JOHAB, the ISO-2022 family, and the EBCDIC family.
  • Authors must not use CESU-8, UTF-7, BOCU-1 and SCSU, also falling in that category and not intended to be used on the web. Cross-scripting attacks with some of these encodings have been documented.
  • Authors should not use UTF-32 because not all HTML5 encoding algorithms can distinguish it from UTF-16.
  • The declared character set must match the one of the page. There is no valid reason to declare an inaccurate character set.
  • This <meta> element must be inside the <head> element and within the 512 first bytes of the page, as some browsers only look at these first bytes before choosing a character set for the page.
  • This <meta> element is only a part of the algorithm to determine the character set of a page that browsers apply. The HTTP Content-Type header and any BOM elements have precedence over this element.
  • It is good practice, and strongly recommended, to define the character set using this attribute. If no character set is defined for a page, several cross-scripting techniques may be able to harm the page user, such as the UTF-7 fallback cross-scripting technique. Always setting this meta will protect against these risks.
  • This <meta> element is a synonym for the pre-HTML5 <meta http-equiv="Content-Type" content="text/html; charset=IANAcharset"> where IANAcharset corresponds of the value of the equivalent charset attribute. This syntax is still allowed, although obsolete and no more recommended.
This attribute gives the value associated with the http-equiv or name attribute, depending of the context.
This enumerated attribute defines the pragma that can alter servers and user-agents behavior. The value of the pragma is defined using the content and can be one of the following:
이 pragma는 페이지의 기본 언어를 정의합니다.
사용 각주: 이 pragma는 폐기되었기 때문에 사용하지 마세요. 대신에 <body>에 전역 lang 속성을 사용하세요.
This attribute allows web site administrators to define content policies for served resources. With a few exceptions, policies mostly involve specifiying server origins and script endpoints. This helps guard against cross-site scripting attacks.
This attribute defines the MIME type of the document, eventually followed by its character set. It follows the same syntax as the HTTP content-type entity-header field, but as it is inside an HTML Element, most values are not possible. Therefore the valid syntax for its content is the literal string 'text/html' eventually followed by a character set with the following syntax:'; charset=IANAcharset' where IANAcharset is the preferred MIME name for a character set as defined by the IANA.
사용 각주:
  • 이 pragma는 폐기되었기 떄문에 사용하지 마세요. 대신에 <meta> 요소에 charset  속성을 사용하세요.
  • As the <meta> may not be used to change the type of a document in an XHTML document, or in an HTML5 document following the XHTML syntax, never set MIME type to an XHTML MIME type that way. It would be incorrect.
  • Only an HTML document can use the content-type, so most of it is redundant: that's why it has been obsoleted and replaced by the charset attribute.
이 pragma는 페이지에서 사용되는 선호되는 스타일시트를 나타냅니다. The content attribute must contain the title of a <link> element whose href attribute links to a CSS stylesheet, or the title of a <style> element which contains a CSS stylesheet.
이 pragma가 지정하는것:
  • the number of seconds until the page should be reloaded, if the content attribute contains only a positive integer number;
  • the number of seconds until the page should be redirected to another, if the content attribute contains a positive integer number followed by the string ';url=' and a valid URL.
이 pragma는 페이지의 쿠키를 정의합니다. Its content must follows the syntax defines in the IETF HTTP Cookie Specification.
Note: Do not use this pragma as it is obsolete. Use the HTTP header set-cookie instead.
This attribute defines the name of a document-level metadata. It should not be set if one of the attributes itemprop, http-equiv or charset is also set.
This document-level metadata name is associated with a value, contained by the content attribute. The possible values for the name element are, with their associated value, stored via the content attribute:
  • application-name, defining the name of the web application running in the webpage;
    • Browsers may use this to identify the application. It is different from the <title> element, which usually consist of the application name but may also contain specific information like the document name or a status;
    • Simple webpages shouldn't define the application-name meta.
  • author, defining, in a free format, the name of the author of the document;
  • description, containing a short and accurate summary of the content of the page. Several browsers, among them Firefox and Opera, use this meta as the default description of the page when bookmarked;
  • generator, containing, in a free format, the identifier to the software that generated the page;
  • keywords, containing, as strings separated by commas, relevant words associated with the content of the page;
  • referrer controlling the content of the HTTP Referer HTTP header attached to any request sent from this document:
    Values for the content of <meta name="referrer">
    no-referrer HTTP Referer 헤더를 보내지 않음
    origin Send the origin of the document.
    no-referrer-when-downgrade Send the origin as referrer to a-priori as-much-secure destination (https->https), but doesn't send a referrer to a less secure destination (https->http). This is the default behavior.
    origin-when-crossorigin Send a full URL (stripped from parameters) when performing a same-origin request, but only send the origin of the document for other cases.
    unsafe-URL Send a full URL (stripped from parameters) when perfoming a same-origin request.
    Note: Dynamically inserting <meta name="referrer"> (by document.write or appendChild) create a non-determinism when it comes to sending referrers or not. Note also that when several conflicting policies are defined, the No-referrer policy is applied.

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

  • creator, defining, in a free format, the name of the creator of the document. Note that it can be the name of the institution. If there are more than one, several <meta> elements should be used;
  • googlebot, which is a synonym of robots, but is only followed by Googlebot, the indexing crawler for Google;
  • publisher, defining, in a free format, the name of the publisher of the document. Note that it can be the name of the institution;
  • robots, defining the behavior that cooperative crawlers should have with the page. It is a comma-separated list of values taken in the following list:
    Values for the content of <meta name="robots">
    설명 Used by
    index 로봇이 페이지를 색인하는것을 허용 All
    noindex 로봇이 페이지를 색인하는것을 금지 All
    follow 로봇이 페이지의 링크를 따라가는것을 허용 All
    nofollow 로봇이 페이지의 링크를 따라가는것을 금지 All
    noodp Prevents the usage of the Open Directory Project description, if any, as the description of the page in the search engine results page

    Google, Yahoo, Bing

    noarchive 검색 엔진이 페이지의 컨텐트를 캐싱하는것을 막음 Google, Yahoo
    nosnippet Prevents the display of any description of the page in the search engine results page Google
    noimageindex Prevents this page from appearing as the referring page of an indexed image Google
    noydir Prevents the usage of the Yahoo Directory description, if any, as the description of the page in the search engine results page Yahoo
    nocache noarchive의 동의어 Bing
    • Only cooperative robots will follow the rules defined by the robots name. Do not expect to keep e-mail harvesters at bay with this.
    • The robot still needs to access the page in order to read the meta value. If you want to keep them at bay, for example to prevent bandwidth consumption, use a robots.txt file instead (or in complement).
    • If you want to remove the page of an index, changing the meta to noindex will work, but only when the robot visit the page again. Be sure not to prevent such visits, via the robots.txt file for example. Some search engines have developers tools, allowing a quick removal of some page.
    • Some possible values are mutually exclusive, like using index and noindex, or follow and nofollow, at the same time. In these cases the behavior of the robot is undefined, and may vary from one to the other. So avoid these cases.
    • Some search engine crawler robots, like those of Google, Yahoo Search or Bing, support the same values on an HTTP directive, X-Robot-Tags: this allows them to use these pragma on non-HTML documents, like images.
  • slurp, which is a synonym of robots, but is only followed by Slurp, the indexing crawler for Yahoo Search;

Finally a few names are in common use, though not in progress of being standardized:

  • viewport, 초기 viewport 크기 설정에 관한 힌트를 제공합니다. 이 속성은 몇 개의 모바일 디바이스에 의해서만 사용됩니다. 
  • <meta name="viewport"> 에 들어가는 content 속성 값들
    가능한 값들 설명


    양수 값 또는 device-width 리러럴 값

    viewport의 width를 픽셀 값으로 정의한다.


    양수 값 또는 device-height 리터럴 값

    viewport의 height를 픽셀 값으로 정의한다.

    0.0 ~ 10.0 중의 한 값

    device width (portrait 모드에서의 device-width와 landscape 모드에서의 device-height)와 viewport사이즈 간의 비율을 정의한다.


    0.0 ~ 10.0 중의 한 값

    zoom 의 최대치를 정의한다. 이 값은 minimum-scale 보다 크거나 같아야 하고, behavior가 정의되지 않아야 한다.

    minimum-scale 0.0 ~ 10.0 중의 한 값

    zoom 의 최소치를 정의한다. 이 값은 maximum-scale 보다 작거나 같아야 하고, behavior가 정의되지 않아야 한다.

    user-scalable boolean 값 (yes or no)

    no로 설정되면, 사용자는 웹 페이지에서 줌을 사용할 수 없다. Default 값은 yes

    명세 상태 주석
    CSS Device Adaptation
    The definition of '<meta name="viewport">' in that specification.
    Working Draft Non-normatively describes the Viewport META element
    See also: @viewport
    • Though not standardized, this attribute is used by different mobile browsers like Safari Mobile, Firefox for Mobile or Opera Mobile.
    • The default values may change from one device, and browser, to another.
    • To learn about this pragma in Firefox for Mobile, see this article.
This attribute defines the scheme in which the metadata is described. A scheme is a context leading to the correct interpretations of the content value, like a format.
Notes: Do not use this attribute as it is obsolete. There is no replacement for it as there was no real usage for it. Omit it altogether.


<!-- HTML4에서 charset을 선언하기 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<!-- HTML5에서 -->
<meta charset="utf-8">

<!-- 3초뒤 페이지 리다이렉트 -->
<meta http-equiv="refresh" content="3;url=http://www.mozilla.org/">


명세 상태 주석
Referrer Policy
The definition of '<meta name="referrer">' in that specification.
Candidate Recommendation Defines value and semantic of <meta name="referrer">.
HTML Living Standard
The definition of '<meta>' in that specification.
Living Standard  
The definition of '<meta>' in that specification.
HTML 4.01 Specification
The definition of '<meta>' in that specification.

브라우저 호환성

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

특징 Chrome Firefox (Gecko) Internet Explorer Opera Safari
기본 지원 (Yes) 1.0 (1.7 or earlier) (Yes) (Yes) (Yes)
name="referrer" 17 36.0 (36.0) ? ? ?
특징 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
기본 지원 (Yes) 1.0 (1.0) (Yes) (Yes) (Yes)
name="referrer" ? 36.0 (36.0) ? ? ?


문서 태그 및 공헌자

이 페이지의 공헌자: Narrativi, joshua1988, azunyan3
최종 변경: Narrativi,