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

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 특성에 담긴 값과 연결됩니다. name 특성에 사용할 수 있는 값은 다음과 같습니다.

  • application-name은 웹 페이지에서 구동 중인 애플리케이션의 이름을 정의합니다.
    참고:
    • 브라우저가 이 값을 사용해 애플리케이션을 식별할 수 있습니다. <title> 요소도 보통 애플리케이션 이름을 포함하지만, 문서 이름이나 상태 등 다른 정보도 존재할 수 있다는 점에서 차이가 있습니다.
    • 단순한 웹 페이지에서는 application-name을 지정해선 안됩니다.
  • author는 문서의 작성자를 정의합니다.
  • description은 페이지의 내용에 대한 짧고 정확한 요약을 담습니다. Firefox, Opera 등 여러 브라우저는 즐겨찾기 페이지의 기본 설명 값으로 description 메타데이터를 사용합니다.
  • generator는 페이지를 생성한 소프트웨어의 식별자를 담습니다.
  • keywords는 페이지 콘텐츠와 관련된 키워드를 쉼표로 구분해 담습니다.
  • referrer는 문서에서 시작하는 요청의 Referer HTTP 헤더를 통제합니다.
    <meta name="referrer"> 특성에 대한 content 특성의 값
    no-referrer HTTP Referer 헤더를 전송하지 않습니다.
    origin 문서의 출처를 전송합니다.
    no-referrer-when-downgrade 목적지가 현재 문서와 동일하거나 더 높은(HTTP(S)→HTTPS) 보안 수준을 가진 경우 전체 URL을 전송하고, 더 취약(HTTPS→HTTP)한 경우 전송하지 않습니다. 기본 동작 방식입니다.
    origin-when-crossorigin 동일 출처 요청에는 매개변수를 제거한 전체 URL을 전송합니다. 교차 출처 요청에는 출처만 전송합니다.
    same-origin 동일 출처 요청에는 매개변수를 제거한 전체 URL을 전송합니다. 교차 출처 요청에는 아무 레퍼러 정보도 보내지 않습니다.
    strict-origin 목적지가 현재 문서와 동일하거나 더 높은(HTTP(S)→HTTPS) 보안 수준을 가진 경우 출처를 전송하고, 더 취약(HTTPS→HTTP)한 경우 전송하지 않습니다.
    strict-origin-when-cross-origin 동일 출처 요청에는 매개변수를 제거한 전체 URL을 전송합니다. 목적지가 현재 문서와 동일하거나 더 높은 보안 수준(HTTP(S)→HTTPS)을 가진 경우 자신의 출처를 전송합니다. 그 외의 경우 아무 레퍼러 정보도 보내지 않습니다.
    unsafe-URL 동일 출처와 교차 출처 요청 모두에 대해서 전체 URL을 전송합니다.
    참고:
    • <meta name="referrer">의 값을 document.write() 또는 appendChild()를 사용해 동적으로 삽입할 경우 레퍼러 동작을 예측할 수 없습니다.
    • 여러 정책이 서로 충돌할 경우에는 no-referrer 정책을 사용합니다.
  • theme-color는 사용자 에이전트가 페이지나 주위 사용자 인터페이스를 표시할 때 사용하면 좋을 색상을 추천합니다. content 특성은 유효한 CSS <color>를 값으로 가집니다.
  • color-scheme:

    문서와 호환되는 하나 이상의 색채 조합을 지정합니다. 브라우저는 이 정보에 더해 브라우저와 장치 사용자 설정을 통해 배경, 전경, 양식 컨트롤, 스크롤 바 등 대부분의 색상을 결정합니다. <meta name="color-scheme">의 주 용도는 문서의 "다크 모드"와 라이트 모드의 호환성, 그리고 둘 중 선호하는 쪽을 나타내는 것입니다.

    가능한 content 특성의 값은 다음과 같습니다.

    normal
    문서가 특별한 색채 조합을 알지 못하며, 렌더링 시 기본 색상 팔레트를 사용해야 합니다.
    [light | dark]+
    문서와 호환되는 하나 이상의 색채 조합. 동일한 색채 조합을 여러 번 지정하더라도 한 번 지정한 것과 다르지 않습니다. 여러 색채 조합을 명시하는 경우 문서는 맨 앞 항목을 선호하지만, 사용자가 원할 경우 다른 조합도 사용할 수 있음을 나타냅니다.
    only light
    문서가 오직 라이트 모드, 즉 밝은 배경과 어두운 전경색만 지원함을 나타냅니다. 명세에 따라 only dark는 유효하지 않습니다. 완전히 호환되지 않음에도 불구하고 문서를 다크 모드로만 렌더링 할 경우 콘텐츠를 읽을 수 없기 때문입니다. 지정하지 않은 경우, 모든 주요 브라우저는 라이트 모드를 기본값으로 사용합니다.

    예를 들어, 문서가 다크 모드를 선호하나 라이트 모드도 지원 가능하다는 것을 알리려면 다음과 같이 작성하세요.

    <meta name="color-scheme" content="dark light">

    name="color-scheme"은 문서 전체의 선호 및 가능한 색채 조합을 지정한다면, CSS color-scheme 속성은 개별 요소 단위로 지정합니다. CSS prefers-color-scheme 미디어 기능을 사용하면 스타일이 현재 색채 조합에 적응하도록 작성할 수도 있습니다.

이 외에도, name 특성은 WHATWG Wiki MetaExtensions 페이지에 나열된 확장형 값을 사용할 수도 있습니다. 페이지의 어떠한 항목도 공식적으로 인정받지 않았지만, 흔히 사용하는 값은 다음과 같습니다.

  • creator는 단체, 협회 등 문서 생성자의 이름을 정의합니다. 다수가 존재할 경우 다수의 <meta> 태그를 사용해야 합니다.
  • robots의 동의어인 googlebot은 Google의 색인 크롤러인 Googlebot만 인식합니다.
  • publisher는 문서를 출판한 자의 이름을 정의합니다.
  • robots는 협조적인 크롤러, 또는 "로봇"의 동작을 지정합니다. 아래 표의 항목을 쉼표로 구분한 목록을 값으로 사용합니다.
    <meta name="robots">의 값
    설명 사용하는 크롤러
    index 크롤러가 페이지를 색인할 수 있습니다. (기본값) 모두
    noindex 크롤러가 페이지를 색인하지 않도록 요청합니다. 모두
    follow 크롤러가 페이지 내의 링크를 따라갈 수 있습니다. (기본값) 모두
    nofollow 크롤러가 페이지 내의 링크를 따라가지 않도록 요청합니다. 모두
    none noindex, nofollow와 동일합니다. Google
    noarchive 크롤러가 페이지를 캐시에 포함하지 않도록 요청합니다. Google, Bing
    nosnippet 검색 엔진 결과에 어떤 설명도 표시하지 않도록 지정합니다. Google, Bing
    noimageindex 크롤러가 페이지 이미지를 색인하지 않도록 요청합니다. Google
    nocache noarchive와 동일합니다. Bing
    참고:
    • 협조적인 크롤러만 규칙을 존중합니다. 이메일 주소 수집기가 요청을 따를 것이라고 기대하지 마세요.
    • 메타 태그의 규칙을 읽기 위해선 크롤러가 페이지에 접근을 하긴 해야 합니다. 대역폭을 아끼려면 robots.txt를 사용하세요.
    • 이미 등록된 페이지를 검색 결과에서 제거할 수단으로 noindex를 사용하는 것도 가능하지만, 수정 후 크롤러가 페이지에 재방문해야만 반영되므로 robots.txt 파일이 방문을 방지하고 있지는 않은지 확인하세요.
    • indexnoindex, follownofollow처럼 특정 값은 서로 배타적입니다. 그러나 같은 페이지에서 동시에 사용한 경우 크롤러의 행동은 정의되지 않았으며 둘 중 어느 것이라도 취할 수 있습니다.
    • Google과 Bing 등 일부 크롤러는 같은 값을 HTTP X-Robot-Tags 헤더에 추가해도 인식하므로, 이미지처럼 HTML이 아닌 문서에서도 동일한 설정을 적용할 수 있습니다.
  • viewport뷰포트의 초기 사이즈에 대한 힌트를 제공합니다. 모바일 장치에서만 사용합니다.
    <meta name="viewport">의 값
    가능한 하위 값 설명
    width 양의 정수 또는 device-width 웹 사이트를 렌더링 하고자 하는 뷰포트 너비를 정의합니다.
    height 양의 정수 또는 device-height 웹 사이트를 렌더링 하고자 하는 뷰포트 높이를 정의합니다.
    initial-scale 0.010.0 사이의 수 장치 너비(세로 모드에서는 device-width, 가로 모드에서는 device-height)와 뷰포트 너비의 비율을 정의합니다.
    maximum-scale 0.010.0 사이의 수 가능한 최대 확대 비율을 정의합니다. minimum-scale 이상이어야 하며, 미만으로 지정한 경우의 동작은 정의되지 않았습니다. 브라우저 설정에 따라 무시할 수 있고, iOS10 이상은 기본값으로 무시합니다.
    minimum-scale 0.010.0 사이의 수 가능한 최대 확대 비율을 정의합니다. maximum-scale 이하여야 하며, 초과한 값을 지정한 경우의 동작은 정의되지 않았습니다. 브라우저 설정에 따라 무시할 수 있고, iOS10 이상은 기본값으로 무시합니다.
    user-scalable yes 또는 no no인 경우 사용자가 웹 페이지를 확대할 수 없습니다. 기본값은 yes입니다. 브라우저 설정에 따라 무시할 수 있고, iOS10 이상은 기본값으로 무시합니다.
    viewport-fit auto, contain, cover

    auto 값은 초기 뷰포트 레이아웃에 영향을 주지 않으며, 전체 웹 페이지를 볼 수 있습니다.

    contain 값은 디스플레이 내에 맞출 수 있는 가장 큰 사각형에 맞춰 뷰포트의 크기를 조절합니다.

    cover 값은 뷰포트의 크기를 조절해 디스플레이 전체를 채웁니다. 안전 영역 환경 변수를 사용해 중요한 콘텐츠가 화면 밖에 놓이는 불상사가 없도록 하는 것이 좋습니다.

    Specification Status Comment
    CSS Device Adaptation
    The definition of '<meta name="viewport">' in that specification.
    Working Draft Non-normatively describes the Viewport META element
    같이 보기: @viewport
    참고:
    • viewport 선언은 비록 표준은 아니지만, 사실상 표준적인 위치로 인해 대부분의 모바일 브라우저에서 준수합니다.
    • 장치와 브라우저마다 기본값이 다를 수 있습니다.

참고

지정한 특성 조합에 따라 메타데이터의 종류는 다음과 같이 나뉩니다.

  • name를 사용하면 문서 레벨 메타데이터로, 페이지 전체에 적용됩니다.
  • http-equiv를 사용하면 프래그마 지시문으로, 주로 웹 서버가 웹 페이지를 서빙한 방법에 대한 정보를 나타냅니다.
  • charset를 사용하면 문자 집합 선언으로, 웹 페이지가 문자 인코딩에 사용한 집합을 나타냅니다.
  • itemprop를 사용하면 사용자 정의 메타데이터로, 메타데이터의 의미가 특정 사용자 대상이므로 사용자 에이전트에게 보이지 않습니다.

예제

<meta charset="utf-8">

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

접근성 고려사항

콘텐츠 새로고침

refresh 값을 지정한 페이지의 경우 새로고침 사이 간격이 너무 짧을 우려가 있습니다. 스크린 리더 등의 보조 기술로 탐색하는 사용자는 자동 새로고침 이전에 페이지의 내용을 읽고 이해하지 못할 수 있습니다. 또한 저시력 사용자에게 있어, 갑작스럽고 사전 안내도 없는 콘텐츠 업데이트는 어지러울 수 있습니다.

뷰포트 크기 조절

user-scalableno로 지정하면 저시력 사용자가 페이지 내용을 읽고 이해하는 것을 막습니다.

명세

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

브라우저 호환성

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